@arco-design/mobile-react 2.35.2 → 2.36.1

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 _m = React.useState(userSetCurrentTs[1]),
+          rightTimeValue = _m[0],
+          setRightTimeValue = _m[1];
+
+      var _o = React.useState(0),
+          activeTabIndex = _o[0],
+          setActiveTabIndex = _o[1];
 
-      var currentTs = Math.min(maxTs, Math.max(minTs, userSetCurrentTs));
+      var _p = React.useMemo(function () {
+        return _updateTimeScope();
+      }, [userSetMinTs, userSetMaxTs, activeTabIndex]),
+          minTs = _p[0],
+          maxTs = _p[1];
 
-      var _l = React.useState([[]]),
-          data = _l[0],
-          setData = _l[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 _m = React.useState([]),
-          value = _m[0],
-          setValue = _m[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
@@ -16111,8 +16341,10 @@
             currentText += temp;
             l = m;
           }
-        } // Remove the exclude char at the end of the content.
+        } // Remove the last character if it is orphaned high-surrogate characters (indicative of incomplete emoji).
+
 
+        currentText = currentText.replace(/[\uD800-\uDBFF]+$/, ''); // Remove the exclude char at the end of the content.
 
         while (endExcludes && endExcludes.includes(currentText[currentText.length - 1])) {
           currentText = currentText.slice(0, -1);
@@ -17920,7 +18152,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) {
@@ -24617,20 +24853,38 @@
 
 
         if (verticalAuto) {
-          var popoverTop = childRect.bottom - (newConfig.bottom && newConfig.height ? newConfig.bottom + newConfig.height : 0);
-          var popoverBottom = childRect.top + (newConfig.top && newConfig.height ? newConfig.top + newConfig.height : 0); // 顶部安全距离不够，调整到底部
-          // @en The top safety distance is not enough, adjust to the bottom
-
-          if (directionState.indexOf('top') !== -1 && popoverTop < topOffset) {
+          var setToBottom = function setToBottom() {
             newConfig.top = verticalOffset + childRect.height;
             newConfig.bottom = null;
             onAdjustDirection('bottom');
-          } else if (directionState.indexOf('bottom') !== -1 && popoverBottom + bottomOffset > window.innerHeight) {
-            // 底部安全距离不够，调整到顶部
-            // @en The bottom safety distance is not enough, adjust to the top
+          };
+
+          var setToTop = function setToTop() {
             newConfig.top = null;
             newConfig.bottom = verticalOffset + childRect.height;
             onAdjustDirection('top');
+          }; // 判断上下空间是否都不足以展示气泡内容
+          // @en Determine whether there is insufficient space both above and below to display content
+
+
+          var isPopoverTooTall = window.innerHeight - topOffset - bottomOffset < 2 * (newConfig.height || 0) + 2 * verticalOffset + childRect.height;
+
+          if (isPopoverTooTall) {
+            var spaceAbove = childRect.top;
+            var spaceBelow = window.innerHeight - childRect.bottom;
+            spaceAbove > spaceBelow ? setToTop() : setToBottom();
+          } else {
+            var popoverTop = childRect.bottom - (newConfig.bottom && newConfig.height ? newConfig.bottom + newConfig.height : 0);
+            var popoverBottom = childRect.top + (newConfig.top && newConfig.height ? newConfig.top + newConfig.height : 0); // 顶部安全距离不够，调整到底部
+            // @en The top safety distance is not enough, adjust to the bottom
+
+            if (directionState.indexOf('top') !== -1 && popoverTop < topOffset) {
+              setToBottom();
+            } else if ( // 底部安全距离不够，调整到顶部
+            // @en The bottom safety distance is not enough, adjust to the top
+            directionState.indexOf('bottom') !== -1 && popoverBottom + bottomOffset > window.innerHeight) {
+              setToTop();
+            }
           }
         } // 挂载在全局的气泡需要计算相对屏幕的位置
         // @en Bubble mounted in the global needs to calculate the position relative to the screen
@@ -26762,8 +27016,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 +29056,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));