@arco-design/mobile-react 2.21.1 → 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 (56) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/README.en-US.md +2 -2
  3. package/README.md +2 -2
  4. package/cjs/button/style/css/index.css +64 -64
  5. package/cjs/button/style/index.less +7 -5
  6. package/cjs/ellipsis/components/js-ellipsis.js +7 -1
  7. package/cjs/image-picker/style/css/index.d.ts +1 -0
  8. package/cjs/image-picker/style/css/index.js +2 -0
  9. package/cjs/image-picker/style/index.d.ts +1 -0
  10. package/cjs/image-picker/style/index.js +2 -0
  11. package/cjs/tabs/index.d.ts +3 -463
  12. package/cjs/tabs/index.js +10 -0
  13. package/cjs/tabs/tab-cell-underline.d.ts +4 -0
  14. package/cjs/tabs/tab-cell-underline.js +234 -0
  15. package/cjs/tabs/tab-cell.d.ts +1 -85
  16. package/cjs/tabs/tab-cell.js +53 -198
  17. package/cjs/tabs/tab-pane.d.ts +2 -38
  18. package/cjs/tabs/type.d.ts +590 -0
  19. package/cjs/tabs/type.js +3 -0
  20. package/dist/index.js +272 -199
  21. package/dist/index.min.js +3 -3
  22. package/dist/style.css +64 -64
  23. package/dist/style.min.css +1 -1
  24. package/esm/button/style/css/index.css +64 -64
  25. package/esm/button/style/index.less +7 -5
  26. package/esm/ellipsis/components/js-ellipsis.js +7 -1
  27. package/esm/image-picker/style/css/index.d.ts +1 -0
  28. package/esm/image-picker/style/css/index.js +1 -0
  29. package/esm/image-picker/style/index.d.ts +1 -0
  30. package/esm/image-picker/style/index.js +1 -0
  31. package/esm/tabs/index.d.ts +3 -463
  32. package/esm/tabs/index.js +2 -1
  33. package/esm/tabs/tab-cell-underline.d.ts +4 -0
  34. package/esm/tabs/tab-cell-underline.js +218 -0
  35. package/esm/tabs/tab-cell.d.ts +1 -85
  36. package/esm/tabs/tab-cell.js +55 -201
  37. package/esm/tabs/tab-pane.d.ts +2 -38
  38. package/esm/tabs/type.d.ts +590 -0
  39. package/esm/tabs/type.js +1 -0
  40. package/package.json +3 -3
  41. package/umd/button/style/css/index.css +64 -64
  42. package/umd/button/style/index.less +7 -5
  43. package/umd/ellipsis/components/js-ellipsis.js +7 -1
  44. package/umd/image-picker/style/css/index.d.ts +1 -0
  45. package/umd/image-picker/style/css/index.js +4 -4
  46. package/umd/image-picker/style/index.d.ts +1 -0
  47. package/umd/image-picker/style/index.js +4 -4
  48. package/umd/tabs/index.d.ts +3 -463
  49. package/umd/tabs/index.js +11 -4
  50. package/umd/tabs/tab-cell-underline.d.ts +4 -0
  51. package/umd/tabs/tab-cell-underline.js +242 -0
  52. package/umd/tabs/tab-cell.d.ts +1 -85
  53. package/umd/tabs/tab-cell.js +56 -202
  54. package/umd/tabs/tab-pane.d.ts +2 -38
  55. package/umd/tabs/type.d.ts +590 -0
  56. package/umd/tabs/type.js +17 -0
