refactor: rename p to 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/button/button.tsx

@@ -1,15 +1,15 @@
-import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import classNames from 'classnames'
 import type {
-  ReactNode,
   ButtonHTMLAttributes,
   DetailedHTMLProps,
   MouseEventHandler,
+  ReactNode,
 } from 'react'
-import classNames from 'classnames'
-import DotLoading from '../dot-loading'
-import { mergeProps } from '../../utils/with-default-props'
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { isPromise } from '../../utils/validate'
+import { mergeProps } from '../../utils/with-default-props'
+import DotLoading from '../dot-loading'
 
 const classPrefix = `adm-button`
 
@@ -61,12 +61,13 @@ const defaultProps: ButtonProps = {
   size: 'middle',
 }
 
-export const Button = forwardRef<ButtonRef, ButtonProps>((p, ref) => {
-  const props = mergeProps(defaultProps, p)
+export const Button = forwardRef<ButtonRef, ButtonProps>((props, ref) => {
+  const mergedProps = mergeProps(defaultProps, props)
   const [innerLoading, setInnerLoading] = useState(false)
   const nativeButtonRef = useRef<HTMLButtonElement>(null)
-  const loading = props.loading === 'auto' ? innerLoading : props.loading
-  const disabled = props.disabled || loading
+  const loading =
+    mergedProps.loading === 'auto' ? innerLoading : mergedProps.loading
+  const disabled = mergedProps.disabled || loading
 
   useImperativeHandle(ref, () => ({
     get nativeElement() {
@@ -75,9 +76,9 @@ export const Button = forwardRef<ButtonRef, ButtonProps>((p, ref) => {
   }))
 
   const handleClick: MouseEventHandler<HTMLButtonElement> = async e => {
-    if (!props.onClick) return
+    if (!mergedProps.onClick) return
 
-    const promise = props.onClick(e)
+    const promise = mergedProps.onClick(e)
 
     if (isPromise(promise)) {
       try {
@@ -92,39 +93,39 @@ export const Button = forwardRef<ButtonRef, ButtonProps>((p, ref) => {
   }
 
   return withNativeProps(
-    props,
+    mergedProps,
     <button
       ref={nativeButtonRef}
-      type={props.type}
+      type={mergedProps.type}
       onClick={handleClick}
       className={classNames(
         classPrefix,
         {
-          [`${classPrefix}-${props.color}`]: props.color,
-          [`${classPrefix}-block`]: props.block,
+          [`${classPrefix}-${mergedProps.color}`]: mergedProps.color,
+          [`${classPrefix}-block`]: mergedProps.block,
           [`${classPrefix}-disabled`]: disabled,
-          [`${classPrefix}-fill-outline`]: props.fill === 'outline',
-          [`${classPrefix}-fill-none`]: props.fill === 'none',
-          [`${classPrefix}-mini`]: props.size === 'mini',
-          [`${classPrefix}-small`]: props.size === 'small',
-          [`${classPrefix}-large`]: props.size === 'large',
+          [`${classPrefix}-fill-outline`]: mergedProps.fill === 'outline',
+          [`${classPrefix}-fill-none`]: mergedProps.fill === 'none',
+          [`${classPrefix}-mini`]: mergedProps.size === 'mini',
+          [`${classPrefix}-small`]: mergedProps.size === 'small',
+          [`${classPrefix}-large`]: mergedProps.size === 'large',
           [`${classPrefix}-loading`]: loading,
         },
-        `${classPrefix}-shape-${props.shape}`
+        `${classPrefix}-shape-${mergedProps.shape}`
       )}
       disabled={disabled}
-      onMouseDown={props.onMouseDown}
-      onMouseUp={props.onMouseUp}
-      onTouchStart={props.onTouchStart}
-      onTouchEnd={props.onTouchEnd}
+      onMouseDown={mergedProps.onMouseDown}
+      onMouseUp={mergedProps.onMouseUp}
+      onTouchStart={mergedProps.onTouchStart}
+      onTouchEnd={mergedProps.onTouchEnd}
     >
       {loading ? (
         <div className={`${classPrefix}-loading-wrapper`}>
-          {props.loadingIcon}
-          {props.loadingText}
+          {mergedProps.loadingIcon}
+          {mergedProps.loadingText}
         </div>
       ) : (
-        <span>{props.children}</span>
+        <span>{mergedProps.children}</span>
       )}
     </button>
   )