@arco-design/mobile-react 2.30.9 → 2.30.10

package/umd/tabs/tab-cell.js

@@ -94,14 +94,18 @@
       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;
@@ -116,6 +120,15 @@
     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控制
@@ -135,31 +148,16 @@
         (_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
@@ -300,7 +298,7 @@
       return typeof tab === 'string' ? tab : tab.title;
     }
 
-    function renderTabUnderline() {
+    var renderTabUnderline = function renderTabUnderline() {
       if (!showUnderline || !isLine) {
         return null;
       }
@@ -331,7 +329,7 @@
         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", {
@@ -374,6 +372,33 @@
       }
     }) : 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/umd/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;