@arco-design/mobile-react 2.30.2 → 2.30.3

package/dist/index.js

@@ -20873,7 +20873,7 @@
           transformersRef.current = []; // 移除过渡图片
           // @en Remove transition image
 
-          removeChild(document.querySelector('.image-preview-fake-trans-image'));
+          removeChild(transImageRef.current);
           setTransImageInfo(null);
           setPlaceholders({});
           var mounted_1 = isInitialMount.current;
@@ -20915,8 +20915,10 @@
       }, [getMaxScale]);
 
       function removeChild(child) {
+        var _a, _b, _c;
+
         try {
-          child && document.body.removeChild(child);
+          child && ((_c = (_b = (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.carousel-item')) === null || _b === void 0 ? void 0 : _b[innerIndexRef.current]) === null || _c === void 0 ? void 0 : _c.removeChild(child));
         } catch (e) {}
       } // 监听滑动到上下边缘后还在往外滑动的操作，则关闭弹窗
       // @en Monitor the operation of sliding out after sliding to the upper and lower edges, then close the popup
@@ -21336,7 +21338,41 @@
         }
       }
 
-      var handleClick = useSingleAndDoubleClick(handleImageClick, handleImageDoubleClick);
+      var handleClick = useSingleAndDoubleClick(handleImageClick, handleImageDoubleClick); // 当使用 getThumbBounds 时，关闭图片预览有缩小效果
+      // @en When using getThumbBounds, closing the image preview has a shrinking effect
+
+      function animateBeforeClose() {
+        var _a;
+
+        var index = innerIndexRef.current;
+        var imageDom = (_a = imagesRef.current[index]) === null || _a === void 0 ? void 0 : _a.image;
+        var thumbBounds = getThumbBounds === null || getThumbBounds === void 0 ? void 0 : getThumbBounds(index);
+
+        if (!imageDom || !thumbBounds || !thumbBounds.width || !thumbBounds.height) {
+          return;
+        } // 小图超过一半在视野外时，不展示缩小效果
+        // @en When more than half of the thumbnail is outside the field of view, the zoom effect will not be displayed
+
+
+        if (thumbBounds.top < -1 * thumbBounds.height / 2 || thumbBounds.top > windowHeight - thumbBounds.height / 2 || thumbBounds.left < -1 * thumbBounds.width / 2 || thumbBounds.left > windowWidth - thumbBounds.width / 2) {
+          return;
+        }
+
+        var imageDomRect = imageDom.getBoundingClientRect();
+
+        if (!imageDomRect.width || !imageDomRect.height) {
+          return;
+        }
+
+        imageDom.classList.add('closing-animation');
+        setImageBounds(imageDom, imageDomRect, imageDomRect);
+        imageDom.style.objectPosition = images[index].thumbPosition || 'top center';
+        nextTick(function () {
+          imageDom.style.transitionDuration = displayDuration + "ms";
+          imageDom.style.webkitTransitionDuration = displayDuration + "ms";
+          setImageBounds(imageDom, thumbBounds, imageDomRect);
+        });
+      }
 
       function goClose(e) {
         if (closingRef.current) {
@@ -21344,6 +21380,7 @@
         }
 
         closingRef.current = true;
+        animateBeforeClose();
         close(e);
       }
       /**
@@ -21366,7 +21403,7 @@
 
 
       function setDisplayAnimation(index) {
-        var _a;
+        var _a, _b, _c, _d;
 
         var firstLoaded = (_a = imagesStatusRef.current[index]) === null || _a === void 0 ? void 0 : _a.firstLoaded;
         var fallbackSrc = replaceFallbackWhenLoaded && firstLoaded ? images[index].src : images[index].fallbackSrc; // 用户设置了getThumbBounds和images的fallbackSrc属性才有放大过渡效果
@@ -21397,7 +21434,7 @@
         transImage.style.opacity = '0';
         transImage.style.transitionDuration = displayDuration + "ms";
         transImage.style.webkitTransitionDuration = displayDuration + "ms";
-        document.body.appendChild(transImage); // 拿到放大之后的位置rect，没拿到就取消小图放大效果
+        (_d = (_c = (_b = domRef.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll('.carousel-item')) === null || _c === void 0 ? void 0 : _c[index]) === null || _d === void 0 ? void 0 : _d.prepend(transImage); // 拿到放大之后的位置rect，没拿到就取消小图放大效果
         // @en Get the zoomed-in position rect, and cancel the zoom-in effect if not getting it
 
         getNewImageBounds(index, fallbackSrc, transImage, function (rect) {
@@ -21419,9 +21456,10 @@
                 return __assign$2(__assign$2({}, holders), (_a = {}, _a[index] = true, _a));
               });
             }, Math.max(0, displayDuration - 80));
+            var transitionEndDelay = images[index].transitionEndDelay || 30;
             setTimeout(function () {
               resetAnimation(index);
-            }, displayDuration + 30);
+            }, displayDuration + transitionEndDelay);
           });
         });
       }
@@ -21580,18 +21618,14 @@
         }) : null;
       }
 
-      function renderLoadingArea(index) {
-        // loadingArea提出来，放到过渡图上层
-        // @en The loadingArea is extracted and placed on the upper layer of the transition image
-        return index === openIndex ? /*#__PURE__*/React__default["default"].createElement(Portal, {
-          getContainer: getContainer
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
+      function renderLoadingArea() {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: "image-preview-loading-area"
         }, loadingArea || /*#__PURE__*/React__default["default"].createElement(Loading, {
           type: "circle",
           className: "loading-icon",
           radius: 7
-        }))) : loadingArea;
+        }));
       }
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
@@ -21639,7 +21673,7 @@
               imagesRef.current[index] = r;
             },
             showLoading: showLoading,
