@arco-design/mobile-react 2.27.1 → 2.27.2

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

@@ -246,6 +246,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);

package/dist/index.js

@@ -3662,6 +3662,13 @@
       }, {});
       return newStyle;
     }
+    function setStyleWithVendor(dom, style) {
+      var vendorStyle = getStyleWithVendor(style);
+
+      for (var key in vendorStyle) {
+        dom.style[key] = vendorStyle[key];
+      }
+    }
     /**
      * 计算默认值，仅未定义时使用默认值
      * @desc {en} Calculate the default value, use default value only if undefined
@@ -15205,6 +15212,18 @@
 
     var listeners = {};
     var onOnceEmittedListeners = {};
+    /**
+     * Intersection Observer 同一 root 节点下的监听队列
+     * @en Intersection Observer Listening queue under the same root node
+     */
+
+    var ioListeners = [];
+    /**
+     * Intersection Observer 监听 visible 状态队列
+     * @en Intersection Observer listens to the visible status queue
+     */
+
+    var ioVisibleList = [];
     var throttlingVisibleChange;
     /**
      * 通过滚动事件监测 children 是否进入视口或离开视口。
@@ -15252,12 +15271,6 @@
        */
 
       var domRefParent = React.useRef(null);
-      /**
-       * 当前元素是否在可视区域内
-       * @en Whether the current element is in the visible area
-       */
-
-      var isVisible = React.useRef(false);
       /**
        * 保存当前节点信息，类似于 class component 中 this
        * @en Save current node information, similar to this in class component
@@ -15304,10 +15317,8 @@
            * @en Reset the initial visible state of the element to false, and re-detect the visibility of the element, the priority is lower than 'disabled'(Usually used to re-listen when elements inside ShowMonitor change)
            */
           flushVisibleStatus: function flushVisibleStatus() {
-            isVisible.current = false;
-
-            if (isSupportNativeApi && io.current && domRef.current) {
-              disabled ? io.current.unobserve(domRef.current) : io.current.observe(domRef.current);
+            if (isSupportNativeApi) {
+              disabled ? ioUnobserve() : ioObserve();
             } else if (listener.current) {
               var key = wrapperKey.current;
 
@@ -15371,7 +15382,7 @@
          */
 
 
-        curVisible !== preVisible.current && handleCheckChildrenExist() && onCompVisibleChange(curVisible, node);
+        curVisible !== preVisible && handleCheckChildrenExist() && onCompVisibleChange(curVisible, node);
         var key = wrapperKey.current;
         /**
          * 监听一次后加入 pendingList 队列，随后被 listeners 过滤掉
@@ -15387,8 +15398,7 @@
          */
 
 
-        curVisible && !preVisible.current && compOnce && onOnceEmittedListeners[key].push(component);
-        preVisible.current = curVisible;
+        curVisible && !preVisible && compOnce && onOnceEmittedListeners[key].push(component);
       }
 
       var checkVisibleHandler = React.useCallback(function () {
@@ -15408,22 +15418,98 @@
       }
 
       function handleObserverStatusChange(entries) {
-        var _a;
+        entries.forEach(function (entry) {
+          var isIntersecting = entry.isIntersecting,
+              target = entry.target;
+          var visibleItem = ioVisibleList.find(function (item) {
+            return item.node === target;
+          });
 
-        var isIntersecting = entries[0].isIntersecting;
-        /**
-         * 当前元素 visible 对比之前发生改变，触发回调函数
-         * @en Callback when the visible status of current element changes before the comparison
-         */
+          if (visibleItem) {
+            var curVisible = visibleItem.isVisible,
+                onCompVisibleChange = visibleItem.onVisibleChange,
+                onceEmit = visibleItem.once;
+            /**
+             * 当前元素 visible 对比之前发生改变，触发回调函数
+             * @en Callback when the visible status of current element changes before the comparison
+             */
 
-        isIntersecting !== isVisible.current && handleCheckChildrenExist() && onVisibleChange(isIntersecting, domRef.current);
-        /**
-         * 当前元素不可见 -> 可见，且 once, 触发回调函数
-         * @en The current element is invisible -> visible, and once, triggers the callback
-         */
+            isIntersecting !== curVisible && handleCheckChildrenExist() && onCompVisibleChange(isIntersecting, target);
+            /**
+             * 当前元素状态由不可见变为可见，且只触发一次
+             * @en The current element is invisible -> visible, and once, triggers the callback
+             */
 
-        isIntersecting && !isVisible.current && once && domRef.current && ((_a = io.current) === null || _a === void 0 ? void 0 : _a.unobserve(domRef.current));
-        isVisible.current = isIntersecting;
+            isIntersecting && !curVisible && onceEmit && target && ioUnobserve(target);
+            visibleItem.isVisible = isIntersecting;
+          }
+        });
+      }
+      /**
+       * 获取 io 单例
+       * @en Get the io singleton
+       */
+
+
+      function getIOSingleton(ioOptions) {
+        var root = ioOptions.root,
+            rootMargin = ioOptions.rootMargin,
+            ioThreshold = ioOptions.threshold;
+        var ioKey = JSON.stringify({
+          rootMargin: rootMargin,
+          threshold: ioThreshold
+        });
+
+        var _ioListener = ioListeners.find(function (ioListener) {
+          return ioListener.root === root && ioListener.key === ioKey;
+        });
+
+        if (!_ioListener) {
+          ioListeners.push({
+            root: root,
+            key: ioKey,
+            listener: io.current = new IntersectionObserver(handleObserverStatusChange, ioOptions)
+          });
+        } else {
+          io.current = _ioListener.listener;
+        }
+      }
+
+      function ioObserve() {
+        if (domRef.current && io.current) {
+          var curIdx = ioVisibleList.findIndex(function (ioVisibleItem) {
+            return ioVisibleItem.node === domRef.current;
+          });
+
+          if (curIdx !== -1) {
+            ioVisibleList[curIdx].isVisible = false;
+          } else {
+            ioVisibleList.push({
+              node: domRef.current,
+              isVisible: false,
+              once: once,
+              onVisibleChange: onVisibleChange
+            });
+          }
+
+          io.current.observe(domRef.current);
+        }
+      }
+
+      function ioUnobserve(target) {
+        var targetNode = target || domRef.current;
+
+        if (io.current && targetNode) {
+          var curIdx = ioVisibleList.findIndex(function (ioVisibleItem) {
+            return ioVisibleItem.node === targetNode;
+          });
+
+          if (curIdx !== -1) {
+            ioVisibleList.splice(curIdx, 1);
+          }
+
+          io.current.unobserve(targetNode);
+        }
       }
       /**
        * 非首次下disabled变化时，重新监听元素
@@ -15433,14 +15519,11 @@
 
       React.useEffect(function () {
         if (isSupportNativeApi) {
-          // 非首次下
+          // 非首次 render 下
           // @en Not for the first time
-          if (io.current && domRef.current) {
-            // 禁用监听 || 监听
-            disabled ? io.current.unobserve(domRef.current) : io.current.observe(domRef.current);
-          }
+          disabled ? ioUnobserve() : ioObserve();
         } else {
-          // 非首次下
+          // 非首次 render 下
           // @en Not for the first time
           if (wrapperKey.current !== -1 && listener.current && listeners[wrapperKey.current]) {
             // 禁用监听，找到对应listener并删除
@@ -15504,12 +15587,12 @@
               rootMargin_1 = offset + "px";
             }
 
-            io.current = new IntersectionObserver(handleObserverStatusChange, {
+            getIOSingleton({
               root: root,
               rootMargin: rootMargin_1,
               threshold: threshold
             });
-            !disabled && io.current.observe(domRef.current);
+            !disabled && ioObserve();
           }
         } else {
           // 节流后回调函数
@@ -15553,7 +15636,7 @@
 
           listener.current = {
             node: domRef.current,
-            isVisible: isVisible,
+            isVisible: false,
             overflow: overflow,
             once: once,
             offset: offset,
@@ -15569,10 +15652,8 @@
       }, []);
       React.useEffect(function () {
         return function () {
-          var _a;
-
           if (isSupportNativeApi) {
-            domRef.current && ((_a = io.current) === null || _a === void 0 ? void 0 : _a.unobserve(domRef.current));
+            ioUnobserve();
           } else {
             if (overflow) {
               var parent_3 = domRefParent.current;
@@ -21550,11 +21631,14 @@
 
         changeStatus('loading', scene);
         getData === null || getData === void 0 ? void 0 : getData(function (st) {
-          lastScrollEndRef.current = false;
           changeStatus(st, 'manual');
         });
       }, [blockWhenLoading, changeStatus, getData]);
       React.useEffect(function () {
+        if (!blockWhenLoading || nowStatus !== 'loading') {
+          lastScrollEndRef.current = false;
+        }
+
         statusRef.current = nowStatus;
       }, [nowStatus]);
       useUpdateEffect(function () {
@@ -21811,7 +21895,7 @@
           ref: navBarRef,
           className: cls(wrapClass, prefixCls + "-nav-bar", (_b = {}, _b[prefixCls + "-nav-bar-fixed"] = fixed, _b[prefixCls + "-nav-bar-float"] = !placeholder, _b[prefixCls + "-nav-bar-hide"] = scrollToggleHide, _b)),
           style: __assign$2(__assign$2({
-            paddingTop: fixed && statusBarHeight ? statusBarHeight + "px" : ''
+            paddingTop: fixed && statusBarHeight ? statusBarHeight + "px" : '0px'
           }, style || {}), relBackground ? {
             background: relBackground
           } : {}),
@@ -21820,7 +21904,7 @@
         }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(className, system, prefixCls + "-nav-bar-wrapper", (_c = {}, _c[prefixCls + "-nav-bar-wrapper-fixed"] = fixed, _c[prefixCls + "-nav-bar-wrapper-border"] = hasBottomLine, _c)),
           style: __assign$2({
-            paddingTop: statusBarHeight ? statusBarHeight + "px" : ''
+            paddingTop: statusBarHeight ? statusBarHeight + "px" : '0px'
           }, customStyle)
         }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: prefixCls + "-nav-bar-inner all-border-box"
@@ -25903,31 +25987,49 @@
           _k = props.activeText,
           activeText = _k === void 0 ? '' : _k,
           _l = props.initPos,
-          initPos = _l === void 0 ? 0 : _l;
-      var _m = React.useContext(GlobalContext).locale,
-          locale = _m === void 0 ? defaultLocale : _m;
+          initPos = _l === void 0 ? 0 : _l,
+          _m = props.bounceWhenBumpBoundary,
+          bounceWhenBumpBoundary = _m === void 0 ? false : _m,
+          _o = props.bounceDampRate,
+          bounceDampRate = _o === void 0 ? 3 : _o,
+          _p = props.bounceAnimateDuration,
+          bounceAnimateDuration = _p === void 0 ? 300 : _p,
+          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 _q = React.useContext(GlobalContext).locale,
+          locale = _q === void 0 ? defaultLocale : _q;
 
-      var _o = React.useState(disabled),
-          disableState = _o[0],
-          setDisableState = _o[1];
+      var _r = React.useState(disabled),
+          disableState = _r[0],
+          setDisableState = _r[1];
 
-      var _p = React.useState(0),
-          labelOffsetState = _p[0],
-          setLabelOffsetState = _p[1];
+      var _s = React.useState(0),
+          labelOffsetState = _s[0],
+          setLabelOffsetState = _s[1];
 
       var containerRef = React.useRef(null);
       var loadingRef = React.useRef(null);
       var loadingLabelRef = React.useRef(null);
       var showLoadMoreRef = React.useRef(false);
       var ifToRightRef = React.useRef(false);
+      var bouncingRef = React.useRef(false);
       var offsetRef = React.useRef(0);
       var domRef = React.useRef(null);
       var wrapperEl = domRef.current;
-      useAddListener(wrapperEl, 'touchstart', props.onTouchStart);
-      useAddListener(wrapperEl, 'touchend', props.onTouchEnd);
-      useAddListener(wrapperEl, 'touchcancel', props.onTouchCancel);
-      useAddListener(wrapperEl, 'touchmove', props.onTouchMove);
+      useAddListener(wrapperEl, 'touchstart', onTouchStart);
+      useAddListener(wrapperEl, 'touchend', onTouchEnd);
+      useAddListener(wrapperEl, 'touchcancel', onTouchCancel);
+      useAddListener(wrapperEl, 'touchmove', onTouchMove);
       React.useEffect(function () {
+        var _a;
+
         if (disabled || !containerRef.current || disableState) {
           return;
         }
@@ -25942,11 +26044,7 @@
         } else if (containerRef.current.childNodes.length === 1) {
           // 传入一个子元素 滑动单个元素
           // @en Pass in a child element swipe the single element
-          if (props.getScrollContainer) {
-            scrollContainer = props.getScrollContainer();
-          } else {
-            scrollContainer = containerRef.current.firstChild;
-          }
+          scrollContainer = (_a = getScrollContainer === null || getScrollContainer === void 0 ? void 0 : getScrollContainer()) !== null && _a !== void 0 ? _a : containerRef.current.firstChild;
         } else {
           // 传入多个子元素(列表元素为例) 组件控制自行滑动 不推荐
           // @en Pass in multiple sub-elements (list elements as an example) Component control slides by itself which is not recommended
@@ -25966,17 +26064,20 @@
 
         if (!loadingCurrent) {
           return;
-        } // 初始不显示标签
-        // @en Initially no labels are displayed
+        }
 
+        var bounceScrollContainer = (getBounceContainer === null || getBounceContainer === void 0 ? 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
 
@@ -25988,12 +26089,30 @@
             scrollContainer.scrollLeft = 1;
           }
 
-          endX = e.touches[0].pageX;
+          endX = e.touches[0].clientX || 0;
           var diff = endX - startX;
           offsetRef.current = diff;
-          var labelDiff = fingerDisToLabelDis(Math.abs(diff), props.damping); // 向左滑动到尽头 '更多'标签加载 根据scrollLeft判断 滚动容器到达边缘触发 非滚动容器不判断
+          var labelDiff = 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);
+            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';
@@ -26019,12 +26138,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)";
+            setStyleWithVendor(loadingCurrent, {
+              transition: 'none',
+              transform: "translateX(-" + labelRightMargin + "px) translateZ(0)"
+            });
+            setStyleWithVendor(scrollContainer, {
+              transition: 'none',
+              transform: "translateX(-" + listRightMargin + "px) translateZ(0)"
+            });
           }
 
           if (diff > 0 && scrollContainer.scrollLeft + scrollContainer.clientWidth <= scrollContainer.scrollWidth - 1) {
@@ -26049,13 +26170,28 @@
           var labelDiff = 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)';
+              setStyleWithVendor(scrollContainer, {
+                transition: scrollTransitionCssStyle,
+                transform: scrollTransformCssStyle
+              });
+              setStyleWithVendor(loadingCurrent, {
+                transition: scrollTransitionCssStyle,
+                transform: scrollTransformCssStyle
+              });
+            }
+
+            if (bouncingRef.current) {
+              bouncingRef.current = false;
+              setStyleWithVendor(bounceScrollContainer, {
+                transition: "all " + bounceAnimateDuration + "ms",
+                transform: 'translateX(0px) translateZ(0)'
+              });
+            }
+
             ifToRightRef.current = false;
             setTimeout(function () {
               loadingCurrent.style.display = 'none';
@@ -26085,7 +26221,7 @@
           scrollContainer.removeEventListener('touchmove', touchmove);
           scrollContainer.removeEventListener('touchend', touchend);
         };
-      }, [disabled]);
+      }, [disabled, getScrollContainer, getBounceContainer, bounceWhenBumpBoundary, bounceDampRate, bounceAnimateDuration]);
       React.useImperativeHandle(ref, function () {
         return {
           dom: domRef.current
@@ -26099,14 +26235,14 @@
         }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(prefixCls + "-list-area"),
           ref: containerRef
-        }, children), props.renderLabel ? /*#__PURE__*/React__default["default"].createElement("div", {
+        }, children), renderLabel ? /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(prefixCls + "-custom-loading-area"),
           ref: loadingRef,
           style: {
             position: 'absolute',
             right: initPos + "px"
           }
-        }, props.renderLabel.length ? props.renderLabel(labelOffsetState) : props.renderLabel()) : /*#__PURE__*/React__default["default"].createElement("div", {
+        }, renderLabel.length ? renderLabel(labelOffsetState) : renderLabel()) : /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(prefixCls + "-loading-area"),
           ref: loadingRef,
           style: {
@@ -27501,6 +27637,7 @@
         // 利用受控手动更改index时，给cell line加上动画
         // @en Animate the cell line when changeing the index
         setCellTrans(true);
+        changeFromRef.current = 'manual';
       }, [activeTab]);
       useUpdateEffect(function () {
         onDistanceChange && onDistanceChange(distance, wrapWidth, activeIndex);