@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 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.1/dist/style.min.css">
63
- <script src="https://unpkg.com/@arco-design/mobile-react@2.27.1/dist/index.min.js"></script>
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.1/dist/style.min.css">
63
- <script src="https://unpkg.com/@arco-design/mobile-react@2.27.1/dist/index.min.js"></script>
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
 
@@ -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) || child.type !== _group.IndexBarGroup) {
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
- return isChildrenExist.current && domRef.current && domRef.current.children.length;
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;
@@ -399,6 +399,11 @@
399
399
  transition-timing-function: ease-out;
400
400
  }
401
401
 
402
+ &.mode-swipe-energy-saving {
403
+ position: relative;
404
+ overflow: hidden;
405
+ }
406
+
402
407
  &.full-screen {
403
408
  flex: 1;
404
409
  overflow: hidden;
@@ -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 _useState2 = (0, _react.useState)('auto'),
68
- currentPaneHeight = _useState2[0],
69
- setCurrentPaneHeight = _useState2[1];
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, pane);
274
- } // 不在加载范围内,视renderHideContent和hideContentStyle情况而定
275
- // @en Not in the loading range, depending on renderHideContent and hideContentStyle
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: hideContentStyle || {}
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: hideContentStyle
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(),
@@ -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
- return isChildrenExist.current && domRef.current && domRef.current.children.length;
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.2
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) || child.type !== IndexBarGroup) {
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 _d = React.useState('auto'),
27186
- currentPaneHeight = _d[0],
27187
- setCurrentPaneHeight = _d[1];
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), pane);
27392
- } // 不在加载范围内,视renderHideContent和hideContentStyle情况而定
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: hideContentStyle || {}
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: hideContentStyle
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 _7 = React.useState(defaultActiveTab),
27547
- innerIndex = _7[0],
27548
- setInnerIndex = _7[1];
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
- wrapWidth = _9[0],
27556
- setWrapWidth = _9[1];
27594
+ jumpingDis = _9[0],
27595
+ setJumpingDis = _9[1];
27557
27596
 
27558
27597
  var _10 = React.useState(0),
27559
- wrapHeight = _10[0],
27560
- setWrapHeight = _10[1];
27598
+ wrapWidth = _10[0],
27599
+ setWrapWidth = _10[1];
27561
27600
 
27562
- var _11 = React.useState(false),
27563
- cellTrans = _11[0],
27564
- setCellTrans = _11[1];
27601
+ var _11 = React.useState(0),
27602
+ wrapHeight = _11[0],
27603
+ setWrapHeight = _11[1];
27565
27604
 
27566
27605
  var _12 = React.useState(false),
27567
- paneTrans = _12[0],
27568
- setPaneTrans = _12[1];
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 _13 = useRefState(activeTab === void 0 ? innerIndex : activeTab),
27571
- activeIndex = _13[0],
27572
- activeIndexRef = _13[1],
27573
- setActiveIndex = _13[2];
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 _14 = useRefState(0),
27576
- distance = _14[0],
27577
- distanceRef = _14[1],
27578
- setDistance = _14[2];
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
  });