@@ -0,0 +1,218 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
3
+ import { addCssKeyframes, cls, nextTick, removeCssStyleDom } from '@arco-design/mobile-utils';
4
+ import { getStyleWithVendor, useRefState, useSystem } from '../_helpers';
5
+ var TabCellUnderline = /*#__PURE__*/forwardRef(function (props, ref) {
6
+ var prefix = props.prefix,
7
+ useCaterpillar = props.useCaterpillar,
8
+ distance = props.distance,
9
+ tabDirection = props.tabDirection,
10
+ underlineInnerStyle = props.underlineInnerStyle,
11
+ duration = props.duration,
12
+ cellTrans = props.cellTrans,
13
+ showLine = props.showLine,
14
+ activeIndex = props.activeIndex,
15
+ wrapWidth = props.wrapWidth,
16
+ wrapHeight = props.wrapHeight,
17
+ jumpingDis = props.jumpingDis,
18
+ translateZ = props.translateZ,
19
+ caterpillarMaxScale = props.caterpillarMaxScale,
20
+ caterpillarProperty = props.caterpillarProperty,
21
+ underlineSize = props.underlineSize,
22
+ underlineThick = props.underlineThick,
23
+ renderUnderline = props.renderUnderline,
24
+ getTabCenterLeft = props.getTabCenterLeft;
25
+
26
+ var _useState = useState({}),
27
+ underlineStyle = _useState[0],
28
+ setUnderlineStyle = _useState[1];
29
+
30
+ var _useRefState = useRefState(false),
31
+ caterpillar = _useRefState[0],
32
+ caterpillarRef = _useRefState[1],
33
+ setCaterpillar = _useRefState[2];
34
+
35
+ var _useState2 = useState(0),
36
+ caterpillarDelay = _useState2[0],
37
+ setCaterpillarDelay = _useState2[1];
38
+
39
+ var lineRef = useRef(null);
40
+ var timeRef = useRef(0);
41
+ var system = useSystem();
42
+ var isVertical = tabDirection === 'vertical';
43
+ var maxScaleWithDefault = caterpillarMaxScale || 2;
44
+ var translateZStr = translateZ ? ' translateZ(0)' : '';
45
+ useImperativeHandle(ref, function () {
46
+ return {
47
+ setCaterpillarAnimate: setCaterpillarAnimate,
48
+ resetUnderlineStyle: resetUnderlineStyle
49
+ };
50
+ }, [setCaterpillarAnimate, resetUnderlineStyle]);
51
+ var animationKey = useMemo(function () {
52
+ if (!useCaterpillar) {
53
+ return '';
54
+ }
55
+
56
+ if (caterpillarProperty === 'size') {
57
+ return "tabsCaterpillar" + (isVertical ? 'W' : 'H') + maxScaleWithDefault;
58
+ }
59
+
60
+ if (caterpillarMaxScale) {
61
+ return "tabsCaterpillar" + (isVertical ? 'X' : 'Y') + caterpillarMaxScale;
62
+ }
63
+
64
+ return '';
65
+ }, [useCaterpillar, isVertical, caterpillarMaxScale, caterpillarProperty]);
66
+ useEffect(function () {
67
+ if (!animationKey) {
68
+ return;
69
+ }
70
+
71
+ var dir = isVertical ? 'X' : 'Y';
72
+
73
+ if (caterpillarProperty === 'size') {
74
+ var attr = isVertical ? 'width' : 'height';
75
+ addCssKeyframes(animationKey, "{\n 0% {\n " + attr + ": 100%;\n }\n 50% {\n " + attr + ": " + 100 * maxScaleWithDefault + "%;\n }\n 100% {\n " + attr + ": 100%;\n }\n }");
76
+ return;
77
+ }
78
+
79
+ 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 }");
80
+ return function () {
81
+ removeCssStyleDom(animationKey);
82
+ };
83
+ }, [animationKey]);
84
+ useEffect(function () {
85
+ if (jumpingDis && useCaterpillar && system !== 'ios') {
86
+ var movedRatio = wrapWidth ? jumpingDis / wrapWidth : 0;
87
+ setCaterpillarAnimate(movedRatio);
88
+ }
89
+ }, [jumpingDis]);
90
+ useEffect(function () {
91
+ resetUnderlineStyle();
92
+ }, [useCaterpillar, caterpillar, cellTrans, duration, tabDirection, wrapWidth, wrapHeight, distance, animationKey, caterpillarDelay]);
93
+
94
+ function getLineLeft(index) {
95
+ var _lineRef$current, _lineRef$current2;
96
+
97
+ var offsetSize = isVertical ? (_lineRef$current = lineRef.current) == null ? void 0 : _lineRef$current.offsetWidth : (_lineRef$current2 = lineRef.current) == null ? void 0 : _lineRef$current2.offsetHeight;
98
+ var lineWidth = offsetSize || 0;
99
+ return getTabCenterLeft(index) - lineWidth / 2;
100
+ }
101
+
102
+ function getDescIndex() {
103
+ if (distance > 0) {
104
+ return activeIndex - 1;
105
+ }
106
+
107
+ if (distance < 0) {
108
+ return activeIndex + 1;
109
+ }
110
+
111
+ return activeIndex;
112
+ }
113
+
114
+ function getLineScale(ratio) {
115
+ var absRatio = Math.abs(ratio);
116
+ return absRatio > 0.5 ? (1 - absRatio) * 2 * (maxScaleWithDefault - 1) + 1 : absRatio * 2 * (maxScaleWithDefault - 1) + 1;
117
+ }
118
+
119
+ function getLineStyle() {
120
+ var _ref;
121
+
122
+ if (!lineRef.current) {
123
+ return {};
124
+ }
125
+
126
+ var currentLeft = getLineLeft(activeIndex);
127
+ var descIndex = getDescIndex();
128
+ var descLeft = getLineLeft(descIndex);
129
+ var moveRatio = wrapWidth ? distance / wrapWidth : 0;
130
+ var leftOffset = moveRatio * (currentLeft - descLeft);
131
+ var direc = isVertical ? 'X' : 'Y';
132
+ var transStyle = useCaterpillar && !jumpingDis ? caterpillarProperty === 'size' ? (_ref = {}, _ref[isVertical ? 'width' : 'height'] = 100 * getLineScale(moveRatio) + "%", _ref.willChange = 'width', _ref) : {
133
+ transform: "scale" + direc + "(" + getLineScale(moveRatio) + ")"
134
+ } : {};
135
+ var outerSize = isVertical ? {
136
+ width: underlineSize,
137
+ height: underlineThick
138
+ } : {
139
+ height: underlineSize,
140
+ width: underlineThick
141
+ };
142
+ return {
143
+ outer: _extends({
144
+ transform: "translate" + direc + "(" + (distance > 0 ? currentLeft - leftOffset : currentLeft + leftOffset) + "px)" + translateZStr
145
+ }, outerSize),
146
+ inner: _extends({}, transStyle)
147
+ };
148
+ }
149
+
150
+ function getUnderlineStyle() {
151
+ var transStyle = {};
152
+
153
+ if (useCaterpillar) {
154
+ transStyle.animationDuration = duration + "ms";
155
+ }
156
+
157
+ if (caterpillarRef.current && animationKey) {
158
+ transStyle.animationName = animationKey;
159
+ }
160
+
161
+ if (caterpillarDelay) {
162
+ transStyle.animationDelay = "-" + caterpillarDelay + "ms";
163
+ }
164
+
165
+ var lineStyle = getLineStyle();
166
+ return {
167
+ outer: getStyleWithVendor(_extends({
168
+ transitionDuration: cellTrans ? duration + "ms" : '0ms'
169
+ }, lineStyle.outer || {})),
170
+ inner: getStyleWithVendor(_extends({}, transStyle, lineStyle.inner || {}))
171
+ };
172
+ }
173
+
174
+ function resetUnderlineStyle() {
175
+ setUnderlineStyle(getUnderlineStyle());
176
+ }
177
+
178
+ function setCaterpillarAnimate(movedRatio) {
179
+ if (movedRatio === void 0) {
180
+ movedRatio = 0;
181
+ }
182
+
183
+ if (!duration) {
184
+ return;
185
+ }
186
+
187
+ var movedTime = (duration || 0) * Math.abs(movedRatio);
188
+ setCaterpillarDelay(movedTime);
189
+ nextTick(function () {
190
+ setCaterpillar(true);
191
+ });
192
+
193
+ if (timeRef.current) {
194
+ clearTimeout(timeRef.current);
195
+ }
196
+
197
+ timeRef.current = window.setTimeout(function () {
198
+ setCaterpillar(false);
199
+ setCaterpillarDelay(0);
200
+ }, (duration || 0) - movedTime + 20);
201
+ }
202
+
203
+ return renderUnderline ? /*#__PURE__*/React.createElement(React.Fragment, null, renderUnderline(underlineStyle, showLine, lineRef)) : /*#__PURE__*/React.createElement("div", {
204
+ className: cls(prefix + "-underline", {
205
+ show: showLine
206
+ }),
207
+ ref: lineRef,
208
+ style: underlineStyle.outer
209
+ }, /*#__PURE__*/React.createElement("div", {
210
+ className: cls(prefix + "-underline-inner", {
211
+ caterpillar: caterpillar,
212
+ 'custom-animate': animationKey,
213
+ 'caterpillar-moving': caterpillar || useCaterpillar && distance
214
+ }, tabDirection),
215
+ style: _extends({}, underlineStyle.inner || {}, underlineInnerStyle || {})
216
+ }));
217
+ });
218
+ export default TabCellUnderline;
@@ -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;
@@ -1,7 +1,8 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
- import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect, useMemo } from 'react';
3
- import { cls, scrollWithAnimation, nextTick, addCssKeyframes, removeCssStyleDom } from '@arco-design/mobile-utils';
4
- import { useSystem, getStyleWithVendor, useRefState } from '../_helpers';
2
+ import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect } from 'react';
3
+ import { cls, scrollWithAnimation, nextTick } from '@arco-design/mobile-utils';
4
+ import { useSystem } from '../_helpers';
5
+ import TabCellUnderline from './tab-cell-underline';
5
6
  var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
