refactor: Upgrade utils and replace useMergedState (#940)

* refactor: Upgrade utils and replace useMergedState

* feat: defaultvalue

* feat: replace useMergedState  in useDelayState

* chore: adjust logic

* chore: clean up

---------

Co-authored-by: 刘欢 <[email protected]>
Co-authored-by: 二货机器人 <[email protected]>

Author: 3 people

package.json

@@ -41,7 +41,7 @@
   "dependencies": {
     "@rc-component/resize-observer": "^1.0.0",
     "@rc-component/trigger": "^3.0.0",
-    "@rc-component/util": "^1.2.1",
+    "@rc-component/util": "^1.3.0",
     "classnames": "^2.2.1",
     "rc-overflow": "^1.3.2"
   },

src/PickerInput/RangePicker.tsx

@@ -1,4 +1,4 @@
-import { useEvent, useMergedState } from '@rc-component/util';
+import { useEvent, useControlledState } from '@rc-component/util';
 import cls from 'classnames';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import omit from '@rc-component/util/lib/omit';
@@ -311,9 +311,7 @@ function RangePicker<DateType extends object = any>(
   }, [showTime, activeIndex, calendarValue, activeIndexList]);
 
   // ========================= Mode =========================
-  const [modes, setModes] = useMergedState<[PanelMode, PanelMode]>([picker, picker], {
-    value: mode,
-  });
+  const [modes, setModes] = useControlledState<[PanelMode, PanelMode]>([picker, picker], mode);
 
   const mergedMode = modes[activeIndex] || picker;
 

src/PickerInput/SinglePicker.tsx

@@ -1,4 +1,4 @@
-import { useEvent, useMergedState } from '@rc-component/util';
+import { useEvent, useControlledState } from '@rc-component/util';
 import cls from 'classnames';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import omit from '@rc-component/util/lib/omit';
@@ -261,9 +261,7 @@ function Picker<DateType extends object = any>(
   };
 
   // ========================= Mode =========================
-  const [mergedMode, setMode] = useMergedState(picker, {
-    value: mode,
-  });
+  const [mergedMode, setMode] = useControlledState(picker, mode);
 
   /** Extends from `mergedMode` to patch `datetime` mode */
   const internalMode: InternalMode = mergedMode === 'date' && showTime ? 'datetime' : mergedMode;

src/PickerInput/hooks/useDelayState.ts

@@ -1,4 +1,4 @@
-import { useEvent, useMergedState } from '@rc-component/util';
+import { useEvent, useControlledState } from '@rc-component/util';
 import raf from '@rc-component/util/lib/raf';
 import React from 'react';
 
@@ -11,7 +11,15 @@ export default function useDelayState<T>(
   defaultValue?: T,
   onChange?: (next: T) => void,
 ): [state: T, setState: (nextState: T, immediately?: boolean) => void] {
-  const [state, setState] = useMergedState<T>(defaultValue, { value });
+  const [state, setState] = useControlledState<T>(defaultValue, value);
+
+  // Need force update to ensure React re-render
+  const [, forceUpdate] = React.useState({});
+
+  const triggerUpdate = useEvent((nextState: T) => {
+    setState(nextState);
+    forceUpdate({});
+  });
 
   const nextValueRef = React.useRef<T>(value);
 
@@ -22,7 +30,7 @@ export default function useDelayState<T>(
   };
 
   const doUpdate = useEvent(() => {
-    setState(nextValueRef.current);
+    triggerUpdate(nextValueRef.current);
 
     if (onChange && state !== nextValueRef.current) {
       onChange(nextValueRef.current);

src/PickerInput/hooks/useRangePickerValue.ts

@@ -1,4 +1,4 @@
-import { useMergedState } from '@rc-component/util';
+import { useControlledState } from '@rc-component/util';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import * as React from 'react';
 import type { GenerateConfig } from '../../generate';
@@ -72,14 +72,15 @@ export default function useRangePickerValue<DateType extends object, ValueType e
   const [startPickerValue, endPickerValue] = pickerValue;
 
   // PickerValue state
-  const [mergedStartPickerValue, setStartPickerValue] = useMergedState(
+  const [mergedStartPickerValue, setStartPickerValue] = useControlledState(
     () => getDefaultPickerValue(0),
-    { value: startPickerValue },
+    startPickerValue,
   );
 
-  const [mergedEndPickerValue, setEndPickerValue] = useMergedState(() => getDefaultPickerValue(1), {
-    value: endPickerValue,
-  });
+  const [mergedEndPickerValue, setEndPickerValue] = useControlledState(
+    () => getDefaultPickerValue(1),
+    endPickerValue,
+  );
 
   // Current PickerValue
   const currentPickerValue = React.useMemo(() => {

src/PickerInput/hooks/useRangeValue.ts

@@ -1,4 +1,4 @@
-import { useEvent, useMergedState } from '@rc-component/util';
+import { useEvent, useControlledState } from '@rc-component/util';
 import * as React from 'react';
 import type { GenerateConfig } from '../../generate';
 import useSyncState from '../../hooks/useSyncState';
@@ -117,7 +117,7 @@ export function useInnerValue<ValueType extends DateType[], DateType extends obj
   onOk?: (dates: ValueType) => void,
 ) {
   // This is the root value which will sync with controlled or uncontrolled value
-  const [innerValue, setInnerValue] = useMergedState(defaultValue, { value });
+  const [innerValue, setInnerValue] = useControlledState(defaultValue, value);
   const mergedValue = innerValue || (EMPTY_VALUE as ValueType);
 
   // ========================= Inner Values =========================

src/PickerPanel/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { useEvent, useMergedState, warning } from '@rc-component/util';
+import { useEvent, useControlledState, warning } from '@rc-component/util';
 import * as React from 'react';
 import useLocale from '../hooks/useLocale';
 import { fillShowTimeConfig, getTimeProps } from '../hooks/useTimeConfig';
@@ -227,10 +227,7 @@ function PickerPanel<DateType extends object = any>(
   const now = generateConfig.getNow();
 
   // ========================== Mode ==========================
-  const [mergedMode, setMergedMode] = useMergedState<PanelMode>(picker, {
-    value: mode,
-    postState: (val) => val || 'date',
-  });
+  const [mergedMode, setMergedMode] = useControlledState<PanelMode>(picker || 'date', mode);
 
   const internalMode: InternalMode =
     mergedMode === 'date' && mergedShowTime ? 'datetime' : mergedMode;
@@ -241,9 +238,7 @@ function PickerPanel<DateType extends object = any>(
   // ========================= Value ==========================
   // >>> Real value
   // Interactive with `onChange` event which only trigger when the `mode` is `picker`
-  const [innerValue, setMergedValue] = useMergedState(defaultValue, {
-    value,
-  });
+  const [innerValue, setMergedValue] = useControlledState(defaultValue, value);
 
   const mergedValue = React.useMemo(() => {
     // Clean up `[null]`
@@ -282,11 +277,9 @@ function PickerPanel<DateType extends object = any>(
 
   // >>> PickerValue
   // PickerValue is used to control the current displaying panel
-  const [mergedPickerValue, setInternalPickerValue] = useMergedState(
+  const [mergedPickerValue, setInternalPickerValue] = useControlledState(
     defaultPickerValue || mergedValue[0] || now,
-    {
-      value: pickerValue,
-    },
+    pickerValue,
   );
 
   React.useEffect(() => {