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

…gs (#2581)

* fix: defaultprops

* fix: test about defaultProps

---------

Co-authored-by: xiaoyatong <84436086+xiaoyatong@users.noreply.github.com>

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/__tests__/animatingnumbers.spec.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { AnimatingNumbers } from '../animatingnumbers'
-import { CountUp } from '@/packages/animatingnumbers/countup'
 
 vi.useFakeTimers()
 test('test value props', () => {
@@ -13,7 +12,8 @@ test('test value props', () => {
     'style',
     'transition: transform 1s ease-in-out;'
   )
-  vi.advanceTimersByTime(CountUp.defaultProps?.delay ?? 0)
+  const defaultDelay = 300
+  vi.advanceTimersByTime(defaultDelay)
   expect(listNumbers[0]).toHaveAttribute(
     'style',
     'transition: transform 1s ease-in-out; transform: translate(0, -30%);'
@@ -28,7 +28,8 @@ test('test aysnc value and  duration props', async () => {
   )
   const listNumbers = container.querySelectorAll('.nut-countup-number')
   expect(listNumbers.length).toBe(8)
-  vi.advanceTimersByTime(CountUp.defaultProps?.delay ?? 0)
+  const defaultDelay = 300
+  vi.advanceTimersByTime(defaultDelay)
   expect(listNumbers[0]).toHaveAttribute(
     'style',
     'transition: transform 1.2s ease-in-out; transform: translate(0, -50%);'

src/packages/animatingnumbers/countup.taro.tsx

@@ -7,6 +7,7 @@ import React, {
 } 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 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
     thousands,
     style,
     ...reset
-  } = {
-    ...defaultProps,
-    ...props,
-  }
+  } = mergeProps(defaultProps, props)
   const classPrefix = 'nut-countup'
   const countupRef = useRef<HTMLDivElement>(null)
   const timerRef = useRef(0)
@@ -141,5 +139,4 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
   )
 }
 
-CountUp.defaultProps = defaultProps // 不可删除
 CountUp.displayName = 'NutCountUp'

src/packages/animatingnumbers/countup.tsx

@@ -6,6 +6,7 @@ import React, {
   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 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
     thousands,
     style,
     ...reset
-  } = {
-    ...defaultProps,
-    ...props,
-  }
+  } = mergeProps(defaultProps, props)
   const classPrefix = 'nut-countup'
   const countupRef = useRef<HTMLDivElement>(null)
   const timerRef = useRef(0)
@@ -122,5 +120,4 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
   )
 }
 
-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
 }