@arco-design/mobile-react 2.25.4 → 2.27.0

package/umd/tabs/tab-cell-underline.js

@@ -14,42 +14,52 @@
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
   _exports.__esModule = true;
   _exports.default = void 0;
   _extends2 = _interopRequireDefault(_extends2);
   _react = _interopRequireWildcard(_react);
+
   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); }
+
   function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
   var TabCellUnderline = /*#__PURE__*/(0, _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;
+        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,
+        underlineAdaptive = props.underlineAdaptive,
+        renderUnderline = props.renderUnderline,
+        getTabRect = props.getTabRect,
+        getTabCenterLeft = props.getTabCenterLeft;
+
     var _useState = (0, _react.useState)({}),
-      underlineStyle = _useState[0],
-      setUnderlineStyle = _useState[1];
+        underlineStyle = _useState[0],
+        setUnderlineStyle = _useState[1];
+
     var _useRefState = (0, _helpers.useRefState)(false),
-      caterpillar = _useRefState[0],
-      caterpillarRef = _useRefState[1],
-      setCaterpillar = _useRefState[2];
+        caterpillar = _useRefState[0],
+        caterpillarRef = _useRefState[1],
+        setCaterpillar = _useRefState[2];
+
     var _useState2 = (0, _react.useState)(0),
-      caterpillarDelay = _useState2[0],
-      setCaterpillarDelay = _useState2[1];
+        caterpillarDelay = _useState2[0],
+        setCaterpillarDelay = _useState2[1];
+
     var lineRef = (0, _react.useRef)(null);
     var timeRef = (0, _react.useRef)(0);
     var system = (0, _helpers.useSystem)();
@@ -66,24 +76,30 @@
       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]);
     (0, _react.useEffect)(function () {
       if (!animationKey) {
         return;
       }
+
       var dir = isVertical ? 'X' : 'Y';
+
       if (caterpillarProperty === 'size') {
         var attr = isVertical ? 'width' : 'height';
         (0, _mobileUtils.addCssKeyframes)(animationKey, "{\n                        0% {\n                            " + attr + ": 100%;\n                        }\n                        50% {\n                            " + attr + ": " + 100 * maxScaleWithDefault + "%;\n                        }\n                        100% {\n                            " + attr + ": 100%;\n                        }\n                    }");
         return;
       }
+
       (0, _mobileUtils.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 () {
         (0, _mobileUtils.removeCssStyleDom)(animationKey);
@@ -97,40 +113,79 @@
     }, [jumpingDis]);
     (0, _react.useEffect)(function () {
       resetUnderlineStyle();
-    }, [useCaterpillar, caterpillar, cellTrans, duration, tabDirection, wrapWidth, wrapHeight, distance, animationKey, caterpillarDelay]);
-    function getLineLeft(index) {
+    }, [useCaterpillar, caterpillar, cellTrans, duration, tabDirection, wrapWidth, wrapHeight, distance, animationKey, caterpillarDelay, underlineSize, underlineThick, underlineAdaptive]);
+
+    function getLineWidth(index) {
       var _lineRef$current, _lineRef$current2;
+
+      if (underlineAdaptive) {
+        return getTabRect(index).width;
+      }
+
       var offsetSize = isVertical ? (_lineRef$current = lineRef.current) == null ? void 0 : _lineRef$current.offsetWidth : (_lineRef$current2 = lineRef.current) == null ? void 0 : _lineRef$current2.offsetHeight;
       var lineWidth = offsetSize || 0;
+      return lineWidth;
+    }
+
+    function getLineLeft(index) {
+      if (underlineAdaptive) {
+        return getTabRect(index).left;
+      }
+
+      var lineWidth = getLineWidth(index);
       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 _ref;
+
       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' ? (_ref = {}, _ref[isVertical ? 'width' : 'height'] = 100 * getLineScale(moveRatio) + "%", _ref.willChange = 'width', _ref) : {
+      var transStyle = useCaterpillar && !jumpingDis && !underlineAdaptive ? caterpillarProperty === 'size' ? (_ref = {}, _ref[isVertical ? 'width' : 'height'] = 100 * getLineScale(moveRatio) + "%", _ref.willChange = 'width', _ref) : {
         transform: "scale" + direc + "(" + getLineScale(moveRatio) + ")"
       } : {};
+      var adaptiveStyle = {};
+      var adaptiveOuterStyle = {};
+
+      if (underlineAdaptive) {
+        var _adaptiveStyle;
+
+        var currentWidth = getLineWidth(activeIndex);
+        var descWidth = getLineWidth(descIndex);
+        var widthOffset = moveRatio * (currentWidth - descWidth);
+        adaptiveStyle = (_adaptiveStyle = {}, _adaptiveStyle[isVertical ? 'width' : 'height'] = distance > 0 ? currentWidth - widthOffset : currentWidth + widthOffset, _adaptiveStyle.willChange = 'width', _adaptiveStyle);
+        adaptiveOuterStyle = isVertical ? {
+          width: 'auto'
+        } : {
+          height: 'auto'
+        };
+      }
+
       var outerSize = isVertical ? {
         width: underlineSize,
         height: underlineThick
@@ -141,21 +196,28 @@
       return {
         outer: (0, _extends2.default)({
           transform: "translate" + direc + "(" + (distance > 0 ? currentLeft - leftOffset : currentLeft + leftOffset) + "px)" + translateZStr
-        }, outerSize),
-        inner: (0, _extends2.default)({}, transStyle)
+        }, outerSize, adaptiveOuterStyle),
+        inner: (0, _extends2.default)({}, transStyle, adaptiveStyle)
       };
     }
