@arco-design/mobile-react 2.30.8 → 2.30.10

package/cjs/tabs/tab-cell.js

@@ -90,14 +90,18 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return tabs.length < overflowThreshold ? tabBarArrange : 'start';
   }),
       originArrange = _useState3[0],
-      setOriginArrange = _useState3[1]; // 默认tab小于overflowThreshold个时不开启加载前隐藏，大于overflowThreshold个时开启
+      setOriginArrange = _useState3[1];
 
+  var _useState4 = (0, _react.useState)(false),
+      forceUpdate = _useState4[0],
+      setForceUpdate = _useState4[1]; // 默认tab小于overflowThreshold个时不开启加载前隐藏，大于overflowThreshold个时开启
 
-  var _useState4 = (0, _react.useState)(function () {
+
+  var _useState5 = (0, _react.useState)(function () {
     return hideTabBarBeforeMounted === void 0 ? tabs.length < overflowThreshold || activeIndex === 0 : !hideTabBarBeforeMounted;
   }),
-      showTab = _useState4[0],
-      setShowTab = _useState4[1];
+      showTab = _useState5[0],
+      setShowTab = _useState5[1];
 
   var isVertical = tabDirection === 'vertical';
   var isLine = (type || '').indexOf('line') !== -1;
@@ -112,6 +116,15 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var hasDivider = tabBarHasDivider === void 0 ? isLine : tabBarHasDivider;
   var wrapSize = isVertical ? wrapWidth : wrapHeight;
   var system = (0, _helpers.useSystem)();
+
+  var updateScrollPosition = function updateScrollPosition() {
+    if (wrapSize && tabBarScrollChance !== 'none') {
+      setTimeout(function () {
+        scrollToCenter();
+      }, tabBarScrollChance === 'after-jump' ? Math.max(transitionDuration || 0, duration || 0) : 0);
+    }
+  };
+
   (0, _react.useEffect)(function () {
     (0, _mobileUtils.nextTick)(function () {
       setCellOverflow(); // dom出来之后originArrange置空，交由tabBarArrange控制
@@ -131,31 +144,16 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       (_underlineRef$current = underlineRef.current) == null ? void 0 : _underlineRef$current.resetUnderlineStyle();
     });
   }, [activeIndex, tabs, getCellPadding('left'), getCellPadding('right'), tabBarGutter, tabDirection]);
-  (0, _react.useImperativeHandle)(ref, function () {
-    return {
-      dom: domRef.current,
-      scrollTo: scrollTo,
-      scrollToCenter: scrollToCenter,
-      hasOverflow: hasOverflow,
-      setCaterpillarAnimate: function setCaterpillarAnimate(ratio) {
-        var _underlineRef$current2;
-
-        return (_underlineRef$current2 = underlineRef.current) == null ? void 0 : _underlineRef$current2.setCaterpillarAnimate(ratio);
-      },
-      resetUnderlineStyle: function resetUnderlineStyle() {
-        var _underlineRef$current3;
-
-        return (_underlineRef$current3 = underlineRef.current) == null ? void 0 : _underlineRef$current3.resetUnderlineStyle();
-      }
-    };
-  }, [scrollToCenter, scrollTo, hasOverflow]);
   (0, _react.useEffect)(function () {
-    if (wrapSize && tabBarScrollChance !== 'none') {
-      setTimeout(function () {
-        scrollToCenter();
-      }, tabBarScrollChance === 'after-jump' ? Math.max(transitionDuration || 0, duration || 0) : 0);
-    }
+    updateScrollPosition();
   }, [activeIndex, wrapSize]);
+  (0, _react.useEffect)(function () {
+    var _underlineRef$current2;
+
+    setCellOverflow();
+    (_underlineRef$current2 = underlineRef.current) == null ? void 0 : _underlineRef$current2.resetUnderlineStyle();
+    updateScrollPosition();
+  }, [forceUpdate]);
   (0, _react.useEffect)(function () {
     tabBarScrollChance !== 'none' && scrollToCenter(true); // TabCell左右可滚动时，防止触发父级touchmove事件导致滚不动
     // @en When the TabCell can be scrolled left and right, prevent the parent touchmove event from being triggered which result in inability to scroll
@@ -296,7 +294,7 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return typeof tab === 'string' ? tab : tab.title;
   }
 
-  function renderTabUnderline() {
+  var renderTabUnderline = function renderTabUnderline() {
     if (!showUnderline || !isLine) {
       return null;
     }
@@ -327,7 +325,7 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       getTabCenterLeft: getTabCenterLeft,
       getTabRect: getTabRect
     }, lineProps));
-  }
+  };
 
   var cellInner = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tabs.map(function (tab, index) {
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -370,6 +368,33 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }) : null);
 
