@arco-design/mobile-react 2.35.2 → 2.36.0

package/cjs/picker/index.js

@@ -38,7 +38,7 @@ Object.keys(_type).forEach(function (key) {
   if (key in exports && exports[key] === _type[key]) return;
   exports[key] = _type[key];
 });
-var _excluded = ["className", "itemStyle", "cascade", "cols", "rows", "data", "okText", "dismissText", "disabled", "clickable", "hideEmptyCols", "title", "visible", "value", "needBottomOffset", "onDismiss", "onOk", "onChange", "maskClosable", "onHide", "onPickerChange", "touchToStop", "gestureOutOfControl", "renderLinkedContainer"];
+var _excluded = ["className", "itemStyle", "cascade", "cols", "rows", "data", "okText", "dismissText", "disabled", "clickable", "hideEmptyCols", "title", "visible", "value", "needBottomOffset", "onDismiss", "onOk", "onChange", "maskClosable", "onHide", "onPickerChange", "touchToStop", "gestureOutOfControl", "renderLinkedContainer", "renderExtraHeader"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -79,6 +79,7 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       _props$gestureOutOfCo = props.gestureOutOfControl,
       gestureOutOfControl = _props$gestureOutOfCo === void 0 ? true : _props$gestureOutOfCo,
       renderLinkedContainer = props.renderLinkedContainer,
+      renderExtraHeader = props.renderExtraHeader,
       otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   var scrollValueRef = (0, _helpers.useLatestRef)(value);
   var domRef = (0, _react.useRef)(null);
@@ -225,7 +226,7 @@ var Picker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, title), /*#__PURE__*/_react.default.createElement("div", {
       className: prefixCls + "-picker-header-btn right",
       onClick: handleConfirm
-    }, okText || (locale == null ? void 0 : locale.Picker.okText))), /*#__PURE__*/_react.default.createElement(_pickerView.default, {
+    }, okText || (locale == null ? void 0 : locale.Picker.okText))), renderExtraHeader && renderExtraHeader(), /*#__PURE__*/_react.default.createElement(_pickerView.default, {
       ref: pickerViewRef,
       data: data,
       cascade: cascade,

package/cjs/picker/type.d.ts

@@ -128,4 +128,9 @@ export interface PickerProps extends Omit<PopupProps, 'visible' | 'close' | 'chi
      * @en Associate the hidden state of the picker and the display of the selected value with a container. After passing it in, the container and the picker component will be rendered at the same time. At this time, the visible and onHide attributes of the picker component are optional values. Clicking the container will evoke the picker
      */
     renderLinkedContainer?: (value: ValueType[], data: PickerData[]) => ReactNode;
+    /**
+     * 自定义头部扩展区域
+     * @en Define the area of extra header
+     */
+    renderExtraHeader?: () => ReactNode;
 }

package/cjs/search-bar/association.js

@@ -69,8 +69,8 @@ function SearchBarAssociation(props) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: index,
       className: searchBarAssociationPrefixCls + "-item",
-      onClick: function onClick() {
-        return onAssociationItemClick == null ? void 0 : onAssociationItemClick(item, index);
+      onClick: function onClick(e) {
+        return onAssociationItemClick == null ? void 0 : onAssociationItemClick(item, index, e);
       }
     }, node);
   };

package/cjs/search-bar/type.d.ts