-            loadingArea: renderLoadingArea(index),
+            loadingArea: renderLoadingArea(),
             errorArea: errorArea,
             showError: showError,
             retryTime: retryTime,
@@ -27722,6 +27756,7 @@
       var getLinePosition = _a.getLinePosition,
           commonIsTouching = _a.commonIsTouching,
           valueGroup = _a.valueGroup;
+      var useRtl = React.useContext(GlobalContext).useRtl;
 
       var _b = React.useContext(SliderContext),
           size = _b.size,
@@ -27760,7 +27795,8 @@
           length = (larger - min) / (max - min) * length - start;
         }
 
-        return _a = {}, _a[isHorizontal ? 'left' : 'bottom'] = start + "px", _a[isHorizontal ? 'width' : 'height'] = Math.abs(length) + "px", _a;
+        var leftStyle = useRtl ? 'right' : 'left';
+        return _a = {}, _a[isHorizontal ? leftStyle : 'bottom'] = start + "px", _a[isHorizontal ? 'width' : 'height'] = Math.abs(length) + "px", _a;
       }, [valueGroup, getLinePosition, min, max, isHorizontal]);
       return {
         heightStyle: heightStyle,
@@ -27783,6 +27819,7 @@
           valueGroup = _a.valueGroup,
           setValueGroup = _a.setValueGroup,
           setCommonIsTouching = _a.setCommonIsTouching;
+      var useRtl = React.useContext(GlobalContext).useRtl;
 
       var _b = React.useContext(SliderContext),
           disabled = _b.disabled,
@@ -27816,7 +27853,8 @@
             length = _a.length,
             start = _a.start;
         if (length === 0) return 0;
-        var newWidth = isHorizontal ? touchPosition - start : length - touchPosition + start;
+        var rtlRatio = useRtl ? -1 : 1;
+        var newWidth = isHorizontal ? (touchPosition - start) * rtlRatio : length - touchPosition + start;
 
         if (newWidth < 0) {
           newWidth = 0;
@@ -28048,20 +28086,24 @@
           className = _b === void 0 ? '' : _b,
           _c = _a.style,
           style = _c === void 0 ? {} : _c;
-      var _d = React.useContext(GlobalContext).prefixCls,
-          prefixCls = _d === void 0 ? '' : _d;
 
-      var _e = React.useContext(SliderContext),
-          type = _e.type,
-          showMarks = _e.showMarks,
-          max = _e.max,
-          min = _e.min;
+      var _d = React.useContext(GlobalContext),
+          _e = _d.prefixCls,
+          prefixCls = _e === void 0 ? '' : _e,
+          useRtl = _d.useRtl;
+
+      var _f = React.useContext(SliderContext),
+          type = _f.type,
+          showMarks = _f.showMarks,
+          max = _f.max,
+          min = _f.min;
 
       var isHorizontal = /^horizontal/g.test(type);
       var genMarkStyle = React.useCallback(function (value) {
         var _a;
 
-        return _a = {}, _a[isHorizontal ? 'left' : 'bottom'] = (value - min) / (max - min) * 100 + "%", _a;
+        var leftStyle = useRtl ? 'right' : 'left';
+        return _a = {}, _a[isHorizontal ? leftStyle : 'bottom'] = (value - min) / (max - min) * 100 + "%", _a;
       }, [isHorizontal, min, max]);
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: prefixCls + "-slider-marks"
@@ -28082,26 +28124,28 @@
     }
 
     var Slider = /*#__PURE__*/React.forwardRef(function (_, ref) {
-      var _a = React.useContext(GlobalContext).prefixCls,
-          prefixCls = _a === void 0 ? '' : _a;
+      var _a = React.useContext(GlobalContext),
+          _b = _a.prefixCls,
+          prefixCls = _b === void 0 ? '' : _b,
+          useRtl = _a.useRtl;
 
-      var _b = React.useContext(SliderContext),
-          className = _b.className,
-          style = _b.style,
-          disabled = _b.disabled,
-          min = _b.min,
-          max = _b.max,
-          type = _b.type,
-          showTooltip = _b.showTooltip,
-          showMarks = _b.showMarks;
+      var _c = React.useContext(SliderContext),
+          className = _c.className,
+          style = _c.style,
+          disabled = _c.disabled,
+          min = _c.min,
+          max = _c.max,
+          type = _c.type,
+          showTooltip = _c.showTooltip,
+          showMarks = _c.showMarks;
 
       var domRef = React.useRef(null);
       var lineRef = React.useRef(null); // 拖动滑块的 index 为当前的 isTouching
       // @en The index of the slider is the current isTouching
 
-      var _c = React.useState(-1),
-          commonIsTouching = _c[0],
-          setCommonIsTouching = _c[1];
+      var _d = React.useState(-1),
+          commonIsTouching = _d[0],
+          setCommonIsTouching = _d[1];
 
       var isHorizontal = /^horizontal/g.test(type);
       React.useImperativeHandle(ref, function () {
@@ -28110,14 +28154,14 @@
         };
       });
 
-      var _d = useSliderInit({
+      var _e = useSliderInit({
         commonIsTouching: commonIsTouching
       }),
-          firstRender = _d.firstRender,
-          valueGroup = _d.valueGroup,
-          setValueGroup = _d.setValueGroup,
-          runTimeConfig = _d.runTimeConfig,
-          isMultiThumb = _d.isMultiThumb; // 最长线 div 位置
+          firstRender = _e.firstRender,
+          valueGroup = _e.valueGroup,
+          setValueGroup = _e.setValueGroup,
+          runTimeConfig = _e.runTimeConfig,
+          isMultiThumb = _e.isMultiThumb; // 最长线 div 位置
 
 
       var getLinePosition = React.useCallback(function () {
@@ -28134,20 +28178,21 @@
             top = _c.top,
             height = _c.height;
 
+        var leftValue = useRtl ? left + width : left;
         return {
           length: isHorizontal ? width : height,
-          start: isHorizontal ? left : top
+          start: isHorizontal ? leftValue : top
         };
       }, [isHorizontal, firstRender]);
 
-      var _e = useSliderStyle({
+      var _f = useSliderStyle({
         getLinePosition: getLinePosition,
         commonIsTouching: commonIsTouching,
         valueGroup: valueGroup
       }),
-          heightStyle = _e.heightStyle,
-          transitionClass = _e.transitionClass,
-          activeLineStyle = _e.activeLineStyle;
+          heightStyle = _f.heightStyle,
+          transitionClass = _f.transitionClass,
+          activeLineStyle = _f.activeLineStyle;
 
       useSliderEvents({
         lineRef: lineRef,
@@ -28157,11 +28202,11 @@
         setCommonIsTouching: setCommonIsTouching
       });
 
-      var _f = useSliderIcon({
+      var _g = useSliderIcon({
         valueGroup: valueGroup
       }),
-          renderPrefixLabel = _f.renderPrefixLabel,
-          renderSuffixLabel = _f.renderSuffixLabel;
+          renderPrefixLabel = _g.renderPrefixLabel,
+          renderSuffixLabel = _g.renderSuffixLabel;
       /**
        * 为了减少 dom 元素计算，只改变激活 line 的样式，让对应的 thumb 附着在两边，所以需要实时调整 className
        * @en In order to reduce the calculation of dom elements, only the style of the active line is changed, so that the corresponding thumb is attached to both sides, so the className needs to be adjusted in real time