+  var _updateLayout = function updateLayout() {
+    setForceUpdate(function (val) {
+      return !val;
+    });
+  };
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: domRef.current,
+      scrollTo: scrollTo,
+      scrollToCenter: scrollToCenter,
+      hasOverflow: hasOverflow,
+      setCaterpillarAnimate: function setCaterpillarAnimate(ratio) {
+        var _underlineRef$current3;
+
+        return (_underlineRef$current3 = underlineRef.current) == null ? void 0 : _underlineRef$current3.setCaterpillarAnimate(ratio);
+      },
+      resetUnderlineStyle: function resetUnderlineStyle() {
+        var _underlineRef$current4;
+
+        return (_underlineRef$current4 = underlineRef.current) == null ? void 0 : _underlineRef$current4.resetUnderlineStyle();
+      },
+      updateLayout: function updateLayout() {
+        return _updateLayout();
+      }
+    };
+  }, [scrollToCenter, scrollTo, hasOverflow]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _mobileUtils.cls)(prefix + "-container-wrap", tabDirection, "type-" + type, tabBarClass, system),
     style: tabBarStyle

package/cjs/tabs/type.d.ts

@@ -565,6 +565,11 @@ export interface TabCellRef {
      * @en Recalculate underline style
      */
     resetUnderlineStyle: () => void;
+    /**
+     * 强制更新 tab-cell
+     * @en Force update tab-cell
+     */
+    updateLayout: () => void;
 }
 export interface TabPaneProps extends Pick<TabsProps, 'duration' | 'transitionDuration' | 'lazyloadCount' | 'hideContentStyle' | 'renderHideContent' | 'mode' | 'tabPaneClass' | 'tabPaneStyle' | 'tabPaneExtra' | 'getScrollContainer' | 'scrollThrottle' | 'scrollOffset' | 'goLastWhenScrollBottom' | 'scrollVertical' | 'translateZ' | 'fullScreen' | 'autoHeight' | 'onScroll' | 'swipeEnergySaving'> {
     prefixCls?: string;

package/dist/index.js

@@ -126,7 +126,7 @@
      * ```
      */
 
-    function isArray(obj) {
+    function isArray$1(obj) {
       return opt.call(obj) === '[object Array]';
     }
     /**
@@ -237,7 +237,7 @@
      */
 
     function isEmptyArray(obj) {
-      return isArray(obj) && !(obj === null || obj === void 0 ? void 0 : obj.length);
+      return isArray$1(obj) && !(obj === null || obj === void 0 ? void 0 : obj.length);
     }
     /**
      * 深比较两个对象是否相等
@@ -312,7 +312,7 @@
 
         if (isString(v)) {
           classNames.push(v);
-        } else if (isArray(v)) {
+        } else if (isArray$1(v)) {
           classNames = classNames.concat(v);
         } else if (isObject$2(v)) {
           Object.keys(v).forEach(function (k) {
@@ -3652,7 +3652,7 @@
           Object.keys(this.rules).forEach(function (key) {
             var spPromiseGroup = [];
 
-            if (isArray(_this.rules[key])) {
+            if (isArray$1(_this.rules[key])) {
               for (var i = 0; i < _this.rules[key].length; i++) {
                 var rule = _this.rules[key][i];
 
@@ -5132,14 +5132,18 @@
         return tabs.length < overflowThreshold ? tabBarArrange : 'start';
       }),
           originArrange = _d[0],
-          setOriginArrange = _d[1]; // 默认tab小于overflowThreshold个时不开启加载前隐藏，大于overflowThreshold个时开启
+          setOriginArrange = _d[1];
+
+      var _e = React.useState(false),
+          forceUpdate = _e[0],
+          setForceUpdate = _e[1]; // 默认tab小于overflowThreshold个时不开启加载前隐藏，大于overflowThreshold个时开启
 
 
-      var _e = React.useState(function () {
+      var _f = React.useState(function () {
         return hideTabBarBeforeMounted === void 0 ? tabs.length < overflowThreshold || activeIndex === 0 : !hideTabBarBeforeMounted;
       }),
-          showTab = _e[0],
-          setShowTab = _e[1];
+          showTab = _f[0],
+          setShowTab = _f[1];
 
       var isVertical = tabDirection === 'vertical';
       var isLine = (type || '').indexOf('line') !== -1;
@@ -5154,6 +5158,15 @@
       var hasDivider = tabBarHasDivider === void 0 ? isLine : tabBarHasDivider;
       var wrapSize = isVertical ? wrapWidth : wrapHeight;
       var system = useSystem();
+
+      var updateScrollPosition = function updateScrollPosition() {
+        if (wrapSize && tabBarScrollChance !== 'none') {
+          setTimeout(function () {
+            scrollToCenter();
+          }, tabBarScrollChance === 'after-jump' ? Math.max(transitionDuration || 0, duration || 0) : 0);
+        }
+      };
+
       React.useEffect(function () {
         nextTick(function () {
           setCellOverflow(); // dom出来之后originArrange置空，交由tabBarArrange控制
@@ -5173,31 +5186,16 @@
           (_a = underlineRef.current) === null || _a === void 0 ? void 0 : _a.resetUnderlineStyle();
         });
       }, [activeIndex, tabs, getCellPadding('left'), getCellPadding('right'), tabBarGutter, tabDirection]);
-      React.useImperativeHandle(ref, function () {
-        return {
-          dom: domRef.current,
-          scrollTo: scrollTo,
-          scrollToCenter: scrollToCenter,
-          hasOverflow: hasOverflow,
-          setCaterpillarAnimate: function setCaterpillarAnimate(ratio) {
-            var _a;
-
-            return (_a = underlineRef.current) === null || _a === void 0 ? void 0 : _a.setCaterpillarAnimate(ratio);
-          },
-          resetUnderlineStyle: function resetUnderlineStyle() {
-            var _a;
-
-            return (_a = underlineRef.current) === null || _a === void 0 ? void 0 : _a.resetUnderlineStyle();
-          }
-        };
-      }, [scrollToCenter, scrollTo, hasOverflow]);
       React.useEffect(function () {
-        if (wrapSize && tabBarScrollChance !== 'none') {
-          setTimeout(function () {
-            scrollToCenter();
-          }, tabBarScrollChance === 'after-jump' ? Math.max(transitionDuration || 0, duration || 0) : 0);
-        }
+        updateScrollPosition();
       }, [activeIndex, wrapSize]);
+      React.useEffect(function () {
+        var _a;
+
+        setCellOverflow();
+        (_a = underlineRef.current) === null || _a === void 0 ? void 0 : _a.resetUnderlineStyle();
+        updateScrollPosition();
+      }, [forceUpdate]);
       React.useEffect(function () {
         tabBarScrollChance !== 'none' && scrollToCenter(true); // TabCell左右可滚动时，防止触发父级touchmove事件导致滚不动
         // @en When the TabCell can be scrolled left and right, prevent the parent touchmove event from being triggered which result in inability to scroll
@@ -5336,7 +5334,7 @@
         return typeof tab === 'string' ? tab : tab.title;
       }
 
-      function renderTabUnderline() {
+      var renderTabUnderline = function renderTabUnderline() {
         if (!showUnderline || !isLine) {
           return null;
         }
@@ -5367,7 +5365,7 @@
           getTabCenterLeft: getTabCenterLeft,
           getTabRect: getTabRect
         }, lineProps));
-      }
+      };
 
       var cellInner = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, tabs.map(function (tab, index) {
         return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -5409,6 +5407,34 @@
           height: '100%'
         }
       }) : null);
+
+      var _updateLayout = function updateLayout() {
+        setForceUpdate(function (val) {
+          return !val;
+        });
+      };
+
+      React.useImperativeHandle(ref, function () {
+        return {
+          dom: domRef.current,
+          scrollTo: scrollTo,
+          scrollToCenter: scrollToCenter,
+          hasOverflow: hasOverflow,
+          setCaterpillarAnimate: function setCaterpillarAnimate(ratio) {
+            var _a;
+
+            return (_a = underlineRef.current) === null || _a === void 0 ? void 0 : _a.setCaterpillarAnimate(ratio);
+          },
+          resetUnderlineStyle: function resetUnderlineStyle() {
+            var _a;
+
+            return (_a = underlineRef.current) === null || _a === void 0 ? void 0 : _a.resetUnderlineStyle();
+          },
+          updateLayout: function updateLayout() {
+            return _updateLayout();
+          }
+        };
+      }, [scrollToCenter, scrollTo, hasOverflow]);
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: cls(prefix + "-container-wrap", tabDirection, "type-" + type, tabBarClass, system),
         style: tabBarStyle
@@ -8556,10 +8582,13 @@
       });
     }
 
+    var renderRootCache = {};
+
     var ReactDOMRender =
     /** @class */
     function () {
-      function ReactDOMRender(app, container, context) {
+      function ReactDOMRender(app, container, context, rootCacheId, // root id in cache
+      root) {
         var _this = this;
 
         this.render = function (props) {
@@ -8576,16 +8605,32 @@
           }
         };
 
+        this.setRootCache = function () {
+          if (_this.rootCacheId) {
+            renderRootCache[_this.rootCacheId] = _this.root;
+          }
+        };
+
+        this.clearRootCache = function () {
+          if (_this.rootCacheId) {
+            delete renderRootCache[_this.rootCacheId];
+          }
+        };
+
         this.unmount = function () {
           var _a;
 
           (_a = _this.root) === null || _a === void 0 ? void 0 : _a._unmount();
           _this.root = undefined;
+
+          _this.clearRootCache();
         };
 
         this.app = app;
         this.container = container;
         this.context = context;
+        this.rootCacheId = rootCacheId;
+        this.root = root;
       }
 
       return ReactDOMRender;
@@ -8608,9 +8653,14 @@
 
 
         var id = "_" + (containerId || 'ARCO_MASKING') + "_DIV_" + (config.key || '') + "_";
-        var div = appendElementById(id, baseProps.getContainer).child;
+        var existedDiv = baseProps.unmountOnExit ? null : document.getElementById(id);
+        var div = existedDiv || appendElementById(id, baseProps.getContainer).child;
         var leaving = false;
-        var render = new ReactDOMRender(Component, div, context).render;
+
+        var _a = new ReactDOMRender(Component, div, context, id, existedDiv ? renderRootCache[id] : undefined),
+            render = _a.render,
+            unmount = _a.unmount,
+            setRootCache = _a.setRootCache;
 
         var dynamicProps = __assign$3(__assign$3({}, baseProps), {
           getContainer: function getContainer() {
@@ -8635,11 +8685,17 @@
           baseProps.onClose && baseProps.onClose(scene);
 
           if (baseProps.unmountOnExit) {
+            unmount();
             removeElement(div);
           }
         };
 
         render(dynamicProps);
+
+        if (!baseProps.unmountOnExit) {
+          setRootCache();
+        }
+
         nextTick(function () {
           if (leaving) return;
           dynamicProps.visible = true;
@@ -10687,6 +10743,9 @@
 
       function getFakeChild() {
         if (noLoop) {
+          // 循环状态从有到无时，重置 transforms
+          // @en reset transforms when loop status changes to false
+          setTransforms([]);
           return;
         }
 
@@ -12768,6 +12827,10 @@
         return (_a = data[currentIndex]) === null || _a === void 0 ? void 0 : _a.value;
       }
 
+      function getCurrentCellData() {
+        return data[currentIndex];
+      }
+
       function _clearTimer() {
         timeRef.current && clearTimeout(timeRef.current);
         timeRef.current = null;
@@ -12835,7 +12898,8 @@
         return {
           movingStatus: movingStatusRef.current,
           scrollToCurrentIndex: scrollToCurrentIndex,
-          getCurrentCellValue: getCurrentCellValue
+          getCurrentCellValue: getCurrentCellValue,
+          getCurrentCellData: getCurrentCellData
         };
       });
       return !hideEmptyCols || data && data.length ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -12886,7 +12950,8 @@
         return {
           getCellMovingStatus: getCellMovingStatus,
           scrollToCurrentIndex: scrollToCurrentIndex,
-          getAllCellsValue: getAllCellsValue
+          getAllCellsValue: getAllCellsValue,
+          getAllCellsData: getAllCellsData
         };
       });
 
@@ -12908,6 +12973,12 @@
         });
       }
 
+      function getAllCellsData() {
+        return pickerCellsRef.current.map(function (cell) {
+          return cell.getCurrentCellData();
+        });
+      }
+
       function _onValueChange(value, index, newData) {
         var children = arrayTreeFilter(data, function (item, level) {
           return level <= index && item.value === value[level];
@@ -12976,6 +13047,14 @@
       }));
     });
 
+    var isArray = function isArray(dt) {
+      return dt ? Array.isArray(dt[0]) : false;
+    };
+
+    var isStrOrNum = function isStrOrNum(dt) {
+      return typeof dt[0][0] === 'string' || typeof dt[0][0] === 'number';
+    };
+
     var PickerView = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var _a = props.className,
           className = _a === void 0 ? '' : _a,
@@ -13025,14 +13104,6 @@
       var innerData = React.useMemo(function () {
         var newData;
 
-        var isArray = function isArray(dt) {
-          return dt ? Array.isArray(dt[0]) : false;
-        };
-
-        var isStrOrNum = function isStrOrNum(dt) {
-          return typeof dt[0][0] === 'string' || typeof dt[0][0] === 'number';
-        };
-
         if (isArray(data)) {
           if (isStrOrNum(data)) {
             newData = data.map(function (item) {
@@ -13066,6 +13137,17 @@
         });
       };
 
+      var getAllColumnData = function getAllColumnData() {
+        var _a;
+
+        var curValues = cascade ? ((_a = cascaderRef.current) === null || _a === void 0 ? void 0 : _a.getAllCellsData()) || [] : pickerCellsRef.current.map(function (cell) {
+          return cell.getCurrentCellData();
+        });
+        return curValues.filter(function (v) {
+          return v !== undefined;
+        });
+      };
+
       function getColumnValue(index) {
         if (index === void 0) {
           index = 0;
@@ -13103,7 +13185,8 @@
           getColumnValue: getColumnValue,
           updateLayout: updateLayout,
           resetValue: resetValue,
-          scrollToCurrentIndex: scrollToCurrentIndex
+          scrollToCurrentIndex: scrollToCurrentIndex,
+          getAllColumnData: getAllColumnData
         };
       });
 
@@ -13304,12 +13387,13 @@
 
         (_a = pickerViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollToCurrentIndex();
         nextTick(function () {
-          var _a;
+          var _a, _b;
 
           var val = ((_a = pickerViewRef.current) === null || _a === void 0 ? void 0 : _a.getAllColumnValues()) || scrollValueRef.current || [];
+          var selectedData = ((_b = pickerViewRef.current) === null || _b === void 0 ? void 0 : _b.getAllColumnData()) || [];
 
           if (onOk) {
-            onOk(val);
+            onOk(val, selectedData);
           }
 
           if (onChange) {
@@ -14427,7 +14511,7 @@
      * */
 
     function isCascadeArray(options) {
-      return typeof options[0] === 'object' && !isArray(options[0]);
+      return typeof options[0] === 'object' && !isArray$1(options[0]);
     }
     /**
      * 格式化传入的数组
@@ -20680,9 +20764,7 @@
 
     function open$1(Component) {
       return function (config, context) {
-        var baseProps = __assign$3(__assign$3({
-          unmountOnExit: true
-        }, config || {}), {
+        var baseProps = __assign$3(__assign$3({}, config || {}), {
           close: function close() {}
         }); // 不同的key用不同的容器挂载
         // @en Different keys are mounted in different containers
@@ -20714,10 +20796,7 @@
 
         dynamicProps.onClose = function () {
           baseProps.onClose && baseProps.onClose();
-
-          if (baseProps.unmountOnExit) {
-            removeElement(div);
-          }
+          removeElement(div);
         };
 
         dynamicProps.openIndex = -1;
@@ -27316,7 +27395,7 @@
       });
 
       var getWidth = function getWidth(idx) {
-        if (isArray(width)) {
+        if (isArray$1(width)) {
           return width[idx];
         }