6
7
  var tabs = props.tabs,
7
8
  prefixCls = props.prefixCls,
@@ -50,43 +51,29 @@ var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
50
51
  translateZ = props.translateZ;
51
52
  var prefix = prefixCls + "-tab-cell";
52
53
  var domRef = useRef(null);
53
- var lineRef = useRef(null);
54
- var timeRef = useRef(0);
54
+ var underlineRef = useRef(null);
55
55
  var allCellRectRef = useRef([]);
56
56
 
57
- var _useState = useState({}),
58
- underlineStyle = _useState[0],
59
- setUnderlineStyle = _useState[1];
57
+ var _useState = useState(false),
58
+ showLine = _useState[0],
59
+ setShowLine = _useState[1];
60
60
 
61
- var _useRefState = useRefState(false),
62
- caterpillar = _useRefState[0],
63
- caterpillarRef = _useRefState[1],
64
- setCaterpillar = _useRefState[2];
61
+ var _useState2 = useState(false),
62
+ hasOverflow = _useState2[0],
63
+ setHasOverflow = _useState2[1];
65
64
 
66
- var _useState2 = useState(0),
67
- caterpillarDelay = _useState2[0],
68
- setCaterpillarDelay = _useState2[1];
69
-
70
- var _useState3 = useState(false),
71
- hasOverflow = _useState3[0],
72
- setHasOverflow = _useState3[1];
73
-
74
- var _useState4 = useState(function () {
65
+ var _useState3 = useState(function () {
75
66
  return tabs.length < overflowThreshold ? tabBarArrange : 'start';
76
67
  }),
77
- originArrange = _useState4[0],
78
- setOriginArrange = _useState4[1]; // 默认tab小于overflowThreshold个时不开启加载前隐藏,大于overflowThreshold个时开启
68
+ originArrange = _useState3[0],
69
+ setOriginArrange = _useState3[1]; // 默认tab小于overflowThreshold个时不开启加载前隐藏,大于overflowThreshold个时开启
79
70
 
80
71
 
81
- var _useState5 = useState(function () {
72
+ var _useState4 = useState(function () {
82
73
  return hideTabBarBeforeMounted === void 0 ? tabs.length < overflowThreshold || activeIndex === 0 : !hideTabBarBeforeMounted;
83
74
  }),
84
- showTab = _useState5[0],
85
- setShowTab = _useState5[1];
86
-
87
- var _useState6 = useState(false),
88
- showLine = _useState6[0],
89
- setShowLine = _useState6[1];
75
+ showTab = _useState4[0],
76
+ setShowTab = _useState4[1];
90
77
 
91
78
  var isVertical = tabDirection === 'vertical';
92
79
  var isLine = (type || '').indexOf('line') !== -1;
@@ -100,42 +87,7 @@ var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
100
87
  var cellGutter = isCard ? void 0 : tabBarGutter;
101
88
  var hasDivider = tabBarHasDivider === void 0 ? isLine : tabBarHasDivider;
102
89
  var wrapSize = isVertical ? wrapWidth : wrapHeight;
103
- var translateZStr = translateZ ? ' translateZ(0)' : '';
104
90
  var system = useSystem();
105
- var maxScaleWithDefault = caterpillarMaxScale || 2;
106
- var animationKey = useMemo(function () {
107
- if (!showUnderline || !useCaterpillar) {
108
- return '';
109
- }
110
-
111
- if (caterpillarProperty === 'size') {
112
- return "tabsCaterpillar" + (isVertical ? 'W' : 'H') + maxScaleWithDefault;
113
- }
114
-
115
- if (caterpillarMaxScale) {
116
- return "tabsCaterpillar" + (isVertical ? 'X' : 'Y') + caterpillarMaxScale;
117
- }
118
-
119
- return '';
120
- }, [showUnderline, useCaterpillar, isVertical, caterpillarMaxScale, caterpillarProperty]);
121
- useEffect(function () {
122
- if (!animationKey) {
123
- return;
124
- }
125
-
126
- var dir = isVertical ? 'X' : 'Y';
127
-
128
- if (caterpillarProperty === 'size') {
129
- var attr = isVertical ? 'width' : 'height';
130
- addCssKeyframes(animationKey, "{\n 0% {\n " + attr + ": 100%;\n }\n 50% {\n " + attr + ": " + 100 * maxScaleWithDefault + "%;\n }\n 100% {\n " + attr + ": 100%;\n }\n }");
131
- return;
132
- }
133
-
134
- 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 }");
135
- return function () {
136
- removeCssStyleDom(animationKey);
137
- };
138
- }, [animationKey]);
139
91
  useEffect(function () {
140
92
  nextTick(function () {
141
93
  setCellOverflow(); // dom出来之后originArrange置空,交由tabBarArrange控制
@@ -148,12 +100,11 @@ var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
148
100
  setShowLine(true);
149
101
  });
150
102
  }, [domRef.current, wrapSize, tabs]);
151
- useEffect(function () {
152
- resetUnderlineStyle();
153
- }, [useCaterpillar, caterpillar, cellTrans, duration, tabDirection, wrapWidth, wrapHeight, distance, animationKey, caterpillarDelay]);
154
103
  useEffect(function () {
155
104
  nextTick(function () {
156
- resetUnderlineStyle();
105
+ var _underlineRef$current;
106
+
107
+ (_underlineRef$current = underlineRef.current) == null ? void 0 : _underlineRef$current.resetUnderlineStyle();
157
108
  });
158
109
  }, [activeIndex, tabs, getCellPadding('left'), getCellPadding('right'), tabBarGutter, tabDirection]);
159
110
  useImperativeHandle(ref, function () {
@@ -162,10 +113,18 @@ var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
162
113
  scrollTo: scrollTo,
163
114
  scrollToCenter: scrollToCenter,
164
115
  hasOverflow: hasOverflow,
165
- setCaterpillarAnimate: setCaterpillarAnimate,
166
- resetUnderlineStyle: resetUnderlineStyle
116
+ setCaterpillarAnimate: function setCaterpillarAnimate(ratio) {
117
+ var _underlineRef$current2;
118
+
119
+ return (_underlineRef$current2 = underlineRef.current) == null ? void 0 : _underlineRef$current2.setCaterpillarAnimate(ratio);
120
+ },
121
+ resetUnderlineStyle: function resetUnderlineStyle() {
122
+ var _underlineRef$current3;
123
+
124
+ return (_underlineRef$current3 = underlineRef.current) == null ? void 0 : _underlineRef$current3.resetUnderlineStyle();
125
+ }
167
126
  };
168
- }, [scrollToCenter, scrollTo, hasOverflow, setCaterpillarAnimate, resetUnderlineStyle]);
127
+ }, [scrollToCenter, scrollTo, hasOverflow]);
169
128
  useEffect(function () {
170
129
  if (wrapSize && tabBarScrollChance !== 'none') {
171
130
  setTimeout(function () {
@@ -193,16 +152,6 @@ var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
193
152
  }
194
153
  };
195
154
  }, [hasOverflow]);
196
- useEffect(function () {
197
- if (jumpingDis && useCaterpillar && system !== 'ios') {
198
- var movedRatio = wrapWidth ? jumpingDis / wrapWidth : 0;
199
- setCaterpillarAnimate(movedRatio);
200
- }
201
- }, [jumpingDis]);
202
-
203
- function resetUnderlineStyle() {
204
- setUnderlineStyle(getUnderlineStyle());
205
- }
206
155
 
207
156
  function setCellOverflow() {
208
157
  var overflow = false;
@@ -270,69 +219,6 @@ var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
270
219
  }
271
220
  }
