refactor: props -> mergedProps, p -> props

src/components/action-sheet/action-sheet.tsx

@@ -1,11 +1,11 @@
+import classNames from 'classnames'
+import type { CSSProperties, FC, ReactNode } from 'react'
 import React from 'react'
-import type { FC, ReactNode, CSSProperties } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
+import { renderImperatively } from '../../utils/render-imperatively'
 import { mergeProps } from '../../utils/with-default-props'
-import classNames from 'classnames'
 import Popup, { PopupProps } from '../popup'
 import SafeArea from '../safe-area'
-import { renderImperatively } from '../../utils/render-imperatively'
 
 const classPrefix = `adm-action-sheet`
 
@@ -51,36 +51,36 @@ const defaultProps = {
   forceRender: false,
 }
 
-export const ActionSheet: FC<ActionSheetProps> = p => {
-  const props = mergeProps(defaultProps, p)
-  const { styles } = props
+export const ActionSheet: FC<ActionSheetProps> = props => {
+  const mergedProps = mergeProps(defaultProps, props)
+  const { styles } = mergedProps
 
   return (
     <Popup
-      visible={props.visible}
+      visible={mergedProps.visible}
       onMaskClick={() => {
-        props.onMaskClick?.()
-        if (props.closeOnMaskClick) {
-          props.onClose?.()
+        mergedProps.onMaskClick?.()
+        if (mergedProps.closeOnMaskClick) {
+          mergedProps.onClose?.()
         }
       }}
-      afterClose={props.afterClose}
-      className={classNames(`${classPrefix}-popup`, props.popupClassName)}
-      style={props.popupStyle}
-      getContainer={props.getContainer}
-      destroyOnClose={props.destroyOnClose}
-      forceRender={props.forceRender}
+      afterClose={mergedProps.afterClose}
+      className={classNames(`${classPrefix}-popup`, mergedProps.popupClassName)}
+      style={mergedProps.popupStyle}
+      getContainer={mergedProps.getContainer}
+      destroyOnClose={mergedProps.destroyOnClose}
+      forceRender={mergedProps.forceRender}
       bodyStyle={styles?.body}
       maskStyle={styles?.mask}
     >
       {withNativeProps(
-        props,
+        mergedProps,
         <div className={classPrefix}>
-          {props.extra && (
-            <div className={`${classPrefix}-extra`}>{props.extra}</div>
+          {mergedProps.extra && (
+            <div className={`${classPrefix}-extra`}>{mergedProps.extra}</div>
           )}
           <div className={`${classPrefix}-button-list`}>
-            {props.actions.map((action, index) => (
+            {mergedProps.actions.map((action, index) => (
               <div
                 key={action.key}
                 className={`${classPrefix}-button-item-wrapper`}
@@ -97,9 +97,9 @@ export const ActionSheet: FC<ActionSheetProps> = p => {
                   )}
                   onClick={() => {
                     action.onClick?.()
-                    props.onAction?.(action, index)
-                    if (props.closeOnAction) {
-                      props.onClose?.()
+                    mergedProps.onAction?.(action, index)
+                    if (mergedProps.closeOnAction) {
+                      mergedProps.onClose?.()
                     }
                   }}
                   role='option'
@@ -118,29 +118,29 @@ export const ActionSheet: FC<ActionSheetProps> = p => {
             ))}
           </div>
 
-          {props.cancelText && (
+          {mergedProps.cancelText && (
             <div
               className={`${classPrefix}-cancel`}
               role='option'
-              aria-label={props.cancelText}
+              aria-label={mergedProps.cancelText}
             >
               <div className={`${classPrefix}-button-item-wrapper`}>
                 <a
                   className={classNames(
                     'adm-plain-anchor',
                     `${classPrefix}-button-item`
                   )}
-                  onClick={props.onClose}
+                  onClick={mergedProps.onClose}
                 >
                   <div className={`${classPrefix}-button-item-name`}>
-                    {props.cancelText}
+                    {mergedProps.cancelText}
                   </div>
                 </a>
               </div>
             </div>
           )}
 
-          {props.safeArea && <SafeArea position='bottom' />}
+          {mergedProps.safeArea && <SafeArea position='bottom' />}
         </div>
       )}
     </Popup>

src/components/avatar/avatar.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
 import type { FC, ReactNode } from 'react'
+import React from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
-import { Fallback } from './fallback'
 import Image, { ImageProps } from '../image'
+import { Fallback } from './fallback'
 
 const classPrefix = 'adm-avatar'
 
@@ -19,21 +19,21 @@ const defaultProps = {
   fit: 'cover',
 }
 
-export const Avatar: FC<AvatarProps> = p => {
-  const props = mergeProps(defaultProps, p)
+export const Avatar: FC<AvatarProps> = props => {
+  const mergedProps = mergeProps(defaultProps, props)
   return withNativeProps(
-    props,
+    mergedProps,
     <Image
       className={classPrefix}
-      src={props.src}
-      fallback={props.fallback}
-      placeholder={props.fallback}
-      alt={props.alt}
-      lazy={props.lazy}
-      fit={props.fit}
-      onClick={props.onClick}
-      onError={props.onError}
-      onLoad={props.onLoad}
+      src={mergedProps.src}
+      fallback={mergedProps.fallback}
+      placeholder={mergedProps.fallback}
+      alt={mergedProps.alt}
+      lazy={mergedProps.lazy}
+      fit={mergedProps.fit}
+      onClick={mergedProps.onClick}
+      onError={mergedProps.onError}
+      onLoad={mergedProps.onLoad}
     />
   )
 }

src/components/cascader-view/cascader-view.tsx

@@ -1,18 +1,18 @@
-import React, { useState, useEffect, useMemo } from 'react'
-import type { FC, ReactNode } from 'react'
+import { useUpdateEffect } from 'ahooks'
 import classNames from 'classnames'
-import Tabs from '../tabs'
-import CheckList, { CheckListValue } from '../check-list'
+import type { FC, ReactNode } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
+import type { BaseOptionType, FieldNamesType } from '../../hooks'
+import { useFieldNames } from '../../hooks'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
-import { mergeProps } from '../../utils/with-default-props'
 import { usePropsValue } from '../../utils/use-props-value'
-import { useCascaderValueExtend } from './use-cascader-value-extend'
+import { mergeProps } from '../../utils/with-default-props'
+import CheckList, { CheckListValue } from '../check-list'
 import { useConfig } from '../config-provider'
-import { optionSkeleton } from './option-skeleton'
 import Skeleton from '../skeleton'
-import { useUpdateEffect } from 'ahooks'
-import { useFieldNames } from '../../hooks'
-import type { FieldNamesType, BaseOptionType } from '../../hooks'
+import Tabs from '../tabs'
+import { optionSkeleton } from './option-skeleton'
+import { useCascaderValueExtend } from './use-cascader-value-extend'
 
 const classPrefix = `adm-cascader-view`
 
@@ -46,22 +46,22 @@ const defaultProps = {
   defaultValue: [],
 }
 
-export const CascaderView: FC<CascaderViewProps> = p => {
-  const props = mergeProps(defaultProps, p)
+export const CascaderView: FC<CascaderViewProps> = props => {
+  const mergedProps = mergeProps(defaultProps, props)
 
   const { locale } = useConfig()
   const [labelName, valueName, childrenName, disabledName] = useFieldNames(
-    props.fieldNames
+    mergedProps.fieldNames
   )
-  const generateValueExtend = useCascaderValueExtend(props.options, {
+  const generateValueExtend = useCascaderValueExtend(mergedProps.options, {
     valueName,
     childrenName,
   })
 
   const [value, setValue] = usePropsValue({
-    ...props,
+    ...mergedProps,
     onChange: val => {
-      props.onChange?.(val, generateValueExtend(val))
+      mergedProps.onChange?.(val, generateValueExtend(val))
     },
   })
   const [tabActiveIndex, setTabActiveIndex] = useState(0)
@@ -72,7 +72,7 @@ export const CascaderView: FC<CascaderViewProps> = p => {
       options: CascaderOption[]
     }[] = []
 
-    let currentOptions = props.options
+    let currentOptions = mergedProps.options
     let reachedEnd = false
     for (const v of value) {
       const target = currentOptions.find(option => option[valueName] === v)
@@ -93,10 +93,10 @@ export const CascaderView: FC<CascaderViewProps> = p => {
       })
     }
     return ret
-  }, [value, props.options])
+  }, [value, mergedProps.options])
 
   useUpdateEffect(() => {
-    props.onTabsChange?.(tabActiveIndex)
+    mergedProps.onTabsChange?.(tabActiveIndex)
   }, [tabActiveIndex])
   useEffect(() => {
     setTabActiveIndex(levels.length - 1)
@@ -117,12 +117,12 @@ export const CascaderView: FC<CascaderViewProps> = p => {
   }
 
   const whetherLoading = <T extends unknown[]>(options: T) =>
-    props.loading || options === optionSkeleton
+    mergedProps.loading || options === optionSkeleton
 
-  const placeholder = props.placeholder || locale.Cascader.placeholder
+  const placeholder = mergedProps.placeholder || locale.Cascader.placeholder
 
   return withNativeProps(
-    props,
+    mergedProps,
     <div className={classPrefix}>
       <Tabs
         activeKey={tabActiveIndex.toString()}
@@ -143,8 +143,8 @@ export const CascaderView: FC<CascaderViewProps> = p => {
                   {selected
                     ? selected[labelName]
                     : typeof placeholder === 'function'
-                    ? placeholder(index)
-                    : placeholder}
+                      ? placeholder(index)
+                      : placeholder}
                 </div>
               }
               forceRender
@@ -175,7 +175,7 @@ export const CascaderView: FC<CascaderViewProps> = p => {
                     onChange={selectValue =>
                       onItemSelect(selectValue[0], index)
                     }
-                    activeIcon={props.activeIcon}
+                    activeIcon={mergedProps.activeIcon}
                   >
                     {level.options.map(option => {
                       const active = value[index] === option[valueName]

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

@@ -1,12 +1,12 @@
-import React from 'react'
-import type { FC, ReactNode } 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 { mergeProps } from '../../utils/with-default-props'
-import { CheckListContext } from './context'
 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'
 
 const classPrefix = 'adm-check-list'
 
@@ -30,14 +30,14 @@ const defaultProps = {
   activeIcon: <CheckOutline />,
 }
 
-export const CheckList: FC<CheckListProps> = p => {
+export const CheckList: FC<CheckListProps> = props => {
   const { checkList: componentConfig = {} } = useConfig()
-  const props = mergeProps(defaultProps, componentConfig, p)
+  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])
@@ -48,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
@@ -63,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/checkbox/group.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
 import type { FC, ReactNode } from 'react'
-import { mergeProps } from '../../utils/with-default-props'
+import React from 'react'
 import { CheckboxValue } from '.'
-import { CheckboxGroupContext } from './group-context'
 import { usePropsValue } from '../../utils/use-props-value'
+import { mergeProps } from '../../utils/with-default-props'
+import { CheckboxGroupContext } from './group-context'
 
 export interface CheckboxGroupProps {
   value?: CheckboxValue[]
@@ -18,16 +18,16 @@ const defaultProps = {
   defaultValue: [],
 }
 
-export const Group: FC<CheckboxGroupProps> = p => {
-  const props = mergeProps(defaultProps, p)
-  const [value, setValue] = usePropsValue(props)
+export const Group: FC<CheckboxGroupProps> = props => {
+  const mergedProps = mergeProps(defaultProps, props)
+  const [value, setValue] = usePropsValue(mergedProps)
 
   return (
     <CheckboxGroupContext.Provider
       // TODO: 性能优化
       value={{
         value: value,
-        disabled: props.disabled,
+        disabled: mergedProps.disabled,
         check: v => {
           setValue([...value, v])
         },
@@ -36,7 +36,7 @@ export const Group: FC<CheckboxGroupProps> = p => {
         },
       }}
     >
-      {props.children}
+      {mergedProps.children}
     </CheckboxGroupContext.Provider>
   )
 }

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

@@ -3,7 +3,7 @@ import { Locale } from '../../locales/base'
 import zhCN from '../../locales/zh-CN'
 
 type Config = {
-  locale?: Locale
+  locale: Locale
   checkList?: {
     activeIcon?: ReactNode
   }
@@ -67,7 +67,7 @@ export function getDefaultConfig() {
 
 const ConfigContext = React.createContext<Config | null>(null)
 
-export type ConfigProviderProps = Config & {
+export type ConfigProviderProps = Partial<Config> & {
   children?: ReactNode
 }