@arco-design/mobile-react 2.27.0 → 2.27.2

package/cjs/swipe-load/index.js

@@ -10,6 +10,8 @@ var _mobileUtils = require("@arco-design/mobile-utils");
 
 var _contextProvider = require("../context-provider");
 
+var _helpers = require("../_helpers");
+
 var _hooks = require("../_helpers/hooks");
 
 var _type = require("./type");
@@ -57,7 +59,22 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       _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,
@@ -76,13 +93,14 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   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;
@@ -96,13 +114,11 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       // @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
@@ -122,17 +138,20 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
     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
 
@@ -144,12 +163,30 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         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';
@@ -175,12 +212,14 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           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) {
@@ -205,13 +244,28 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       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';
@@ -241,7 +295,7 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       scrollContainer.removeEventListener('touchmove', touchmove);
       scrollContainer.removeEventListener('touchend', touchend);
     };
-  }, [disabled]);
+  }, [disabled, getScrollContainer, getBounceContainer, bounceWhenBumpBoundary, bounceDampRate, bounceAnimateDuration]);
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       dom: domRef.current
@@ -255,14 +309,14 @@ var SwipeLoad = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, /*#__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/cjs/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/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);