272
221
 
273
- function getUnderlineStyle() {
274
- var transStyle = {};
275
-
276
- if (useCaterpillar) {
277
- transStyle.animationDuration = duration + "ms";
278
- }
279
-
280
- if (caterpillarRef.current && animationKey) {
281
- transStyle.animationName = animationKey;
282
- }
283
-
284
- if (caterpillarDelay) {
285
- transStyle.animationDelay = "-" + caterpillarDelay + "ms";
286
- }
287
-
288
- var lineStyle = getLineStyle();
289
- return {
290
- outer: getStyleWithVendor(_extends({
291
- transitionDuration: cellTrans ? duration + "ms" : '0ms'
292
- }, lineStyle.outer || {})),
293
- inner: getStyleWithVendor(_extends({}, transStyle, lineStyle.inner || {}))
294
- };
295
- }
296
-
297
- function getLineStyle() {
298
- var _ref;
299
-
300
- if (!lineRef.current || !domRef.current) {
301
- return {};
302
- }
303
-
304
- var currentLeft = getLineLeft(activeIndex);
305
- var descIndex = getDescIndex();
306
- var descLeft = getLineLeft(descIndex);
307
- var moveRatio = wrapWidth ? distance / wrapWidth : 0;
308
- var leftOffset = moveRatio * (currentLeft - descLeft);
309
- var direc = isVertical ? 'X' : 'Y';
310
- var transStyle = useCaterpillar && !jumpingDis ? caterpillarProperty === 'size' ? (_ref = {}, _ref[isVertical ? 'width' : 'height'] = 100 * getLineScale(moveRatio) + "%", _ref.willChange = 'width', _ref) : {
311
- transform: "scale" + direc + "(" + getLineScale(moveRatio) + ")"
312
- } : {};
313
- var outerSize = isVertical ? {
314
- width: underlineSize,
315
- height: underlineThick
316
- } : {
317
- height: underlineSize,
318
- width: underlineThick
319
- };
320
- return {
321
- outer: _extends({
322
- transform: "translate" + direc + "(" + (distance > 0 ? currentLeft - leftOffset : currentLeft + leftOffset) + "px)" + translateZStr
323
- }, outerSize),
324
- inner: _extends({}, transStyle)
325
- };
326
- }
327
-
328
- function getLineLeft(index) {
329
- var _lineRef$current, _lineRef$current2;
330
-
331
- var offsetSize = isVertical ? (_lineRef$current = lineRef.current) == null ? void 0 : _lineRef$current.offsetWidth : (_lineRef$current2 = lineRef.current) == null ? void 0 : _lineRef$current2.offsetHeight;
332
- var lineWidth = offsetSize || 0;
333
- return getTabCenterLeft(index) - lineWidth / 2;
334
- }
335
-
336
222
  function getTabCenterLeft(index) {
337
223
  var currentTab = allCellRectRef.current[index] || {};
338
224
  var currentTabWidth = (isVertical ? currentTab.width : currentTab.height) || 0;
@@ -340,48 +226,6 @@ var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
340
226
  return currentTabLeft + currentTabWidth / 2;
341
227
  }
