@arco-design/mobile-react 2.21.2 → 2.21.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/README.en-US.md +2 -2
  3. package/README.md +2 -2
  4. package/cjs/ellipsis/components/js-ellipsis.js +7 -1
  5. package/cjs/image-picker/style/css/index.d.ts +1 -0
  6. package/cjs/image-picker/style/css/index.js +2 -0
  7. package/cjs/image-picker/style/index.d.ts +1 -0
  8. package/cjs/image-picker/style/index.js +2 -0
  9. package/cjs/tabs/index.d.ts +3 -463
  10. package/cjs/tabs/index.js +10 -0
  11. package/cjs/tabs/tab-cell-underline.d.ts +4 -0
  12. package/cjs/tabs/tab-cell-underline.js +234 -0
  13. package/cjs/tabs/tab-cell.d.ts +1 -85
  14. package/cjs/tabs/tab-cell.js +53 -198
  15. package/cjs/tabs/tab-pane.d.ts +2 -38
  16. package/cjs/tabs/type.d.ts +590 -0
  17. package/cjs/tabs/type.js +3 -0
  18. package/dist/index.js +272 -199
  19. package/dist/index.min.js +3 -3
  20. package/esm/ellipsis/components/js-ellipsis.js +7 -1
  21. package/esm/image-picker/style/css/index.d.ts +1 -0
  22. package/esm/image-picker/style/css/index.js +1 -0
  23. package/esm/image-picker/style/index.d.ts +1 -0
  24. package/esm/image-picker/style/index.js +1 -0
  25. package/esm/tabs/index.d.ts +3 -463
  26. package/esm/tabs/index.js +2 -1
  27. package/esm/tabs/tab-cell-underline.d.ts +4 -0
  28. package/esm/tabs/tab-cell-underline.js +218 -0
  29. package/esm/tabs/tab-cell.d.ts +1 -85
  30. package/esm/tabs/tab-cell.js +55 -201
  31. package/esm/tabs/tab-pane.d.ts +2 -38
  32. package/esm/tabs/type.d.ts +590 -0
  33. package/esm/tabs/type.js +1 -0
  34. package/package.json +3 -3
  35. package/umd/ellipsis/components/js-ellipsis.js +7 -1
  36. package/umd/image-picker/style/css/index.d.ts +1 -0
  37. package/umd/image-picker/style/css/index.js +4 -4
  38. package/umd/image-picker/style/index.d.ts +1 -0
  39. package/umd/image-picker/style/index.js +4 -4
  40. package/umd/tabs/index.d.ts +3 -463
  41. package/umd/tabs/index.js +11 -4
  42. package/umd/tabs/tab-cell-underline.d.ts +4 -0
  43. package/umd/tabs/tab-cell-underline.js +242 -0
  44. package/umd/tabs/tab-cell.d.ts +1 -85
  45. package/umd/tabs/tab-cell.js +56 -202
  46. package/umd/tabs/tab-pane.d.ts +2 -38
  47. package/umd/tabs/type.d.ts +590 -0
  48. package/umd/tabs/type.js +17 -0
