@arco-design/mobile-react 2.27.2 → 2.27.3

package/esm/tabs/tab-pane.js

@@ -34,6 +34,7 @@ var TabPane = /*#__PURE__*/forwardRef(function (props, ref) {
       translateZ = props.translateZ,
       fullScreen = props.fullScreen,
       autoHeight = props.autoHeight,
+      swipeEnergySaving = props.swipeEnergySaving,
       changeIndex = props.changeIndex,
       onScroll = props.onScroll;
   var domRef = useRef(null);
@@ -45,12 +46,16 @@ var TabPane = /*#__PURE__*/forwardRef(function (props, ref) {
       shownIndexes = _useState[0],
       setShownIndexes = _useState[1];
 
+  var _useState2 = useState(activeIndex),
+      shownActiveIndex = _useState2[0],
+      setShownActiveIndex = _useState2[1];
+
   var prefix = prefixCls + "-tab-pane";
   var handleTouchEnd = swipeable ? handlePaneTouchEnd : void 0;
 
-  var _useState2 = useState('auto'),
-      currentPaneHeight = _useState2[0],
-      setCurrentPaneHeight = _useState2[1];
+  var _useState3 = useState('auto'),
+      currentPaneHeight = _useState3[0],
+      setCurrentPaneHeight = _useState3[1];
 
   useImperativeHandle(ref, function () {
     return {
@@ -136,6 +141,8 @@ var TabPane = /*#__PURE__*/forwardRef(function (props, ref) {
   }
 
   function calcShownIndexes() {
+    setShownActiveIndex(activeIndex);
+
     if (typeof lazyloadCount === 'number') {
       setShownIndexes([activeIndex - lazyloadCount, activeIndex + lazyloadCount]);
       return;
@@ -236,11 +243,35 @@ var TabPane = /*#__PURE__*/forwardRef(function (props, ref) {
     var heightStyle = currentPaneHeight && currentPaneHeight !== 'auto' ? {
       height: currentPaneHeight
     } : {};
-    return getStyleWithVendor(_extends({}, sizeStyle, {
+    return getStyleWithVendor(_extends({}, 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(_extends({}, sizeStyle, {
+      transitionDuration: getTransition() + "ms"
+    }));
+  }
+
   function renderContent(pane, index) {
     var contentProps = {
       key: index,
@@ -250,32 +281,39 @@ var TabPane = /*#__PURE__*/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.createElement("div", contentProps, pane);
-    } // 不在加载范围内，视renderHideContent和hideContentStyle情况而定
+      return /*#__PURE__*/React.createElement("div", _extends({}, contentProps, {
+        style: energySavingStyle
+      }), pane);
+    }
+
+    var energySavingHideStyle = _extends({}, energySavingStyle, hideContentStyle || {}); // 不在加载范围内，视renderHideContent和hideContentStyle情况而定
     // @en Not in the loading range, depending on renderHideContent and hideContentStyle
 
 
     if (renderHideContent) {
       return /*#__PURE__*/React.createElement("div", _extends({}, contentProps, {
-        style: hideContentStyle || {}
+        style: energySavingHideStyle
       }), renderHideContent(index, pane));
     }
 
     if (hideContentStyle === null) {
-      return /*#__PURE__*/React.createElement("div", contentProps);
+      return /*#__PURE__*/React.createElement("div", _extends({}, contentProps, {
+        style: energySavingStyle
+      }));
     }
 
     return /*#__PURE__*/React.createElement("div", _extends({}, contentProps, {
-      style: hideContentStyle
+      style: energySavingHideStyle
     }), pane);
   }
 
   return /*#__PURE__*/React.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
     }, (_cls = {}, _cls["mode-scroll-" + (scrollVertical ? 'vertical' : 'horizontal')] = mode === 'scroll', _cls)),
     style: getPaneStyle(),

package/esm/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.27.2",
+    "version": "2.27.3",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "2.15.2",
+        "@arco-design/mobile-utils": "2.15.3",
         "@arco-design/transformable": "^1.0.0",
         "lodash.throttle": "^4.1.1",
         "resize-observer-polyfill": "^1.5.1"
@@ -35,5 +35,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "e270c691a36dba4048f27ee6d10616291e11e062"
+    "gitHead": "0898d28c77d803b648e4c4e48ac7c9969ad161f0"
 }

package/umd/tabs/index.js

@@ -147,7 +147,9 @@
         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 @@
         tabPaneClass: tabPaneClass,
         tabPaneExtra: tabPaneExtra,
         autoHeight: autoHeight,
-        onScroll: onScroll
+        onScroll: onScroll,
+        swipeEnergySaving: swipeEnergySaving
       }, commonProps)));
     });
   });

package/umd/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/umd/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/umd/tabs/tab-pane.js

@@ -56,6 +56,7 @@
         translateZ = props.translateZ,
         fullScreen = props.fullScreen,
         autoHeight = props.autoHeight,
+        swipeEnergySaving = props.swipeEnergySaving,
         changeIndex = props.changeIndex,
         onScroll = props.onScroll;
     var domRef = (0, _react.useRef)(null);
@@ -67,12 +68,16 @@
         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 {
@@ -158,6 +163,8 @@
     }
 
     function calcShownIndexes() {
+      setShownActiveIndex(activeIndex);
+
       if (typeof lazyloadCount === 'number') {
         setShownIndexes([activeIndex - lazyloadCount, activeIndex + lazyloadCount]);
         return;
@@ -258,11 +265,35 @@
       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,
@@ -272,32 +303,38 @@
         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/umd/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;