feat(ConfigProvider): add icons config

src/components/center-popup/center-popup.tsx

@@ -11,11 +11,11 @@ import classNames from 'classnames'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { ShouldRender } from '../../utils/should-render'
 import { useLockScroll } from '../../utils/use-lock-scroll'
-import { CloseOutline } from 'antd-mobile-icons'
 import {
   defaultPopupBaseProps,
   PopupBaseProps,
 } from '../popup/popup-base-props'
+import { useConfig } from '../config-provider'
 
 const classPrefix = 'adm-center-popup'
 
@@ -38,7 +38,8 @@ const defaultProps = {
 }
 
 export const CenterPopup: FC<CenterPopupProps> = p => {
-  const props = mergeProps(defaultProps, p)
+  const { popup: componentConfig = {} } = useConfig()
+  const props = mergeProps(defaultProps, componentConfig, p)
 
   const unmountedRef = useUnmountedRef()
   const style = useSpring({
@@ -134,7 +135,7 @@ export const CenterPopup: FC<CenterPopupProps> = p => {
                   props.onClose?.()
                 }}
               >
-                <CloseOutline />
+                {props.closeIcon}
               </a>
             )}
             {body}

src/components/check-list/check-list.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import type { FC, ReactNode } from 'react'
+import { CheckOutline } from 'antd-mobile-icons'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import List, { ListProps } from '../list'
 import { mergeProps } from '../../utils/with-default-props'
 import { CheckListContext } from './context'
 import { usePropsValue } from '../../utils/use-props-value'
-import { CheckOutline } from 'antd-mobile-icons'
+import { useConfig } from '../config-provider'
 
 const classPrefix = 'adm-check-list'
 
