@arco-design/mobile-react 2.21.1 → 2.21.3

package/dist/index.js

@@ -6529,6 +6529,220 @@
       Group: Group$1
     });
 
+    var TabCellUnderline = /*#__PURE__*/React.forwardRef(function (props, ref) {
+      var prefix = props.prefix,
+          useCaterpillar = props.useCaterpillar,
+          distance = props.distance,
+          tabDirection = props.tabDirection,
+          underlineInnerStyle = props.underlineInnerStyle,
+          duration = props.duration,
+          cellTrans = props.cellTrans,
+          showLine = props.showLine,
+          activeIndex = props.activeIndex,
+          wrapWidth = props.wrapWidth,
+          wrapHeight = props.wrapHeight,
+          jumpingDis = props.jumpingDis,
+          translateZ = props.translateZ,
+          caterpillarMaxScale = props.caterpillarMaxScale,
+          caterpillarProperty = props.caterpillarProperty,
+          underlineSize = props.underlineSize,
+          underlineThick = props.underlineThick,
+          renderUnderline = props.renderUnderline,
+          getTabCenterLeft = props.getTabCenterLeft;
+
+      var _a = React.useState({}),
+          underlineStyle = _a[0],
+          setUnderlineStyle = _a[1];
+
+      var _b = useRefState(false),
+          caterpillar = _b[0],
+          caterpillarRef = _b[1],
+          setCaterpillar = _b[2];
+
+      var _c = React.useState(0),
+          caterpillarDelay = _c[0],
+          setCaterpillarDelay = _c[1];
+
+      var lineRef = React.useRef(null);
+      var timeRef = React.useRef(0);
+      var system = useSystem();
+      var isVertical = tabDirection === 'vertical';
+      var maxScaleWithDefault = caterpillarMaxScale || 2;
+      var translateZStr = translateZ ? ' translateZ(0)' : '';
+      React.useImperativeHandle(ref, function () {
+        return {
+          setCaterpillarAnimate: setCaterpillarAnimate,
+          resetUnderlineStyle: resetUnderlineStyle
+        };
+      }, [setCaterpillarAnimate, resetUnderlineStyle]);
+      var animationKey = React.useMemo(function () {
+        if (!useCaterpillar) {
+          return '';
+        }
+
+        if (caterpillarProperty === 'size') {
+          return "tabsCaterpillar" + (isVertical ? 'W' : 'H') + maxScaleWithDefault;
+        }
+
+        if (caterpillarMaxScale) {
+          return "tabsCaterpillar" + (isVertical ? 'X' : 'Y') + caterpillarMaxScale;
+        }
+
+        return '';
+      }, [useCaterpillar, isVertical, caterpillarMaxScale, caterpillarProperty]);
+      React.useEffect(function () {
+        if (!animationKey) {
+          return;
+        }
+
+        var dir = isVertical ? 'X' : 'Y';
+
+        if (caterpillarProperty === 'size') {
+          var attr = isVertical ? 'width' : 'height';
+          addCssKeyframes(animationKey, "{\n                        0% {\n                            " + attr + ": 100%;\n                        }\n                        50% {\n                            " + attr + ": " + 100 * maxScaleWithDefault + "%;\n                        }\n                        100% {\n                            " + attr + ": 100%;\n                        }\n                    }");
+          return;
+        }
+
+        addCssKeyframes(animationKey, "{\n                    0% {\n                        transform: scale" + dir + "(1)" + translateZStr + ";\n                        -webkit-transform: scale" + dir + "(1)" + translateZStr + ";\n                    }\n                    50% {\n                        transform: scale" + dir + "(" + caterpillarMaxScale + ")" + translateZStr + ";\n                        -webkit-transform: scale" + dir + "(" + caterpillarMaxScale + ")" + translateZStr + ";\n                    }\n                    100% {\n                        transform: scale" + dir + "(1)" + translateZStr + ";\n                        -webkit-transform: scale" + dir + "(1)" + translateZStr + ";\n                    }\n                }");
+        return function () {
+          removeCssStyleDom(animationKey);
+        };
+      }, [animationKey]);
+      React.useEffect(function () {
+        if (jumpingDis && useCaterpillar && system !== 'ios') {
+          var movedRatio = wrapWidth ? jumpingDis / wrapWidth : 0;
+          setCaterpillarAnimate(movedRatio);
+        }
+      }, [jumpingDis]);
+      React.useEffect(function () {
+        resetUnderlineStyle();
+      }, [useCaterpillar, caterpillar, cellTrans, duration, tabDirection, wrapWidth, wrapHeight, distance, animationKey, caterpillarDelay]);
+
+      function getLineLeft(index) {
+        var _a, _b;
+
+        var offsetSize = isVertical ? (_a = lineRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth : (_b = lineRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight;
+        var lineWidth = offsetSize || 0;
+        return getTabCenterLeft(index) - lineWidth / 2;
+      }
+
+      function getDescIndex() {
+        if (distance > 0) {
+          return activeIndex - 1;
+        }
+
+        if (distance < 0) {
+          return activeIndex + 1;
+        }
+
+        return activeIndex;
+      }
+
+      function getLineScale(ratio) {
+        var absRatio = Math.abs(ratio);
+        return absRatio > 0.5 ? (1 - absRatio) * 2 * (maxScaleWithDefault - 1) + 1 : absRatio * 2 * (maxScaleWithDefault - 1) + 1;
+      }
+
+      function getLineStyle() {
+        var _a;
+
+        if (!lineRef.current) {
+          return {};
+        }
+
+        var currentLeft = getLineLeft(activeIndex);
+        var descIndex = getDescIndex();
+        var descLeft = getLineLeft(descIndex);
+        var moveRatio = wrapWidth ? distance / wrapWidth : 0;
+        var leftOffset = moveRatio * (currentLeft - descLeft);
+        var direc = isVertical ? 'X' : 'Y';
+        var transStyle = useCaterpillar && !jumpingDis ? caterpillarProperty === 'size' ? (_a = {}, _a[isVertical ? 'width' : 'height'] = 100 * getLineScale(moveRatio) + "%", _a.willChange = 'width', _a) : {
+          transform: "scale" + direc + "(" + getLineScale(moveRatio) + ")"
+        } : {};
+        var outerSize = isVertical ? {
+          width: underlineSize,
+          height: underlineThick
+        } : {
+          height: underlineSize,
+          width: underlineThick
+        };
+        return {
+          outer: __assign({
+            transform: "translate" + direc + "(" + (distance > 0 ? currentLeft - leftOffset : currentLeft + leftOffset) + "px)" + translateZStr
+          }, outerSize),
+          inner: __assign({}, transStyle)
+        };
+      }
+
+      function getUnderlineStyle() {
+        var transStyle = {};
+
+        if (useCaterpillar) {
+          transStyle.animationDuration = duration + "ms";
+        }
+
+        if (caterpillarRef.current && animationKey) {
+          transStyle.animationName = animationKey;
+        }
+
+        if (caterpillarDelay) {
+          transStyle.animationDelay = "-" + caterpillarDelay + "ms";
+        }
+
+        var lineStyle = getLineStyle();
+        return {
+          outer: getStyleWithVendor(__assign({
+            transitionDuration: cellTrans ? duration + "ms" : '0ms'
+          }, lineStyle.outer || {})),
+          inner: getStyleWithVendor(__assign(__assign({}, transStyle), lineStyle.inner || {}))
+        };
+      }
+
+      function resetUnderlineStyle() {
+        setUnderlineStyle(getUnderlineStyle());
+      }
+
+      function setCaterpillarAnimate(movedRatio) {
+        if (movedRatio === void 0) {
+          movedRatio = 0;
+        }
+
+        if (!duration) {
+          return;
+        }
+
+        var movedTime = (duration || 0) * Math.abs(movedRatio);
+        setCaterpillarDelay(movedTime);
+        nextTick(function () {
+          setCaterpillar(true);
+        });
+
+        if (timeRef.current) {
+          clearTimeout(timeRef.current);
+        }
+
+        timeRef.current = window.setTimeout(function () {
+          setCaterpillar(false);
+          setCaterpillarDelay(0);
+        }, (duration || 0) - movedTime + 20);
+      }
+
+      return renderUnderline ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderUnderline(underlineStyle, showLine, lineRef)) : /*#__PURE__*/React__default["default"].createElement("div", {
+        className: cls(prefix + "-underline", {
+          show: showLine
+        }),
+        ref: lineRef,
+        style: underlineStyle.outer
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: cls(prefix + "-underline-inner", {
+          caterpillar: caterpillar,
+          'custom-animate': animationKey,
+          'caterpillar-moving': caterpillar || useCaterpillar && distance
+        }, tabDirection),
+        style: __assign(__assign({}, underlineStyle.inner || {}), underlineInnerStyle || {})
+      }));
+    });
+
     var TabCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var tabs = props.tabs,
           prefixCls = props.prefixCls,
