@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.
- package/CHANGELOG.md +24 -0
- package/README.en-US.md +2 -2
- package/README.md +2 -2
- package/cjs/button/style/css/index.css +64 -64
- package/cjs/button/style/index.less +7 -5
- package/cjs/ellipsis/components/js-ellipsis.js +7 -1
- package/cjs/image-picker/style/css/index.d.ts +1 -0
- package/cjs/image-picker/style/css/index.js +2 -0
- package/cjs/image-picker/style/index.d.ts +1 -0
- package/cjs/image-picker/style/index.js +2 -0
- package/cjs/tabs/index.d.ts +3 -463
- package/cjs/tabs/index.js +10 -0
- package/cjs/tabs/tab-cell-underline.d.ts +4 -0
- package/cjs/tabs/tab-cell-underline.js +234 -0
- package/cjs/tabs/tab-cell.d.ts +1 -85
- package/cjs/tabs/tab-cell.js +53 -198
- package/cjs/tabs/tab-pane.d.ts +2 -38
- package/cjs/tabs/type.d.ts +590 -0
- package/cjs/tabs/type.js +3 -0
- package/dist/index.js +272 -199
- package/dist/index.min.js +3 -3
- package/dist/style.css +64 -64
- package/dist/style.min.css +1 -1
- package/esm/button/style/css/index.css +64 -64
- package/esm/button/style/index.less +7 -5
- package/esm/ellipsis/components/js-ellipsis.js +7 -1
- package/esm/image-picker/style/css/index.d.ts +1 -0
- package/esm/image-picker/style/css/index.js +1 -0
- package/esm/image-picker/style/index.d.ts +1 -0
- package/esm/image-picker/style/index.js +1 -0
- package/esm/tabs/index.d.ts +3 -463
- package/esm/tabs/index.js +2 -1
- package/esm/tabs/tab-cell-underline.d.ts +4 -0
- package/esm/tabs/tab-cell-underline.js +218 -0
- package/esm/tabs/tab-cell.d.ts +1 -85
- package/esm/tabs/tab-cell.js +55 -201
- package/esm/tabs/tab-pane.d.ts +2 -38
- package/esm/tabs/type.d.ts +590 -0
- package/esm/tabs/type.js +1 -0
- package/package.json +3 -3
- package/umd/button/style/css/index.css +64 -64
- package/umd/button/style/index.less +7 -5
- package/umd/ellipsis/components/js-ellipsis.js +7 -1
- package/umd/image-picker/style/css/index.d.ts +1 -0
- package/umd/image-picker/style/css/index.js +4 -4
- package/umd/image-picker/style/index.d.ts +1 -0
- package/umd/image-picker/style/index.js +4 -4
- package/umd/tabs/index.d.ts +3 -463
- package/umd/tabs/index.js +11 -4
- package/umd/tabs/tab-cell-underline.d.ts +4 -0
- package/umd/tabs/tab-cell-underline.js +242 -0
- package/umd/tabs/tab-cell.d.ts +1 -85
- package/umd/tabs/tab-cell.js +56 -202
- package/umd/tabs/tab-pane.d.ts +2 -38
- package/umd/tabs/type.d.ts +590 -0
- 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;
|
package/esm/tabs/tab-cell.d.ts
CHANGED
@@ -1,88 +1,4 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import {
|
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;
|
package/esm/tabs/tab-cell.js
CHANGED
@@ -1,7 +1,8 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
|
-
import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect
|
3
|
-
import { cls, scrollWithAnimation, nextTick
|
4
|
-
import { useSystem
|
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
|
54
|
-
var timeRef = useRef(0);
|
54
|
+
var underlineRef = useRef(null);
|
55
55
|
var allCellRectRef = useRef([]);
|
56
56
|
|
57
|
-
var _useState = useState(
|
58
|
-
|
59
|
-
|
57
|
+
var _useState = useState(false),
|
58
|
+
showLine = _useState[0],
|
59
|
+
setShowLine = _useState[1];
|
60
60
|
|
61
|
-
var
|
62
|
-
|
63
|
-
|
64
|
-
setCaterpillar = _useRefState[2];
|
61
|
+
var _useState2 = useState(false),
|
62
|
+
hasOverflow = _useState2[0],
|
63
|
+
setHasOverflow = _useState2[1];
|
65
64
|
|
66
|
-
var
|
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 =
|
78
|
-
setOriginArrange =
|
68
|
+
originArrange = _useState3[0],
|
69
|
+
setOriginArrange = _useState3[1]; // 默认tab小于overflowThreshold个时不开启加载前隐藏,大于overflowThreshold个时开启
|
79
70
|
|
80
71
|
|
81
|
-
var
|
72
|
+
var _useState4 = useState(function () {
|
82
73
|
return hideTabBarBeforeMounted === void 0 ? tabs.length < overflowThreshold || activeIndex === 0 : !hideTabBarBeforeMounted;
|
83
74
|
}),
|
84
|
-
showTab =
|
85
|
-
setShowTab =
|
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
|
-
|
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
|
-
|
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
|
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
|
-
|
426
|
-
|
427
|
-
|
428
|
-
|
429
|
-
|
430
|
-
|
431
|
-
|
432
|
-
|
433
|
-
|
434
|
-
|
435
|
-
|
436
|
-
|
437
|
-
|
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) {
|
package/esm/tabs/tab-pane.d.ts
CHANGED
@@ -1,40 +1,4 @@
|
|
1
|
-
import React
|
2
|
-
import {
|
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;
|