@arco-design/mobile-react 2.27.1 → 2.27.3

package/umd/swipe-load/index.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "@arco-design/mobile-utils", "../context-provider", "../_helpers/hooks", "./type"], factory);
+    define(["exports", "react", "@arco-design/mobile-utils", "../context-provider", "../_helpers", "../_helpers/hooks", "./type"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("@arco-design/mobile-utils"), require("../context-provider"), require("../_helpers/hooks"), require("./type"));
+    factory(exports, require("react"), require("@arco-design/mobile-utils"), require("../context-provider"), require("../_helpers"), require("../_helpers/hooks"), require("./type"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.mobileUtils, global.contextProvider, global.hooks, global.type);
+    factory(mod.exports, global.react, global.mobileUtils, global.contextProvider, global._helpers, global.hooks, global.type);
     global.index = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _mobileUtils, _contextProvider, _hooks, _type) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _mobileUtils, _contextProvider, _helpers, _hooks, _type) {
   "use strict";
 
   _exports.__esModule = true;
@@ -60,7 +60,22 @@
         _props$activeText = props.activeText,
         activeText = _props$activeText === void 0 ? '' : _props$activeText,
         _props$initPos = props.initPos,
-        initPos = _props$initPos === void 0 ? 0 : _props$initPos;
+        initPos = _props$initPos === void 0 ? 0 : _props$initPos,
+        _props$bounceWhenBump = props.bounceWhenBumpBoundary,
+        bounceWhenBumpBoundary = _props$bounceWhenBump === void 0 ? false : _props$bounceWhenBump,
+        _props$bounceDampRate = props.bounceDampRate,
+        bounceDampRate = _props$bounceDampRate === void 0 ? 3 : _props$bounceDampRate,
+        _props$bounceAnimateD = props.bounceAnimateDuration,
+        bounceAnimateDuration = _props$bounceAnimateD === void 0 ? 300 : _props$bounceAnimateD,
+        damping = props.damping,
+        bounceDistanceProcessor = props.bounceDistanceProcessor,
+        getScrollContainer = props.getScrollContainer,
+        getBounceContainer = props.getBounceContainer,
+        onTouchStart = props.onTouchStart,
+        onTouchEnd = props.onTouchEnd,
+        onTouchCancel = props.onTouchCancel,
+        onTouchMove = props.onTouchMove,
+        renderLabel = props.renderLabel;
 
     var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
         _useContext$locale = _useContext.locale,
@@ -79,13 +94,14 @@
     var loadingLabelRef = (0, _react.useRef)(null);
     var showLoadMoreRef = (0, _react.useRef)(false);
     var ifToRightRef = (0, _react.useRef)(false);
+    var bouncingRef = (0, _react.useRef)(false);
     var offsetRef = (0, _react.useRef)(0);
     var domRef = (0, _react.useRef)(null);
     var wrapperEl = domRef.current;
-    (0, _hooks.useAddListener)(wrapperEl, 'touchstart', props.onTouchStart);
-    (0, _hooks.useAddListener)(wrapperEl, 'touchend', props.onTouchEnd);
-    (0, _hooks.useAddListener)(wrapperEl, 'touchcancel', props.onTouchCancel);
-    (0, _hooks.useAddListener)(wrapperEl, 'touchmove', props.onTouchMove);
+    (0, _hooks.useAddListener)(wrapperEl, 'touchstart', onTouchStart);
+    (0, _hooks.useAddListener)(wrapperEl, 'touchend', onTouchEnd);
+    (0, _hooks.useAddListener)(wrapperEl, 'touchcancel', onTouchCancel);
+    (0, _hooks.useAddListener)(wrapperEl, 'touchmove', onTouchMove);
     (0, _react.useEffect)(function () {
       if (disabled || !containerRef.current || disableState) {
         return;
@@ -99,13 +115,11 @@
         // @en If no child element is passed in,  component will be disabled
         setDisableState(true);
       } else if (containerRef.current.childNodes.length === 1) {
+        var _getScrollContainer;
+
         // 传入一个子元素 滑动单个元素
         // @en Pass in a child element swipe the single element
-        if (props.getScrollContainer) {
-          scrollContainer = props.getScrollContainer();
-        } else {
-          scrollContainer = containerRef.current.firstChild;
-        }
+        scrollContainer = (_getScrollContainer = getScrollContainer == null ? void 0 : getScrollContainer()) != null ? _getScrollContainer : containerRef.current.firstChild;
       } else {
         // 传入多个子元素(列表元素为例) 组件控制自行滑动 不推荐
         // @en Pass in multiple sub-elements (list elements as an example) Component control slides by itself which is not recommended
@@ -125,17 +139,20 @@
 
       if (!loadingCurrent) {
         return;
-      } // 初始不显示标签
-      // @en Initially no labels are displayed
+      }
 
+      var bounceScrollContainer = (getBounceContainer == null ? void 0 : getBounceContainer()) || scrollContainer; // 初始不显示标签
+      // @en Initially no labels are displayed
 
       loadingCurrent.style.display = 'none';
       var startX = 0;
-      var endX = 0; // 触摸页面确定X起始坐标
+      var endX = 0;
+      var bounceDistance = 0; // 触摸页面确定X起始坐标
       // @en Determine the X starting coordinate on touchstart
 
       var touchstart = function touchstart(e) {
-        startX = e.touches[0].pageX;
+        var evt = e.touches[0];
+        startX = evt.clientX || 0;
       }; // 页面滑动确定X终止坐标，更新手指的X坐标，改变loading中的文字和大小
       // @en Determine the X end coordinate, update the X coordinate of the finger, change the text and size in the loading on touchmove
 
@@ -147,12 +164,30 @@
           scrollContainer.scrollLeft = 1;
         }
 
-        endX = e.touches[0].pageX;
+        endX = e.touches[0].clientX || 0;
         var diff = endX - startX;
         offsetRef.current = diff;
-        var labelDiff = (0, _mobileUtils.fingerDisToLabelDis)(Math.abs(diff), props.damping); // 向左滑动到尽头 '更多'标签加载 根据scrollLeft判断 滚动容器到达边缘触发 非滚动容器不判断
+        var labelDiff = (0, _mobileUtils.fingerDisToLabelDis)(Math.abs(diff), damping); // 滑动到最左侧，处理回弹效果
+        // @en Swipe to the far left to handle the rebound effect
+
+        if (diff > 0 && scrollContainer.scrollLeft <= 1 && bounceWhenBumpBoundary) {
+          e.stopPropagation();
+          e.cancelBubble && e.preventDefault();
+          bouncingRef.current = true;
+
+          var processor = bounceDistanceProcessor || function (dis) {
+            return Math.min(dis, bounceScrollContainer.offsetWidth) / bounceDampRate;
+          };
+
+          bounceDistance = processor(diff);
+          (0, _helpers.setStyleWithVendor)(bounceScrollContainer, {
+            transition: 'none',
+            transform: "translateX(" + bounceDistance + "px) translateZ(0)"
+          });
+        } // 向左滑动到尽头 '更多'标签加载 根据scrollLeft判断 滚动容器到达边缘触发 非滚动容器不判断
         // @en Swipe left to the end and the 'more' label is loaded. Judging by scrollLeft, the scroll container reaches the edge and the non-scroll container does not judge
 
+
         if (diff < 0 && (scrollContainer.scrollLeft + scrollContainer.clientWidth >= scrollContainer.scrollWidth - 1 || !scrollContainer.scrollLeft) && !ifToRightRef.current) {
           showLoadMoreRef.current = true;
           loadingCurrent.style.display = 'flex';
@@ -178,12 +213,14 @@
             loadingLabelCurrent.innerHTML = labelDiff >= minConfirmOffset ? activeText || locale.SwipeLoad.activeText : normalText || locale.SwipeLoad.normalText;
           }
 
-          loadingCurrent.style.transition = 'all 0.02s';
-          loadingCurrent.style.webkitTransform = "translateX(-" + labelRightMargin + "px)";
-          loadingCurrent.style.transform = "translateX(-" + labelRightMargin + "px)";
-          scrollContainer.style.transition = 'all 0.03s';
-          scrollContainer.style.webkitTransform = "translateX(-" + listRightMargin + "px)";
-          scrollContainer.style.transform = "translateX(-" + listRightMargin + "px)";
+          (0, _helpers.setStyleWithVendor)(loadingCurrent, {
+            transition: 'none',
+            transform: "translateX(-" + labelRightMargin + "px) translateZ(0)"
+          });
+          (0, _helpers.setStyleWithVendor)(scrollContainer, {
+            transition: 'none',
+            transform: "translateX(-" + listRightMargin + "px) translateZ(0)"
+          });
         }
 
         if (diff > 0 && scrollContainer.scrollLeft + scrollContainer.clientWidth <= scrollContainer.scrollWidth - 1) {
@@ -208,13 +245,28 @@
         var labelDiff = (0, _mobileUtils.fingerDisToLabelDis)(Math.abs(diff));
 
         var resumeAnimation = function resumeAnimation() {
-          scrollContainer.style.transition = "all " + labelAnimationDuration + "ms " + labelAnimationFunction;
-          scrollContainer.style.webkitTransform = 'translateX(0px)';
-          scrollContainer.style.transform = 'translateX(0px)';
-          loadingCurrent.style.transition = "all " + labelAnimationDuration + "ms " + labelAnimationFunction;
-          loadingCurrent.style.webkitTransform = 'translateX(0px)';
-          loadingCurrent.style.transform = 'translateX(0px)';
-          showLoadMoreRef.current = false;
+          if (showLoadMoreRef.current) {
+            showLoadMoreRef.current = false;
+            var scrollTransitionCssStyle = "all " + labelAnimationDuration + "ms " + labelAnimationFunction;
+            var scrollTransformCssStyle = 'translateX(0px) translateZ(0)';
+            (0, _helpers.setStyleWithVendor)(scrollContainer, {
+              transition: scrollTransitionCssStyle,
+              transform: scrollTransformCssStyle
+            });
+            (0, _helpers.setStyleWithVendor)(loadingCurrent, {
+              transition: scrollTransitionCssStyle,
+              transform: scrollTransformCssStyle
+            });
+          }
+
+          if (bouncingRef.current) {
+            bouncingRef.current = false;
+            (0, _helpers.setStyleWithVendor)(bounceScrollContainer, {
+              transition: "all " + bounceAnimateDuration + "ms",
+              transform: 'translateX(0px) translateZ(0)'
+            });
+          }
+
           ifToRightRef.current = false;
           setTimeout(function () {
             loadingCurrent.style.display = 'none';
@@ -244,7 +296,7 @@
         scrollContainer.removeEventListener('touchmove', touchmove);
         scrollContainer.removeEventListener('touchend', touchend);
       };
-    }, [disabled]);
+    }, [disabled, getScrollContainer, getBounceContainer, bounceWhenBumpBoundary, bounceDampRate, bounceAnimateDuration]);
     (0, _react.useImperativeHandle)(ref, function () {
       return {
         dom: domRef.current
@@ -258,14 +310,14 @@
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _mobileUtils.cls)(prefixCls + "-list-area"),
         ref: containerRef
-      }, children), props.renderLabel ? /*#__PURE__*/_react.default.createElement("div", {
+      }, children), renderLabel ? /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _mobileUtils.cls)(prefixCls + "-custom-loading-area"),
         ref: loadingRef,
         style: {
           position: 'absolute',
           right: initPos + "px"
         }
-      }, props.renderLabel.length ? props.renderLabel(labelOffsetState) : props.renderLabel()) : /*#__PURE__*/_react.default.createElement("div", {
+      }, renderLabel.length ? renderLabel(labelOffsetState) : renderLabel()) : /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _mobileUtils.cls)(prefixCls + "-loading-area"),
         ref: loadingRef,
         style: {

package/umd/swipe-load/style/css/index.css

@@ -9,6 +9,9 @@
   position: relative;
   width: 100%;
 }
+.arco-swipe-load .arco-list-area::-webkit-scrollbar {
+  display: none;
+}
 .arco-swipe-load .arco-loading-area {
   background-color:  #f8f8f8 ;
   margin-top: 0;

package/umd/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/umd/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/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);
@@ -246,6 +248,7 @@
       // 利用受控手动更改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 @@
         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;