342
228
 
343
- function getLineScale(ratio) {
344
- var absRatio = Math.abs(ratio);
345
- return absRatio > 0.5 ? (1 - absRatio) * 2 * (maxScaleWithDefault - 1) + 1 : absRatio * 2 * (maxScaleWithDefault - 1) + 1;
346
- }
347
-
348
- function getDescIndex() {
349
- if (distance > 0) {
350
- return activeIndex - 1;
351
- }
352
-
353
- if (distance < 0) {
354
- return activeIndex + 1;
355
- }
356
-
357
- return activeIndex;
358
- }
359
-
360
- function setCaterpillarAnimate(movedRatio) {
361
- if (movedRatio === void 0) {
362
- movedRatio = 0;
363
- }
364
-
365
- if (!duration) {
366
- return;
367
- }
368
-
369
- var movedTime = (duration || 0) * Math.abs(movedRatio);
370
- setCaterpillarDelay(movedTime);
371
- nextTick(function () {
372
- setCaterpillar(true);
373
- });
374
-
375
- if (timeRef.current) {
376
- clearTimeout(timeRef.current);
377
- }
378
-
379
- timeRef.current = window.setTimeout(function () {
380
- setCaterpillar(false);
381
- setCaterpillarDelay(0);
382
- }, (duration || 0) - movedTime + 20);
383
- }
384
-
385
229
  function getCellPadding(pType) {
386
230
  if (typeof cellPadding === 'object') {
387
231
  return cellPadding[pType];
@@ -422,20 +266,30 @@ var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
422
266
  return null;
423
267
  }
424
268
 
425
- return renderUnderline ? renderUnderline(underlineStyle, showLine, lineRef) : /*#__PURE__*/React.createElement("div", {
426
- className: cls(prefix + "-underline", {
427
- show: showLine
428
- }),
429
- ref: lineRef,
430
- style: underlineStyle.outer
431
- }, /*#__PURE__*/React.createElement("div", {
432
- className: cls(prefix + "-underline-inner", {
433
- caterpillar: caterpillar,
434
- 'custom-animate': animationKey,
435
- 'caterpillar-moving': caterpillar || useCaterpillar && distance
436
- }, tabDirection),
437
- style: _extends({}, underlineStyle.inner || {}, underlineInnerStyle || {})
438
- }));
269
+ var lineProps = {
270
+ prefix: prefix,
271
+ showLine: showLine,
272
+ useCaterpillar: useCaterpillar,
273
+ distance: distance,
274
+ tabDirection: tabDirection,
275
+ underlineInnerStyle: underlineInnerStyle,
276
+ cellTrans: cellTrans,
277
+ duration: duration,
278
+ activeIndex: activeIndex,
279
+ wrapWidth: wrapWidth,
280
+ wrapHeight: wrapHeight,
281
+ jumpingDis: jumpingDis,
282
+ caterpillarMaxScale: caterpillarMaxScale,
283
+ caterpillarProperty: caterpillarProperty,
284
+ translateZ: translateZ,
285
+ underlineSize: underlineSize,
286
+ underlineThick: underlineThick,
287
+ renderUnderline: renderUnderline
288
+ };
289
+ return /*#__PURE__*/React.createElement(TabCellUnderline, _extends({
290
+ ref: underlineRef,
291
+ getTabCenterLeft: getTabCenterLeft
292
+ }, lineProps));
439
293
  }