@@ -6577,43 +6791,29 @@
           translateZ = props.translateZ;
       var prefix = prefixCls + "-tab-cell";
       var domRef = React.useRef(null);
-      var lineRef = React.useRef(null);
-      var timeRef = React.useRef(0);
+      var underlineRef = React.useRef(null);
       var allCellRectRef = React.useRef([]);
 
-      var _b = React.useState({}),
-          underlineStyle = _b[0],
-          setUnderlineStyle = _b[1];
-
-      var _c = useRefState(false),
-          caterpillar = _c[0],
-          caterpillarRef = _c[1],
-          setCaterpillar = _c[2];
-
-      var _d = React.useState(0),
-          caterpillarDelay = _d[0],
-          setCaterpillarDelay = _d[1];
+      var _b = React.useState(false),
+          showLine = _b[0],
+          setShowLine = _b[1];
 
-      var _e = React.useState(false),
-          hasOverflow = _e[0],
-          setHasOverflow = _e[1];
+      var _c = React.useState(false),
+          hasOverflow = _c[0],
+          setHasOverflow = _c[1];
 
-      var _f = React.useState(function () {
+      var _d = React.useState(function () {
         return tabs.length < overflowThreshold ? tabBarArrange : 'start';
       }),
-          originArrange = _f[0],
-          setOriginArrange = _f[1]; // 默认tab小于overflowThreshold个时不开启加载前隐藏，大于overflowThreshold个时开启
+          originArrange = _d[0],
+          setOriginArrange = _d[1]; // 默认tab小于overflowThreshold个时不开启加载前隐藏，大于overflowThreshold个时开启
 
 
-      var _g = React.useState(function () {
+      var _e = React.useState(function () {
         return hideTabBarBeforeMounted === void 0 ? tabs.length < overflowThreshold || activeIndex === 0 : !hideTabBarBeforeMounted;
       }),
-          showTab = _g[0],
-          setShowTab = _g[1];
-
-      var _h = React.useState(false),
-          showLine = _h[0],
-          setShowLine = _h[1];
+          showTab = _e[0],
+          setShowTab = _e[1];
 
       var isVertical = tabDirection === 'vertical';
       var isLine = (type || '').indexOf('line') !== -1;
@@ -6627,42 +6827,7 @@
       var cellGutter = isCard ? void 0 : tabBarGutter;
       var hasDivider = tabBarHasDivider === void 0 ? isLine : tabBarHasDivider;
       var wrapSize = isVertical ? wrapWidth : wrapHeight;
-      var translateZStr = translateZ ? ' translateZ(0)' : '';
       var system = useSystem();
-      var maxScaleWithDefault = caterpillarMaxScale || 2;
-      var animationKey = React.useMemo(function () {
-        if (!showUnderline || !useCaterpillar) {
-          return '';
-        }
-
-        if (caterpillarProperty === 'size') {
-          return "tabsCaterpillar" + (isVertical ? 'W' : 'H') + maxScaleWithDefault;
-        }
-
-        if (caterpillarMaxScale) {
-          return "tabsCaterpillar" + (isVertical ? 'X' : 'Y') + caterpillarMaxScale;
-        }
-
-        return '';
-      }, [showUnderline, useCaterpillar, isVertical, caterpillarMaxScale, caterpillarProperty]);
-      React.useEffect(function () {
-        if (!animationKey) {
-          return;
-        }
-
-        var dir = isVertical ? 'X' : 'Y';
-
-        if (caterpillarProperty === 'size') {
-          var attr = isVertical ? 'width' : 'height';
-          addCssKeyframes(animationKey, "{\n                    0% {\n                        " + attr + ": 100%;\n                    }\n                    50% {\n                        " + attr + ": " + 100 * maxScaleWithDefault + "%;\n                    }\n                    100% {\n                        " + attr + ": 100%;\n                    }\n                }");
-          return;
-        }
-
-        addCssKeyframes(animationKey, "{\n                0% {\n                    transform: scale" + dir + "(1)" + translateZStr + ";\n                    -webkit-transform: scale" + dir + "(1)" + translateZStr + ";\n                }\n                50% {\n                    transform: scale" + dir + "(" + caterpillarMaxScale + ")" + translateZStr + ";\n                    -webkit-transform: scale" + dir + "(" + caterpillarMaxScale + ")" + translateZStr + ";\n                }\n                100% {\n                    transform: scale" + dir + "(1)" + translateZStr + ";\n                    -webkit-transform: scale" + dir + "(1)" + translateZStr + ";\n                }\n            }");
-        return function () {
-          removeCssStyleDom(animationKey);
-        };
-      }, [animationKey]);
       React.useEffect(function () {
         nextTick(function () {
           setCellOverflow(); // dom出来之后originArrange置空，交由tabBarArrange控制
@@ -6675,12 +6840,11 @@
           setShowLine(true);
         });
       }, [domRef.current, wrapSize, tabs]);
-      React.useEffect(function () {
-        resetUnderlineStyle();
-      }, [useCaterpillar, caterpillar, cellTrans, duration, tabDirection, wrapWidth, wrapHeight, distance, animationKey, caterpillarDelay]);
       React.useEffect(function () {
         nextTick(function () {
-          resetUnderlineStyle();
+          var _a;
+
+          (_a = underlineRef.current) === null || _a === void 0 ? void 0 : _a.resetUnderlineStyle();
         });
       }, [activeIndex, tabs, getCellPadding('left'), getCellPadding('right'), tabBarGutter, tabDirection]);
       React.useImperativeHandle(ref, function () {
@@ -6689,10 +6853,18 @@
           scrollTo: scrollTo,
           scrollToCenter: scrollToCenter,
           hasOverflow: hasOverflow,
-          setCaterpillarAnimate: setCaterpillarAnimate,
-          resetUnderlineStyle: resetUnderlineStyle
+          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, setCaterpillarAnimate, resetUnderlineStyle]);
+      }, [scrollToCenter, scrollTo, hasOverflow]);
       React.useEffect(function () {
         if (wrapSize && tabBarScrollChance !== 'none') {
           setTimeout(function () {
@@ -6720,16 +6892,6 @@
           }
         };
       }, [hasOverflow]);
-      React.useEffect(function () {
-        if (jumpingDis && useCaterpillar && system !== 'ios') {
-          var movedRatio = wrapWidth ? jumpingDis / wrapWidth : 0;
-          setCaterpillarAnimate(movedRatio);
-        }
-      }, [jumpingDis]);
-
-      function resetUnderlineStyle() {
-        setUnderlineStyle(getUnderlineStyle());
-      }
 
       function setCellOverflow() {
         var overflow = false;
@@ -6797,69 +6959,6 @@
         }
       }
 
-      function getUnderlineStyle() {
-        var transStyle = {};
-
-        if (useCaterpillar) {
-          transStyle.animationDuration = duration + "ms";
-        }
-
-        if (caterpillarRef.current && animationKey) {
-          transStyle.animationName = animationKey;
-        }
-
-        if (caterpillarDelay) {
-          transStyle.animationDelay = "-" + caterpillarDelay + "ms";
-        }
-
-        var lineStyle = getLineStyle();
-        return {
-          outer: getStyleWithVendor(__assign({
-            transitionDuration: cellTrans ? duration + "ms" : '0ms'
-          }, lineStyle.outer || {})),
-          inner: getStyleWithVendor(__assign(__assign({}, transStyle), lineStyle.inner || {}))
-        };
-      }
-
-      function getLineStyle() {
-        var _a;
-
-        if (!lineRef.current || !domRef.current) {
-          return {};
-        }
-
-        var currentLeft = getLineLeft(activeIndex);
-        var descIndex = getDescIndex();
-        var descLeft = getLineLeft(descIndex);
-        var moveRatio = wrapWidth ? distance / wrapWidth : 0;
-        var leftOffset = moveRatio * (currentLeft - descLeft);
-        var direc = isVertical ? 'X' : 'Y';
-        var transStyle = useCaterpillar && !jumpingDis ? caterpillarProperty === 'size' ? (_a = {}, _a[isVertical ? 'width' : 'height'] = 100 * getLineScale(moveRatio) + "%", _a.willChange = 'width', _a) : {
-          transform: "scale" + direc + "(" + getLineScale(moveRatio) + ")"
-        } : {};
-        var outerSize = isVertical ? {
-          width: underlineSize,
-          height: underlineThick
-        } : {
-          height: underlineSize,
-          width: underlineThick
-        };
-        return {
-          outer: __assign({
-            transform: "translate" + direc + "(" + (distance > 0 ? currentLeft - leftOffset : currentLeft + leftOffset) + "px)" + translateZStr
-          }, outerSize),
-          inner: __assign({}, transStyle)
-        };
-      }
-
-      function getLineLeft(index) {
-        var _a, _b;
-
-        var offsetSize = isVertical ? (_a = lineRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth : (_b = lineRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight;
-        var lineWidth = offsetSize || 0;
-        return getTabCenterLeft(index) - lineWidth / 2;
-      }
-
       function getTabCenterLeft(index) {
         var currentTab = allCellRectRef.current[index] || {};
         var currentTabWidth = (isVertical ? currentTab.width : currentTab.height) || 0;
@@ -6867,48 +6966,6 @@
         return currentTabLeft + currentTabWidth / 2;
       }
 
-      function getLineScale(ratio) {
-        var absRatio = Math.abs(ratio);
-        return absRatio > 0.5 ? (1 - absRatio) * 2 * (maxScaleWithDefault - 1) + 1 : absRatio * 2 * (maxScaleWithDefault - 1) + 1;
-      }
-
-      function getDescIndex() {
-        if (distance > 0) {
-          return activeIndex - 1;
-        }
-
-        if (distance < 0) {
-          return activeIndex + 1;
-        }
-
-        return activeIndex;
-      }
-
-      function setCaterpillarAnimate(movedRatio) {
-        if (movedRatio === void 0) {
-          movedRatio = 0;
-        }
-
-        if (!duration) {
-          return;
-        }
-
-        var movedTime = (duration || 0) * Math.abs(movedRatio);
-        setCaterpillarDelay(movedTime);
-        nextTick(function () {
-          setCaterpillar(true);
-        });
-
-        if (timeRef.current) {
-          clearTimeout(timeRef.current);
-        }
-
-        timeRef.current = window.setTimeout(function () {
-          setCaterpillar(false);
-          setCaterpillarDelay(0);
-        }, (duration || 0) - movedTime + 20);
-      }
-
       function getCellPadding(pType) {
         if (typeof cellPadding === 'object') {
           return cellPadding[pType];
@@ -6949,20 +7006,30 @@
           return null;
         }
 
-        return renderUnderline ? renderUnderline(underlineStyle, showLine, lineRef) : /*#__PURE__*/React__default["default"].createElement("div", {
-          className: cls(prefix + "-underline", {
-            show: showLine
-          }),
-          ref: lineRef,
-          style: underlineStyle.outer
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: cls(prefix + "-underline-inner", {
-            caterpillar: caterpillar,
-            'custom-animate': animationKey,
-            'caterpillar-moving': caterpillar || useCaterpillar && distance
-          }, tabDirection),
-          style: __assign(__assign({}, underlineStyle.inner || {}), underlineInnerStyle || {})
-        }));
+        var lineProps = {
+          prefix: prefix,
+          showLine: showLine,
+          useCaterpillar: useCaterpillar,
+          distance: distance,
+          tabDirection: tabDirection,
+          underlineInnerStyle: underlineInnerStyle,
+          cellTrans: cellTrans,
+          duration: duration,
+          activeIndex: activeIndex,
+          wrapWidth: wrapWidth,
+          wrapHeight: wrapHeight,
+          jumpingDis: jumpingDis,
+          caterpillarMaxScale: caterpillarMaxScale,
+          caterpillarProperty: caterpillarProperty,
+          translateZ: translateZ,
+          underlineSize: underlineSize,
+          underlineThick: underlineThick,
+          renderUnderline: renderUnderline
+        };
+        return /*#__PURE__*/React__default["default"].createElement(TabCellUnderline, __assign({
+          ref: underlineRef,
+          getTabCenterLeft: getTabCenterLeft
+        }, lineProps));
       }
 
       var cellInner = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, tabs.map(function (tab, index) {
@@ -12086,7 +12153,13 @@
             var height = container.getBoundingClientRect().height;
 
             if (height > max) {
-              break;
+              if (nodes[i].childNodes && nodes[i].childNodes.length) {
+                break;
+              } else {
+                textContainer.removeChild(nodes[i]);
+                handleOnReflow(true, textContainer.innerHTML);
+                return;
+              }
             }
 
             i++;