+
     function getUnderlineStyle() {
       var transStyle = {};
-      if (useCaterpillar) {
-        transStyle.animationDuration = duration + "ms";
-      }
-      if (caterpillarRef.current && animationKey) {
-        transStyle.animationName = animationKey;
-      }
-      if (caterpillarDelay) {
-        transStyle.animationDelay = "-" + caterpillarDelay + "ms";
+
+      if (!underlineAdaptive) {
+        if (useCaterpillar) {
+          transStyle.animationDuration = duration + "ms";
+        }
+
+        if (caterpillarRef.current && animationKey) {
+          transStyle.animationName = animationKey;
+        }
+
+        if (caterpillarDelay) {
+          transStyle.animationDelay = "-" + caterpillarDelay + "ms";
+        }
       }
+
       var lineStyle = getLineStyle();
       return {
         outer: (0, _helpers.getStyleWithVendor)((0, _extends2.default)({
@@ -164,29 +226,36 @@
         inner: (0, _helpers.getStyleWithVendor)((0, _extends2.default)({}, 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);
       (0, _mobileUtils.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.createElement(_react.default.Fragment, null, renderUnderline(underlineStyle, showLine, lineRef)) : /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _mobileUtils.cls)(prefix + "-underline", {
         show: showLine

package/umd/tabs/tab-cell.js

@@ -14,81 +14,91 @@
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
   _exports.__esModule = true;
   _exports.default = void 0;
   _extends2 = _interopRequireDefault(_extends2);
   _react = _interopRequireWildcard(_react);
   _tabCellUnderline = _interopRequireDefault(_tabCellUnderline);
+
   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); }
+
   function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
   var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var tabs = props.tabs,
-      prefixCls = props.prefixCls,
-      activeIndex = props.activeIndex,
-      activeIndexRef = props.activeIndexRef,
-      tabDirection = props.tabDirection,
-      type = props.type,
-      onTabClick = props.onTabClick,
-      changeIndex = props.changeIndex,
-      tabBarPosition = props.tabBarPosition,
-      tabBarArrange = props.tabBarArrange,
-      tabBarScroll = props.tabBarScroll,
-      tabBarFixed = props.tabBarFixed,
-      renderUnderline = props.renderUnderline,
-      duration = props.duration,
-      transitionDuration = props.transitionDuration,
-      useCaterpillar = props.useCaterpillar,
-      wrapWidth = props.wrapWidth,
-      wrapHeight = props.wrapHeight,
-      cellTrans = props.cellTrans,
-      distance = props.distance,
-      jumpingDis = props.jumpingDis,
-      tabBarExtra = props.tabBarExtra,
-      onTabBarOverflowChange = props.onTabBarOverflowChange,
-      tabBarGutter = props.tabBarGutter,
-      tabBarPadding = props.tabBarPadding,
-      underlineSize = props.underlineSize,
-      underlineThick = props.underlineThick,
-      underlineInnerStyle = props.underlineInnerStyle,
-      caterpillarMaxScale = props.caterpillarMaxScale,
-      caterpillarProperty = props.caterpillarProperty,
-      onTabBarScroll = props.onTabBarScroll,
-      hideTabBarBeforeMounted = props.hideTabBarBeforeMounted,
-      _props$overflowThresh = props.overflowThreshold,
-      overflowThreshold = _props$overflowThresh === void 0 ? 5 : _props$overflowThresh,
-      tabBarScrollBezier = props.tabBarScrollBezier,
-      tabBarScrollDuration = props.tabBarScrollDuration,
-      tabBarScrollChance = props.tabBarScrollChance,
-      tabBarHasDivider = props.tabBarHasDivider,
-      showUnderline = props.showUnderline,
-      disabled = props.disabled,
-      renderTabBarItem = props.renderTabBarItem,
-      renderTabBarInner = props.renderTabBarInner,
-      tabBarStyle = props.tabBarStyle,
-      tabBarClass = props.tabBarClass,
-      translateZ = props.translateZ,
-      tabBarStopPropagation = props.tabBarStopPropagation;
+        prefixCls = props.prefixCls,
+        activeIndex = props.activeIndex,
+        activeIndexRef = props.activeIndexRef,
+        tabDirection = props.tabDirection,
+        type = props.type,
+        onTabClick = props.onTabClick,
+        changeIndex = props.changeIndex,
+        tabBarPosition = props.tabBarPosition,
+        tabBarArrange = props.tabBarArrange,
+        tabBarScroll = props.tabBarScroll,
+        tabBarFixed = props.tabBarFixed,
+        renderUnderline = props.renderUnderline,
+        duration = props.duration,
+        transitionDuration = props.transitionDuration,
+        useCaterpillar = props.useCaterpillar,
+        wrapWidth = props.wrapWidth,
+        wrapHeight = props.wrapHeight,
+        cellTrans = props.cellTrans,
+        distance = props.distance,
+        jumpingDis = props.jumpingDis,
+        tabBarExtra = props.tabBarExtra,
+        onTabBarOverflowChange = props.onTabBarOverflowChange,
+        tabBarGutter = props.tabBarGutter,
+        tabBarPadding = props.tabBarPadding,
+        underlineSize = props.underlineSize,
+        underlineThick = props.underlineThick,
+        underlineInnerStyle = props.underlineInnerStyle,
+        caterpillarMaxScale = props.caterpillarMaxScale,
+        caterpillarProperty = props.caterpillarProperty,
+        onTabBarScroll = props.onTabBarScroll,
+        hideTabBarBeforeMounted = props.hideTabBarBeforeMounted,
+        _props$overflowThresh = props.overflowThreshold,
+        overflowThreshold = _props$overflowThresh === void 0 ? 5 : _props$overflowThresh,
+        tabBarScrollBezier = props.tabBarScrollBezier,
+        tabBarScrollDuration = props.tabBarScrollDuration,
+        tabBarScrollChance = props.tabBarScrollChance,
+        tabBarHasDivider = props.tabBarHasDivider,
+        showUnderline = props.showUnderline,
+        underlineAdaptive = props.underlineAdaptive,
+        disabled = props.disabled,
+        renderTabBarItem = props.renderTabBarItem,
+        renderTabBarInner = props.renderTabBarInner,
+        tabBarStyle = props.tabBarStyle,
+        tabBarClass = props.tabBarClass,
+        translateZ = props.translateZ,
+        tabBarStopPropagation = props.tabBarStopPropagation;
     var prefix = prefixCls + "-tab-cell";
     var domRef = (0, _react.useRef)(null);
     var underlineRef = (0, _react.useRef)(null);
     var allCellRectRef = (0, _react.useRef)([]);
+
     var _useState = (0, _react.useState)(false),
-      showLine = _useState[0],
-      setShowLine = _useState[1];
+        showLine = _useState[0],
+        setShowLine = _useState[1];
+
     var _useState2 = (0, _react.useState)(false),
-      hasOverflow = _useState2[0],
-      setHasOverflow = _useState2[1];
+        hasOverflow = _useState2[0],
+        setHasOverflow = _useState2[1];
+
     var _useState3 = (0, _react.useState)(function () {
-        return tabs.length < overflowThreshold ? tabBarArrange : 'start';
-      }),
-      originArrange = _useState3[0],
-      setOriginArrange = _useState3[1];
-    // 默认tab小于overflowThreshold个时不开启加载前隐藏，大于overflowThreshold个时开启
+      return tabs.length < overflowThreshold ? tabBarArrange : 'start';
+    }),
+        originArrange = _useState3[0],
+        setOriginArrange = _useState3[1]; // 默认tab小于overflowThreshold个时不开启加载前隐藏，大于overflowThreshold个时开启
+
+
     var _useState4 = (0, _react.useState)(function () {
-        return hideTabBarBeforeMounted === void 0 ? tabs.length < overflowThreshold || activeIndex === 0 : !hideTabBarBeforeMounted;
-      }),
-      showTab = _useState4[0],
-      setShowTab = _useState4[1];
+      return hideTabBarBeforeMounted === void 0 ? tabs.length < overflowThreshold || activeIndex === 0 : !hideTabBarBeforeMounted;
+    }),
+        showTab = _useState4[0],
+        setShowTab = _useState4[1];
+
     var isVertical = tabDirection === 'vertical';
     var isLine = (type || '').indexOf('line') !== -1;
     var isCard = type === 'card';
@@ -96,6 +106,7 @@
      * 非card类型才有间隙和两侧留白
      * @en Non-card types have gaps and blank on both sides
      */
+
     var cellPadding = isCard ? void 0 : tabBarPadding;
     var cellGutter = isCard ? void 0 : tabBarGutter;
     var hasDivider = tabBarHasDivider === void 0 ? isLine : tabBarHasDivider;
@@ -103,12 +114,12 @@
     var system = (0, _helpers.useSystem)();
     (0, _react.useEffect)(function () {
       (0, _mobileUtils.nextTick)(function () {
-        setCellOverflow();
-        // dom出来之后originArrange置空，交由tabBarArrange控制
+        setCellOverflow(); // dom出来之后originArrange置空，交由tabBarArrange控制
         // @en After the dom comes out, originArrange is left empty and controlled by tabBarArrange
-        setOriginArrange(void 0);
-        // dom出来了才知道布局，计算完成后展示出来防止跳动的情况
+
+        setOriginArrange(void 0); // dom出来了才知道布局，计算完成后展示出来防止跳动的情况
         // @en The layout is determined only when the dom comes out. It is displayed to prevent the jumping after the calculation is completed
+
         setShowTab(true);
         setShowLine(true);
       });
@@ -116,6 +127,7 @@
     (0, _react.useEffect)(function () {
       (0, _mobileUtils.nextTick)(function () {
         var _underlineRef$current;
+
         (_underlineRef$current = underlineRef.current) == null ? void 0 : _underlineRef$current.resetUnderlineStyle();
       });
     }, [activeIndex, tabs, getCellPadding('left'), getCellPadding('right'), tabBarGutter, tabDirection]);
@@ -127,10 +139,12 @@
         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();
         }
       };
@@ -143,16 +157,18 @@
       }
     }, [activeIndex, wrapSize]);
     (0, _react.useEffect)(function () {
-      tabBarScrollChance !== 'none' && scrollToCenter(true);
-      // TabCell左右可滚动时，防止触发父级touchmove事件导致滚不动
+      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
+
       var stopFunc = function stopFunc(e) {
         return e.stopPropagation();
       };
+
       if (isVertical && hasOverflow && domRef.current && tabBarStopPropagation) {
         domRef.current.addEventListener('touchstart', stopFunc);
         domRef.current.addEventListener('touchmove', stopFunc);
       }
+
       return function () {
         if (isVertical && hasOverflow && domRef.current && tabBarStopPropagation) {
           domRef.current.removeEventListener('touchstart', stopFunc);
@@ -160,35 +176,43 @@
         }
       };
     }, [hasOverflow]);