440
294
 
441
295
  var cellInner = /*#__PURE__*/React.createElement(React.Fragment, null, tabs.map(function (tab, index) {
@@ -1,40 +1,4 @@
1
- import React, { ReactNodeArray } from 'react';
2
- import { TabsProps } from '.';
3
- export interface TabPaneProps extends Pick<TabsProps, 'duration' | 'transitionDuration' | 'lazyloadCount' | 'hideContentStyle' | 'renderHideContent' | 'mode' | 'tabPaneClass' | 'tabPaneStyle' | 'tabPaneExtra' | 'getScrollContainer' | 'scrollThrottle' | 'scrollOffset' | 'goLastWhenScrollBottom' | 'scrollVertical' | 'translateZ' | 'fullScreen' | 'autoHeight' | 'onScroll'> {
4
- prefixCls?: string;
5
- panes: ReactNodeArray;
6
- activeIndex: number;
7
- activeIndexRef: React.MutableRefObject<number>;
8
- tabDirection: 'horizontal' | 'vertical';
9
- distance: number;
10
- wrapWidth: number;
11
- wrapHeight: number;
12
- handlePaneTouchEnd: (e: any) => void;
13
- paneTrans: boolean;
14
- swipeable: boolean;
15
- changeIndex: (newIndex: number, from?: string) => void;
16
- }
17
- export interface TabPaneRef {
18
- /**
19
- * 外层元素 DOM
20
- * @en Outer element DOM
21
- */
22
- dom: HTMLDivElement | null;
23
- /**
24
- * 获取当前 transitionDuration
25
- * @en Get the current transitionDuration
26
- */
27
- getTransition: () => number;
28
- /**
29
- * 滚动到指定 Tab,仅滚动监听模式下可用
30
- * @en Scroll to the specified Tab, only available in scroll monitor mode
31
- */
32
- scrollToIndex: (index: number, rightNow?: boolean) => void;
33
- /**
34
- * autoHeight=true时,更新当前tabpane高度
35
- * @en Update the current tabpane height, which takes effect when autoHeight=true
36
- */
37
- setCurrentHeight: () => void;
38
- }
1
+ import React from 'react';
2
+ import { TabPaneProps, TabPaneRef } from './type';
39
3
  declare const TabPane: React.ForwardRefExoticComponent<TabPaneProps & React.RefAttributes<TabPaneRef>>;
40
4
  export default TabPane;