@@ -0,0 +1,234 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ exports.__esModule = true;
6
+ exports.default = void 0;
7
+
8
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
+
10
+ var _react = _interopRequireWildcard(require("react"));
11
+
12
+ var _mobileUtils = require("@arco-design/mobile-utils");
13
+
14
+ var _helpers = require("../_helpers");
15
+
16
+ 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); }
17
+
18
+ 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; }
19
+
20
+ var TabCellUnderline = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
21
+ var prefix = props.prefix,
22
+ useCaterpillar = props.useCaterpillar,
23
+ distance = props.distance,
24
+ tabDirection = props.tabDirection,
25
+ underlineInnerStyle = props.underlineInnerStyle,
26
+ duration = props.duration,
27
+ cellTrans = props.cellTrans,
28
+ showLine = props.showLine,
29
+ activeIndex = props.activeIndex,
30
+ wrapWidth = props.wrapWidth,
31
+ wrapHeight = props.wrapHeight,
32
+ jumpingDis = props.jumpingDis,
33
+ translateZ = props.translateZ,
34
+ caterpillarMaxScale = props.caterpillarMaxScale,
35
+ caterpillarProperty = props.caterpillarProperty,
36
+ underlineSize = props.underlineSize,
37
+ underlineThick = props.underlineThick,
38
+ renderUnderline = props.renderUnderline,
39
+ getTabCenterLeft = props.getTabCenterLeft;
40
+
41
+ var _useState = (0, _react.useState)({}),
42
+ underlineStyle = _useState[0],
43
+ setUnderlineStyle = _useState[1];
44
+
45
+ var _useRefState = (0, _helpers.useRefState)(false),
46
+ caterpillar = _useRefState[0],
47
+ caterpillarRef = _useRefState[1],
48
+ setCaterpillar = _useRefState[2];
49
+
50
+ var _useState2 = (0, _react.useState)(0),
51
+ caterpillarDelay = _useState2[0],
52
+ setCaterpillarDelay = _useState2[1];
53
+
54
+ var lineRef = (0, _react.useRef)(null);
55
+ var timeRef = (0, _react.useRef)(0);
56
+ var system = (0, _helpers.useSystem)();
57
+ var isVertical = tabDirection === 'vertical';
58
+ var maxScaleWithDefault = caterpillarMaxScale || 2;
59
+ var translateZStr = translateZ ? ' translateZ(0)' : '';
60
+ (0, _react.useImperativeHandle)(ref, function () {
61
+ return {
62
+ setCaterpillarAnimate: setCaterpillarAnimate,
63
+ resetUnderlineStyle: resetUnderlineStyle
64
+ };
65
+ }, [setCaterpillarAnimate, resetUnderlineStyle]);
66
+ var animationKey = (0, _react.useMemo)(function () {
67
+ if (!useCaterpillar) {
68
+ return '';
69
+ }
70
+
71
+ if (caterpillarProperty === 'size') {
72
+ return "tabsCaterpillar" + (isVertical ? 'W' : 'H') + maxScaleWithDefault;
73
+ }
74
+
75
+ if (caterpillarMaxScale) {
76
+ return "tabsCaterpillar" + (isVertical ? 'X' : 'Y') + caterpillarMaxScale;
77
+ }
78
+
79
+ return '';
80
+ }, [useCaterpillar, isVertical, caterpillarMaxScale, caterpillarProperty]);
81
+ (0, _react.useEffect)(function () {
82
+ if (!animationKey) {
83
+ return;
84
+ }
85
+
86
+ var dir = isVertical ? 'X' : 'Y';
87
+
88
+ if (caterpillarProperty === 'size') {
89
+ var attr = isVertical ? 'width' : 'height';
90
+ (0, _mobileUtils.addCssKeyframes)(animationKey, "{\n 0% {\n " + attr + ": 100%;\n }\n 50% {\n " + attr + ": " + 100 * maxScaleWithDefault + "%;\n }\n 100% {\n " + attr + ": 100%;\n }\n }");
91
+ return;
92
+ }
93
+
94
+ (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 }");
95
+ return function () {
96
+ (0, _mobileUtils.removeCssStyleDom)(animationKey);
97
+ };
98
+ }, [animationKey]);
99
+ (0, _react.useEffect)(function () {
100
+ if (jumpingDis && useCaterpillar && system !== 'ios') {
101
+ var movedRatio = wrapWidth ? jumpingDis / wrapWidth : 0;
102
+ setCaterpillarAnimate(movedRatio);
103
+ }
104
+ }, [jumpingDis]);
105
+ (0, _react.useEffect)(function () {
106
+ resetUnderlineStyle();
107
+ }, [useCaterpillar, caterpillar, cellTrans, duration, tabDirection, wrapWidth, wrapHeight, distance, animationKey, caterpillarDelay]);
108
+
109
+ function getLineLeft(index) {
110
+ var _lineRef$current, _lineRef$current2;
111
+
112
+ var offsetSize = isVertical ? (_lineRef$current = lineRef.current) == null ? void 0 : _lineRef$current.offsetWidth : (_lineRef$current2 = lineRef.current) == null ? void 0 : _lineRef$current2.offsetHeight;
113
+ var lineWidth = offsetSize || 0;
114
+ return getTabCenterLeft(index) - lineWidth / 2;
115
+ }
116
+
117
+ function getDescIndex() {
118
+ if (distance > 0) {
119
+ return activeIndex - 1;
120
+ }
121
+
122
+ if (distance < 0) {
123
+ return activeIndex + 1;
124
+ }
125
+
126
+ return activeIndex;
127
+ }
128
+
129
+ function getLineScale(ratio) {
130
+ var absRatio = Math.abs(ratio);
131
+ return absRatio > 0.5 ? (1 - absRatio) * 2 * (maxScaleWithDefault - 1) + 1 : absRatio * 2 * (maxScaleWithDefault - 1) + 1;
132
+ }
133
+
134
+ function getLineStyle() {
135
+ var _ref;
136
+
137
+ if (!lineRef.current) {
138
+ return {};
139
+ }
140
+
141
+ var currentLeft = getLineLeft(activeIndex);
142
+ var descIndex = getDescIndex();
143
+ var descLeft = getLineLeft(descIndex);
144
+ var moveRatio = wrapWidth ? distance / wrapWidth : 0;
145
+ var leftOffset = moveRatio * (currentLeft - descLeft);
146
+ var direc = isVertical ? 'X' : 'Y';
147
+ var transStyle = useCaterpillar && !jumpingDis ? caterpillarProperty === 'size' ? (_ref = {}, _ref[isVertical ? 'width' : 'height'] = 100 * getLineScale(moveRatio) + "%", _ref.willChange = 'width', _ref) : {
148
+ transform: "scale" + direc + "(" + getLineScale(moveRatio) + ")"
149
+ } : {};
150
+ var outerSize = isVertical ? {
151
+ width: underlineSize,
152
+ height: underlineThick
153
+ } : {
154
+ height: underlineSize,
155
+ width: underlineThick
156
+ };
157
+ return {
158
+ outer: (0, _extends2.default)({
159
+ transform: "translate" + direc + "(" + (distance > 0 ? currentLeft - leftOffset : currentLeft + leftOffset) + "px)" + translateZStr
160
+ }, outerSize),
161
+ inner: (0, _extends2.default)({}, transStyle)
162
+ };
163
+ }
164
+
165
+ function getUnderlineStyle() {
166
+ var transStyle = {};
167
+
168
+ if (useCaterpillar) {
169
+ transStyle.animationDuration = duration + "ms";
170
+ }
171
+
172
+ if (caterpillarRef.current && animationKey) {
173
+ transStyle.animationName = animationKey;
174
+ }
175
+
176
+ if (caterpillarDelay) {
177
+ transStyle.animationDelay = "-" + caterpillarDelay + "ms";
178
+ }
179
+
180
+ var lineStyle = getLineStyle();
181
+ return {
182
+ outer: (0, _helpers.getStyleWithVendor)((0, _extends2.default)({
183
+ transitionDuration: cellTrans ? duration + "ms" : '0ms'
184
+ }, lineStyle.outer || {})),
185
+ inner: (0, _helpers.getStyleWithVendor)((0, _extends2.default)({}, transStyle, lineStyle.inner || {}))
186
+ };
187
+ }
188
+
189
+ function resetUnderlineStyle() {
190
+ setUnderlineStyle(getUnderlineStyle());
191
+ }
192
+
193
+ function setCaterpillarAnimate(movedRatio) {
194
+ if (movedRatio === void 0) {
195
+ movedRatio = 0;
196
+ }
197
+
198
+ if (!duration) {
199
+ return;
200
+ }
201
+
202
+ var movedTime = (duration || 0) * Math.abs(movedRatio);
203
+ setCaterpillarDelay(movedTime);
204
+ (0, _mobileUtils.nextTick)(function () {
205
+ setCaterpillar(true);
206
+ });
207
+
208
+ if (timeRef.current) {
209
+ clearTimeout(timeRef.current);
210
+ }
211
+
212
+ timeRef.current = window.setTimeout(function () {
213
+ setCaterpillar(false);
214
+ setCaterpillarDelay(0);
215
+ }, (duration || 0) - movedTime + 20);
216
+ }
217
+
218
+ return renderUnderline ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderUnderline(underlineStyle, showLine, lineRef)) : /*#__PURE__*/_react.default.createElement("div", {
219
+ className: (0, _mobileUtils.cls)(prefix + "-underline", {
220
+ show: showLine
221
+ }),
222
+ ref: lineRef,
223
+ style: underlineStyle.outer
224
+ }, /*#__PURE__*/_react.default.createElement("div", {
225
+ className: (0, _mobileUtils.cls)(prefix + "-underline-inner", {
226
+ caterpillar: caterpillar,
227
+ 'custom-animate': animationKey,
228
+ 'caterpillar-moving': caterpillar || useCaterpillar && distance
229
+ }, tabDirection),
230
+ style: (0, _extends2.default)({}, underlineStyle.inner || {}, underlineInnerStyle || {})
231
+ }));
232
+ });
233
+ var _default = TabCellUnderline;
234
+ exports.default = _default;
@@ -1,88 +1,4 @@
1
1
  import React from 'react';