+
     function setCellOverflow() {
       var overflow = false;
+
       if (domRef.current) {
         overflow = isVertical ? domRef.current.scrollWidth > domRef.current.offsetWidth : domRef.current.scrollHeight > domRef.current.offsetHeight;
       }
+
       if (overflow !== hasOverflow) {
         onTabBarOverflowChange && onTabBarOverflowChange(overflow);
       }
+
       setHasOverflow(overflow);
     }
+
     function scrollToCenter(rightNow) {
       if (!wrapSize || !hasOverflow) {
         return;
       }
+
       var currentTabLeft = getTabCenterLeft(activeIndexRef.current);
       var newLeft = currentTabLeft - wrapSize / 2;
       scrollTo(newLeft, rightNow);
     }
+
     function scrollTo(position, rightNow) {
       if (!domRef.current) {
         return;
       }
-      var needRafScroll = false;
-      // 部分安卓机在动画和raf同时执行时会卡顿
+
+      var needRafScroll = false; // 部分安卓机在动画和raf同时执行时会卡顿
       // @en Some Android machines will freeze when animation and raf are executed at the same time
       // 如果是安卓机，且对滚动的时长和变化曲线无要求时，优先用原生顺滑滚动
       // @en If it is an Android device, and there is no requirement for the scrolling duration and change curve, the native smooth scrolling is preferred
       // 当浏览器不支持原生顺滑滚动，或对上述滚动参数有要求时，用raf滚动兜底
       // @en When the browser does not support native smooth scrolling, or there are requirements for the above scrolling parameters, use raf to scroll the bottom line
+
       if (system === 'android' && tabBarScrollBezier === void 0 && tabBarScrollDuration === void 0) {
         try {
           var disObj = isVertical ? {
@@ -205,6 +229,7 @@
       } else {
         needRafScroll = true;
       }
+
       if (needRafScroll) {
         (0, _mobileUtils.scrollWithAnimation)(isVertical ? domRef.current.scrollLeft : domRef.current.scrollTop, position, function (top) {
           if (domRef.current) {
@@ -217,44 +242,63 @@
         }, rightNow ? 0 : tabBarScrollDuration, tabBarScrollBezier);
       }
     }
-    function getTabCenterLeft(index) {
+
+    function getTabRect(index) {
       var currentTab = allCellRectRef.current[index] || {};
-      var currentTabWidth = (isVertical ? currentTab.width : currentTab.height) || 0;
-      var currentTabLeft = (isVertical ? currentTab.left : currentTab.top) || 0;
+      return {
+        left: (isVertical ? currentTab.left : currentTab.top) || 0,
+        width: (isVertical ? currentTab.width : currentTab.height) || 0
+      };
+    }
+
+    function getTabCenterLeft(index) {
+      var _getTabRect = getTabRect(index),
+          currentTabLeft = _getTabRect.left,
+          currentTabWidth = _getTabRect.width;
+
       return currentTabLeft + currentTabWidth / 2;
     }
+
     function getCellPadding(pType) {
       if (typeof cellPadding === 'object') {
         return cellPadding[pType];
       }
+
       return cellPadding;
     }
+
     function getCellStyle(index) {
       if (!isVertical) {
         return {};
       }
+
       if (index === 0) {
         return {
           marginRight: cellGutter,
           marginLeft: getCellPadding('left')
         };
       }
+
       return {
         marginRight: index === tabs.length - 1 ? void 0 : cellGutter
       };
     }
+
     function renderBarItem(tab, index) {
       if (renderTabBarItem) {
         return renderTabBarItem(tab, index, {
           active: index === activeIndex
         });
       }
+
       return typeof tab === 'string' ? tab : tab.title;
     }
+
     function renderTabUnderline() {
       if (!showUnderline || !isLine) {
         return null;
       }
+
       var lineProps = {
         prefix: prefix,
         showLine: showLine,
@@ -273,13 +317,16 @@
         translateZ: translateZ,
         underlineSize: underlineSize,
         underlineThick: underlineThick,
+        underlineAdaptive: underlineAdaptive,
         renderUnderline: renderUnderline
       };
       return /*#__PURE__*/_react.default.createElement(_tabCellUnderline.default, (0, _extends2.default)({
         ref: underlineRef,
-        getTabCenterLeft: getTabCenterLeft
+        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", {
         key: index,
@@ -297,6 +344,7 @@
           if (disabled) {
             return;
           }
+
           changeIndex(index, 'click');
           onTabClick && onTabClick(tab, index, e);
         },
@@ -319,6 +367,7 @@
         height: '100%'
       }
     }) : null);
+
     return /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _mobileUtils.cls)(prefix + "-container-wrap", tabDirection, "type-" + type, tabBarClass, system),
       style: tabBarStyle