@rc-component/picker 1.4.0 → 1.5.0

package/es/PickerInput/RangePicker.js

@@ -15,7 +15,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { useEvent, useMergedState } from '@rc-component/util';
+import { useEvent, useControlledState } from '@rc-component/util';
 import cls from 'classnames';
 import useLayoutEffect from "@rc-component/util/es/hooks/useLayoutEffect";
 import omit from "@rc-component/util/es/omit";
@@ -192,12 +192,10 @@ function RangePicker(props, ref) {
   }, [showTime, activeIndex, calendarValue, activeIndexList]);
 
   // ========================= Mode =========================
-  var _useMergedState = useMergedState([picker, picker], {
-      value: mode
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    modes = _useMergedState2[0],
-    setModes = _useMergedState2[1];
+  var _useControlledState = useControlledState([picker, picker], mode),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    modes = _useControlledState2[0],
+    setModes = _useControlledState2[1];
   var mergedMode = modes[activeIndex] || picker;
 
   /** Extends from `mergedMode` to patch `datetime` mode */

package/es/PickerInput/SinglePicker.js

@@ -15,7 +15,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { useEvent, useMergedState } from '@rc-component/util';
+import { useEvent, useControlledState } from '@rc-component/util';
 import cls from 'classnames';
 import useLayoutEffect from "@rc-component/util/es/hooks/useLayoutEffect";
 import omit from "@rc-component/util/es/omit";
@@ -163,12 +163,10 @@ function Picker(props, ref) {
   };
 
   // ========================= Mode =========================
-  var _useMergedState = useMergedState(picker, {
-      value: mode
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    mergedMode = _useMergedState2[0],
-    setMode = _useMergedState2[1];
+  var _useControlledState = useControlledState(picker, mode),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    mergedMode = _useControlledState2[0],
+    setMode = _useControlledState2[1];
 
   /** Extends from `mergedMode` to patch `datetime` mode */
   var internalMode = mergedMode === 'date' && showTime ? 'datetime' : mergedMode;

package/es/PickerInput/hooks/useDelayState.js

@@ -4,7 +4,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { useEvent, useMergedState } from '@rc-component/util';
+import { useEvent, useControlledState } from '@rc-component/util';
 import raf from "@rc-component/util/es/raf";
 import React from 'react';
 
@@ -13,12 +13,19 @@ import React from 'react';
  * But will be `false` for a delay of effect.
  */
 export default function useDelayState(value, defaultValue, onChange) {
-  var _useMergedState = useMergedState(defaultValue, {
-      value: value
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    state = _useMergedState2[0],
-    setState = _useMergedState2[1];
+  var _useControlledState = useControlledState(defaultValue, value),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    state = _useControlledState2[0],
+    setState = _useControlledState2[1];
+
+  // Need force update to ensure React re-render
+  var _React$useState = React.useState({}),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    forceUpdate = _React$useState2[1];
+  var triggerUpdate = useEvent(function (nextState) {
+    setState(nextState);
+    forceUpdate({});
+  });
   var nextValueRef = React.useRef(value);
 
   // ============================= Update =============================
@@ -27,7 +34,7 @@ export default function useDelayState(value, defaultValue, onChange) {
     raf.cancel(rafRef.current);
   };
   var doUpdate = useEvent(function () {
-    setState(nextValueRef.current);
+    triggerUpdate(nextValueRef.current);
     if (onChange && state !== nextValueRef.current) {
       onChange(nextValueRef.current);
     }

package/es/PickerInput/hooks/useRangePickerValue.js

@@ -4,7 +4,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { useMergedState } from '@rc-component/util';
+import { useControlledState } from '@rc-component/util';
 import useLayoutEffect from "@rc-component/util/es/hooks/useLayoutEffect";
 import * as React from 'react';
 import { fillTime, isSame } from "../../utils/dateUtil";
@@ -53,22 +53,18 @@ export default function useRangePickerValue(generateConfig, locale, calendarValu
     endPickerValue = _pickerValue[1];
 
   // PickerValue state
-  var _useMergedState = useMergedState(function () {
+  var _useControlledState = useControlledState(function () {
       return getDefaultPickerValue(0);
-    }, {
-      value: startPickerValue
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    mergedStartPickerValue = _useMergedState2[0],
-    setStartPickerValue = _useMergedState2[1];
-  var _useMergedState3 = useMergedState(function () {
+    }, startPickerValue),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    mergedStartPickerValue = _useControlledState2[0],
+    setStartPickerValue = _useControlledState2[1];
+  var _useControlledState3 = useControlledState(function () {
       return getDefaultPickerValue(1);
-    }, {
-      value: endPickerValue
-    }),
-    _useMergedState4 = _slicedToArray(_useMergedState3, 2),
-    mergedEndPickerValue = _useMergedState4[0],
-    setEndPickerValue = _useMergedState4[1];
+    }, endPickerValue),
+    _useControlledState4 = _slicedToArray(_useControlledState3, 2),
+    mergedEndPickerValue = _useControlledState4[0],
+    setEndPickerValue = _useControlledState4[1];
 
   // Current PickerValue
   var currentPickerValue = React.useMemo(function () {

package/es/PickerInput/hooks/useRangeValue.d.ts

@@ -15,7 +15,7 @@ rangeValue: boolean,
  * This should only used in SinglePicker with `multiple` mode.
  * So when `rangeValue` is `true`, order will be ignored.
  */
-order: boolean, defaultValue?: ValueType, value?: ValueType, onCalendarChange?: (dates: ValueType, dateStrings: ReplaceListType<Required<ValueType>, string>, info: BaseInfo) => void, onOk?: (dates: ValueType) => void): readonly [ValueType, (updater: ValueType | ((origin: ValueType) => ValueType), ignoreDestroy?: boolean) => void, (useControlledValueFirst?: boolean) => ValueType, TriggerCalendarChange<ValueType>, () => void];
+order: boolean, defaultValue?: ValueType, value?: ValueType, onCalendarChange?: (dates: ValueType, dateStrings: ReplaceListType<Required<ValueType>, string>, info: BaseInfo) => void, onOk?: (dates: ValueType) => void): readonly [ValueType, (updater: ValueType | ((origin: ValueType) => ValueType)) => void, (useControlledValueFirst?: boolean) => ValueType, TriggerCalendarChange<ValueType>, () => void];
 export default function useRangeValue<ValueType extends DateType[], DateType extends object = any>(info: Pick<RangePickerProps<DateType>, 'generateConfig' | 'locale' | 'allowEmpty' | 'order' | 'picker'> & ReplacedPickerProps<DateType>, mergedValue: ValueType, setInnerValue: (nextValue: ValueType) => void, getCalendarValue: () => ValueType, triggerCalendarChange: TriggerCalendarChange<ValueType>, disabled: ReplaceListType<Required<ValueType>, boolean>, formatList: FormatType[], focused: boolean, open: boolean, isInvalidateDate: (date: DateType, info?: {
     from?: DateType;
     activeIndex: number;

package/es/PickerInput/hooks/useRangeValue.js

@@ -8,7 +8,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-import { useEvent, useMergedState } from '@rc-component/util';
+import { useEvent, useControlledState } from '@rc-component/util';
 import * as React from 'react';
 import useSyncState from "../../hooks/useSyncState";
 import { formatValue, isSame, isSameTimestamp } from "../../utils/dateUtil";
@@ -101,12 +101,10 @@ rangeValue,
  */
 order, defaultValue, value, onCalendarChange, onOk) {
   // This is the root value which will sync with controlled or uncontrolled value
-  var _useMergedState = useMergedState(defaultValue, {
-      value: value
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    innerValue = _useMergedState2[0],
-    setInnerValue = _useMergedState2[1];
+  var _useControlledState = useControlledState(defaultValue, value),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    innerValue = _useControlledState2[0],
+    setInnerValue = _useControlledState2[1];
   var mergedValue = innerValue || EMPTY_VALUE;
 
   // ========================= Inner Values =========================
@@ -256,11 +254,12 @@ export default function useRangeValue(info, mergedValue, setInnerValue, getCalen
 
       // Trigger `onChange` if needed
       if (onChange && !isSameMergedDates) {
+        var everyEmpty = clone.every(function (val) {
+          return !val;
+        });
         onChange(
         // Return null directly if all date are empty
-        isNullValue && clone.every(function (val) {
-          return !val;
-        }) ? null : clone, getDateTexts(clone));
+        isNullValue && everyEmpty ? null : clone, everyEmpty ? null : getDateTexts(clone));
       }
     }
     return allPassed;

package/es/PickerPanel/index.js

@@ -16,7 +16,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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";
@@ -117,15 +117,10 @@ function PickerPanel(props, ref) {
   var now = generateConfig.getNow();
 
   // ========================== Mode ==========================
-  var _useMergedState = useMergedState(picker, {
-      value: mode,
-      postState: function postState(val) {
-        return val || 'date';
-      }
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    mergedMode = _useMergedState2[0],
-    setMergedMode = _useMergedState2[1];
+  var _useControlledState = useControlledState(picker || 'date', mode),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    mergedMode = _useControlledState2[0],
+    setMergedMode = _useControlledState2[1];
   var internalMode = mergedMode === 'date' && mergedShowTime ? 'datetime' : mergedMode;
 
   // ========================= Toggle =========================
@@ -134,12 +129,10 @@ function PickerPanel(props, ref) {
   // ========================= Value ==========================
   // >>> Real value
   // Interactive with `onChange` event which only trigger when the `mode` is `picker`
-  var _useMergedState3 = useMergedState(defaultValue, {
-      value: value
-    }),
-    _useMergedState4 = _slicedToArray(_useMergedState3, 2),
-    innerValue = _useMergedState4[0],
-    setMergedValue = _useMergedState4[1];
+  var _useControlledState3 = useControlledState(defaultValue, value),
+    _useControlledState4 = _slicedToArray(_useControlledState3, 2),
+    innerValue = _useControlledState4[0],
+    setMergedValue = _useControlledState4[1];
   var mergedValue = React.useMemo(function () {
     // Clean up `[null]`
     var values = toArray(innerValue).filter(function (val) {
@@ -171,12 +164,10 @@ function PickerPanel(props, ref) {
 
   // >>> PickerValue
   // PickerValue is used to control the current displaying panel
-  var _useMergedState5 = useMergedState(defaultPickerValue || mergedValue[0] || now, {
-      value: pickerValue
-    }),
-    _useMergedState6 = _slicedToArray(_useMergedState5, 2),
-    mergedPickerValue = _useMergedState6[0],
-    setInternalPickerValue = _useMergedState6[1];
+  var _useControlledState5 = useControlledState(defaultPickerValue || mergedValue[0] || now, pickerValue),
+    _useControlledState6 = _slicedToArray(_useControlledState5, 2),
+    mergedPickerValue = _useControlledState6[0],
+    setInternalPickerValue = _useControlledState6[1];
   React.useEffect(function () {
     if (mergedValue[0] && !pickerValue) {
       setInternalPickerValue(mergedValue[0]);

package/lib/PickerInput/RangePicker.js

@@ -201,12 +201,10 @@ function RangePicker(props, ref) {
   }, [showTime, activeIndex, calendarValue, activeIndexList]);
 
   // ========================= Mode =========================
-  var _useMergedState = (0, _util.useMergedState)([picker, picker], {
-      value: mode
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    modes = _useMergedState2[0],
-    setModes = _useMergedState2[1];
+  var _useControlledState = (0, _util.useControlledState)([picker, picker], mode),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    modes = _useControlledState2[0],
+    setModes = _useControlledState2[1];
   var mergedMode = modes[activeIndex] || picker;
 
   /** Extends from `mergedMode` to patch `datetime` mode */

package/lib/PickerInput/SinglePicker.js

@@ -171,12 +171,10 @@ function Picker(props, ref) {
   };
 
   // ========================= Mode =========================
-  var _useMergedState = (0, _util.useMergedState)(picker, {
-      value: mode
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    mergedMode = _useMergedState2[0],
-    setMode = _useMergedState2[1];
+  var _useControlledState = (0, _util.useControlledState)(picker, mode),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    mergedMode = _useControlledState2[0],
+    setMode = _useControlledState2[1];
 
   /** Extends from `mergedMode` to patch `datetime` mode */
   var internalMode = mergedMode === 'date' && showTime ? 'datetime' : mergedMode;

package/lib/PickerInput/hooks/useDelayState.js

@@ -19,12 +19,19 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * But will be `false` for a delay of effect.
  */
 function useDelayState(value, defaultValue, onChange) {
-  var _useMergedState = (0, _util.useMergedState)(defaultValue, {
-      value: value
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    state = _useMergedState2[0],
-    setState = _useMergedState2[1];
+  var _useControlledState = (0, _util.useControlledState)(defaultValue, value),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    state = _useControlledState2[0],
+    setState = _useControlledState2[1];
+
+  // Need force update to ensure React re-render
+  var _React$useState = _react.default.useState({}),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    forceUpdate = _React$useState2[1];
+  var triggerUpdate = (0, _util.useEvent)(function (nextState) {
+    setState(nextState);
+    forceUpdate({});
+  });
   var nextValueRef = _react.default.useRef(value);
 
   // ============================= Update =============================
@@ -33,7 +40,7 @@ function useDelayState(value, defaultValue, onChange) {
     _raf.default.cancel(rafRef.current);
   };
   var doUpdate = (0, _util.useEvent)(function () {
-    setState(nextValueRef.current);
+    triggerUpdate(nextValueRef.current);
     if (onChange && state !== nextValueRef.current) {
       onChange(nextValueRef.current);
     }

package/lib/PickerInput/hooks/useRangePickerValue.js

@@ -64,22 +64,18 @@ function useRangePickerValue(generateConfig, locale, calendarValue, modes, open,
     endPickerValue = _pickerValue[1];
 
   // PickerValue state
-  var _useMergedState = (0, _util.useMergedState)(function () {
+  var _useControlledState = (0, _util.useControlledState)(function () {
       return getDefaultPickerValue(0);
-    }, {
-      value: startPickerValue
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    mergedStartPickerValue = _useMergedState2[0],
-    setStartPickerValue = _useMergedState2[1];
-  var _useMergedState3 = (0, _util.useMergedState)(function () {
+    }, startPickerValue),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    mergedStartPickerValue = _useControlledState2[0],
+    setStartPickerValue = _useControlledState2[1];
+  var _useControlledState3 = (0, _util.useControlledState)(function () {
       return getDefaultPickerValue(1);
-    }, {
-      value: endPickerValue
-    }),
-    _useMergedState4 = _slicedToArray(_useMergedState3, 2),
-    mergedEndPickerValue = _useMergedState4[0],
-    setEndPickerValue = _useMergedState4[1];
+    }, endPickerValue),
+    _useControlledState4 = _slicedToArray(_useControlledState3, 2),
+    mergedEndPickerValue = _useControlledState4[0],
+    setEndPickerValue = _useControlledState4[1];
 
   // Current PickerValue
   var currentPickerValue = React.useMemo(function () {

package/lib/PickerInput/hooks/useRangeValue.d.ts

@@ -15,7 +15,7 @@ rangeValue: boolean,
  * This should only used in SinglePicker with `multiple` mode.
  * So when `rangeValue` is `true`, order will be ignored.
  */
-order: boolean, defaultValue?: ValueType, value?: ValueType, onCalendarChange?: (dates: ValueType, dateStrings: ReplaceListType<Required<ValueType>, string>, info: BaseInfo) => void, onOk?: (dates: ValueType) => void): readonly [ValueType, (updater: ValueType | ((origin: ValueType) => ValueType), ignoreDestroy?: boolean) => void, (useControlledValueFirst?: boolean) => ValueType, TriggerCalendarChange<ValueType>, () => void];
+order: boolean, defaultValue?: ValueType, value?: ValueType, onCalendarChange?: (dates: ValueType, dateStrings: ReplaceListType<Required<ValueType>, string>, info: BaseInfo) => void, onOk?: (dates: ValueType) => void): readonly [ValueType, (updater: ValueType | ((origin: ValueType) => ValueType)) => void, (useControlledValueFirst?: boolean) => ValueType, TriggerCalendarChange<ValueType>, () => void];
 export default function useRangeValue<ValueType extends DateType[], DateType extends object = any>(info: Pick<RangePickerProps<DateType>, 'generateConfig' | 'locale' | 'allowEmpty' | 'order' | 'picker'> & ReplacedPickerProps<DateType>, mergedValue: ValueType, setInnerValue: (nextValue: ValueType) => void, getCalendarValue: () => ValueType, triggerCalendarChange: TriggerCalendarChange<ValueType>, disabled: ReplaceListType<Required<ValueType>, boolean>, formatList: FormatType[], focused: boolean, open: boolean, isInvalidateDate: (date: DateType, info?: {
     from?: DateType;
     activeIndex: number;

package/lib/PickerInput/hooks/useRangeValue.js

@@ -112,12 +112,10 @@ rangeValue,
  */
 order, defaultValue, value, onCalendarChange, onOk) {
   // This is the root value which will sync with controlled or uncontrolled value
-  var _useMergedState = (0, _util.useMergedState)(defaultValue, {
-      value: value
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    innerValue = _useMergedState2[0],
-    setInnerValue = _useMergedState2[1];
+  var _useControlledState = (0, _util.useControlledState)(defaultValue, value),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    innerValue = _useControlledState2[0],
+    setInnerValue = _useControlledState2[1];
   var mergedValue = innerValue || EMPTY_VALUE;
 
   // ========================= Inner Values =========================
@@ -267,11 +265,12 @@ function useRangeValue(info, mergedValue, setInnerValue, getCalendarValue, trigg
 
       // Trigger `onChange` if needed
       if (onChange && !isSameMergedDates) {
+        var everyEmpty = clone.every(function (val) {
+          return !val;
+        });
         onChange(
         // Return null directly if all date are empty
-        isNullValue && clone.every(function (val) {
-          return !val;
-        }) ? null : clone, getDateTexts(clone));
+        isNullValue && everyEmpty ? null : clone, everyEmpty ? null : getDateTexts(clone));
       }
     }
     return allPassed;

package/lib/PickerPanel/index.js

@@ -126,15 +126,10 @@ function PickerPanel(props, ref) {
   var now = generateConfig.getNow();
 
   // ========================== Mode ==========================
-  var _useMergedState = (0, _util.useMergedState)(picker, {
-      value: mode,
-      postState: function postState(val) {
-        return val || 'date';
-      }
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    mergedMode = _useMergedState2[0],
-    setMergedMode = _useMergedState2[1];
+  var _useControlledState = (0, _util.useControlledState)(picker || 'date', mode),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    mergedMode = _useControlledState2[0],
+    setMergedMode = _useControlledState2[1];
   var internalMode = mergedMode === 'date' && mergedShowTime ? 'datetime' : mergedMode;
 
   // ========================= Toggle =========================
@@ -143,12 +138,10 @@ function PickerPanel(props, ref) {
   // ========================= Value ==========================
   // >>> Real value
   // Interactive with `onChange` event which only trigger when the `mode` is `picker`
-  var _useMergedState3 = (0, _util.useMergedState)(defaultValue, {
-      value: value
-    }),
-    _useMergedState4 = _slicedToArray(_useMergedState3, 2),
-    innerValue = _useMergedState4[0],
-    setMergedValue = _useMergedState4[1];
+  var _useControlledState3 = (0, _util.useControlledState)(defaultValue, value),
+    _useControlledState4 = _slicedToArray(_useControlledState3, 2),
+    innerValue = _useControlledState4[0],
+    setMergedValue = _useControlledState4[1];
   var mergedValue = React.useMemo(function () {
     // Clean up `[null]`
     var values = (0, _miscUtil.toArray)(innerValue).filter(function (val) {
@@ -180,12 +173,10 @@ function PickerPanel(props, ref) {
 
   // >>> PickerValue
   // PickerValue is used to control the current displaying panel
-  var _useMergedState5 = (0, _util.useMergedState)(defaultPickerValue || mergedValue[0] || now, {
-      value: pickerValue
-    }),
-    _useMergedState6 = _slicedToArray(_useMergedState5, 2),
-    mergedPickerValue = _useMergedState6[0],
-    setInternalPickerValue = _useMergedState6[1];
+  var _useControlledState5 = (0, _util.useControlledState)(defaultPickerValue || mergedValue[0] || now, pickerValue),
+    _useControlledState6 = _slicedToArray(_useControlledState5, 2),
+    mergedPickerValue = _useControlledState6[0],
+    setInternalPickerValue = _useControlledState6[1];
   React.useEffect(function () {
     if (mergedValue[0] && !pickerValue) {
       setInternalPickerValue(mergedValue[0]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/picker",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "React date & time picker",
   "keywords": [
     "react",
@@ -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"
   },