@@ -26,11 +27,16 @@ export type CheckListProps = Pick<ListProps, 'mode' | 'style'> & {
 const defaultProps = {
   multiple: false,
   defaultValue: [],
-  activeIcon: <CheckOutline />,
 }
 
 export const CheckList: FC<CheckListProps> = p => {
-  const props = mergeProps(defaultProps, p)
+  const { checkList: componentConfig = {} } = useConfig()
+  const props = mergeProps(
+    { activeIcon: <CheckOutline /> },
+    componentConfig,
+    defaultProps,
+    p
+  )
 
   const [value, setValue] = usePropsValue(props)
 

src/components/collapse/collapse.tsx

@@ -10,6 +10,7 @@ import { useMount } from 'ahooks'
 import { useShouldRender } from '../../utils/should-render'
 import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect'
 import { traverseReactNode } from '../../utils/traverse-react-node'
+import { useConfig } from '../config-provider'
 
 const classPrefix = `adm-collapse`
 
@@ -121,6 +122,7 @@ export type CollapseProps = (
 } & NativeProps
 
 export const Collapse: FC<CollapseProps> = props => {
+  const { collapse: componentConfig = {} } = useConfig()
   const panels: ReactElement<CollapsePanelProps>[] = []
   traverseReactNode(props.children, child => {
     if (!isValidElement<CollapsePanelProps>(child)) return
@@ -197,7 +199,9 @@ export const Collapse: FC<CollapseProps> = props => {
           }
 
           const renderArrow = () => {
-            let arrow: CollapseProps['arrow'] = <DownOutline />
+            let arrow: CollapseProps['arrow'] = componentConfig?.arrow || (
+              <DownOutline />
+            )
             if (props.arrow !== undefined) {
               arrow = props.arrow
             }

src/components/config-provider/config-provider.tsx

@@ -2,9 +2,65 @@ import React, { useContext } from 'react'
 import type { FC, ReactNode } from 'react'
 import { Locale } from '../../locales/base'
 import zhCN from '../../locales/zh-CN'
+import { mergeProps } from '../../utils/with-default-props'
 
 type Config = {
   locale: Locale
+  checkList?: {
+    activeIcon?: ReactNode
+  }
+  collapse?: {
+    arrow?: ReactNode | ((active: boolean) => ReactNode)
+  }
+  dropdownItem?: {
+    arrow?: ReactNode
+  }
+  formItem?: {
+    helpIcon?: ReactNode
+  }
+  imageUploader?: {
+    uploadIcon?: ReactNode
+    deleteIcon?: ReactNode
+  }
+  input?: {
+    clearIcon?: ReactNode
+  }
+  listItem?: {
+    arrow?: ReactNode
+  }
+  navBar?: {
+    backArrow?: ReactNode
+  }
+  noticeBar?: {
+    icon?: ReactNode
+    closeIcon?: ReactNode
+  }
+  numberKeyboard?: {
+    closeIcon?: ReactNode
+    deleteIcon?: ReactNode
+  }
+  popup?: {
+    closeIcon?: ReactNode
+  }
+  result?: {
+    successIcon?: ReactNode
+    errorIcon?: ReactNode
+    infoIcon?: ReactNode
+    waitingIcon?: ReactNode
+    warningIcon?: ReactNode
+  }
+  searchBar?: {
+    icon?: ReactNode
+  }
+  stepper?: {
+    plusIcon?: ReactNode
+    minusIcon?: ReactNode
+  }
+  toast?: {
+    successIcon?: ReactNode
+    failIcon?: ReactNode
+    loadingIcon?: ReactNode
+  }
 }
 
 export const defaultConfigRef: {
@@ -23,9 +79,9 @@ export function getDefaultConfig() {
   return defaultConfigRef.current
 }
 
-const ConfigContext = React.createContext<Config | null>(null)
+const ConfigContext = React.createContext<Config>(defaultConfigRef.current)
 
-export type ConfigProviderProps = Config & {
+export type ConfigProviderProps = Partial<Config> & {
   children?: ReactNode
 }
 
@@ -35,16 +91,13 @@ export const ConfigProvider: FC<ConfigProviderProps> = props => {
 
   return (
     <ConfigContext.Provider
-      value={{
-        ...parentConfig,
-        ...config,
-      }}
+      value={mergeProps(defaultConfigRef.current, parentConfig, config)}
     >
       {children}
     </ConfigContext.Provider>
   )
 }
 
 export function useConfig() {
-  return useContext(ConfigContext) ?? getDefaultConfig()
+  return useContext(ConfigContext)
 }

src/components/config-provider/index.en.md

@@ -1,7 +1,72 @@
 # ConfigProvider
 
+Configure locale messages and custom icons globally.
+
+## When to use
+
+- You want to use other languages than English
+- You want to use your own icon set instead of `antd-mobile-icons`
+
 ## Demos
 
 <code src="./demos/demo1.tsx" ></code>
 
 <code src="./demos/demo2.tsx" ></code>
+
+## ConfigProvider
+
+### Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- |
+| locale | Locale messages | `Locale` | [base] |
+| checkList | CheckList config | `{ activeIcon?: ReactNode }` | - |
+| collapse | Collapse config | `{ arrow?: ReactNode \| ((active: boolean) => ReactNode) }` | - |
+| dropdownItem | Dropdown.Item config | `{ arrow?: ReactNode }` | - |
+| formItem | FormItem config | `{ helpIcon?: ReactNode }` | - |
+| imageUploader | ImageUploader config | `{ uploadIcon?: ReactNode, deleteIcon?: ReactNode }` | - |
+| input | Input config | `{ clearIcon?: ReactNode }` | - |
+| listItem | List.Item config | `{ arrow?: ReactNode }` | - |
+| navBar | NavBar config | `{ backArrow?: ReactNode }` | - |
+| noticeBar | NoticeBar config | `{ icon?: ReactNode, closeIcon?: ReactNode }` | - |
+| numberKeyboard | NumberKeyboard config | `{ closeIcon?: ReactNode, deleteIcon?: ReactNode }` | - |
+| popup | Popup config | `{ closeIcon?: ReactNode }` | - |
+| result | Result config | `{ successIcon?: ReactNode, errorIcon?: ReactNode, infoIcon?: ReactNode, waitingIcon?: ReactNode, warningIcon?: ReactNode }` | - |
+| searchBar | SearchBar config | `{ icon?: ReactNode }` | - |
+| stepper | Stepper config | `{ plusIcon?: ReactNode, minusIcon?: ReactNode }` | - |
+| toast | Toast config | `{ successIcon?: ReactNode, failIcon?: ReactNode, loadingIcon?: ReactNode }` | - |
+
+## IconConfig
+
+Default icons are all from `antd-mobile-icons` package, except for SpinLoading which is a `antd-mobile` component.
+
+### Props
+
+| Name | Related components | Description | Default |
+| --- | --- | --- | --- |
+| CheckListActive | CheckList | Check mark | CheckOutline |
+| CollapseArrow | Collapse | Expand/collapse | DownOutline |
+| DropdownItemArrow | DropdownItem | Down arrow | DownFill |
+| FormItemHelp | FormItem | Help indicator | QuestionCircleOutline |
+| ImageUploaderUpload | ImageUploader | Upload button | AddOutline |
+| ImageUploaderDelete | ImageUploader | Delete button | CloseOutline |
+| InputClear | Input, SearchBar, VirtualInput | Clear button | CloseCircleFill |
+| NavBarBackArrow | NavBar | Back button | LeftOutline |
+| NoticeBarClose | NoticeBar | Close button | CloseOutline |
+| NoticeBarNotice | NoticeBar | Notice | SoundOutline |
+| NumberKeyboardClose | NumberKeyboard | Close/hide button | DownOutline |
+| NumberKeyboardDelete | NumberKeyboard | Delete button | TextDeletionOutline |
+| PopupClose | Popup, CenterPopup | Close button | CloseOutline |
+| ResultSuccess | Result, ResultPage | Success status | CheckCircleFill |
+| ResultError | Result, ResultPage | Error status | CloseCircleFill |
+| ResultInfo | Result, ResultPage | Information status | InformationCircleFill |
+| ResultWaiting | Result, ResultPage | Waiting status | ClockCircleFill |
+| ResultWarning | Result, ResultPage | Warning status | ExclamationCircleFill |
+| SearchBarSearch | SearchBar | Search | SearchOutline |
+| StepperPlus | Stepper | Plus button | AddOutline |
+| StepperMinus | Stepper | Minus button | MinusOutline |
+| ToastSuccess | Toast | Success status | CheckOutline |
+| ToastFail | Toast | Fail status | CloseOutline |
+| ToastLoading | Toast | Loading status | SpinLoading |
+
+[base]: https://github.com/ant-design/ant-design-mobile/blob/master/src/locales/base.ts

src/components/config-provider/index.zh.md

@@ -1,7 +1,39 @@
 # ConfigProvider 配置
 
+用于全局配置本地化文案和个性化图标。
+
+## 何时使用
+
+- 您想使用除英文之外的语言。
+- 您想使用自己的图标集，而不是内置的 `antd-mobile-icons`。
+
 ## 示例
 
 <code src="./demos/demo1.tsx" ></code>
 
 <code src="./demos/demo2.tsx" ></code>
+
+## ConfigProvider
+
+### 属性
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| locale | 本地化文案 | `Locale` | [base] |
+| checkList | CheckList 配置 | `{ activeIcon?: ReactNode }` | - |
+| collapse | Collapse 配置 | `{ arrow?: ReactNode \| ((active: boolean) => ReactNode) }` | - |
+| dropdownItem | Dropdown.Item 配置 | `{ arrow?: ReactNode }` | - |
+| formItem | FormItem 配置 | `{ helpIcon?: ReactNode }` | - |
+| imageUploader | ImageUploader 配置 | `{ uploadIcon?: ReactNode, deleteIcon?: ReactNode }` | - |
+| input | Input 配置 | `{ clearIcon?: ReactNode }` | - |
+| listItem | List.Item 配置 | `{ arrow?: ReactNode }` | - |
+| navBar | NavBar 配置 | `{ backArrow?: ReactNode }` | - |
+| noticeBar | NoticeBar 配置 | `{ icon?: ReactNode, closeIcon?: ReactNode }` | - |
+| numberKeyboard | NumberKeyboard 配置 | `{ closeIcon?: ReactNode, deleteIcon?: ReactNode }` | - |
+| popup | Popup 配置 | `{ closeIcon?: ReactNode }` | - |
+| result | Result 配置 | `{ successIcon?: ReactNode, errorIcon?: ReactNode, infoIcon?: ReactNode, waitingIcon?: ReactNode, warningIcon?: ReactNode }` | - |
+| searchBar | SearchBar 配置 | `{ icon?: ReactNode }` | - |
+| stepper | Stepper 配置 | `{ plusIcon?: ReactNode, minusIcon?: ReactNode }` | - |
+| toast | Toast 配置 | `{ successIcon?: ReactNode, failIcon?: ReactNode, loadingIcon?: ReactNode }` | - |
+
+[base]: https://github.com/ant-design/ant-design-mobile/blob/master/src/locales/base.ts