feat(ConfigProvider): add icons config

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

@@ -1,20 +1,20 @@
-import React, { useRef, useState } from 'react'
-import type { FC, PropsWithChildren } from 'react'
-import { renderToContainer } from '../../utils/render-to-container'
-import Mask from '../mask'
-import { withStopPropagation } from '../../utils/with-stop-propagation'
-import { mergeProps } from '../../utils/with-default-props'
-import { useIsomorphicLayoutEffect, useUnmountedRef } from 'ahooks'
 import { animated, useSpring } from '@react-spring/web'
-import { useInnerVisible } from '../../utils/use-inner-visible'
+import { useIsomorphicLayoutEffect, useUnmountedRef } from 'ahooks'
 import classNames from 'classnames'
+import type { FC, PropsWithChildren } from 'react'
+import React, { useRef, useState } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
+import { renderToContainer } from '../../utils/render-to-container'
 import { ShouldRender } from '../../utils/should-render'
+import { useInnerVisible } from '../../utils/use-inner-visible'
 import { useLockScroll } from '../../utils/use-lock-scroll'
-import { CloseOutline } from 'antd-mobile-icons'
+import { mergeProps } from '../../utils/with-default-props'
+import { withStopPropagation } from '../../utils/with-stop-propagation'
+import { useConfig } from '../config-provider'
+import Mask from '../mask'
 import {
-  defaultPopupBaseProps,
   PopupBaseProps,
+  defaultPopupBaseProps,
 } from '../popup/popup-base-props'
 
 const classPrefix = 'adm-center-popup'
@@ -37,13 +37,14 @@ const defaultProps = {
   getContainer: null,
 }
 
