@arco-design/mobile-react 2.21.2 → 2.21.3

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

@@ -0,0 +1,242 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../_helpers"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../_helpers"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._extends, global.react, global.mobileUtils, global._helpers);
+    global.tabCellUnderline = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _helpers) {
+  "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;
+
+    var _useState = (0, _react.useState)({}),
+        underlineStyle = _useState[0],
+        setUnderlineStyle = _useState[1];
+
+    var _useRefState = (0, _helpers.useRefState)(false),
+        caterpillar = _useRefState[0],
+        caterpillarRef = _useRefState[1],
+        setCaterpillar = _useRefState[2];
+
+    var _useState2 = (0, _react.useState)(0),
+        caterpillarDelay = _useState2[0],
+        setCaterpillarDelay = _useState2[1];
+
+    var lineRef = (0, _react.useRef)(null);
+    var timeRef = (0, _react.useRef)(0);
+    var system = (0, _helpers.useSystem)();
+    var isVertical = tabDirection === 'vertical';
+    var maxScaleWithDefault = caterpillarMaxScale || 2;
+    var translateZStr = translateZ ? ' translateZ(0)' : '';
+    (0, _react.useImperativeHandle)(ref, function () {
+      return {
+        setCaterpillarAnimate: setCaterpillarAnimate,
+        resetUnderlineStyle: resetUnderlineStyle
+      };
+    }, [setCaterpillarAnimate, resetUnderlineStyle]);
+    var animationKey = (0, _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]);
+    (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);
+      };
+    }, [animationKey]);
+    (0, _react.useEffect)(function () {
+      if (jumpingDis && useCaterpillar && system !== 'ios') {
+        var movedRatio = wrapWidth ? jumpingDis / wrapWidth : 0;
+        setCaterpillarAnimate(movedRatio);
+      }
+    }, [jumpingDis]);
+    (0, _react.useEffect)(function () {
+      resetUnderlineStyle();
+    }, [useCaterpillar, caterpillar, cellTrans, duration, tabDirection, wrapWidth, wrapHeight, distance, animationKey, caterpillarDelay]);
+
+    function getLineLeft(index) {
+      var _lineRef$current, _lineRef$current2;
+
+      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 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) : {
+        transform: "scale" + direc + "(" + getLineScale(moveRatio) + ")"
+      } : {};
+      var outerSize = isVertical ? {
+        width: underlineSize,
+        height: underlineThick
+      } : {
+        height: underlineSize,
+        width: underlineThick
+      };
+      return {
+        outer: (0, _extends2.default)({
+          transform: "translate" + direc + "(" + (distance > 0 ? currentLeft - leftOffset : currentLeft + leftOffset) + "px)" + translateZStr
+        }, outerSize),
+        inner: (0, _extends2.default)({}, 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: (0, _helpers.getStyleWithVendor)((0, _extends2.default)({
+          transitionDuration: cellTrans ? duration + "ms" : '0ms'
+        }, lineStyle.outer || {})),
+        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
+      }),
+      ref: lineRef,
+      style: underlineStyle.outer
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefix + "-underline-inner", {
+        caterpillar: caterpillar,
+        'custom-animate': animationKey,
+        'caterpillar-moving': caterpillar || useCaterpillar && distance
+      }, tabDirection),
+      style: (0, _extends2.default)({}, underlineStyle.inner || {}, underlineInnerStyle || {})
+    }));
+  });
+  var _default = TabCellUnderline;
+  _exports.default = _default;
+});

package/umd/tabs/tab-cell.d.ts

@@ -1,88 +1,4 @@
 import React from 'react';
