fix(props): add mergeProps utility to resolve all defaultProps warnings

src/packages/actionsheet/actionsheet.taro.tsx

@@ -1,6 +1,7 @@
 import React, { FunctionComponent, ReactNode } from 'react'
 import Popup, { PopupProps } from '@/packages/popup/index.taro'
 import { ComponentDefaults } from '@/utils/typings'
+import { mergeProps } from '@/utils/merge-props'
 
 export type ActionSheetOption<T> = { [key: string]: T }
 
@@ -40,7 +41,7 @@ export const ActionSheet: FunctionComponent<
     className,
     style,
     ...rest
-  } = { ...defaultProps, ...props }
+  } = mergeProps(defaultProps, props)
 
   const classPrefix = 'nut-actionsheet'
 

src/packages/actionsheet/actionsheet.tsx

@@ -1,6 +1,7 @@
 import React, { FunctionComponent, ReactNode } from 'react'
 import Popup, { PopupProps } from '@/packages/popup/index'
 import { ComponentDefaults } from '@/utils/typings'
+import { mergeProps } from '@/utils/merge-props'
 
 export type ActionSheetOption<T> = { [key: string]: T }
 
@@ -40,7 +41,7 @@ export const ActionSheet: FunctionComponent<
     className,
     style,
     ...rest
-  } = { ...defaultProps, ...props }
+  } = mergeProps(defaultProps, props)
 
   const classPrefix = 'nut-actionsheet'
 

src/packages/animatingnumbers/countup.taro.tsx

@@ -7,6 +7,7 @@
 } from 'react'
 import { createSelectorQuery } from '@tarojs/taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { mergeProps } from '@/utils/merge-props'
 
 export interface CountUpProps extends BasicComponent {
   length: number
@@ -33,10 +34,7 @@
     thousands,
     style,
     ...reset
-  } = {
-    ...defaultProps,
-    ...props,
-  }
+  } = mergeProps(defaultProps, props)
   const classPrefix = 'nut-countup'
   const countupRef = useRef<HTMLDivElement>(null)
   const timerRef = useRef(0)
@@ -92,7 +90,7 @@
 
   useEffect(() => {
     setNumberTransform()
   }, [numerArr])
 
   useEffect(() => {
     if (!isLoaded.current) {
@@ -106,7 +104,7 @@
     return () => {
       window.clearTimeout(timerRef.current)
     }
   }, [value])
 
   return (
     <div className={`${classPrefix} ${className}`} ref={countupRef}>
@@ -141,5 +139,4 @@
   )
 }
 
-CountUp.defaultProps = defaultProps // 不可删除
 CountUp.displayName = 'NutCountUp'

src/packages/animatingnumbers/countup.tsx

@@ -6,6 +6,7 @@
   useRef,
 } from 'react'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { mergeProps } from '@/utils/merge-props'
 
 export interface CountUpProps extends BasicComponent {
   length: number
@@ -32,10 +33,7 @@
     thousands,
     style,
     ...reset
-  } = {
-    ...defaultProps,
-    ...props,
-  }
+  } = mergeProps(defaultProps, props)
   const classPrefix = 'nut-countup'
   const countupRef = useRef<HTMLDivElement>(null)
   const timerRef = useRef(0)
@@ -87,7 +85,7 @@
     return () => {
       window.clearTimeout(timerRef.current)
     }
   }, [numerArr])
 
   return (
     <div className={`${classPrefix} ${className}`} ref={countupRef}>
@@ -122,5 +120,4 @@
   )
 }
 
-CountUp.defaultProps = defaultProps // 不可删除
 CountUp.displayName = 'NutCountUp'

src/packages/dialog/dialog.taro.tsx

@@ -17,6 +17,7 @@ import {
 } from '@/utils/use-custom-event'
 import { BasicComponent } from '@/utils/typings'
 import { useLockScrollTaro } from '@/utils/use-lock-scoll-taro'