-export const CenterPopup: FC<CenterPopupProps> = p => {
-  const props = mergeProps(defaultProps, p)
+export const CenterPopup: FC<CenterPopupProps> = props => {
+  const { popup: componentConfig = {} } = useConfig()
+  const mergedProps = mergeProps(defaultProps, componentConfig, props)
 
   const unmountedRef = useUnmountedRef()
   const style = useSpring({
-    scale: props.visible ? 1 : 0.8,
-    opacity: props.visible ? 1 : 0,
+    scale: mergedProps.visible ? 1 : 0.8,
+    opacity: mergedProps.visible ? 1 : 0,
     config: {
       mass: 1.2,
       tension: 200,
@@ -52,68 +53,71 @@ export const CenterPopup: FC<CenterPopupProps> = p => {
     },
     onRest: () => {
       if (unmountedRef.current) return
-      setActive(props.visible)
-      if (props.visible) {
-        props.afterShow?.()
+      setActive(mergedProps.visible)
+      if (mergedProps.visible) {
+        mergedProps.afterShow?.()
       } else {
-        props.afterClose?.()
+        mergedProps.afterClose?.()
       }
     },
   })
 
-  const [active, setActive] = useState(props.visible)
+  const [active, setActive] = useState(mergedProps.visible)
   useIsomorphicLayoutEffect(() => {
-    if (props.visible) {
+    if (mergedProps.visible) {
       setActive(true)
     }
-  }, [props.visible])
+  }, [mergedProps.visible])
 
   const ref = useRef<HTMLDivElement>(null)
-  useLockScroll(ref, props.disableBodyScroll && active)
+  useLockScroll(ref, mergedProps.disableBodyScroll && active)
 
-  const maskVisible = useInnerVisible(active && props.visible)
+  const maskVisible = useInnerVisible(active && mergedProps.visible)
 
   const body = (
     <div
-      className={classNames(`${classPrefix}-body`, props.bodyClassName)}
-      style={props.bodyStyle}
+      className={classNames(`${classPrefix}-body`, mergedProps.bodyClassName)}
+      style={mergedProps.bodyStyle}
     >
-      {props.children}
+      {mergedProps.children}
     </div>
   )
 
   const node = withStopPropagation(
-    props.stopPropagation,
+    mergedProps.stopPropagation,
     withNativeProps(
-      props,
+      mergedProps,
       <div
         className={classPrefix}
         style={{
           display: active ? undefined : 'none',
           pointerEvents: active ? undefined : 'none',
         }}
       >
-        {props.mask && (
+        {mergedProps.mask && (
           <Mask
             visible={maskVisible}
-            forceRender={props.forceRender}
-            destroyOnClose={props.destroyOnClose}
+            forceRender={mergedProps.forceRender}
+            destroyOnClose={mergedProps.destroyOnClose}
             onMaskClick={e => {
-              props.onMaskClick?.(e)
-              if (props.closeOnMaskClick) {
-                props.onClose?.()
+              mergedProps.onMaskClick?.(e)
+              if (mergedProps.closeOnMaskClick) {
+                mergedProps.onClose?.()
               }
             }}
-            style={props.maskStyle}
-            className={classNames(`${classPrefix}-mask`, props.maskClassName)}
+            style={mergedProps.maskStyle}
+            className={classNames(
+              `${classPrefix}-mask`,
+              mergedProps.maskClassName
+            )}
             disableBodyScroll={false}
-            stopPropagation={props.stopPropagation}
+            stopPropagation={mergedProps.stopPropagation}
           />
         )}
         <div
           className={`${classPrefix}-wrap`}
-          role={props.role}
-          aria-label={props['aria-label']}
+          role={mergedProps.role}
+          aria-label={mergedProps['aria-label']}
         >
           <animated.div
             style={{
@@ -124,17 +128,17 @@ export const CenterPopup: FC<CenterPopupProps> = p => {
             }}
             ref={ref}
           >
-            {props.showCloseButton && (
+            {mergedProps.showCloseButton && (
               <a
                 className={classNames(
                   `${classPrefix}-close`,
                   'adm-plain-anchor'
                 )}
                 onClick={() => {
-                  props.onClose?.()
+                  mergedProps.onClose?.()
                 }}
               >
-                <CloseOutline />
+                {mergedProps.closeIcon}
               </a>
             )}
             {body}
@@ -147,10 +151,10 @@ export const CenterPopup: FC<CenterPopupProps> = p => {
   return (
     <ShouldRender
       active={active}
-      forceRender={props.forceRender}
-      destroyOnClose={props.destroyOnClose}
+      forceRender={mergedProps.forceRender}
+      destroyOnClose={mergedProps.destroyOnClose}
     >
-      {renderToContainer(props.getContainer, node)}
+      {renderToContainer(mergedProps.getContainer, node)}
     </ShouldRender>
   )
 }

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

@@ -0,0 +1,54 @@
+import React from 'react'
+import { render, screen, testA11y } from 'testing'
+import ConfigProvider from '../../config-provider'
+import { CenterPopup } from '../center-popup'
+
+describe('center-popup', () => {
+  test('a11y', async () => {
+    await testA11y(<CenterPopup visible>foobar</CenterPopup>)
+  })
+
+  describe('closeIcon', () => {
+    it('default', () => {
+      const { baseElement } = render(
+        <CenterPopup visible showCloseButton>
+          foobar
+        </CenterPopup>
+      )
+      expect(baseElement.querySelector('.antd-mobile-icon')).toBeTruthy()
+    })
+
+    it('props', () => {
+      render(
+        <CenterPopup visible showCloseButton closeIcon='bamboo'>
+          foobar
+        </CenterPopup>
+      )
+      expect(screen.getByText('bamboo')).toBeVisible()
+    })
+
+    it('context', () => {
+      render(
+        <ConfigProvider popup={{ closeIcon: 'little' }}>
+          <CenterPopup visible showCloseButton>
+            foobar
+          </CenterPopup>
+        </ConfigProvider>
+      )
+
+      expect(screen.getByText('little')).toBeVisible()
+    })
+
+    it('props override context', () => {
+      render(
+        <ConfigProvider popup={{ closeIcon: 'little' }}>
+          <CenterPopup visible showCloseButton closeIcon='bamboo'>
+            foobar
+          </CenterPopup>
+        </ConfigProvider>
+      )
+
+      expect(screen.getByText('bamboo')).toBeVisible()
+    })
+  })
+})

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

@@ -1,11 +1,12 @@
-import React from 'react'
+import { CheckOutline } from 'antd-mobile-icons'
 import type { FC, ReactNode } from 'react'
+import React from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
-import List, { ListProps } from '../list'
+import { usePropsValue } from '../../utils/use-props-value'
 import { mergeProps } from '../../utils/with-default-props'
+import { useConfig } from '../config-provider'
+import List, { ListProps } from '../list'
 import { CheckListContext } from './context'
-import { usePropsValue } from '../../utils/use-props-value'
-import { CheckOutline } from 'antd-mobile-icons'
 
 const classPrefix = 'adm-check-list'
 
@@ -29,13 +30,14 @@ const defaultProps = {
   activeIcon: <CheckOutline />,
 }
 
-export const CheckList: FC<CheckListProps> = p => {
-  const props = mergeProps(defaultProps, p)
+export const CheckList: FC<CheckListProps> = props => {
+  const { checkList: componentConfig = {} } = useConfig()
+  const mergedProps = mergeProps(defaultProps, componentConfig, props)
 
-  const [value, setValue] = usePropsValue(props)
+  const [value, setValue] = usePropsValue(mergedProps)
 
   function check(val: CheckListValue) {
-    if (props.multiple) {
+    if (mergedProps.multiple) {
       setValue([...value, val])
     } else {
       setValue([val])
@@ -46,7 +48,7 @@ export const CheckList: FC<CheckListProps> = p => {
     setValue(value.filter(item => item !== val))
   }
 
-  const { activeIcon, extra, disabled, readOnly } = props
+  const { activeIcon, extra, disabled, readOnly } = mergedProps
 
   return (
     <CheckListContext.Provider
@@ -61,9 +63,9 @@ export const CheckList: FC<CheckListProps> = p => {
       }}
     >
       {withNativeProps(
-        props,
-        <List mode={props.mode} className={classPrefix}>
-          {props.children}
+        mergedProps,
+        <List mode={mergedProps.mode} className={classPrefix}>
+          {mergedProps.children}
         </List>
       )}
     </CheckListContext.Provider>

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

@@ -1,6 +1,7 @@
 import React from 'react'
-import { fireEvent, render, testA11y } from 'testing'
+import { fireEvent, render, screen, testA11y } from 'testing'
 import CheckList from '../'
+import ConfigProvider from '../../config-provider'
 
 const classPrefix = `adm-check-list`
 
@@ -74,4 +75,52 @@ describe('CheckList', () => {
     expect(getByText('YES')).toBeVisible()
     expect(getByText('NO')).toBeVisible()
   })
+
+  describe('closeIcon', () => {
+    it('default', () => {
+      const { baseElement } = render(
+        <CheckList defaultValue={['B']}>
+          <CheckList.Item value='A'>A</CheckList.Item>
+          <CheckList.Item value='B'>B</CheckList.Item>
+        </CheckList>
+      )
+      expect(baseElement.querySelector('.antd-mobile-icon')).toBeTruthy()
+    })
+
+    it('props', () => {
+      render(
+        <CheckList defaultValue={['B']} activeIcon='bamboo'>
+          <CheckList.Item value='A'>A</CheckList.Item>
+          <CheckList.Item value='B'>B</CheckList.Item>
+        </CheckList>
+      )
+      expect(screen.getByText('bamboo')).toBeVisible()
+    })
+
+    it('context', () => {
+      render(
+        <ConfigProvider checkList={{ activeIcon: 'little' }}>
+          <CheckList defaultValue={['B']}>
+            <CheckList.Item value='A'>A</CheckList.Item>
+            <CheckList.Item value='B'>B</CheckList.Item>
+          </CheckList>
+        </ConfigProvider>
+      )
+
+      expect(screen.getByText('little')).toBeVisible()
+    })
+
+    it('props override context', () => {
+      render(
+        <ConfigProvider checkList={{ activeIcon: 'little' }}>
+          <CheckList defaultValue={['B']} activeIcon='bamboo'>
+            <CheckList.Item value='A'>A</CheckList.Item>
+            <CheckList.Item value='B'>B</CheckList.Item>
+          </CheckList>
+        </ConfigProvider>
+      )
+
+      expect(screen.getByText('bamboo')).toBeVisible()
+    })
+  })
 })