-import { TabsProps } from '.';
-export interface TabCellProps extends Pick<TabsProps, 'tabs' | 'type' | 'onTabClick' | 'tabBarPosition' | 'tabBarArrange' | 'tabBarScroll' | 'tabBarFixed' | 'renderUnderline' | 'duration' | 'transitionDuration' | 'useCaterpillar' | 'tabBarExtra' | 'onTabBarOverflowChange' | 'tabBarGutter' | 'tabBarPadding' | 'underlineSize' | 'underlineThick' | 'underlineInnerStyle' | 'caterpillarMaxScale' | 'caterpillarProperty' | 'onTabBarScroll' | 'hideTabBarBeforeMounted' | 'tabBarScrollBezier' | 'tabBarScrollDuration' | 'tabBarScrollChance' | 'tabBarHasDivider' | 'tabBarStyle' | 'tabBarClass' | 'mode' | 'overflowThreshold' | 'showUnderline' | 'disabled' | 'renderTabBarItem' | 'renderTabBarInner' | 'translateZ'> {
-    /**
-     * 类前缀
-     * @en prefix classname
-     */
-    prefixCls?: string;
-    /**
-     * 当前选中 Tab
-     * @en Currently selected Tab
-     */
-    activeIndex: number;
-    /**
-     * 当前选中 Tab ref
-     * @en Currently selected Tab ref
-     */
-    activeIndexRef: React.MutableRefObject<number>;
-    /**
-     * Tab 布局方向，横向 or 竖向
-     * @en Tab layout direction, horizontal or vertical
-     */
-    tabDirection: 'horizontal' | 'vertical';
-    /**
-     * 修改选中 Tab
-     * @en Modify selected Tab
-     */
-    changeIndex: (newIndex: number, from?: string) => void;
-    /**
-     * 外层容器宽度
-     * @en Wrapper container width
-     */
-    wrapWidth: number;
-    /**
-     * 外层容器高度
-     * @en Wrapper container height
-     */
-    wrapHeight: number;
-    /**
-     * TabBar是否启用过渡效果
-     * @en Whether the TabBar enables transition effects
-     */
-    cellTrans: boolean;
-    /**
-     * 手指滑动距离
-     * @en Finger sliding distance
-     */
-    distance: number;
-    /**
-     * 下划线已滑动的距离
-     * @en The distance the underline has been swiped
-     */
-    jumpingDis: number;
-}
-export interface TabCellRef {
-    /**
-     * 外层元素 DOM
-     * @en Outer element DOM
-     */
-    dom: HTMLDivElement | null;
-    /**
-     * 当前 TabBar 宽度是否已溢出
-     * @en Whether the current TabBar width has overflowed
-     */
-    hasOverflow: boolean;
-    /**
-     * 滚动 bar 到指定位置，tabs 上下布局时是以 x 轴滚动，左右布局时以 y 轴滚动
-     * @en Scroll the bar to the specified position, the tabs are scrolled on the x-axis when the tabs are laid out up and down, and the y-axis is scrolled when the tabs are laid out left and right
-     */
-    scrollTo: (position: number, rightNow?: boolean) => void;
-    /**
-     * 滚动 bar 使当前选中item到屏幕中间
-     * @en Scroll the bar to bring the currently selected item to the middle of the screen
-     */
-    scrollToCenter: (rightNow?: boolean) => void;
-    /**
-     * 触发毛毛虫动画
-     * @en Trigger caterpillar animation
-     */
-    setCaterpillarAnimate: (ratio?: number) => void;
-    /**
-     * 重新计算下划线样式
-     * @en Recalculate underline style
-     */
-    resetUnderlineStyle: () => void;
-}
+import { TabCellProps, TabCellRef } from './type';
 declare const TabCell: React.ForwardRefExoticComponent<TabCellProps & React.RefAttributes<TabCellRef>>;
 export default TabCell;

package/umd/tabs/tab-cell.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../_helpers"], factory);
+    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../_helpers", "./tab-cell-underline"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../_helpers"));
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../_helpers"), require("./tab-cell-underline"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global._extends, global.react, global.mobileUtils, global._helpers);
+    factory(mod.exports, global._extends, global.react, global.mobileUtils, global._helpers, global.tabCellUnderline);
     global.tabCell = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _helpers) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _helpers, _tabCellUnderline) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -19,6 +19,7 @@
   _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); }
 
@@ -72,43 +73,29 @@
         translateZ = props.translateZ;
     var prefix = prefixCls + "-tab-cell";
     var domRef = (0, _react.useRef)(null);
-    var lineRef = (0, _react.useRef)(null);
-    var timeRef = (0, _react.useRef)(0);
+    var underlineRef = (0, _react.useRef)(null);
     var allCellRectRef = (0, _react.useRef)([]);
 
-    var _useState = (0, _react.useState)({}),
-        underlineStyle = _useState[0],
-        setUnderlineStyle = _useState[1];
+    var _useState = (0, _react.useState)(false),
+        showLine = _useState[0],
+        setShowLine = _useState[1];
 
-    var _useRefState = (0, _helpers.useRefState)(false),
-        caterpillar = _useRefState[0],
-        caterpillarRef = _useRefState[1],
-        setCaterpillar = _useRefState[2];
+    var _useState2 = (0, _react.useState)(false),
+        hasOverflow = _useState2[0],
+        setHasOverflow = _useState2[1];
 
-    var _useState2 = (0, _react.useState)(0),
-        caterpillarDelay = _useState2[0],
-        setCaterpillarDelay = _useState2[1];
-
-    var _useState3 = (0, _react.useState)(false),
-        hasOverflow = _useState3[0],
-        setHasOverflow = _useState3[1];
-
-    var _useState4 = (0, _react.useState)(function () {
+    var _useState3 = (0, _react.useState)(function () {
       return tabs.length < overflowThreshold ? tabBarArrange : 'start';
     }),
-        originArrange = _useState4[0],
-        setOriginArrange = _useState4[1]; // 默认tab小于overflowThreshold个时不开启加载前隐藏，大于overflowThreshold个时开启
+        originArrange = _useState3[0],
+        setOriginArrange = _useState3[1]; // 默认tab小于overflowThreshold个时不开启加载前隐藏，大于overflowThreshold个时开启
 
 
-    var _useState5 = (0, _react.useState)(function () {
+    var _useState4 = (0, _react.useState)(function () {
       return hideTabBarBeforeMounted === void 0 ? tabs.length < overflowThreshold || activeIndex === 0 : !hideTabBarBeforeMounted;
     }),
-        showTab = _useState5[0],
-        setShowTab = _useState5[1];
-
-    var _useState6 = (0, _react.useState)(false),
-        showLine = _useState6[0],
-        setShowLine = _useState6[1];
+        showTab = _useState4[0],
+        setShowTab = _useState4[1];
 
     var isVertical = tabDirection === 'vertical';
     var isLine = (type || '').indexOf('line') !== -1;
@@ -122,42 +109,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 = (0, _helpers.useSystem)();
-    var maxScaleWithDefault = caterpillarMaxScale || 2;
-    var animationKey = (0, _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]);
-    (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);
-      };
-    }, [animationKey]);
     (0, _react.useEffect)(function () {
       (0, _mobileUtils.nextTick)(function () {
         setCellOverflow(); // dom出来之后originArrange置空，交由tabBarArrange控制
@@ -170,12 +122,11 @@
         setShowLine(true);
       });
     }, [domRef.current, wrapSize, tabs]);
