@arco-design/mobile-react 2.27.1 → 2.27.3

package/cjs/swipe-load/style/index.less

@@ -4,14 +4,21 @@
     position: relative;
     display: inline-flex;
     width: 100%;
+
     .@{prefix}-list-area {
         position: relative;
         width: 100%;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
     }
+
     .@{prefix}-loading-area {
         .use-var(background-color, swipe-load-label-background);
         margin-top: 0;
         .use-var(border-radius, swipe-load-label-border-radius);
+
         .@{prefix}-loading-label {
             .use-var(margin-left, swipe-load-label-text-margin-left);
             .use-var(width, swipe-load-label-text-width);

package/cjs/swipe-load/type.d.ts

@@ -77,6 +77,35 @@ export interface SwipeLoadProps {
      * @default_en "Release to view"
      */
     activeText?: string;
+    /**
+     * 触碰左侧边界时是否需要回弹效果
+     * @en Whether a bounce effect is required when touching the left boundary
+     * @default false
+     */
+    bounceWhenBumpBoundary?: boolean;
+    /**
+     * 当开启回弹效果时的阻尼系数
+     * @en Damping coefficient when the rebound effect is turned on
+     * @default 3
+     */
+    bounceDampRate?: number;
+    /**
+     * 当开启回弹效果时的动画毫秒时间
+     * @en Animation in milliseconds when the bounce effect is turned on
+     * @default 300
+     */
+    bounceAnimateDuration?: number;
+    /**
+     * 回弹效果开启时需要回弹的容器，默认为 getScrollContainer 返回的容器或容器的一个子元素
+     * @en The container that needs to be rebounded when the rebound effect is enabled, the default is the container returned by getScrollContainer or a child element of the container
+     */
+    getBounceContainer?: () => HTMLElement | null;
+    /**
+     * 当开启回弹效果时自定义手指滑动跟手的距离计算方式，dis表示touchmove的距离
+     * @en When the rebound effect is turned on, customize the calculation method of the distance between the finger sliding and the hand, and dis indicates the distance of touchmove
+     * @default (dis) => Math.min(dis, bounceScrollContainer.offsetWidth) / bounceDampRate
+     */
+    bounceDistanceProcessor?: (dis: number) => number;
     /**
      * 抛出外层touch事件，便于自定义，常用于阻止划动退出，切换tab等手势冲突
      * @en Throw the outer touchstart event, which is easy to customize. It is often used to prevent gesture conflicts such as swiping to exit, switching tabs, etc.

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);
@@ -246,6 +248,7 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     // 利用受控手动更改index时，给cell line加上动画
     // @en Animate the cell line when changeing the index
     setCellTrans(true);
+    changeFromRef.current = 'manual';
   }, [activeTab]);
   (0, _helpers.useUpdateEffect)(function () {
     onDistanceChange && onDistanceChange(distance, wrapWidth, activeIndex);
@@ -533,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;