2
- import { TabsProps } from '.';
3
- 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'> {
4
- /**
5
- * 类前缀
6
- * @en prefix classname
7
- */
8
- prefixCls?: string;
9
- /**
10
- * 当前选中 Tab
11
- * @en Currently selected Tab
12
- */
13
- activeIndex: number;
14
- /**
15
- * 当前选中 Tab ref
16
- * @en Currently selected Tab ref
17
- */
18
- activeIndexRef: React.MutableRefObject<number>;
19
- /**
20
- * Tab 布局方向,横向 or 竖向
21
- * @en Tab layout direction, horizontal or vertical
22
- */
23
- tabDirection: 'horizontal' | 'vertical';
24
- /**
25
- * 修改选中 Tab
26
- * @en Modify selected Tab
27
- */
28
- changeIndex: (newIndex: number, from?: string) => void;
29
- /**
30
- * 外层容器宽度
31
- * @en Wrapper container width
32
- */
33
- wrapWidth: number;
34
- /**
35
- * 外层容器高度
36
- * @en Wrapper container height
37
- */
38
- wrapHeight: number;
39
- /**
40
- * TabBar是否启用过渡效果
41
- * @en Whether the TabBar enables transition effects
42
- */
43
- cellTrans: boolean;
44
- /**
45
- * 手指滑动距离
46
- * @en Finger sliding distance
47
- */
48
- distance: number;
49
- /**
50
- * 下划线已滑动的距离
51
- * @en The distance the underline has been swiped
52
- */
53
- jumpingDis: number;
54
- }
55
- export interface TabCellRef {
56
- /**
57
- * 外层元素 DOM
58
- * @en Outer element DOM
59
- */
60
- dom: HTMLDivElement | null;
61
- /**
62
- * 当前 TabBar 宽度是否已溢出
63
- * @en Whether the current TabBar width has overflowed
64
- */
65
- hasOverflow: boolean;
66
- /**
67
- * 滚动 bar 到指定位置,tabs 上下布局时是以 x 轴滚动,左右布局时以 y 轴滚动
68
- * @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
69
- */
70
- scrollTo: (position: number, rightNow?: boolean) => void;
71
- /**
72
- * 滚动 bar 使当前选中item到屏幕中间
73
- * @en Scroll the bar to bring the currently selected item to the middle of the screen
74
- */
75
- scrollToCenter: (rightNow?: boolean) => void;
76
- /**
77
- * 触发毛毛虫动画
78
- * @en Trigger caterpillar animation
79
- */
80
- setCaterpillarAnimate: (ratio?: number) => void;
81
- /**
82
- * 重新计算下划线样式
83
- * @en Recalculate underline style
84
- */
85
- resetUnderlineStyle: () => void;
86
- }
2
+ import { TabCellProps, TabCellRef } from './type';
87
3
  declare const TabCell: React.ForwardRefExoticComponent<TabCellProps & React.RefAttributes<TabCellRef>>;