@@ -57,7 +57,7 @@ export interface SearchBarAssociationProps<Data = Record<string, any>> {
      * 每行搜索结果的点击回调
      * @en Click callback for each row of search results
      */
-    onAssociationItemClick?: (item: SearchAssociationItem<Data>, index: number) => void;
+    onAssociationItemClick?: (item: SearchAssociationItem<Data>, index: number, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     /**
      * 搜索联想框整体被点击的回调
      * @en The callback for the overall click of the search association box

package/cjs/stepper/hooks/useValue.js

@@ -5,6 +5,8 @@ exports.default = useValue;
 
 var _react = require("react");
 
+var _es6Promise = require("es6-promise");
+
 function useValue(params) {
   var defaultValue = params.defaultValue,
       formatter = params.formatter,
@@ -21,7 +23,7 @@ function useValue(params) {
     var tempValue = typeof updater === 'function' ? updater(innerValue) : updater;
 
     if (formatter) {
-      new Promise(function (resolve) {
+      new _es6Promise.Promise(function (resolve) {
         resolve(formatter(Number(tempValue)));
       }).then(function (result) {
         var res = Math.max(min, Math.min(max, result));

package/cjs/tabs/index.js

@@ -439,7 +439,7 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         width = _getOffset.width,
         height = _getOffset.height;
 
-    cellRef.current && cellRef.current.resetUnderlineStyle();
+    cellRef.current && cellRef.current.updateLayout();
     setWrapWidth(width || ((_domRef$current = domRef.current) == null ? void 0 : _domRef$current.offsetWidth) || 0);
     setWrapHeight(height || ((_domRef$current2 = domRef.current) == null ? void 0 : _domRef$current2.offsetHeight) || 0);
     paneRef.current && paneRef.current.setCurrentHeight();

package/cjs/tabs/type.d.ts

@@ -561,8 +561,8 @@ export interface TabCellRef {
      */
     setCaterpillarAnimate: (ratio?: number) => void;
     /**
-     * 重新计算下划线样式
-     * @en Recalculate underline style
+     * 重新计算下划线样式（仅重算位置，如果 tab cell DOM 被人为改变，请调用 updateLayout）
+     * @en Recalculate underline style (only recalculate position, if the tab cell DOM is changed manually, please call updateLayout)
      */
     resetUnderlineStyle: () => void;
     /**

package/dist/index.js

@@ -1580,12 +1580,17 @@
     /**
      * 获取当前设备的操作系统
      * @desc {en} Get the operating system of the current device
-     * @returns {string} 返回当前设备的操作系统，可能的值包括 'android'、'ios' 或 'pc'，如果无法获取，则返回空字符串
-     * @returns {string} {en} Returns the operating system of the current device, possible values are 'android', 'ios', or 'pc'. Returns an empty string if it cannot be obtained
+     * @param options 配置选项
+     * @param {en} options Configuration options
+     * @param options.detectHarmony 是否识别鸿蒙系统，默认为 false，鸿蒙系统会被识别为 android
+     * @param {en} options.detectHarmony Whether to detect HarmonyOS separately, default is false, HarmonyOS will be recognized as android
+     * @returns 返回当前设备的操作系统，可能的值包括 'android'、'ios'、'harmony' 或 'pc'，如果无法获取，则返回空字符串
+     * @returns {en} Returns the operating system of the current device, possible values are 'android', 'ios', 'harmony', or 'pc'. Returns an empty string if it cannot be obtained
      * @example
      * ```
      * import { getSystem } from '@arco-design/mobile-utils';
      *
+     * // Default behavior
      * const systemInfo = getSystem();
      * if (systemInfo === 'android') {
      *     console.log('You are using the Android operating system');
@@ -1596,16 +1601,32 @@
      * } else {
      *     console.log('Unable to detect your operating system');
      * }
+     *
+     * // With HarmonyOS detection enabled
+     * const systemInfoWithHarmony = getSystem({ detectHarmony: true });
+     * if (systemInfoWithHarmony === 'harmony') {
+     *     console.log('You are using HarmonyOS');
+     * }
      * ```
      */
-    function getSystem() {
+    function getSystem(options) {
       try {
-        var u = navigator.userAgent;
-        var android = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
-        var ios = u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
-        var pc = !android && !ios;
-        var system = android ? 'android' : 'ios';
-        return pc ? 'pc' : system;
+        var u = navigator.userAgent; // Do not modify the Harmony OS ua judgment rule, please refer to the official documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-default-useragent
+
+        if (/OpenHarmony/i.test(u)) {
+          return (options === null || options === void 0 ? void 0 : options.detectHarmony) ? 'harmony' : 'android';
+        } // Do not ignore the case of the first letter
+
+
+        if (/Android|Linux/.test(u)) {
+          return 'android';
+        }
+
+        if (/\(i[^;]+;( U;)? CPU.+Mac OS X/.test(u)) {
+          return 'ios';
+        }
+
+        return 'pc';
       } catch (e) {
         return '';
       }
@@ -4124,27 +4145,34 @@
     /**
      * 从navigator.userAgent中获取当前操作系统，如果无法获取ua，则从ContextProvider传入的system中获取值
      * @desc {en} Get the current operating system from navigator.userAgent, if ua cannot be obtained, get the value from the system passed in by ContextProvider
-     * @returns system 操作系统，"" | "pc" | "android" | "ios"
+     * @param options 配置选项
+     * @param {en} options  Configuration options
+     * @param options.detectHarmony 是否识别鸿蒙系统，默认为 false，鸿蒙系统会被识别为 android
+     * @param {en} options.detectHarmony Whether to detect HarmonyOS separately, default is false, HarmonyOS will be recognized as android
+     * @returns 返回当前设备的操作系统，可能的值包括 'android'、'ios'、'harmony' 或 'pc'，如果无法获取，则返回空字符串
+     * @returns {en} Returns the operating system of the current device, possible values are 'android', 'ios', 'harmony', or 'pc'. Returns an empty string if it cannot be obtained
      * @example
      * ```
      * import { useSystem } from '@arco-design/mobile-react/esm/_helpers/hooks';
      *
      * const system = useSystem();
+     * // Or with options
+     * const systemWithHarmony = useSystem({ detectHarmony: true });
      * ```
      */
 
-    function useSystem() {
+    function useSystem(options) {
       var currentSystem = React.useContext(GlobalContext).system;
 
       var _a = React.useState(function () {
-        return currentSystem || getSystem();
+        return currentSystem || getSystem(options);
       }),
           system = _a[0],
           setSystem = _a[1];
 
       React.useEffect(function () {
-        setSystem(currentSystem || getSystem());
-      }, [currentSystem]);
+        setSystem(currentSystem || getSystem(options));
+      }, [currentSystem, options]);
       return system;
     }
     /**
@@ -6707,7 +6735,7 @@
             width = _c.width,
             height = _c.height;
 
-        cellRef.current && cellRef.current.resetUnderlineStyle();
+        cellRef.current && cellRef.current.updateLayout();
         setWrapWidth(width || ((_a = domRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0);
         setWrapHeight(height || ((_b = domRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0);
         paneRef.current && paneRef.current.setCurrentHeight();
@@ -13485,7 +13513,8 @@
           _k = props.gestureOutOfControl,
           gestureOutOfControl = _k === void 0 ? true : _k,
           renderLinkedContainer = props.renderLinkedContainer,
-          otherProps = __rest$1(props, ["className", "itemStyle", "cascade", "cols", "rows", "data", "okText", "dismissText", "disabled", "clickable", "hideEmptyCols", "title", "visible", "value", "needBottomOffset", "onDismiss", "onOk", "onChange", "maskClosable", "onHide", "onPickerChange", "touchToStop", "gestureOutOfControl", "renderLinkedContainer"]);
+          renderExtraHeader = props.renderExtraHeader,
+          otherProps = __rest$1(props, ["className", "itemStyle", "cascade", "cols", "rows", "data", "okText", "dismissText", "disabled", "clickable", "hideEmptyCols", "title", "visible", "value", "needBottomOffset", "onDismiss", "onOk", "onChange", "maskClosable", "onHide", "onPickerChange", "touchToStop", "gestureOutOfControl", "renderLinkedContainer", "renderExtraHeader"]);
 
       var scrollValueRef = useLatestRef(value);
       var domRef = React.useRef(null);
@@ -13632,7 +13661,7 @@
         }, title), /*#__PURE__*/React__default["default"].createElement("div", {
           className: prefixCls + "-picker-header-btn right",
           onClick: handleConfirm
-        }, okText || (locale === null || locale === void 0 ? void 0 : locale.Picker.okText))), /*#__PURE__*/React__default["default"].createElement(PickerView$1, {
+        }, okText || (locale === null || locale === void 0 ? void 0 : locale.Picker.okText))), renderExtraHeader && renderExtraHeader(), /*#__PURE__*/React__default["default"].createElement(PickerView$1, {
           ref: pickerViewRef,
           data: data,
           cascade: cascade,
@@ -13730,9 +13759,10 @@
           _e = props.typeArr,
           typeArr = _e === void 0 ? [] : _e,
           _f = props.minTs,
-          minTs = _f === void 0 ? initMinDate : _f,
+          userSetMinTs = _f === void 0 ? initMinDate : _f,
           _g = props.maxTs,
-          maxTs = _g === void 0 ? initMaxDate : _g,
+          userSetMaxTs = _g === void 0 ? initMaxDate : _g,
+          rangeItemFormat = props.rangeItemFormat,
           _h = props.formatter,
           formatter = _h === void 0 ? defaultFormatter : _h,
           _j = props.valueFilter,
@@ -13743,18 +13773,41 @@
           touchToStop = props.touchToStop,
           _k = props.useUTC,
           useUTC = _k === void 0 ? false : _k,
+          renderSeparator = props.renderSeparator,
           renderLinkedContainer = props.renderLinkedContainer,
-          otherProps = __rest$1(props, ["currentTs", "className", "visible", "onOk", "onChange", "onValueChange", "mode", "typeArr", "minTs", "maxTs", "formatter", "valueFilter", "columnsProcessor", "touchToStop", "useUTC", "renderLinkedContainer"]);
+          otherProps = __rest$1(props, ["currentTs", "className", "visible", "onOk", "onChange", "onValueChange", "mode", "typeArr", "minTs", "maxTs", "rangeItemFormat", "formatter", "valueFilter", "columnsProcessor", "touchToStop", "useUTC", "renderSeparator", "renderLinkedContainer"]);
+
+      var isRange = typeof userSetCurrentTs !== 'number';
+
+      var _l = React.useState(userSetCurrentTs[0]),
+          leftTimeValue = _l[0],
+          setLeftTimeValue = _l[1];
 
-      var currentTs = Math.min(maxTs, Math.max(minTs, userSetCurrentTs));
+      var _m = React.useState(userSetCurrentTs[1]),
+          rightTimeValue = _m[0],
+          setRightTimeValue = _m[1];
 
-      var _l = React.useState([[]]),
-          data = _l[0],
-          setData = _l[1];
+      var _o = React.useState(0),
+          activeTabIndex = _o[0],
+          setActiveTabIndex = _o[1];
 
-      var _m = React.useState([]),
-          value = _m[0],
-          setValue = _m[1];
+      var _p = React.useMemo(function () {
+        return _updateTimeScope();
+      }, [userSetMinTs, userSetMaxTs, activeTabIndex]),
+          minTs = _p[0],
+          maxTs = _p[1];
+
+      var _q = React.useState(isRange ? Math.min(maxTs, Math.max(minTs, userSetCurrentTs[0])) : Math.min(maxTs, Math.max(minTs, userSetCurrentTs))),
+          currentTs = _q[0],
+          setCurrentTs = _q[1];
+
+      var _r = React.useState([[]]),
+          data = _r[0],
+          setData = _r[1];
+
+      var _s = React.useState([]),
+          value = _s[0],
+          setValue = _s[1];
 
       var currentDateObjRef = React.useRef(_convertTsToDateObj(currentTs));
       var minDateObjRef = React.useRef(_convertTsToDateObj(minTs));
@@ -13762,7 +13815,37 @@
       var keyOptions = React.useMemo(function () {
         return _getKeyOptions();
       }, [mode, typeArr]);
+      var leftTimeString = React.useMemo(function () {
+        return _getRangeItemValue(leftTimeValue);
+      }, [leftTimeValue]);
+      var rightTimeString = React.useMemo(function () {
+        return _getRangeItemValue(rightTimeValue);
+      }, [rightTimeValue]);
       var pickerRef = React.useRef(null);
+
+      function _updateRangeValue(nowCurrentTs) {
+        var leftMinTs = typeof userSetMinTs !== 'number' ? userSetMinTs.startTs : userSetMinTs;
+        var rightMinTs = typeof userSetMinTs !== 'number' ? userSetMinTs.endTs : userSetMinTs;
+        var leftMaxTs = typeof userSetMaxTs !== 'number' ? userSetMaxTs.startTs : userSetMaxTs;
+        var rightMaxTs = typeof userSetMaxTs !== 'number' ? userSetMaxTs.endTs : userSetMaxTs;
+
+        if (isRange) {
+          var leftTime = void 0,
+              rightTime = void 0;
+
+          if (activeTabIndex === 0) {
+            leftTime = nowCurrentTs;
+            rightTime = Math.min(rightMaxTs, Math.max(Math.max(leftTime, rightMinTs), rightTimeValue));
+          } else {
+            rightTime = nowCurrentTs;
+            leftTime = Math.min(leftMaxTs, Math.max(leftMinTs, leftTimeValue));
+          }
+
+          setLeftTimeValue(leftTime);
+          setRightTimeValue(rightTime);
+        }
+      }
+
       React.useImperativeHandle(ref, function () {
         return {
           dom: pickerRef.current ? pickerRef.current.dom : null
@@ -13786,6 +13869,65 @@
         };
       }
 
+      function _parseFormat(format, timeValue) {
+        var year = timeValue.year,
+            month = timeValue.month,
+            date = timeValue.date,
+            hour = timeValue.hour,
+            minute = timeValue.minute,
+            second = timeValue.second;
+
+        var padZero = function padZero(num, targetLength) {
+          if (targetLength === void 0) {
+            targetLength = 2;
+          }
+
+          var str = "" + num;
+
+          while (str.length < targetLength) {
+            str = "0" + str;
+          }
+
+          return str;
+        };
+
+        var replace = function replace(formatArg, str, num) {
+          if (formatArg.includes(str)) {
+            return str !== 'Y' ? formatArg.replace(str.repeat(2), padZero(num)).replace(str, padZero(num)) : formatArg.replace(str.repeat(4), padZero(num)).replace(str.repeat(2), padZero(num)).replace(str, padZero(num));
+          }
+
+          return formatArg;
+        };
+
+        return [['Y', year], ['M', month], ['D', date], ['H', hour], ['m', minute], ['s', second]].reduce(function (current, item) {
+          return replace(current, item[0], item[1]);
+        }, format);
+      }
+
+      function _getRangeItemValue(time) {
+        var timeValue = _convertTsToDateObj(time);
+
+        if (!isRange) {
+          return;
+        }
+
+        if (rangeItemFormat) {
+          return _parseFormat(rangeItemFormat, timeValue);
+        }
+
+        var format = function format(options, joinString) {
+          return options.filter(function (option) {
+            return keyOptions.includes(option);
+          }).map(function (option) {
+            return timeValue[option] < 10 ? "0" + timeValue[option] : "" + timeValue[option];
+          }).join(joinString);
+        };
+
+        var datePart = format(['year', 'month', 'date'], '/');
+        var timePart = format(['hour', 'minute', 'second'], ':');
+        return datePart + (datePart && timePart && ' ') + timePart;
+      }
+
       function _getSelectValue(columns) {
         var val = keyOptions.map(function (opt, index) {
           var _a;
@@ -13916,7 +14058,7 @@
 
       function _handlePickerChange(values, index) {
         var type = keyOptions[index];
-        var nowDateObj = {};
+        var nowDateObj = currentDateObjRef.current;
         values.forEach(function (i, keyIndex) {
           nowDateObj[keyOptions[keyIndex]] = i;
         });
@@ -13944,18 +14086,35 @@
           setValue(val);
         }
 
+        setCurrentTs(_convertObjToTs(nowDateObj, currentTs));
+
         if (onValueChange) {
           onValueChange(_convertObjToTs(nowDateObj, currentTs), nowDateObj, index);
         }
       }
 
       function _handlePickerConfirm(values) {
-        var nowDateObj = {};
-        values.forEach(function (index, keyIndex) {
-          nowDateObj[keyOptions[keyIndex]] = index;
-        });
+        var nowDateObj;
+        var newTs;
 
-        var newTs = _convertObjToTs(nowDateObj, currentTs);
+        if (isRange) {
+          var leftTimeObj_1 = _convertTsToDateObj(leftTimeValue);
+
+          var rightTimeObj_1 = _convertTsToDateObj(rightTimeValue);
+
+          nowDateObj = keyOptions.reduce(function (arr, key) {
+            arr[0][key] = leftTimeObj_1[key];
+            arr[1][key] = rightTimeObj_1[key];
+            return arr;
+          }, [{}, {}]);
+          newTs = [_convertObjToTs(nowDateObj[0], currentTs), _convertObjToTs(nowDateObj[1], currentTs)];
+        } else {
+          nowDateObj = {};
+          values.forEach(function (index, keyIndex) {
+            nowDateObj[keyOptions[keyIndex]] = index;
+          });
+          newTs = _convertObjToTs(nowDateObj, currentTs);
+        }
 
         if (onOk) {
           onOk(newTs, nowDateObj);
@@ -13989,6 +14148,24 @@
         return options;
       }
 
+      function _updateTimeScope(isLeft) {
+        var nowMaxTs, nowMinTs;
+
+        if (isLeft || activeTabIndex === 0) {
+          nowMaxTs = typeof userSetMaxTs === 'number' ? userSetMaxTs : userSetMaxTs.startTs;
+          nowMinTs = Math.min(nowMaxTs, typeof userSetMinTs === 'number' ? userSetMinTs : userSetMinTs.startTs);
+        } else {
+          nowMinTs = Math.max(Math.min(typeof userSetMaxTs === 'number' ? userSetMaxTs : userSetMaxTs.startTs, leftTimeValue), typeof userSetMinTs === 'number' ? userSetMinTs : userSetMinTs.endTs);
+          nowMaxTs = Math.max(nowMinTs, typeof userSetMaxTs === 'number' ? userSetMaxTs : userSetMaxTs.endTs);
+        }
+
+        return [nowMinTs, nowMaxTs];
+      }
+
+      function _chooseTimeActive(index) {
+        setActiveTabIndex(index);
+      }
+
       React.useEffect(function () {
         minDateObjRef.current = _convertTsToDateObj(minTs);
         currentDateObjRef.current = _convertTsToDateObj(currentTs);
@@ -13996,9 +14173,45 @@
 
         _initData();
       }, [currentTs, minTs, maxTs, useUTC]);
+      React.useEffect(function () {
+        var nowCurrentTs;
+
+        if (isRange) {
+          nowCurrentTs = Math.min(maxTs, Math.max(minTs, activeTabIndex === 0 ? leftTimeValue : rightTimeValue));
+
+          if (currentTs === nowCurrentTs) {
+            _updateRangeValue(currentTs);
+          }
+        } else {
+          nowCurrentTs = Math.min(maxTs, Math.max(minTs, currentTs));
+        }
+
+        setCurrentTs(nowCurrentTs);
+      }, [minTs, maxTs]);
+      React.useEffect(function () {
+        _updateRangeValue(currentTs);
+      }, [currentTs]);
       React.useEffect(function () {
         if (visible) {
-          currentDateObjRef.current = _convertTsToDateObj(currentTs);
+          // 初始化当前时间
+          if (isRange) {
+            setActiveTabIndex(0);
+            setLeftTimeValue(userSetCurrentTs[0]);
+            setRightTimeValue(userSetCurrentTs[1]);
+
+            var _a = _updateTimeScope(true),
+                nowMinTs = _a[0],
+                nowMaxTs = _a[1];
+
+            var nowCurrentTs = Math.min(nowMaxTs, Math.max(nowMinTs, userSetCurrentTs[0]));
+            setCurrentTs(nowCurrentTs);
+
+            if (currentTs === nowCurrentTs) {
+              _updateRangeValue(currentTs);
+            }
+          } else {
+            setCurrentTs(Math.min(maxTs, Math.max(minTs, userSetCurrentTs)));
+          }
 
           _initData();
         }
@@ -14015,6 +14228,23 @@
           onPickerChange: _handlePickerChange,
           onOk: _handlePickerConfirm,
           touchToStop: touchToStop,
+          renderExtraHeader: isRange ? function () {
+            return /*#__PURE__*/React__default["default"].createElement("div", {
+              className: prefixCls + "-date-picker-show"
+            }, /*#__PURE__*/React__default["default"].createElement("span", {
+              className: cls("" + (activeTabIndex === 0 ? prefixCls + "-date-picker-range-item-active" : ''), prefixCls + "-date-picker-range-item"),
+              onClick: function onClick() {
+                return _chooseTimeActive(0);
+              }
+            }, leftTimeString), renderSeparator ? renderSeparator() : /*#__PURE__*/React__default["default"].createElement("span", {
+              className: prefixCls + "-date-picker-show-separate"
+            }, "~"), /*#__PURE__*/React__default["default"].createElement("span", {
+              className: cls("" + (activeTabIndex === 1 ? prefixCls + "-date-picker-range-item-active" : ''), prefixCls + "-date-picker-range-item"),
+              onClick: function onClick() {
+                return _chooseTimeActive(1);
+              }
+            }, rightTimeString));
+          } : undefined,
           renderLinkedContainer: renderLinkedContainer ? function () {
             return renderLinkedContainer(isEmptyValue(props.currentTs) ? undefined : currentTs, keyOptions);
           } : undefined
@@ -17920,7 +18150,11 @@
 
       var className = prefixCls + "-form-picker-link-container";
       var dateTimeStr = React.useMemo(function () {
-        return formatDateTimeStr(ts, types);
+        if (typeof ts === 'number') {
+          return formatDateTimeStr(ts, types);
+        }
+
+        return formatDateTimeStr(ts[0], types) + " ~ " + formatDateTimeStr(ts[1], types);
       }, [ts, types]);
 
       function formatDateTimeStr(timestamp, itemTypes) {
@@ -26762,8 +26996,8 @@
         return /*#__PURE__*/React__default["default"].createElement("div", {
           key: index,
           className: searchBarAssociationPrefixCls + "-item",
-          onClick: function onClick() {
-            return onAssociationItemClick === null || onAssociationItemClick === void 0 ? void 0 : onAssociationItemClick(item, index);
+          onClick: function onClick(e) {
+            return onAssociationItemClick === null || onAssociationItemClick === void 0 ? void 0 : onAssociationItemClick(item, index, e);
           }
         }, node);
       };
@@ -28802,7 +29036,7 @@
         var tempValue = typeof updater === 'function' ? updater(innerValue) : updater;
 
         if (formatter) {
-          new Promise(function (resolve) {
+          new es6Promise.Promise(function (resolve) {
             resolve(formatter(Number(tempValue)));
           }).then(function (result) {
             var res = Math.max(min, Math.min(max, result));