+import { mergeProps } from '@/utils/merge-props'
 
 export type DialogProps = DialogBasicProps & BasicComponent
 const defaultProps = {
@@ -78,7 +79,7 @@ export const BaseDialog: FunctionComponent<Partial<DialogProps>> & {
       beforeClose,
     },
     setParams,
-  } = useParams({ ...defaultProps, ...props })
+  } = useParams(mergeProps(defaultProps, props))
 
   useCustomEvent(
     id as string,
@@ -225,7 +226,6 @@ export function close(selector: string) {
   customEvents.trigger(path, { status: false })
 }
 
-BaseDialog.defaultProps = defaultProps // 不可删除
 BaseDialog.displayName = 'NutDialog'
 BaseDialog.open = open
 BaseDialog.close = close

src/packages/dialog/dialog.tsx

@@ -13,6 +13,7 @@ import {
   DialogConfirmProps,
 } from './config'
 import { ComponentDefaults } from '@/utils/typings'
+import { mergeProps } from '@/utils/merge-props'
 
 export type DialogProps = DialogBasicProps
 const defaultProps = {
@@ -55,7 +56,7 @@ const BaseDialog: ForwardRefRenderFunction<unknown, Partial<DialogProps>> = (
     beforeCancel,
     beforeClose,
     ...restProps
-  } = props
+  } = mergeProps(defaultProps, props)
   const classPrefix = 'nut-dialog'
   const [loading, setLoading] = useState(false)
 
@@ -161,5 +162,4 @@ Dialog.confirm = (props: DialogConfirmProps): DialogReturnProps => {
   }
 })
 
-Dialog.defaultProps = defaultProps // 不可删除
 Dialog.displayName = 'NutDialog'

src/packages/notify/notify.taro.tsx

@@ -7,6 +7,7 @@ import {
   useCustomEvent,
   useCustomEventsPath,
 } from '@/utils/use-custom-event'
+import { mergeProps } from '@/utils/merge-props'
 
 export type NotifyPosition = 'top' | 'bottom'
 export type NotifyType = 'primary' | 'success' | 'danger' | 'warning'
@@ -49,7 +50,7 @@ export const Notify: FunctionComponent<Partial<NotifyProps>> & {
     duration,
     onClose,
     onClick,
-  } = { ...defaultProps, ...props }
+  } = mergeProps(defaultProps, props)
 
   useCustomEvent(id as string, (status: boolean) => {
     status ? show() : hide()
@@ -130,7 +131,6 @@ export function close(selector: string) {
   customEvents.trigger(path, false)
 }
 
-Notify.defaultProps = defaultProps // 不可删除
 Notify.displayName = 'NutNotify'
 Notify.open = open
 Notify.close = close

src/packages/toast/toast.taro.tsx

@@ -10,6 +10,7 @@ import {
   useParams,
 } from '@/utils/use-custom-event'
 import { usePropsValue } from '@/utils/use-props-value'
+import { mergeProps } from '@/utils/merge-props'
 
 export type ToastPosition = 'top' | 'bottom' | 'center'
 export type ToastSize = 'small' | 'base' | 'large'
@@ -91,7 +92,7 @@ export const Toast: FunctionComponent<
       wordBreak,
     },
     setParams,
-  } = useParams({ ...defaultProps, ...props })
+  } = useParams(mergeProps(defaultProps, props))
   const timer = useRef(-1)
 
   const [innerVisible, setInnerVisible] = usePropsValue({
@@ -222,7 +223,6 @@ export function hide(selector: string) {
   customEvents.trigger(path, { status: false })
 }
 
-Toast.defaultProps = defaultProps // 不可删除
 Toast.displayName = 'NutToast'
 Toast.show = show
 Toast.hide = hide

src/utils/merge-props.ts

@@ -1,7 +1,33 @@
-export function mergeProps<T, U>(
-  defaultProps: T,
-  props: U
-): { [Key in Extract<keyof T, keyof U>]: U[Key] } &
-  { [Key in Exclude<keyof U, keyof T>]?: U[Key] } {
-  return { ...defaultProps, ...props }
+export function mergeProps<A, B>(a: A, b: B): B & A
+export function mergeProps<A, B, C>(a: A, b: B, c: C): C & B & A
+export function mergeProps<A, B, C, D>(a: A, b: B, c: C, d: D): D & C & B & A
+export function mergeProps(...items: any[]) {
+  const ret: any = {}
+  items.forEach((item) => {
+    if (item) {
+      Object.keys(item).forEach((key) => {
+        if (item[key] !== undefined) {
+          ret[key] = item[key]
+        }
+      })
+    }
+  })
+  return ret
+}
+
+/**
+ * Merge props and return the first non-undefined value.
+ * The later has higher priority. e.g. (10, 1, 5) => 5 wins.
+ * This is useful with legacy props that have been deprecated.
+ */
+export function mergeProp<T, DefaultT extends T = T>(
+  defaultProp: DefaultT,
+  ...propList: T[]
+): T | undefined {
+  for (let i = propList.length - 1; i >= 0; i -= 1) {
+    if (propList[i] !== undefined) {
+      return propList[i]
+    }
+  }
+  return defaultProp
 }