88
4
  export default TabCell;
@@ -13,6 +13,8 @@ var _mobileUtils = require("@arco-design/mobile-utils");
13
13
 
14
14
  var _helpers = require("../_helpers");
15
15
 
16
+ var _tabCellUnderline = _interopRequireDefault(require("./tab-cell-underline"));
17
+
16
18
  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); }
17
19
 
18
20
  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; }
@@ -65,43 +67,29 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
65
67
  translateZ = props.translateZ;
66
68
  var prefix = prefixCls + "-tab-cell";
67
69
  var domRef = (0, _react.useRef)(null);
68
- var lineRef = (0, _react.useRef)(null);
69
- var timeRef = (0, _react.useRef)(0);
70
+ var underlineRef = (0, _react.useRef)(null);
70
71
  var allCellRectRef = (0, _react.useRef)([]);
71
72
 
72
- var _useState = (0, _react.useState)({}),
73
- underlineStyle = _useState[0],
74
- setUnderlineStyle = _useState[1];
75
-
76
- var _useRefState = (0, _helpers.useRefState)(false),
77
- caterpillar = _useRefState[0],
78
- caterpillarRef = _useRefState[1],
79
- setCaterpillar = _useRefState[2];
80
-
81
- var _useState2 = (0, _react.useState)(0),
82
- caterpillarDelay = _useState2[0],
83
- setCaterpillarDelay = _useState2[1];
73
+ var _useState = (0, _react.useState)(false),
74
+ showLine = _useState[0],
75
+ setShowLine = _useState[1];
84
76
 
