@arco-design/mobile-react 2.21.2 → 2.22.0

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

@@ -0,0 +1,234 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _helpers = require("../_helpers");
+
+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/cjs/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/cjs/tabs/tab-cell.js

@@ -13,6 +13,8 @@ var _mobileUtils = require("@arco-design/mobile-utils");
 
 var _helpers = require("../_helpers");
 
+var _tabCellUnderline = _interopRequireDefault(require("./tab-cell-underline"));
+
 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; }
@@ -62,46 +64,33 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       renderTabBarInner = props.renderTabBarInner,
       tabBarStyle = props.tabBarStyle,
       tabBarClass = props.tabBarClass,
-      translateZ = props.translateZ;
+      translateZ = props.translateZ,
+      tabBarStopPropagation = props.tabBarStopPropagation;
   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 _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 _useState = (0, _react.useState)(false),
+      showLine = _useState[0],
+      setShowLine = _useState[1];
 
-  var _useState3 = (0, _react.useState)(false),
-      hasOverflow = _useState3[0],
-      setHasOverflow = _useState3[1];
+  var _useState2 = (0, _react.useState)(false),
+      hasOverflow = _useState2[0],
+      setHasOverflow = _useState2[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;
@@ -115,42 +104,7 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   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控制
@@ -163,12 +117,11 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       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 () {
@@ -177,10 +130,18 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       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 () {
@@ -196,28 +157,18 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       return e.stopPropagation();
     };
 
-    if (isVertical && hasOverflow && domRef.current) {
+    if (isVertical && hasOverflow && domRef.current && tabBarStopPropagation) {
       domRef.current.addEventListener('touchstart', stopFunc);
       domRef.current.addEventListener('touchmove', stopFunc);
     }
 
     return function () {
-      if (isVertical && hasOverflow && domRef.current) {
+      if (isVertical && hasOverflow && domRef.current && tabBarStopPropagation) {
         domRef.current.removeEventListener('touchstart', stopFunc);
         domRef.current.removeEventListener('touchmove', stopFunc);
       }
     };
   }, [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;
@@ -285,69 +236,6 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }
 
-  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;
@@ -355,48 +243,6 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     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];
@@ -437,20 +283,30 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       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) {