@arco-design/mobile-react 2.27.2 → 2.27.4
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 +23 -0
- package/README.en-US.md +2 -2
- package/README.md +2 -2
- package/cjs/form/type.js +2 -0
- package/cjs/index-bar/utils.js +1 -3
- package/cjs/show-monitor/index.js +4 -3
- package/cjs/tabs/index.js +5 -2
- package/cjs/tabs/style/css/index.css +4 -0
- package/cjs/tabs/style/index.less +5 -0
- package/cjs/tabs/tab-pane.js +49 -12
- package/cjs/tabs/type.d.ts +7 -1
- package/dist/index.js +86 -42
- package/dist/index.min.js +3 -3
- package/dist/style.css +4 -0
- package/dist/style.min.css +1 -1
- package/esm/form/type.js +2 -0
- package/esm/index-bar/utils.js +1 -2
- package/esm/show-monitor/index.js +4 -3
- package/esm/tabs/index.js +5 -2
- package/esm/tabs/style/css/index.css +4 -0
- package/esm/tabs/style/index.less +5 -0
- package/esm/tabs/tab-pane.js +49 -11
- package/esm/tabs/type.d.ts +7 -1
- package/package.json +3 -3
- package/umd/form/type.js +2 -0
- package/umd/index-bar/utils.js +5 -5
- package/umd/show-monitor/index.js +4 -3
- package/umd/tabs/index.js +5 -2
- package/umd/tabs/style/css/index.css +4 -0
- package/umd/tabs/style/index.less +5 -0
- package/umd/tabs/tab-pane.js +49 -12
- package/umd/tabs/type.d.ts +7 -1
package/CHANGELOG.md
CHANGED
@@ -3,6 +3,29 @@
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
5
5
|
|
6
|
+
## [2.27.4](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.27.3...@arco-design/mobile-react@2.27.4) (2023-05-19)
|
7
|
+
|
8
|
+
|
9
|
+
### Bug Fixes
|
10
|
+
|
11
|
+
* `IndexBar` remove redundant children judgement ([#123](https://github.com/arco-design/arco-design-mobile/issues/123)) ([cbba80d](https://github.com/arco-design/arco-design-mobile/commit/cbba80dcdb7d7b58e893ab9bd08cc3388008a6f3))
|
12
|
+
* `ShowMonitor` fix disable observe when remount ([#125](https://github.com/arco-design/arco-design-mobile/issues/125)) ([73a5572](https://github.com/arco-design/arco-design-mobile/commit/73a5572961c7c2d6956c6c9406e486412b99e1c8))
|
13
|
+
|
14
|
+
|
15
|
+
|
16
|
+
|
17
|
+
|
18
|
+
## [2.27.3](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.27.2...@arco-design/mobile-react@2.27.3) (2023-05-16)
|
19
|
+
|
20
|
+
|
21
|
+
### Bug Fixes
|
22
|
+
|
23
|
+
* `Tabs` support swipe energy-saving mode ([50a440b](https://github.com/arco-design/arco-design-mobile/commit/50a440bc808c418a01160d8dcbaa2a870a5a4b97))
|
24
|
+
|
25
|
+
|
26
|
+
|
27
|
+
|
28
|
+
|
6
29
|
## [2.27.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.27.1...@arco-design/mobile-react@2.27.2) (2023-05-10)
|
7
30
|
|
8
31
|
|
package/README.en-US.md
CHANGED
@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
|
|
59
59
|
React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
|
60
60
|
|
61
61
|
```
|
62
|
-
<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.27.
|
63
|
-
<script src="https://unpkg.com/@arco-design/mobile-react@2.27.
|
62
|
+
<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.27.3/dist/style.min.css">
|
63
|
+
<script src="https://unpkg.com/@arco-design/mobile-react@2.27.3/dist/index.min.js"></script>
|
64
64
|
```
|
65
65
|
|
66
66
|
## Full import
|
package/README.md
CHANGED
@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="
|
|
59
59
|
React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
|
60
60
|
|
61
61
|
```
|
62
|
-
<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.27.
|
63
|
-
<script src="https://unpkg.com/@arco-design/mobile-react@2.27.
|
62
|
+
<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.27.3/dist/style.min.css">
|
63
|
+
<script src="https://unpkg.com/@arco-design/mobile-react@2.27.3/dist/index.min.js"></script>
|
64
64
|
```
|
65
65
|
|
66
66
|
## 引入全部
|
package/cjs/form/type.js
CHANGED
@@ -2,6 +2,8 @@
|
|
2
2
|
|
3
3
|
exports.__esModule = true;
|
4
4
|
exports.ValidateStatus = exports.FormInternalComponentType = void 0;
|
5
|
+
// 注意:自动识别form关联组件的依据,请勿轻易改变代码结构
|
6
|
+
// Notice: Automatically identify the basis of the associated component of the form, DO NOT change the code structure.
|
5
7
|
var FormInternalComponentType;
|
6
8
|
exports.FormInternalComponentType = FormInternalComponentType;
|
7
9
|
|
package/cjs/index-bar/utils.js
CHANGED
@@ -8,13 +8,11 @@ exports.isValidIndex = isValidIndex;
|
|
8
8
|
|
9
9
|
var _react = require("react");
|
10
10
|
|
11
|
-
var _group = require("./group");
|
12
|
-
|
13
11
|
function filterValidIndexBarChild(children) {
|
14
12
|
var validChildren = [];
|
15
13
|
|
16
14
|
_react.Children.forEach(children, function (child) {
|
17
|
-
if (! /*#__PURE__*/(0, _react.isValidElement)(child)
|
15
|
+
if (! /*#__PURE__*/(0, _react.isValidElement)(child)) {
|
18
16
|
console.warn('<IndexBar /> only accept <IndexBar.Group /> as the children');
|
19
17
|
return;
|
20
18
|
}
|
@@ -232,8 +232,9 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
232
232
|
onOnceEmittedListeners[key] = [];
|
233
233
|
}, []);
|
234
234
|
|
235
|
-
function handleCheckChildrenExist() {
|
236
|
-
|
235
|
+
function handleCheckChildrenExist(target) {
|
236
|
+
var dom = target || domRef.current;
|
237
|
+
return isChildrenExist.current && (dom == null ? void 0 : dom.children.length);
|
237
238
|
}
|
238
239
|
|
239
240
|
function handleObserverStatusChange(entries) {
|
@@ -253,7 +254,7 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
253
254
|
* @en Callback when the visible status of current element changes before the comparison
|
254
255
|
*/
|
255
256
|
|
256
|
-
isIntersecting !== curVisible && handleCheckChildrenExist() && onCompVisibleChange(isIntersecting, target);
|
257
|
+
isIntersecting !== curVisible && handleCheckChildrenExist(target) && onCompVisibleChange(isIntersecting, target);
|
257
258
|
/**
|
258
259
|
* 当前元素状态由不可见变为可见,且只触发一次
|
259
260
|
* @en The current element is invisible -> visible, and once, triggers the callback
|
package/cjs/tabs/index.js
CHANGED
@@ -147,7 +147,9 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
147
147
|
fullScreen = props.fullScreen,
|
148
148
|
autoHeight = props.autoHeight,
|
149
149
|
_props$tabBarStopProp = props.tabBarStopPropagation,
|
150
|
-
tabBarStopPropagation = _props$tabBarStopProp === void 0 ? true : _props$tabBarStopProp
|
150
|
+
tabBarStopPropagation = _props$tabBarStopProp === void 0 ? true : _props$tabBarStopProp,
|
151
|
+
_props$swipeEnergySav = props.swipeEnergySaving,
|
152
|
+
swipeEnergySaving = _props$swipeEnergySav === void 0 ? false : _props$swipeEnergySav;
|
151
153
|
var domRef = (0, _react.useRef)(null);
|
152
154
|
var cellRef = (0, _react.useRef)(null);
|
153
155
|
var paneRef = (0, _react.useRef)(null);
|
@@ -534,7 +536,8 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
534
536
|
tabPaneClass: tabPaneClass,
|
535
537
|
tabPaneExtra: tabPaneExtra,
|
536
538
|
autoHeight: autoHeight,
|
537
|
-
onScroll: onScroll
|
539
|
+
onScroll: onScroll,
|
540
|
+
swipeEnergySaving: swipeEnergySaving
|
538
541
|
}, commonProps)));
|
539
542
|
});
|
540
543
|
});
|
@@ -473,6 +473,10 @@
|
|
473
473
|
-webkit-transition-timing-function: ease-out;
|
474
474
|
transition-timing-function: ease-out;
|
475
475
|
}
|
476
|
+
.arco-tab-pane-container.mode-swipe-energy-saving {
|
477
|
+
position: relative;
|
478
|
+
overflow: hidden;
|
479
|
+
}
|
476
480
|
.arco-tab-pane-container.full-screen {
|
477
481
|
-webkit-box-flex: 1;
|
478
482
|
-webkit-flex: 1;
|
package/cjs/tabs/tab-pane.js
CHANGED
@@ -50,6 +50,7 @@ var TabPane = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
50
50
|
translateZ = props.translateZ,
|
51
51
|
fullScreen = props.fullScreen,
|
52
52
|
autoHeight = props.autoHeight,
|
53
|
+
swipeEnergySaving = props.swipeEnergySaving,
|
53
54
|
changeIndex = props.changeIndex,
|
54
55
|
onScroll = props.onScroll;
|
55
56
|
var domRef = (0, _react.useRef)(null);
|
@@ -61,12 +62,16 @@ var TabPane = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
61
62
|
shownIndexes = _useState[0],
|
62
63
|
setShownIndexes = _useState[1];
|
63
64
|
|
65
|
+
var _useState2 = (0, _react.useState)(activeIndex),
|
66
|
+
shownActiveIndex = _useState2[0],
|
67
|
+
setShownActiveIndex = _useState2[1];
|
68
|
+
|
64
69
|
var prefix = prefixCls + "-tab-pane";
|
65
70
|
var handleTouchEnd = swipeable ? handlePaneTouchEnd : void 0;
|
66
71
|
|
67
|
-
var
|
68
|
-
currentPaneHeight =
|
69
|
-
setCurrentPaneHeight =
|
72
|
+
var _useState3 = (0, _react.useState)('auto'),
|
73
|
+
currentPaneHeight = _useState3[0],
|
74
|
+
setCurrentPaneHeight = _useState3[1];
|
70
75
|
|
71
76
|
(0, _react.useImperativeHandle)(ref, function () {
|
72
77
|
return {
|
@@ -152,6 +157,8 @@ var TabPane = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
152
157
|
}
|
153
158
|
|
154
159
|
function calcShownIndexes() {
|
160
|
+
setShownActiveIndex(activeIndex);
|
161
|
+
|
155
162
|
if (typeof lazyloadCount === 'number') {
|
156
163
|
setShownIndexes([activeIndex - lazyloadCount, activeIndex + lazyloadCount]);
|
157
164
|
return;
|
@@ -252,11 +259,35 @@ var TabPane = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
252
259
|
var heightStyle = currentPaneHeight && currentPaneHeight !== 'auto' ? {
|
253
260
|
height: currentPaneHeight
|
254
261
|
} : {};
|
255
|
-
return (0, _helpers.getStyleWithVendor)((0, _extends2.default)({}, sizeStyle, {
|
262
|
+
return (0, _helpers.getStyleWithVendor)((0, _extends2.default)({}, swipeEnergySaving ? {} : sizeStyle, {
|
256
263
|
transitionDuration: getTransition() + "ms"
|
257
264
|
}, heightStyle, commonStyle));
|
258
265
|
}
|
259
266
|
|
267
|
+
function getEnergySavingPaneStyle(index) {
|
268
|
+
if (mode === 'scroll' || !swipeEnergySaving) {
|
269
|
+
return undefined;
|
270
|
+
}
|
271
|
+
|
272
|
+
if (index !== shownActiveIndex) {
|
273
|
+
return {
|
274
|
+
position: 'absolute',
|
275
|
+
left: '-100%',
|
276
|
+
top: '-100%'
|
277
|
+
};
|
278
|
+
}
|
279
|
+
|
280
|
+
var translateStr = translateZ ? ' translateZ(0)' : '';
|
281
|
+
var sizeStyle = tabDirection === 'vertical' ? {
|
282
|
+
transform: "translateX(" + (distance - wrapWidth * (activeIndex - index)) + "px)" + translateStr
|
283
|
+
} : {
|
284
|
+
transform: "translateY(" + (distance - wrapHeight * (activeIndex - index)) + "px)" + translateStr
|
285
|
+
};
|
286
|
+
return (0, _helpers.getStyleWithVendor)((0, _extends2.default)({}, sizeStyle, {
|
287
|
+
transitionDuration: getTransition() + "ms"
|
288
|
+
}));
|
289
|
+
}
|
290
|
+
|
260
291
|
function renderContent(pane, index) {
|
261
292
|
var contentProps = {
|
262
293
|
key: index,
|
@@ -266,32 +297,38 @@ var TabPane = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
266
297
|
ref: function ref(r) {
|
267
298
|
return panesRef.current[index] = r;
|
268
299
|
}
|
269
|
-
};
|
300
|
+
};
|
301
|
+
var energySavingStyle = getEnergySavingPaneStyle(index); // 是滚动模式或在加载范围内,直接渲染
|
270
302
|
// @en Render directly when in scroll mode or in loading scope
|
271
303
|
|
272
304
|
if (mode === 'scroll' || index >= shownIndexes[0] && index <= shownIndexes[1]) {
|
273
|
-
return /*#__PURE__*/_react.default.createElement("div", contentProps,
|
274
|
-
|
275
|
-
|
305
|
+
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, contentProps, {
|
306
|
+
style: energySavingStyle
|
307
|
+
}), pane);
|
308
|
+
}
|
276
309
|
|
310
|
+
var energySavingHideStyle = (0, _extends2.default)({}, energySavingStyle, hideContentStyle || {}); // 不在加载范围内,视renderHideContent和hideContentStyle情况而定
|
311
|
+
// @en Not in the loading range, depending on renderHideContent and hideContentStyle
|
277
312
|
|
278
313
|
if (renderHideContent) {
|
279
314
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, contentProps, {
|
280
|
-
style:
|
315
|
+
style: energySavingHideStyle
|
281
316
|
}), renderHideContent(index, pane));
|
282
317
|
}
|
283
318
|
|
284
319
|
if (hideContentStyle === null) {
|
285
|
-
return /*#__PURE__*/_react.default.createElement("div", contentProps
|
320
|
+
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, contentProps, {
|
321
|
+
style: energySavingStyle
|
322
|
+
}));
|
286
323
|
}
|
287
324
|
|
288
325
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, contentProps, {
|
289
|
-
style:
|
326
|
+
style: energySavingHideStyle
|
290
327
|
}), pane);
|
291
328
|
}
|
292
329
|
|
293
330
|
return /*#__PURE__*/_react.default.createElement("div", {
|
294
|
-
className: (0, _mobileUtils.cls)(prefix + "-container", tabDirection, "mode-" + mode, tabPaneClass, {
|
331
|
+
className: (0, _mobileUtils.cls)(prefix + "-container", tabDirection, swipeEnergySaving ? "mode-" + mode + "-energy-saving" : "mode-" + mode, tabPaneClass, {
|
295
332
|
'full-screen': fullScreen
|
296
333
|
}, (_cls = {}, _cls["mode-scroll-" + (scrollVertical ? 'vertical' : 'horizontal')] = mode === 'scroll', _cls)),
|
297
334
|
style: getPaneStyle(),
|
package/cjs/tabs/type.d.ts
CHANGED
@@ -322,6 +322,12 @@ export interface TabsProps {
|
|
322
322
|
* @default true
|
323
323
|
*/
|
324
324
|
translateZ?: boolean;
|
325
|
+
/**
|
326
|
+
* 是否启用滑动节能模式,开启后TabPane外层容器不会随panes数量撑开并提升为合成层,仅滑动当前选中的pane,其他pane在选中前将被隐藏
|
327
|
+
* @en Whether to enable the energy-saving sliding mode. After opening, the outer container of the TabPane will not expand with the number of panes and be promoted to a composite layer. Only the currently selected pane will be slid, and other panes will be hidden before being selected.
|
328
|
+
* @default false
|
329
|
+
*/
|
330
|
+
swipeEnergySaving?: boolean;
|
325
331
|
/**
|
326
332
|
* 当滑到第一页或最后一页,还想再滑动时触发
|
327
333
|
* @en Triggered when swiping to the first or last page and want to swipe again
|
@@ -560,7 +566,7 @@ export interface TabCellRef {
|
|
560
566
|
*/
|
561
567
|
resetUnderlineStyle: () => void;
|
562
568
|
}
|
563
|
-
export interface TabPaneProps extends Pick<TabsProps, 'duration' | 'transitionDuration' | 'lazyloadCount' | 'hideContentStyle' | 'renderHideContent' | 'mode' | 'tabPaneClass' | 'tabPaneStyle' | 'tabPaneExtra' | 'getScrollContainer' | 'scrollThrottle' | 'scrollOffset' | 'goLastWhenScrollBottom' | 'scrollVertical' | 'translateZ' | 'fullScreen' | 'autoHeight' | 'onScroll'> {
|
569
|
+
export interface TabPaneProps extends Pick<TabsProps, 'duration' | 'transitionDuration' | 'lazyloadCount' | 'hideContentStyle' | 'renderHideContent' | 'mode' | 'tabPaneClass' | 'tabPaneStyle' | 'tabPaneExtra' | 'getScrollContainer' | 'scrollThrottle' | 'scrollOffset' | 'goLastWhenScrollBottom' | 'scrollVertical' | 'translateZ' | 'fullScreen' | 'autoHeight' | 'onScroll' | 'swipeEnergySaving'> {
|
564
570
|
prefixCls?: string;
|
565
571
|
panes: ReactNodeArray;
|
566
572
|
activeIndex: number;
|
package/dist/index.js
CHANGED
@@ -12507,6 +12507,8 @@
|
|
12507
12507
|
layout: 'horizontal'
|
12508
12508
|
});
|
12509
12509
|
|
12510
|
+
// 注意:自动识别form关联组件的依据,请勿轻易改变代码结构
|
12511
|
+
// Notice: Automatically identify the basis of the associated component of the form, DO NOT change the code structure.
|
12510
12512
|
var FormInternalComponentType;
|
12511
12513
|
|
12512
12514
|
(function (FormInternalComponentType) {
|
@@ -15413,8 +15415,9 @@
|
|
15413
15415
|
onOnceEmittedListeners[key] = [];
|
15414
15416
|
}, []);
|
15415
15417
|
|
15416
|
-
function handleCheckChildrenExist() {
|
15417
|
-
|
15418
|
+
function handleCheckChildrenExist(target) {
|
15419
|
+
var dom = target || domRef.current;
|
15420
|
+
return isChildrenExist.current && (dom === null || dom === void 0 ? void 0 : dom.children.length);
|
15418
15421
|
}
|
15419
15422
|
|
15420
15423
|
function handleObserverStatusChange(entries) {
|
@@ -15434,7 +15437,7 @@
|
|
15434
15437
|
* @en Callback when the visible status of current element changes before the comparison
|
15435
15438
|
*/
|
15436
15439
|
|
15437
|
-
isIntersecting !== curVisible && handleCheckChildrenExist() && onCompVisibleChange(isIntersecting, target);
|
15440
|
+
isIntersecting !== curVisible && handleCheckChildrenExist(target) && onCompVisibleChange(isIntersecting, target);
|
15438
15441
|
/**
|
15439
15442
|
* 当前元素状态由不可见变为可见,且只触发一次
|
15440
15443
|
* @en The current element is invisible -> visible, and once, triggers the callback
|
@@ -17484,7 +17487,7 @@
|
|
17484
17487
|
var index$b = componentWrapper(ImagePicker, 'ImagePicker');
|
17485
17488
|
|
17486
17489
|
/*!
|
17487
|
-
* @arco-design/transformable v1.0.
|
17490
|
+
* @arco-design/transformable v1.0.1
|
17488
17491
|
* (c) 2022 ludan.kibbon
|
17489
17492
|
*/
|
17490
17493
|
function _defineProperty(obj, key, value) {
|
@@ -21045,7 +21048,7 @@
|
|
21045
21048
|
function filterValidIndexBarChild(children) {
|
21046
21049
|
var validChildren = [];
|
21047
21050
|
React.Children.forEach(children, function (child) {
|
21048
|
-
if (! /*#__PURE__*/React.isValidElement(child)
|
21051
|
+
if (! /*#__PURE__*/React.isValidElement(child)) {
|
21049
21052
|
console.warn('<IndexBar /> only accept <IndexBar.Group /> as the children');
|
21050
21053
|
return;
|
21051
21054
|
}
|
@@ -27168,6 +27171,7 @@
|
|
27168
27171
|
translateZ = props.translateZ,
|
27169
27172
|
fullScreen = props.fullScreen,
|
27170
27173
|
autoHeight = props.autoHeight,
|
27174
|
+
swipeEnergySaving = props.swipeEnergySaving,
|
27171
27175
|
changeIndex = props.changeIndex,
|
27172
27176
|
onScroll = props.onScroll;
|
27173
27177
|
var domRef = React.useRef(null);
|
@@ -27179,12 +27183,16 @@
|
|
27179
27183
|
shownIndexes = _c[0],
|
27180
27184
|
setShownIndexes = _c[1];
|
27181
27185
|
|
27186
|
+
var _d = React.useState(activeIndex),
|
27187
|
+
shownActiveIndex = _d[0],
|
27188
|
+
setShownActiveIndex = _d[1];
|
27189
|
+
|
27182
27190
|
var prefix = prefixCls + "-tab-pane";
|
27183
27191
|
var handleTouchEnd = swipeable ? handlePaneTouchEnd : void 0;
|
27184
27192
|
|
27185
|
-
var
|
27186
|
-
currentPaneHeight =
|
27187
|
-
setCurrentPaneHeight =
|
27193
|
+
var _e = React.useState('auto'),
|
27194
|
+
currentPaneHeight = _e[0],
|
27195
|
+
setCurrentPaneHeight = _e[1];
|
27188
27196
|
|
27189
27197
|
React.useImperativeHandle(ref, function () {
|
27190
27198
|
return {
|
@@ -27270,6 +27278,8 @@
|
|
27270
27278
|
}
|
27271
27279
|
|
27272
27280
|
function calcShownIndexes() {
|
27281
|
+
setShownActiveIndex(activeIndex);
|
27282
|
+
|
27273
27283
|
if (typeof lazyloadCount === 'number') {
|
27274
27284
|
setShownIndexes([activeIndex - lazyloadCount, activeIndex + lazyloadCount]);
|
27275
27285
|
return;
|
@@ -27370,11 +27380,35 @@
|
|
27370
27380
|
var heightStyle = currentPaneHeight && currentPaneHeight !== 'auto' ? {
|
27371
27381
|
height: currentPaneHeight
|
27372
27382
|
} : {};
|
27373
|
-
return getStyleWithVendor(__assign$2(__assign$2(__assign$2(__assign$2({}, sizeStyle), {
|
27383
|
+
return getStyleWithVendor(__assign$2(__assign$2(__assign$2(__assign$2({}, swipeEnergySaving ? {} : sizeStyle), {
|
27374
27384
|
transitionDuration: getTransition() + "ms"
|
27375
27385
|
}), heightStyle), commonStyle));
|
27376
27386
|
}
|
27377
27387
|
|
27388
|
+
function getEnergySavingPaneStyle(index) {
|
27389
|
+
if (mode === 'scroll' || !swipeEnergySaving) {
|
27390
|
+
return undefined;
|
27391
|
+
}
|
27392
|
+
|
27393
|
+
if (index !== shownActiveIndex) {
|
27394
|
+
return {
|
27395
|
+
position: 'absolute',
|
27396
|
+
left: '-100%',
|
27397
|
+
top: '-100%'
|
27398
|
+
};
|
27399
|
+
}
|
27400
|
+
|
27401
|
+
var translateStr = translateZ ? ' translateZ(0)' : '';
|
27402
|
+
var sizeStyle = tabDirection === 'vertical' ? {
|
27403
|
+
transform: "translateX(" + (distance - wrapWidth * (activeIndex - index)) + "px)" + translateStr
|
27404
|
+
} : {
|
27405
|
+
transform: "translateY(" + (distance - wrapHeight * (activeIndex - index)) + "px)" + translateStr
|
27406
|
+
};
|
27407
|
+
return getStyleWithVendor(__assign$2(__assign$2({}, sizeStyle), {
|
27408
|
+
transitionDuration: getTransition() + "ms"
|
27409
|
+
}));
|
27410
|
+
}
|
27411
|
+
|
27378
27412
|
function renderContent(pane, index) {
|
27379
27413
|
var contentProps = {
|
27380
27414
|
key: index,
|
@@ -27384,32 +27418,39 @@
|
|
27384
27418
|
ref: function ref(r) {
|
27385
27419
|
return panesRef.current[index] = r;
|
27386
27420
|
}
|
27387
|
-
};
|
27421
|
+
};
|
27422
|
+
var energySavingStyle = getEnergySavingPaneStyle(index); // 是滚动模式或在加载范围内,直接渲染
|
27388
27423
|
// @en Render directly when in scroll mode or in loading scope
|
27389
27424
|
|
27390
27425
|
if (mode === 'scroll' || index >= shownIndexes[0] && index <= shownIndexes[1]) {
|
27391
|
-
return /*#__PURE__*/React__default["default"].createElement("div", __assign$2({}, contentProps
|
27392
|
-
|
27426
|
+
return /*#__PURE__*/React__default["default"].createElement("div", __assign$2({}, contentProps, {
|
27427
|
+
style: energySavingStyle
|
27428
|
+
}), pane);
|
27429
|
+
}
|
27430
|
+
|
27431
|
+
var energySavingHideStyle = __assign$2(__assign$2({}, energySavingStyle), hideContentStyle || {}); // 不在加载范围内,视renderHideContent和hideContentStyle情况而定
|
27393
27432
|
// @en Not in the loading range, depending on renderHideContent and hideContentStyle
|
27394
27433
|
|
27395
27434
|
|
27396
27435
|
if (renderHideContent) {
|
27397
27436
|
return /*#__PURE__*/React__default["default"].createElement("div", __assign$2({}, contentProps, {
|
27398
|
-
style:
|
27437
|
+
style: energySavingHideStyle
|
27399
27438
|
}), renderHideContent(index, pane));
|
27400
27439
|
}
|
27401
27440
|
|
27402
27441
|
if (hideContentStyle === null) {
|
27403
|
-
return /*#__PURE__*/React__default["default"].createElement("div", __assign$2({}, contentProps
|
27442
|
+
return /*#__PURE__*/React__default["default"].createElement("div", __assign$2({}, contentProps, {
|
27443
|
+
style: energySavingStyle
|
27444
|
+
}));
|
27404
27445
|
}
|
27405
27446
|
|
27406
27447
|
return /*#__PURE__*/React__default["default"].createElement("div", __assign$2({}, contentProps, {
|
27407
|
-
style:
|
27448
|
+
style: energySavingHideStyle
|
27408
27449
|
}), pane);
|
27409
27450
|
}
|
27410
27451
|
|
27411
27452
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
27412
|
-
className: cls(prefix + "-container", tabDirection, "mode-" + mode, tabPaneClass, {
|
27453
|
+
className: cls(prefix + "-container", tabDirection, swipeEnergySaving ? "mode-" + mode + "-energy-saving" : "mode-" + mode, tabPaneClass, {
|
27413
27454
|
'full-screen': fullScreen
|
27414
27455
|
}, (_a = {}, _a["mode-scroll-" + (scrollVertical ? 'vertical' : 'horizontal')] = mode === 'scroll', _a)),
|
27415
27456
|
style: getPaneStyle(),
|
@@ -27538,44 +27579,46 @@
|
|
27538
27579
|
fullScreen = props.fullScreen,
|
27539
27580
|
autoHeight = props.autoHeight,
|
27540
27581
|
_6 = props.tabBarStopPropagation,
|
27541
|
-
tabBarStopPropagation = _6 === void 0 ? true : _6
|
27582
|
+
tabBarStopPropagation = _6 === void 0 ? true : _6,
|
27583
|
+
_7 = props.swipeEnergySaving,
|
27584
|
+
swipeEnergySaving = _7 === void 0 ? false : _7;
|
27542
27585
|
var domRef = React.useRef(null);
|
27543
27586
|
var cellRef = React.useRef(null);
|
27544
27587
|
var paneRef = React.useRef(null);
|
27545
27588
|
|
27546
|
-
var
|
27547
|
-
innerIndex =
|
27548
|
-
setInnerIndex =
|
27549
|
-
|
27550
|
-
var _8 = React.useState(0),
|
27551
|
-
jumpingDis = _8[0],
|
27552
|
-
setJumpingDis = _8[1];
|
27589
|
+
var _8 = React.useState(defaultActiveTab),
|
27590
|
+
innerIndex = _8[0],
|
27591
|
+
setInnerIndex = _8[1];
|
27553
27592
|
|
27554
27593
|
var _9 = React.useState(0),
|
27555
|
-
|
27556
|
-
|
27594
|
+
jumpingDis = _9[0],
|
27595
|
+
setJumpingDis = _9[1];
|
27557
27596
|
|
27558
27597
|
var _10 = React.useState(0),
|
27559
|
-
|
27560
|
-
|
27598
|
+
wrapWidth = _10[0],
|
27599
|
+
setWrapWidth = _10[1];
|
27561
27600
|
|
27562
|
-
var _11 = React.useState(
|
27563
|
-
|
27564
|
-
|
27601
|
+
var _11 = React.useState(0),
|
27602
|
+
wrapHeight = _11[0],
|
27603
|
+
setWrapHeight = _11[1];
|
27565
27604
|
|
27566
27605
|
var _12 = React.useState(false),
|
27567
|
-
|
27568
|
-
|
27606
|
+
cellTrans = _12[0],
|
27607
|
+
setCellTrans = _12[1];
|
27608
|
+
|
27609
|
+
var _13 = React.useState(false),
|
27610
|
+
paneTrans = _13[0],
|
27611
|
+
setPaneTrans = _13[1];
|
27569
27612
|
|
27570
|
-
var
|
27571
|
-
activeIndex =
|
27572
|
-
activeIndexRef =
|
27573
|
-
setActiveIndex =
|
27613
|
+
var _14 = useRefState(activeTab === void 0 ? innerIndex : activeTab),
|
27614
|
+
activeIndex = _14[0],
|
27615
|
+
activeIndexRef = _14[1],
|
27616
|
+
setActiveIndex = _14[2];
|
27574
27617
|
|
27575
|
-
var
|
27576
|
-
distance =
|
27577
|
-
distanceRef =
|
27578
|
-
setDistance =
|
27618
|
+
var _15 = useRefState(0),
|
27619
|
+
distance = _15[0],
|
27620
|
+
distanceRef = _15[1],
|
27621
|
+
setDistance = _15[2];
|
27579
27622
|
|
27580
27623
|
var posAdjustingRef = React.useRef(false);
|
27581
27624
|
var touchStartedRef = React.useRef(false);
|
@@ -27923,7 +27966,8 @@
|
|
27923
27966
|
tabPaneClass: tabPaneClass,
|
27924
27967
|
tabPaneExtra: tabPaneExtra,
|
27925
27968
|
autoHeight: autoHeight,
|
27926
|
-
onScroll: onScroll
|
27969
|
+
onScroll: onScroll,
|
27970
|
+
swipeEnergySaving: swipeEnergySaving
|
27927
27971
|
}, commonProps)));
|
27928
27972
|
});
|
27929
27973
|
});
|