85
- var _useState3 = (0, _react.useState)(false),
86
- hasOverflow = _useState3[0],
87
- setHasOverflow = _useState3[1];
77
+ var _useState2 = (0, _react.useState)(false),
78
+ hasOverflow = _useState2[0],
79
+ setHasOverflow = _useState2[1];
88
80
 
89
- var _useState4 = (0, _react.useState)(function () {
81
+ var _useState3 = (0, _react.useState)(function () {
90
82
  return tabs.length < overflowThreshold ? tabBarArrange : 'start';
91
83
  }),
92
- originArrange = _useState4[0],
93
- setOriginArrange = _useState4[1]; // 默认tab小于overflowThreshold个时不开启加载前隐藏,大于overflowThreshold个时开启
84
+ originArrange = _useState3[0],
85
+ setOriginArrange = _useState3[1]; // 默认tab小于overflowThreshold个时不开启加载前隐藏,大于overflowThreshold个时开启
94
86
 
95
87
 
96
- var _useState5 = (0, _react.useState)(function () {
88
+ var _useState4 = (0, _react.useState)(function () {
97
89
  return hideTabBarBeforeMounted === void 0 ? tabs.length < overflowThreshold || activeIndex === 0 : !hideTabBarBeforeMounted;
98
90
  }),
99
- showTab = _useState5[0],
100
- setShowTab = _useState5[1];
101
-
102
- var _useState6 = (0, _react.useState)(false),
103
- showLine = _useState6[0],
104
- setShowLine = _useState6[1];
91
+ showTab = _useState4[0],
92
+ setShowTab = _useState4[1];
105
93
 
106
94
  var isVertical = tabDirection === 'vertical';
107
95
  var isLine = (type || '').indexOf('line') !== -1;
@@ -115,42 +103,7 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
115
103
  var cellGutter = isCard ? void 0 : tabBarGutter;
116
104
  var hasDivider = tabBarHasDivider === void 0 ? isLine : tabBarHasDivider;
117
105
  var wrapSize = isVertical ? wrapWidth : wrapHeight;
118
- var translateZStr = translateZ ? ' translateZ(0)' : '';
119
106
  var system = (0, _helpers.useSystem)();
120
- var maxScaleWithDefault = caterpillarMaxScale || 2;
121
- var animationKey = (0, _react.useMemo)(function () {
122
- if (!showUnderline || !useCaterpillar) {
123
- return '';
124
- }
125
-
126
- if (caterpillarProperty === 'size') {
127
- return "tabsCaterpillar" + (isVertical ? 'W' : 'H') + maxScaleWithDefault;
128
- }
129
-
130
- if (caterpillarMaxScale) {
131
- return "tabsCaterpillar" + (isVertical ? 'X' : 'Y') + caterpillarMaxScale;
132
- }
133
-
134
- return '';
135
- }, [showUnderline, useCaterpillar, isVertical, caterpillarMaxScale, caterpillarProperty]);
136
- (0, _react.useEffect)(function () {
137
- if (!animationKey) {
138
- return;
139
- }
140
-
141
- var dir = isVertical ? 'X' : 'Y';
142
-
143
- if (caterpillarProperty === 'size') {
144
- var attr = isVertical ? 'width' : 'height';
145
- (0, _mobileUtils.addCssKeyframes)(animationKey, "{\n 0% {\n " + attr + ": 100%;\n }\n 50% {\n " + attr + ": " + 100 * maxScaleWithDefault + "%;\n }\n 100% {\n " + attr + ": 100%;\n }\n }");
146
- return;
147
- }
148
-
149
- (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 }");
150
- return function () {
151
- (0, _mobileUtils.removeCssStyleDom)(animationKey);
152
- };
153
- }, [animationKey]);
154
107
  (0, _react.useEffect)(function () {
155
108
  (0, _mobileUtils.nextTick)(function () {
156
109
  setCellOverflow(); // dom出来之后originArrange置空,交由tabBarArrange控制
@@ -163,12 +116,11 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
163
116
  setShowLine(true);
164
117
  });
165
118
  }, [domRef.current, wrapSize, tabs]);
166
- (0, _react.useEffect)(function () {
167
- resetUnderlineStyle();
168
- }, [useCaterpillar, caterpillar, cellTrans, duration, tabDirection, wrapWidth, wrapHeight, distance, animationKey, caterpillarDelay]);
169
119
  (0, _react.useEffect)(function () {
170
120
  (0, _mobileUtils.nextTick)(function () {
171
- resetUnderlineStyle();
121
+ var _underlineRef$current;
122
+
123
+ (_underlineRef$current = underlineRef.current) == null ? void 0 : _underlineRef$current.resetUnderlineStyle();
172
124
  });
173
125
  }, [activeIndex, tabs, getCellPadding('left'), getCellPadding('right'), tabBarGutter, tabDirection]);
174
126
  (0, _react.useImperativeHandle)(ref, function () {
@@ -177,10 +129,18 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
177
129
  scrollTo: scrollTo,
178
130
  scrollToCenter: scrollToCenter,
179
131
  hasOverflow: hasOverflow,
180
- setCaterpillarAnimate: setCaterpillarAnimate,
181
- resetUnderlineStyle: resetUnderlineStyle
132
+ setCaterpillarAnimate: function setCaterpillarAnimate(ratio) {
133
+ var _underlineRef$current2;
134
+
135
+ return (_underlineRef$current2 = underlineRef.current) == null ? void 0 : _underlineRef$current2.setCaterpillarAnimate(ratio);
136
+ },
137
+ resetUnderlineStyle: function resetUnderlineStyle() {
138
+ var _underlineRef$current3;
139
+
140
+ return (_underlineRef$current3 = underlineRef.current) == null ? void 0 : _underlineRef$current3.resetUnderlineStyle();
141
+ }
182
142
  };
183
- }, [scrollToCenter, scrollTo, hasOverflow, setCaterpillarAnimate, resetUnderlineStyle]);
143
+ }, [scrollToCenter, scrollTo, hasOverflow]);
184
144
  (0, _react.useEffect)(function () {
185
145
  if (wrapSize && tabBarScrollChance !== 'none') {
186
146
  setTimeout(function () {
@@ -208,16 +168,6 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
208
168
  }
209
169
  };
210
170
  }, [hasOverflow]);
211
- (0, _react.useEffect)(function () {
212
- if (jumpingDis && useCaterpillar && system !== 'ios') {
213
- var movedRatio = wrapWidth ? jumpingDis / wrapWidth : 0;
214
- setCaterpillarAnimate(movedRatio);
215
- }
216
- }, [jumpingDis]);
217
-
218
- function resetUnderlineStyle() {
219
- setUnderlineStyle(getUnderlineStyle());
220
- }
221
171
 
222
172
  function setCellOverflow() {
223
173
  var overflow = false;
@@ -285,69 +235,6 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
285
235
  }
286
236
  }
287
237
 
288
- function getUnderlineStyle() {
289
- var transStyle = {};
290
-
291
- if (useCaterpillar) {
292
- transStyle.animationDuration = duration + "ms";
293
- }
294
-
295
- if (caterpillarRef.current && animationKey) {
296
- transStyle.animationName = animationKey;
297
- }
298
-
299
- if (caterpillarDelay) {
300
- transStyle.animationDelay = "-" + caterpillarDelay + "ms";
301
- }
302
-
303
- var lineStyle = getLineStyle();
304
- return {
305
- outer: (0, _helpers.getStyleWithVendor)((0, _extends2.default)({
306
- transitionDuration: cellTrans ? duration + "ms" : '0ms'
307
- }, lineStyle.outer || {})),
308
- inner: (0, _helpers.getStyleWithVendor)((0, _extends2.default)({}, transStyle, lineStyle.inner || {}))
309
- };
310
- }
311
-
312
- function getLineStyle() {
313
- var _ref;
314
-
315
- if (!lineRef.current || !domRef.current) {
316
- return {};
317
- }
318
-
319
- var currentLeft = getLineLeft(activeIndex);
320
- var descIndex = getDescIndex();
321
- var descLeft = getLineLeft(descIndex);
322
- var moveRatio = wrapWidth ? distance / wrapWidth : 0;
323
- var leftOffset = moveRatio * (currentLeft - descLeft);
324
- var direc = isVertical ? 'X' : 'Y';
325
- var transStyle = useCaterpillar && !jumpingDis ? caterpillarProperty === 'size' ? (_ref = {}, _ref[isVertical ? 'width' : 'height'] = 100 * getLineScale(moveRatio) + "%", _ref.willChange = 'width', _ref) : {
326
- transform: "scale" + direc + "(" + getLineScale(moveRatio) + ")"
327
- } : {};
328
- var outerSize = isVertical ? {
329
- width: underlineSize,
330
- height: underlineThick
331
- } : {
332
- height: underlineSize,
333
- width: underlineThick
334
- };
335
- return {
336
- outer: (0, _extends2.default)({
337
- transform: "translate" + direc + "(" + (distance > 0 ? currentLeft - leftOffset : currentLeft + leftOffset) + "px)" + translateZStr
338
- }, outerSize),
339
- inner: (0, _extends2.default)({}, transStyle)
340
- };
341
- }
342
-
343
- function getLineLeft(index) {
344
- var _lineRef$current, _lineRef$current2;
345
-
346
- var offsetSize = isVertical ? (_lineRef$current = lineRef.current) == null ? void 0 : _lineRef$current.offsetWidth : (_lineRef$current2 = lineRef.current) == null ? void 0 : _lineRef$current2.offsetHeight;
347
- var lineWidth = offsetSize || 0;
348
- return getTabCenterLeft(index) - lineWidth / 2;
349
- }
350
-
351
238
  function getTabCenterLeft(index) {
352
239
  var currentTab = allCellRectRef.current[index] || {};
353
240
  var currentTabWidth = (isVertical ? currentTab.width : currentTab.height) || 0;
@@ -355,48 +242,6 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
355
242
  return currentTabLeft + currentTabWidth / 2;
356
243
  }
357
244
 
358
- function getLineScale(ratio) {
359
- var absRatio = Math.abs(ratio);
360
- return absRatio > 0.5 ? (1 - absRatio) * 2 * (maxScaleWithDefault - 1) + 1 : absRatio * 2 * (maxScaleWithDefault - 1) + 1;
361
- }
362
-
363
- function getDescIndex() {
364
- if (distance > 0) {
365
- return activeIndex - 1;
366
- }
367
-
368
- if (distance < 0) {
369
- return activeIndex + 1;
370
- }
371
-
372
- return activeIndex;
373
- }
374
-
375
- function setCaterpillarAnimate(movedRatio) {
376
- if (movedRatio === void 0) {
377
- movedRatio = 0;
378
- }
379
-
380
- if (!duration) {
381
- return;
382
- }
383
-
384
- var movedTime = (duration || 0) * Math.abs(movedRatio);
385
- setCaterpillarDelay(movedTime);
386
- (0, _mobileUtils.nextTick)(function () {
387
- setCaterpillar(true);
388
- });
389
-
390
- if (timeRef.current) {
391
- clearTimeout(timeRef.current);
392
- }
393
-
394
- timeRef.current = window.setTimeout(function () {
395
- setCaterpillar(false);
396
- setCaterpillarDelay(0);
397
- }, (duration || 0) - movedTime + 20);
398
- }
399
-
400
245
  function getCellPadding(pType) {
401
246
  if (typeof cellPadding === 'object') {
402
247
  return cellPadding[pType];
@@ -437,20 +282,30 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
437
282
  return null;
438
283
  }
439
284
 
440
- return renderUnderline ? renderUnderline(underlineStyle, showLine, lineRef) : /*#__PURE__*/_react.default.createElement("div", {
441
- className: (0, _mobileUtils.cls)(prefix + "-underline", {
442
- show: showLine
443
- }),
444
- ref: lineRef,
445
- style: underlineStyle.outer
446
- }, /*#__PURE__*/_react.default.createElement("div", {
447
- className: (0, _mobileUtils.cls)(prefix + "-underline-inner", {
448
- caterpillar: caterpillar,
449
- 'custom-animate': animationKey,
450
- 'caterpillar-moving': caterpillar || useCaterpillar && distance
451
- }, tabDirection),
452
- style: (0, _extends2.default)({}, underlineStyle.inner || {}, underlineInnerStyle || {})
453
- }));
285
+ var lineProps = {
286
+ prefix: prefix,
287
+ showLine: showLine,
288
+ useCaterpillar: useCaterpillar,
289
+ distance: distance,
290
+ tabDirection: tabDirection,
291
+ underlineInnerStyle: underlineInnerStyle,
292
+ cellTrans: cellTrans,
293
+ duration: duration,
294
+ activeIndex: activeIndex,
295
+ wrapWidth: wrapWidth,
296
+ wrapHeight: wrapHeight,
297
+ jumpingDis: jumpingDis,
298
+ caterpillarMaxScale: caterpillarMaxScale,
299
+ caterpillarProperty: caterpillarProperty,
300
+ translateZ: translateZ,
301
+ underlineSize: underlineSize,
302
+ underlineThick: underlineThick,
303
+ renderUnderline: renderUnderline
304
+ };
305
+ return /*#__PURE__*/_react.default.createElement(_tabCellUnderline.default, (0, _extends2.default)({
306
+ ref: underlineRef,
307
+ getTabCenterLeft: getTabCenterLeft
308
+ }, lineProps));
454
309
  }
455
310
 
456
311
  var cellInner = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tabs.map(function (tab, index) {