-    (0, _react.useEffect)(function () {
-      resetUnderlineStyle();
-    }, [useCaterpillar, caterpillar, cellTrans, duration, tabDirection, wrapWidth, wrapHeight, distance, animationKey, caterpillarDelay]);
     (0, _react.useEffect)(function () {
       (0, _mobileUtils.nextTick)(function () {
-        resetUnderlineStyle();
+        var _underlineRef$current;
+
+        (_underlineRef$current = underlineRef.current) == null ? void 0 : _underlineRef$current.resetUnderlineStyle();
       });
     }, [activeIndex, tabs, getCellPadding('left'), getCellPadding('right'), tabBarGutter, tabDirection]);
     (0, _react.useImperativeHandle)(ref, function () {
@@ -184,10 +135,18 @@
         scrollTo: scrollTo,
         scrollToCenter: scrollToCenter,
         hasOverflow: hasOverflow,
-        setCaterpillarAnimate: setCaterpillarAnimate,
-        resetUnderlineStyle: resetUnderlineStyle
+        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, setCaterpillarAnimate, resetUnderlineStyle]);
+    }, [scrollToCenter, scrollTo, hasOverflow]);
     (0, _react.useEffect)(function () {
       if (wrapSize && tabBarScrollChance !== 'none') {
         setTimeout(function () {
@@ -215,16 +174,6 @@
         }
       };
     }, [hasOverflow]);
-    (0, _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;
@@ -292,69 +241,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: (0, _helpers.getStyleWithVendor)((0, _extends2.default)({
-          transitionDuration: cellTrans ? duration + "ms" : '0ms'
-        }, lineStyle.outer || {})),
-        inner: (0, _helpers.getStyleWithVendor)((0, _extends2.default)({}, transStyle, lineStyle.inner || {}))
-      };
-    }
-
-    function getLineStyle() {
-      var _ref;
-
-      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' ? (_ref = {}, _ref[isVertical ? 'width' : 'height'] = 100 * getLineScale(moveRatio) + "%", _ref.willChange = 'width', _ref) : {
-        transform: "scale" + direc + "(" + getLineScale(moveRatio) + ")"
-      } : {};
-      var outerSize = isVertical ? {
-        width: underlineSize,
-        height: underlineThick
-      } : {
-        height: underlineSize,
-        width: underlineThick
-      };
-      return {
-        outer: (0, _extends2.default)({
-          transform: "translate" + direc + "(" + (distance > 0 ? currentLeft - leftOffset : currentLeft + leftOffset) + "px)" + translateZStr
-        }, outerSize),
-        inner: (0, _extends2.default)({}, transStyle)
-      };
-    }
-
-    function getLineLeft(index) {
-      var _lineRef$current, _lineRef$current2;
-
-      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 getTabCenterLeft(index) - lineWidth / 2;
-    }
-
     function getTabCenterLeft(index) {
       var currentTab = allCellRectRef.current[index] || {};
       var currentTabWidth = (isVertical ? currentTab.width : currentTab.height) || 0;
@@ -362,48 +248,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);
-      (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);
-    }
-
     function getCellPadding(pType) {
       if (typeof cellPadding === 'object') {
         return cellPadding[pType];
@@ -444,20 +288,30 @@
         return null;
       }
 
-      return renderUnderline ? renderUnderline(underlineStyle, showLine, lineRef) : /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _mobileUtils.cls)(prefix + "-underline", {
-          show: showLine
-        }),
-        ref: lineRef,
-        style: underlineStyle.outer
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _mobileUtils.cls)(prefix + "-underline-inner", {
-          caterpillar: caterpillar,
-          'custom-animate': animationKey,
-          'caterpillar-moving': caterpillar || useCaterpillar && distance
-        }, tabDirection),
-        style: (0, _extends2.default)({}, 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.createElement(_tabCellUnderline.default, (0, _extends2.default)({
+        ref: underlineRef,
+        getTabCenterLeft: getTabCenterLeft
+      }, lineProps));
     }
 
     var cellInner = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tabs.map(function (tab, index) {