@arco-design/mobile-react 2.27.2 → 2.27.3

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
+
+
+### Bug Fixes
+
+* `Tabs` support swipe energy-saving mode ([50a440b](https://github.com/arco-design/arco-design-mobile/commit/50a440bc808c418a01160d8dcbaa2a870a5a4b97))
+
+
+
+
+
 ## [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)
 
 

package/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.27.1/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.27.1/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.27.2/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.27.2/dist/index.min.js"></script>
 ```
 
 ## Full import

package/README.md

@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.27.1/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.27.1/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.27.2/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.27.2/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/tabs/index.js

@@ -147,7 +147,9 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       fullScreen = props.fullScreen,
       autoHeight = props.autoHeight,
       _props$tabBarStopProp = props.tabBarStopPropagation,
-      tabBarStopPropagation = _props$tabBarStopProp === void 0 ? true : _props$tabBarStopProp;
+      tabBarStopPropagation = _props$tabBarStopProp === void 0 ? true : _props$tabBarStopProp,
+      _props$swipeEnergySav = props.swipeEnergySaving,
+      swipeEnergySaving = _props$swipeEnergySav === void 0 ? false : _props$swipeEnergySav;
   var domRef = (0, _react.useRef)(null);
   var cellRef = (0, _react.useRef)(null);
   var paneRef = (0, _react.useRef)(null);
@@ -534,7 +536,8 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       tabPaneClass: tabPaneClass,
       tabPaneExtra: tabPaneExtra,
       autoHeight: autoHeight,
-      onScroll: onScroll
+      onScroll: onScroll,
+      swipeEnergySaving: swipeEnergySaving
     }, commonProps)));
   });
 });

package/cjs/tabs/style/css/index.css

@@ -473,6 +473,10 @@
   -webkit-transition-timing-function: ease-out;
           transition-timing-function: ease-out;
 }
+.arco-tab-pane-container.mode-swipe-energy-saving {
+  position: relative;
+  overflow: hidden;
+}
 .arco-tab-pane-container.full-screen {
   -webkit-box-flex: 1;
   -webkit-flex: 1;

package/cjs/tabs/style/index.less

@@ -399,6 +399,11 @@
         transition-timing-function: ease-out;
     }
 
+    &.mode-swipe-energy-saving {
+        position: relative;
+        overflow: hidden;
+    }
+
     &.full-screen {
         flex: 1;
         overflow: hidden;

package/cjs/tabs/tab-pane.js

@@ -50,6 +50,7 @@ var TabPane = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       translateZ = props.translateZ,
       fullScreen = props.fullScreen,
       autoHeight = props.autoHeight,
+      swipeEnergySaving = props.swipeEnergySaving,
       changeIndex = props.changeIndex,
       onScroll = props.onScroll;
   var domRef = (0, _react.useRef)(null);
@@ -61,12 +62,16 @@ var TabPane = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       shownIndexes = _useState[0],
       setShownIndexes = _useState[1];
 
+  var _useState2 = (0, _react.useState)(activeIndex),
+      shownActiveIndex = _useState2[0],
+      setShownActiveIndex = _useState2[1];
+
   var prefix = prefixCls + "-tab-pane";
   var handleTouchEnd = swipeable ? handlePaneTouchEnd : void 0;
 
-  var _useState2 = (0, _react.useState)('auto'),
-      currentPaneHeight = _useState2[0],
-      setCurrentPaneHeight = _useState2[1];
+  var _useState3 = (0, _react.useState)('auto'),
+      currentPaneHeight = _useState3[0],
+      setCurrentPaneHeight = _useState3[1];
 
   (0, _react.useImperativeHandle)(ref, function () {
     return {
@@ -152,6 +157,8 @@ var TabPane = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }
 
   function calcShownIndexes() {
+    setShownActiveIndex(activeIndex);
+
     if (typeof lazyloadCount === 'number') {
       setShownIndexes([activeIndex - lazyloadCount, activeIndex + lazyloadCount]);
       return;
@@ -252,11 +259,35 @@ var TabPane = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var heightStyle = currentPaneHeight && currentPaneHeight !== 'auto' ? {
       height: currentPaneHeight
     } : {};
-    return (0, _helpers.getStyleWithVendor)((0, _extends2.default)({}, sizeStyle, {
+    return (0, _helpers.getStyleWithVendor)((0, _extends2.default)({}, swipeEnergySaving ? {} : sizeStyle, {
       transitionDuration: getTransition() + "ms"
     }, heightStyle, commonStyle));
   }
 
+  function getEnergySavingPaneStyle(index) {
+    if (mode === 'scroll' || !swipeEnergySaving) {
+      return undefined;
+    }
+
+    if (index !== shownActiveIndex) {
+      return {
+        position: 'absolute',
+        left: '-100%',
+        top: '-100%'
+      };
+    }
+
+    var translateStr = translateZ ? ' translateZ(0)' : '';
+    var sizeStyle = tabDirection === 'vertical' ? {
+      transform: "translateX(" + (distance - wrapWidth * (activeIndex - index)) + "px)" + translateStr
+    } : {
+      transform: "translateY(" + (distance - wrapHeight * (activeIndex - index)) + "px)" + translateStr
+    };
+    return (0, _helpers.getStyleWithVendor)((0, _extends2.default)({}, sizeStyle, {
+      transitionDuration: getTransition() + "ms"
+    }));
+  }
+
   function renderContent(pane, index) {
     var contentProps = {
       key: index,
@@ -266,32 +297,38 @@ var TabPane = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       ref: function ref(r) {
         return panesRef.current[index] = r;
       }
-    }; // 是滚动模式或在加载范围内，直接渲染
+    };
+    var energySavingStyle = getEnergySavingPaneStyle(index); // 是滚动模式或在加载范围内，直接渲染
     // @en Render directly when in scroll mode or in loading scope
 
     if (mode === 'scroll' || index >= shownIndexes[0] && index <= shownIndexes[1]) {
-      return /*#__PURE__*/_react.default.createElement("div", contentProps, pane);
-    } // 不在加载范围内，视renderHideContent和hideContentStyle情况而定
-    // @en Not in the loading range, depending on renderHideContent and hideContentStyle
+      return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, contentProps, {
+        style: energySavingStyle
+      }), pane);
+    }
 
+    var energySavingHideStyle = (0, _extends2.default)({}, energySavingStyle, hideContentStyle || {}); // 不在加载范围内，视renderHideContent和hideContentStyle情况而定
+    // @en Not in the loading range, depending on renderHideContent and hideContentStyle
 
     if (renderHideContent) {
       return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, contentProps, {
-        style: hideContentStyle || {}
+        style: energySavingHideStyle
       }), renderHideContent(index, pane));
     }
 
     if (hideContentStyle === null) {
-      return /*#__PURE__*/_react.default.createElement("div", contentProps);
+      return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, contentProps, {
+        style: energySavingStyle
+      }));
     }
 
     return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, contentProps, {
-      style: hideContentStyle
+      style: energySavingHideStyle
     }), pane);
   }
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _mobileUtils.cls)(prefix + "-container", tabDirection, "mode-" + mode, tabPaneClass, {
+    className: (0, _mobileUtils.cls)(prefix + "-container", tabDirection, swipeEnergySaving ? "mode-" + mode + "-energy-saving" : "mode-" + mode, tabPaneClass, {
       'full-screen': fullScreen
     }, (_cls = {}, _cls["mode-scroll-" + (scrollVertical ? 'vertical' : 'horizontal')] = mode === 'scroll', _cls)),
     style: getPaneStyle(),

package/cjs/tabs/type.d.ts

@@ -322,6 +322,12 @@ export interface TabsProps {
      * @default true
      */
     translateZ?: boolean;
+    /**
+     * 是否启用滑动节能模式，开启后TabPane外层容器不会随panes数量撑开并提升为合成层，仅滑动当前选中的pane，其他pane在选中前将被隐藏
+     * @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.
+     * @default false
+     */
+    swipeEnergySaving?: boolean;
     /**
      * 当滑到第一页或最后一页，还想再滑动时触发
      * @en Triggered when swiping to the first or last page and want to swipe again
@@ -560,7 +566,7 @@ export interface TabCellRef {
      */
     resetUnderlineStyle: () => void;
 }
-export interface TabPaneProps extends Pick<TabsProps, 'duration' | 'transitionDuration' | 'lazyloadCount' | 'hideContentStyle' | 'renderHideContent' | 'mode' | 'tabPaneClass' | 'tabPaneStyle' | 'tabPaneExtra' | 'getScrollContainer' | 'scrollThrottle' | 'scrollOffset' | 'goLastWhenScrollBottom' | 'scrollVertical' | 'translateZ' | 'fullScreen' | 'autoHeight' | 'onScroll'> {
+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'> {
     prefixCls?: string;
     panes: ReactNodeArray;
     activeIndex: number;

package/dist/index.js

@@ -17484,7 +17484,7 @@
     var index$b = componentWrapper(ImagePicker, 'ImagePicker');
 
     /*!
-    * @arco-design/transformable v1.0.2
+    * @arco-design/transformable v1.0.1
     * (c) 2022 ludan.kibbon
     */
     function _defineProperty(obj, key, value) {
@@ -27168,6 +27168,7 @@
           translateZ = props.translateZ,
           fullScreen = props.fullScreen,
           autoHeight = props.autoHeight,
+          swipeEnergySaving = props.swipeEnergySaving,
           changeIndex = props.changeIndex,
           onScroll = props.onScroll;
       var domRef = React.useRef(null);
@@ -27179,12 +27180,16 @@
           shownIndexes = _c[0],
           setShownIndexes = _c[1];
 
+      var _d = React.useState(activeIndex),
+          shownActiveIndex = _d[0],
+          setShownActiveIndex = _d[1];
+
       var prefix = prefixCls + "-tab-pane";
       var handleTouchEnd = swipeable ? handlePaneTouchEnd : void 0;
 
-      var _d = React.useState('auto'),
-          currentPaneHeight = _d[0],
-          setCurrentPaneHeight = _d[1];
+      var _e = React.useState('auto'),
+          currentPaneHeight = _e[0],
+          setCurrentPaneHeight = _e[1];
 
       React.useImperativeHandle(ref, function () {
         return {
@@ -27270,6 +27275,8 @@
       }
 
       function calcShownIndexes() {
+        setShownActiveIndex(activeIndex);
+
         if (typeof lazyloadCount === 'number') {
           setShownIndexes([activeIndex - lazyloadCount, activeIndex + lazyloadCount]);
           return;
@@ -27370,11 +27377,35 @@
         var heightStyle = currentPaneHeight && currentPaneHeight !== 'auto' ? {
           height: currentPaneHeight
         } : {};
-        return getStyleWithVendor(__assign$2(__assign$2(__assign$2(__assign$2({}, sizeStyle), {
+        return getStyleWithVendor(__assign$2(__assign$2(__assign$2(__assign$2({}, swipeEnergySaving ? {} : sizeStyle), {
           transitionDuration: getTransition() + "ms"
         }), heightStyle), commonStyle));
       }
 
+      function getEnergySavingPaneStyle(index) {
+        if (mode === 'scroll' || !swipeEnergySaving) {
+          return undefined;
+        }
+
+        if (index !== shownActiveIndex) {
+          return {
+            position: 'absolute',
+            left: '-100%',
+            top: '-100%'
+          };
+        }
+
+        var translateStr = translateZ ? ' translateZ(0)' : '';
+        var sizeStyle = tabDirection === 'vertical' ? {
+          transform: "translateX(" + (distance - wrapWidth * (activeIndex - index)) + "px)" + translateStr
+        } : {
+          transform: "translateY(" + (distance - wrapHeight * (activeIndex - index)) + "px)" + translateStr
+        };
+        return getStyleWithVendor(__assign$2(__assign$2({}, sizeStyle), {
+          transitionDuration: getTransition() + "ms"
+        }));
+      }
+
       function renderContent(pane, index) {
         var contentProps = {
           key: index,
@@ -27384,32 +27415,39 @@
           ref: function ref(r) {
             return panesRef.current[index] = r;
           }
-        }; // 是滚动模式或在加载范围内，直接渲染
+        };
+        var energySavingStyle = getEnergySavingPaneStyle(index); // 是滚动模式或在加载范围内，直接渲染
         // @en Render directly when in scroll mode or in loading scope
 
         if (mode === 'scroll' || index >= shownIndexes[0] && index <= shownIndexes[1]) {
-          return /*#__PURE__*/React__default["default"].createElement("div", __assign$2({}, contentProps), pane);
-        } // 不在加载范围内，视renderHideContent和hideContentStyle情况而定
+          return /*#__PURE__*/React__default["default"].createElement("div", __assign$2({}, contentProps, {
+            style: energySavingStyle
+          }), pane);
+        }
+
+        var energySavingHideStyle = __assign$2(__assign$2({}, energySavingStyle), hideContentStyle || {}); // 不在加载范围内，视renderHideContent和hideContentStyle情况而定
         // @en Not in the loading range, depending on renderHideContent and hideContentStyle
 
 
         if (renderHideContent) {
           return /*#__PURE__*/React__default["default"].createElement("div", __assign$2({}, contentProps, {
-            style: hideContentStyle || {}
+            style: energySavingHideStyle
           }), renderHideContent(index, pane));
         }
 
         if (hideContentStyle === null) {
-          return /*#__PURE__*/React__default["default"].createElement("div", __assign$2({}, contentProps));
+          return /*#__PURE__*/React__default["default"].createElement("div", __assign$2({}, contentProps, {
+            style: energySavingStyle
+          }));
         }
 
         return /*#__PURE__*/React__default["default"].createElement("div", __assign$2({}, contentProps, {
-          style: hideContentStyle
+          style: energySavingHideStyle
         }), pane);
       }
 
       return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: cls(prefix + "-container", tabDirection, "mode-" + mode, tabPaneClass, {
+        className: cls(prefix + "-container", tabDirection, swipeEnergySaving ? "mode-" + mode + "-energy-saving" : "mode-" + mode, tabPaneClass, {
           'full-screen': fullScreen
         }, (_a = {}, _a["mode-scroll-" + (scrollVertical ? 'vertical' : 'horizontal')] = mode === 'scroll', _a)),
         style: getPaneStyle(),
@@ -27538,44 +27576,46 @@
           fullScreen = props.fullScreen,
           autoHeight = props.autoHeight,
           _6 = props.tabBarStopPropagation,
-          tabBarStopPropagation = _6 === void 0 ? true : _6;
+          tabBarStopPropagation = _6 === void 0 ? true : _6,
+          _7 = props.swipeEnergySaving,
+          swipeEnergySaving = _7 === void 0 ? false : _7;
       var domRef = React.useRef(null);
       var cellRef = React.useRef(null);
       var paneRef = React.useRef(null);
 
-      var _7 = React.useState(defaultActiveTab),
-          innerIndex = _7[0],
-          setInnerIndex = _7[1];
-
-      var _8 = React.useState(0),
-          jumpingDis = _8[0],
-          setJumpingDis = _8[1];
+      var _8 = React.useState(defaultActiveTab),
+          innerIndex = _8[0],
+          setInnerIndex = _8[1];
 
       var _9 = React.useState(0),
-          wrapWidth = _9[0],
-          setWrapWidth = _9[1];
+          jumpingDis = _9[0],
+          setJumpingDis = _9[1];
 
       var _10 = React.useState(0),
-          wrapHeight = _10[0],
-          setWrapHeight = _10[1];
+          wrapWidth = _10[0],
+          setWrapWidth = _10[1];
 
-      var _11 = React.useState(false),
-          cellTrans = _11[0],
-          setCellTrans = _11[1];
+      var _11 = React.useState(0),
+          wrapHeight = _11[0],
+          setWrapHeight = _11[1];
 
       var _12 = React.useState(false),
-          paneTrans = _12[0],
-          setPaneTrans = _12[1];
+          cellTrans = _12[0],
+          setCellTrans = _12[1];
+
+      var _13 = React.useState(false),
+          paneTrans = _13[0],
+          setPaneTrans = _13[1];
 
-      var _13 = useRefState(activeTab === void 0 ? innerIndex : activeTab),
-          activeIndex = _13[0],
-          activeIndexRef = _13[1],
-          setActiveIndex = _13[2];
+      var _14 = useRefState(activeTab === void 0 ? innerIndex : activeTab),
+          activeIndex = _14[0],
+          activeIndexRef = _14[1],
+          setActiveIndex = _14[2];
 
-      var _14 = useRefState(0),
-          distance = _14[0],
-          distanceRef = _14[1],
-          setDistance = _14[2];
+      var _15 = useRefState(0),
+          distance = _15[0],
+          distanceRef = _15[1],
+          setDistance = _15[2];
 
       var posAdjustingRef = React.useRef(false);
       var touchStartedRef = React.useRef(false);
@@ -27923,7 +27963,8 @@
           tabPaneClass: tabPaneClass,
           tabPaneExtra: tabPaneExtra,
           autoHeight: autoHeight,
-          onScroll: onScroll
+          onScroll: onScroll,
+          swipeEnergySaving: swipeEnergySaving
         }, commonProps)));
       });
     });