@arco-design/mobile-react 2.25.4 → 2.26.0

package/esm/image-preview/index.js

@@ -17,52 +17,54 @@ var MAX_ZOOM = 5;
 var MIN_ZOOM = 0.7;
 var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
   var _imagesStatus$openInd, _imagesStatus$openInd2;
+
   var style = props.style,
-    className = props.className,
-    images = props.images,
-    _props$loop = props.loop,
-    loop = _props$loop === void 0 ? false : _props$loop,
-    openIndex = props.openIndex,
-    fit = props.fit,
-    _props$noselect = props.noselect,
-    noselect = _props$noselect === void 0 ? true : _props$noselect,
-    _props$displayDuratio = props.displayDuration,
-    displayDuration = _props$displayDuratio === void 0 ? 350 : _props$displayDuratio,
-    _props$spaceBetween = props.spaceBetween,
-    spaceBetween = _props$spaceBetween === void 0 ? 0 : _props$spaceBetween,
-    _props$showLoading = props.showLoading,
-    showLoading = _props$showLoading === void 0 ? true : _props$showLoading,
-    loadingArea = props.loadingArea,
-    errorArea = props.errorArea,
-    _props$showError = props.showError,
-    showError = _props$showError === void 0 ? true : _props$showError,
-    retryTime = props.retryTime,
-    staticLabel = props.staticLabel,
-    replaceFallbackWhenLoaded = props.replaceFallbackWhenLoaded,
-    scrollBezier = props.scrollBezier,
-    _props$lazyloadCount = props.lazyloadCount,
-    lazyloadCount = _props$lazyloadCount === void 0 ? 1 : _props$lazyloadCount,
-    _props$swipeToClose = props.swipeToClose,
-    swipeToClose = _props$swipeToClose === void 0 ? true : _props$swipeToClose,
-    getMinScale = props.getMinScale,
-    getMaxScale = props.getMaxScale,
-    getDoubleClickScale = props.getDoubleClickScale,
-    getContainer = props.getContainer,
-    getThumbBounds = props.getThumbBounds,
-    renderIndicator = props.renderIndicator,
-    _onChange = props.onChange,
-    _onAfterChange = props.onAfterChange,
-    onImageClick = props.onImageClick,
-    onImageDoubleClick = props.onImageDoubleClick,
-    onImageLongTap = props.onImageLongTap,
-    close = props.close,
-    onClose = props.onClose,
-    onTouchStart = props.onTouchStart,
-    onTouchMove = props.onTouchMove,
-    onTouchEnd = props.onTouchEnd,
-    _props$indicatorPos = props.indicatorPos,
-    indicatorPos = _props$indicatorPos === void 0 ? 'start' : _props$indicatorPos,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+      className = props.className,
+      images = props.images,
+      _props$loop = props.loop,
+      loop = _props$loop === void 0 ? false : _props$loop,
+      openIndex = props.openIndex,
+      fit = props.fit,
+      _props$noselect = props.noselect,
+      noselect = _props$noselect === void 0 ? true : _props$noselect,
+      _props$displayDuratio = props.displayDuration,
+      displayDuration = _props$displayDuratio === void 0 ? 350 : _props$displayDuratio,
+      _props$spaceBetween = props.spaceBetween,
+      spaceBetween = _props$spaceBetween === void 0 ? 0 : _props$spaceBetween,
+      _props$showLoading = props.showLoading,
+      showLoading = _props$showLoading === void 0 ? true : _props$showLoading,
+      loadingArea = props.loadingArea,
+      errorArea = props.errorArea,
+      _props$showError = props.showError,
+      showError = _props$showError === void 0 ? true : _props$showError,
+      retryTime = props.retryTime,
+      staticLabel = props.staticLabel,
+      replaceFallbackWhenLoaded = props.replaceFallbackWhenLoaded,
+      scrollBezier = props.scrollBezier,
+      _props$lazyloadCount = props.lazyloadCount,
+      lazyloadCount = _props$lazyloadCount === void 0 ? 1 : _props$lazyloadCount,
+      _props$swipeToClose = props.swipeToClose,
+      swipeToClose = _props$swipeToClose === void 0 ? true : _props$swipeToClose,
+      getMinScale = props.getMinScale,
+      getMaxScale = props.getMaxScale,
+      getDoubleClickScale = props.getDoubleClickScale,
+      getContainer = props.getContainer,
+      getThumbBounds = props.getThumbBounds,
+      renderIndicator = props.renderIndicator,
+      _onChange = props.onChange,
+      _onAfterChange = props.onAfterChange,
+      onImageClick = props.onImageClick,
+      onImageDoubleClick = props.onImageDoubleClick,
+      onImageLongTap = props.onImageLongTap,
+      close = props.close,
+      onClose = props.onClose,
+      onTouchStart = props.onTouchStart,
+      onTouchMove = props.onTouchMove,
+      onTouchEnd = props.onTouchEnd,
+      _props$indicatorPos = props.indicatorPos,
+      indicatorPos = _props$indicatorPos === void 0 ? 'start' : _props$indicatorPos,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
   var system = useSystem();
   var domRef = useRef(null);
   var imagesRef = useRef([]);
@@ -82,22 +84,28 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
   var lastScaleRef = useRef(0);
   var closingRef = useRef(false);
   var isInitialMount = useRef(false);
+
   var _useState = useState({}),
-    showPlaceholders = _useState[0],
-    setPlaceholders = _useState[1];
+      showPlaceholders = _useState[0],
+      setPlaceholders = _useState[1];
+
   var _useRefState = useRefState([]),
-    imagesStatus = _useRefState[0],
-    imagesStatusRef = _useRefState[1],
-    setImagesStatus = _useRefState[2];
+      imagesStatus = _useRefState[0],
+      imagesStatusRef = _useRefState[1],
+      setImagesStatus = _useRefState[2];
+
   var _useState2 = useState(null),
-    transImageInfo = _useState2[0],
-    setTransImageInfo = _useState2[1];
+      transImageInfo = _useState2[0],
+      setTransImageInfo = _useState2[1];
+
   var openLoaded = (_imagesStatus$openInd = imagesStatus[openIndex]) == null ? void 0 : _imagesStatus$openInd.loaded;
   var openAnimated = (_imagesStatus$openInd2 = imagesStatus[openIndex]) == null ? void 0 : _imagesStatus$openInd2.animated;
   var visible = openIndex >= 0 && openIndex < images.length;
+
   var _useWindowSize = useWindowSize(true),
-    windowWidth = _useWindowSize.windowWidth,
-    windowHeight = _useWindowSize.windowHeight;
+      windowWidth = _useWindowSize.windowWidth,
+      windowHeight = _useWindowSize.windowHeight;
+
   useImperativeHandle(ref, function () {
     return {
       dom: domRef.current,
@@ -114,6 +122,7 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
       carouselRef.current && carouselRef.current.changeIndex(openIndex, true);
       setImagesStatus(images.map(function (_, index) {
         var _imagesStatusRef$curr;
+
         return {
           firstLoaded: ((_imagesStatusRef$curr = imagesStatusRef.current[index]) == null ? void 0 : _imagesStatusRef$curr.firstLoaded) || false,
           animated: index !== openIndex
@@ -124,18 +133,18 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
       // 移除长按事件监听
       // @en Remove long press event listener
       longTimerRef.current && clearTimeout(longTimerRef.current);
-      longTapCheckingRef.current = false;
-      // 图片状态重置
+      longTapCheckingRef.current = false; // 图片状态重置
       // @en Reset image state
+
       setImagesStatus(imagesStatusRef.current.map(function (status) {
         return _extends({}, status, {
           animated: false,
           loaded: false
         });
       }));
-      transformersRef.current = [];
-      // 移除过渡图片
+      transformersRef.current = []; // 移除过渡图片
       // @en Remove transition image
+
       removeChild(document.querySelector('.image-preview-fake-trans-image'));
       setTransImageInfo(null);
       setPlaceholders({});
@@ -144,6 +153,7 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
         mounted && onClose && onClose();
       }, displayDuration);
     }
+
     isInitialMount.current = true;
   }, [visible]);
   useEffect(function () {
@@ -175,31 +185,36 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
       transformer && transformer.setMaxScale(getImageMaxScale(index));
     });
   }, [getMaxScale]);
+
   function removeChild(child) {
     try {
       child && document.body.removeChild(child);
     } catch (e) {}
-  }
-
-  // 监听滑动到上下边缘后还在往外滑动的操作，则关闭弹窗
+  } // 监听滑动到上下边缘后还在往外滑动的操作，则关闭弹窗
   // @en Monitor the operation of sliding out after sliding to the upper and lower edges, then close the popup
+
+
   function handlePreventCallback(_, dir) {
     if (!isTransforming() && dir === 'y') {
       touchingSideDisRef.current += 1;
     }
   }
-
   /**
    * 缩放插件初始化
    * @en Zoom plugin initialization
    */
+
+
   function initTransformer(index) {
     var _imagesRef$current$in;
+
     var imageDom = (_imagesRef$current$in = imagesRef.current[index]) == null ? void 0 : _imagesRef$current$in.dom;
     var wrapDom = imageDom == null ? void 0 : imageDom.parentElement;
+
     if (!imageDom || !wrapDom) {
       return;
     }
+
     if (transformersRef.current[index]) {
       transformersRef.current[index].setDom(wrapDom);
     } else {
@@ -218,15 +233,16 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
         },
         onTransform: function onTransform() {
           var _transformersRef$curr, _imagesStatusRef$curr2, _imagesStatusRef$curr3;
+
           // 图片放大再缩小，解决ios图片放大后模糊的问题
           // @en The image is zoomed in and then zoomed out to solve the problem of blurring after zooming in on ios images
           var img = imageDomsRef.current[index];
           var trans = ((_transformersRef$curr = transformersRef.current[index]) == null ? void 0 : _transformersRef$curr.getTransform == null ? void 0 : _transformersRef$curr.getTransform()) || {};
           var width = (_imagesStatusRef$curr2 = imagesStatusRef.current[index]) == null ? void 0 : _imagesStatusRef$curr2.originWidth;
           var height = (_imagesStatusRef$curr3 = imagesStatusRef.current[index]) == null ? void 0 : _imagesStatusRef$curr3.originHeight;
-          var scale = trans.scale || 1;
-          // 判断下只有图片缩放发生改变时重写图片样式
+          var scale = trans.scale || 1; // 判断下只有图片缩放发生改变时重写图片样式
           // @en It is judged that only the image style is rewritten when the zoom of the image changes.
+
           if (img && width && height && lastScaleRef.current !== scale) {
             lastScaleRef.current = scale;
             var atCenter = !imageHasOverflow(img) ? ' translateY(-50%)' : '';
@@ -245,18 +261,23 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
         onZoomEnd: function onZoomEnd(_1, _2, pinchStartCenter) {
           setPlaceholders(function (holders) {
             var _extends2;
+
             return _extends({}, holders, (_extends2 = {}, _extends2[index] = false, _extends2));
           });
           var image = imageDomsRef.current[index];
           var transformer = transformersRef.current[index];
+
           if (!image || !transformer || transformer.getTransform().scale < 1) {
             return;
           }
+
           var imageRect = image.getBoundingClientRect();
+
           if (imageRect.width > windowWidth && imageRect.height > windowHeight) {
             if (pinchStartCenter && pinchStartCenter.length) {
               transformer.setCenter.apply(transformer, pinchStartCenter);
             }
+
             transformer.setFixedX(false);
             transformer.setFixedY(false);
           } else if (imageRect.height <= windowHeight) {
@@ -275,19 +296,24 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
         maxScale: getImageMaxScale(index)
       });
     }
+
     setOriginBoundary(index);
   }
+
   function imageHasOverflow(img) {
     return Boolean(img && !img.classList.contains('preview-fit-contain-y'));
   }
+
   function setOriginBoundary(index) {
     var imageEle = imagesRef.current[index];
-    var imageDom = imageEle == null ? void 0 : imageEle.dom;
-    // 边界范围变为图片范围和容器范围的并集
+    var imageDom = imageEle == null ? void 0 : imageEle.dom; // 边界范围变为图片范围和容器范围的并集
     // @en The bounding range becomes the union of the image range and the container range
+
     if (imageDom != null && imageDom.parentElement && imageEle != null && imageEle.image) {
       var _rect = imageEle.image.getBoundingClientRect();
+
       var eleRect = imageDom.parentElement.getBoundingClientRect();
+
       if (transformersRef.current[index]) {
         transformersRef.current[index].setBoundary({
           left: Math.min(_rect.left, eleRect.left),
@@ -298,111 +324,137 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     }
   }
-
   /**
    * 获取最小缩放倍数
    * @en Get the minimum zoom factor
    */
+
+
   function getImageMinScale(index) {
     var currentIndex = index === void 0 ? innerIndexRef.current : index;
     var imageDom = imageDomsRef.current[currentIndex];
+
     if (!imageDom) {
       return 1;
     }
+
     if (getMinScale) {
       return getMinScale(imageDom, currentIndex);
     }
+
     return MIN_ZOOM;
   }
-
   /**
    * 获取最大缩放倍数
    * @en Get the maximum zoom factor
    */
+
+
   function getImageMaxScale(index) {
     var currentIndex = index === void 0 ? innerIndexRef.current : index;
     var imageDom = imageDomsRef.current[currentIndex];
+
     if (!imageDom) {
       return 1;
     }
+
     if (getMaxScale) {
       return getMaxScale(imageDom, currentIndex);
     }
+
     var imageWidth = imageDom.naturalWidth;
     var imageHeight = imageDom.naturalHeight;
     var maxScale = 1;
+
     if (imageWidth > imageHeight) {
       maxScale = imageWidth / windowWidth * MAX_ZOOM;
     } else {
       maxScale = Math.max(MAX_ZOOM, imageWidth / windowWidth);
     }
+
     return maxScale;
   }
-
   /**
    * 计算双击时图片缩放倍数
    * @en Calculate the zoom factor of the image when double-clicking
    */
+
+
   function getImageDoubleClickScale(currentScale) {
     var index = innerIndexRef.current;
     var imageDom = imageDomsRef.current[index];
+
     if (!imageDom) {
       return 1;
     }
+
     var maxScale = getImageMaxScale(index);
+
     if (getDoubleClickScale) {
       return getDoubleClickScale(currentScale, maxScale, imageDom, index);
     }
+
     var imageWidth = imageDom.naturalWidth;
     var imageHeight = imageDom.naturalHeight;
     var fitScale = imageWidth > imageHeight ? imageWidth / windowWidth * windowHeight / imageHeight : 1;
     var dblScale = 2;
+
     if (fitScale >= 2) {
       dblScale = Math.min(maxScale, fitScale);
     }
+
     var current = Number(currentScale.toFixed(3));
     var dbl = Number(dblScale.toFixed(3));
     return current >= 1 && current < dbl ? dbl : 1;
   }
-
   /**
    * 还原缩放至原始位置
    * @en Revert zoom to original position
    */
+
+
   function restoreTransformer(index) {
     var transformer = transformersRef.current[index];
+
     if (transformer) {
       transformer.restore();
     }
   }
-
   /**
    * 是否正处于缩放状态
    * @en Whether it is zooming
    */
+
+
   function isTransforming(index) {
     var _transformersRef$curr2;
+
     var currentIndex = index === void 0 ? innerIndexRef.current : index;
     return (_transformersRef$curr2 = transformersRef.current[currentIndex]) == null ? void 0 : _transformersRef$curr2.busy == null ? void 0 : _transformersRef$curr2.busy();
   }
-
   /**
    * 是否已经放大过
    * @en Whether is has been zoomed in
    */
+
+
   function isTransformed() {
     var _transformersRef$curr3;
+
     return (_transformersRef$curr3 = transformersRef.current[innerIndexRef.current]) == null ? void 0 : _transformersRef$curr3.dirty == null ? void 0 : _transformersRef$curr3.dirty();
   }
+
   function isTapStop() {
     var _transformersRef$curr4;
+
     return (_transformersRef$curr4 = transformersRef.current[innerIndexRef.current]) == null ? void 0 : _transformersRef$curr4.isTapStop == null ? void 0 : _transformersRef$curr4.isTapStop();
   }
-
   /**
    * 计算距离左右侧的距离，如果为0说明到边缘了，可以进行正常轮播操作
    * @en Calculate the distance from the left and right sides. If it is 0, it means that the edge is reached, and the normal rotation operation can be performed.
    */
+
+
   function transformTouchSide() {
     var transformer = transformersRef.current[innerIndexRef.current];
     var toLeft = transformer == null ? void 0 : transformer.toLeft == null ? void 0 : transformer.toLeft();
@@ -413,20 +465,23 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
       right: !toRight
     };
   }
+
   function handleImageWrapTouchStart(e) {
     if (onTouchStart && onTouchStart(e, innerIndexRef.current)) {
       return true;
     }
+
     var touches = e.touches;
     touchStartXRef.current = e.touches && e.touches[0] ? e.touches[0].clientX : 0;
     movedRef.current = false;
-    dblClickingRef.current = false;
-    // 单点长按才触发长按
+    dblClickingRef.current = false; // 单点长按才触发长按
     // @en A single long press triggers a long press
+
     if (touches.length === 1) {
       if (!closingRef.current) {
         longTapCheckingRef.current = true;
       }
+
       longTimerRef.current = window.setTimeout(function () {
         if (longTapCheckingRef.current) {
           longTapCheckingRef.current = false;
@@ -437,61 +492,72 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
     } else {
       longTapCheckingRef.current = false;
     }
+
     if (isTapStop()) {
       movedRef.current = true;
-    }
-    // 缩放状态下，未到边缘时不触发轮播手势
+    } // 缩放状态下，未到边缘时不触发轮播手势
     // @en In the zoomed state, the carousel gesture is not triggered when the edge is not reached
+
+
     if (isTransforming()) {
       startTouchingSideRef.current = transformTouchSide().side;
       return !startTouchingSideRef.current;
     }
   }
+
   function handleImageWrapTouchMove(e) {
     movedRef.current = true;
     longTapCheckingRef.current = false;
     longTimerRef.current && clearTimeout(longTimerRef.current);
+
     if (onTouchMove && onTouchMove(e, innerIndexRef.current)) {
       return true;
     }
+
     var evt = e.changedTouches[0];
     var touchMoveX = evt.clientX || 0;
-    var posDisX = touchMoveX - touchStartXRef.current;
-    // 缩放状态下，到边缘时如果还在往外滑动，则触发轮播手势
+    var posDisX = touchMoveX - touchStartXRef.current; // 缩放状态下，到边缘时如果还在往外滑动，则触发轮播手势
     // @en In the zoomed state, if it is still swiped out when reaching the edge, the carousel gesture is triggered
+
     if (isTransforming()) {
       var sideInfo = transformTouchSide();
       return !startTouchingSideRef.current || !(sideInfo.left && posDisX > 0 || sideInfo.right && posDisX < 0);
     }
   }
+
   function handleImageWrapTouchEnd(e) {
     if (onTouchEnd && onTouchEnd(e, innerIndexRef.current)) {
       return true;
-    }
-    // 滑动到上下边缘后还在往外滑动，则关闭弹窗
+    } // 滑动到上下边缘后还在往外滑动，则关闭弹窗
     // @en After sliding to the upper and lower edges and still sliding outwards, close the popup box
     // needClose为触发touchmove的次数，6和3是相对值，表示判断在往外滑动的敏感度，当未放大时对向外滑动手势更敏感
     // @en needClose is the number of times the touchmove is triggered, 6 and 3 are relative values, indicating the sensitivity of judging the outward sliding, and it is more sensitive to the outward sliding gesture when it is not zoomed in
+
+
     var needClose = swipeToClose && touchingSideDisRef.current >= (isTransformed() ? 6 : 3);
     touchingSideDisRef.current = 0;
     longTapCheckingRef.current = false;
     longTimerRef.current && clearTimeout(longTimerRef.current);
+
     if (needClose) {
       goClose(e);
       return true;
-    }
-    // 缩放状态下，未到边缘时不触发轮播手势
+    } // 缩放状态下，未到边缘时不触发轮播手势
     // @en In the zoomed state, the carousel gesture is not triggered when the edge is not reached
+
+
     if (isTransforming() && !transformTouchSide().side) {
       return true;
     }
   }
+
   function handleImageClick(e) {
     if (movedRef.current) {
       return;
-    }
-    // 300ms内再次点击则触发doubleClick，否则触发click
+    } // 300ms内再次点击则触发doubleClick，否则触发click
     // @en Click again within 300ms to trigger doubleClick, otherwise trigger click
+
+
     dblTimerRef.current = window.setTimeout(function () {
       if (!dblClickingRef.current) {
         if (!onImageClick || !onImageClick(innerIndexRef.current, e)) {
@@ -500,29 +566,35 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     }, 300);
   }
+
   function handleImageDoubleClick(e) {
     if (dblClickingRef.current) {
       // 防止重复触发dblclick
       return;
     }
+
     dblClickingRef.current = true;
+
     if (dblTimerRef.current) {
       clearTimeout(dblTimerRef.current);
       dblTimerRef.current = null;
     }
+
     var index = innerIndexRef.current;
-    onImageDoubleClick && onImageDoubleClick(index, e);
-    // 双击时根据配置放大或缩小
+    onImageDoubleClick && onImageDoubleClick(index, e); // 双击时根据配置放大或缩小
     // @en Zoom in or out according to configuration when double-clicking
+
     var transformer = transformersRef.current[index];
+
     if (transformer) {
       var trans = transformer.getTransform();
       var rate = trans.scale || 1;
       var dblScale = getImageDoubleClickScale(rate);
+
       if (dblScale === 1) {
-        var img = imageDomsRef.current[index];
-        // 长图双击还原缩放特殊处理，因为transform和scroll不能完全同步，所以先zoomTo到原点再restore
+        var img = imageDomsRef.current[index]; // 长图双击还原缩放特殊处理，因为transform和scroll不能完全同步，所以先zoomTo到原点再restore
         // @en Double-click the long image to restore zoom special processing, because transform and scroll cannot be completely synchronized, so first zoomTo to the origin and then restore
+
         if (imageHasOverflow(img)) {
           transformer.zoomToScreenCenter(1, [windowWidth / 2, windowHeight / 2], {
             duration: 200,
@@ -542,48 +614,57 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     }
   }
+
   var handleClick = useSingleAndDoubleClick(handleImageClick, handleImageDoubleClick);
+
   function goClose(e) {
     if (closingRef.current) {
       return;
     }
+
     closingRef.current = true;
     close(e);
   }
-
   /**
    * 更改指定图片状态
    * @en Change specified image status
    */
+
+
   function setImagesStatusByIndex(index, data) {
     var newStatus = imagesStatusRef.current.slice();
     newStatus[index] = _extends({}, newStatus[index] || {}, data);
     setImagesStatus(newStatus);
   }
-
   /**
    * 缩略图放大过渡动画设置
    * @en Set thumbnail zoom transition animation
    */
+
+
   function setDisplayAnimation(index) {
     var _imagesStatusRef$curr4;
+
     var firstLoaded = (_imagesStatusRef$curr4 = imagesStatusRef.current[index]) == null ? void 0 : _imagesStatusRef$curr4.firstLoaded;
-    var fallbackSrc = replaceFallbackWhenLoaded && firstLoaded ? images[index].src : images[index].fallbackSrc;
-    // 用户设置了getThumbBounds和images的fallbackSrc属性才有放大过渡效果
+    var fallbackSrc = replaceFallbackWhenLoaded && firstLoaded ? images[index].src : images[index].fallbackSrc; // 用户设置了getThumbBounds和images的fallbackSrc属性才有放大过渡效果
     // @en Set the fallbackSrc attribute of getThumbBounds and images to have a zoom-in transition effect
+
     if (!getThumbBounds || !images[index] || !fallbackSrc) {
       resetAnimation(index);
       return;
-    }
-    // 获取缩略图的rect，如果没获取到就取消放大过渡效果
+    } // 获取缩略图的rect，如果没获取到就取消放大过渡效果
     // @en Get the rect of the thumbnail, if it is gotten, cancel the zoom transition effect
+
+
     var thumbBounds = getThumbBounds(index);
+
     if (!thumbBounds || !thumbBounds.width || !thumbBounds.height) {
       resetAnimation(index);
       return;
-    }
-    // 伪造一个fixed的图做小图放大效果
+    } // 伪造一个fixed的图做小图放大效果
     // @en Forge a fixed image to make a small image enlargement effect
+
+
     var transImage = new Image();
     transImageRef.current = transImage;
     transImage.classList.add('image-preview-fake-trans-image');
@@ -593,23 +674,25 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
     transImage.style.opacity = '0';
     transImage.style.transitionDuration = displayDuration + "ms";
     transImage.style.webkitTransitionDuration = displayDuration + "ms";
-    document.body.appendChild(transImage);
-    // 拿到放大之后的位置rect，没拿到就取消小图放大效果
+    document.body.appendChild(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) {
       if (!rect || !rect.width || !rect.height) {
         removeChild(transImage);
         resetAnimation(index);
         return;
-      }
-      // 通过小图rect变换到大图rect加transition做放大效果
+      } // 通过小图rect变换到大图rect加transition做放大效果
       // @en Transform the small image rect to the large image rect and add transition to make a magnification effect
+
+
       nextTick(function () {
         transImage.style.opacity = '1';
         setImageBounds(transImage, rect, thumbBounds);
         setTimeout(function () {
           setPlaceholders(function (holders) {
             var _extends3;
+
             return _extends({}, holders, (_extends3 = {}, _extends3[index] = true, _extends3));
           });
         }, Math.max(0, displayDuration - 80));
@@ -619,22 +702,24 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
       });
     });
   }
-
   /**
    * 取消小图放大过渡效果
    * @en Cancel the thumbnail zoom transition effect
    */
+
+
   function resetAnimation(index) {
     setImagesStatusByIndex(index, {
       animated: true
     });
     setTransImageInfo(null);
   }
-
   /**
    * 根据rect设置图片的位置
    * @en Set the position of the image according to the rect
    */
+
+
   function setImageBounds(image, rect, thumbRect) {
     // 这里为保持原有比例，只设置宽度变化，高度会随宽度等比变化
     image.style.width = thumbRect.width + "px";
@@ -644,16 +729,18 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
     image.style.transformOrigin = 'left top';
     image.style.webkitTransformOrigin = 'left top';
   }
-
   /**
    * 计算放大之后的位置rect
    * @en Calculate the position rect after zooming in
    */
+
+
   function getNewImageBounds(index, transSrc, transImage, callback) {
     if (!transSrc) {
       callback(null);
       return;
     }
+
     setTransImageInfo({
       src: transSrc,
       fit: images[index].fit,
@@ -669,11 +756,12 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     });
   }
-
   /**
    * @en 渲染轮播+图片展示
    * Rendering carousel + displaying image
    */
+
+
   function renderContent(carouselProps, allImages, getImageProps) {
     return /*#__PURE__*/React.createElement(Carousel, _extends({
       autoPlay: false,
@@ -699,19 +787,22 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
       }, innerNode, image.extraNode) : innerNode;
     }));
   }
+
   function getImageClass(index) {
     var _ref = imagesStatus[index] || {},
-      loaded = _ref.loaded,
-      animated = _ref.animated;
+        loaded = _ref.loaded,
+        animated = _ref.animated;
+
     return cls('preview-image', {
       'preview-hidden': index === openIndex && (!loaded || !animated)
     });
   }
-
   /**
    * 每张图片的样式
    * @en style of each image
    */
+
+
   function getImageStyle() {
     // 因为缩放的容器必须是没有transform和transition的纯净元素
     // @en Because the scaled container must be a pure element without transform and transition
@@ -720,29 +811,31 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
     return {
       overflow: 'visible'
     };
-  }
+  } // 渲染轮播指引器
+
 
-  // 渲染轮播指引器
   function renderPreviewIndicator(currentIndex, total, lastIndex) {
     if (renderIndicator) {
       return renderIndicator(currentIndex, total, lastIndex);
     }
+
     return openLoaded ? /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
       className: "image-preview-indicator"
     }, currentIndex + 1, "/", total)) : null;
-  }
-
-  // ios在重设style时图片会消失一下造成闪动，因此在底下垫一张图
+  } // ios在重设style时图片会消失一下造成闪动，因此在底下垫一张图
   // @en In iOS when resetting the style, the image will disappear and cause flickering, so put a image at the bottom
   // 优先过渡图，其次用原图
   // @en Prioritize the transition image, followed by the original image
+
+
   function renderImagePlaceholder(src, index, fitCss) {
     var _ref2 = imagesStatus[index] || {},
-      originWidth = _ref2.originWidth,
-      originHeight = _ref2.originHeight,
-      originLeft = _ref2.originLeft,
-      originTop = _ref2.originTop,
-      hasOverflow = _ref2.hasOverflow;
+        originWidth = _ref2.originWidth,
+        originHeight = _ref2.originHeight,
+        originLeft = _ref2.originLeft,
+        originTop = _ref2.originTop,
+        hasOverflow = _ref2.hasOverflow;
+
     var trans = hasOverflow ? {} : getStyleWithVendor({
       transform: 'translateY(-50%)'
     });
@@ -760,6 +853,7 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
       }, fitObj, trans)
     }) : null;
   }
+
   function renderLoadingArea(index) {
     // loadingArea提出来，放到过渡图上层
     // @en The loadingArea is extracted and placed on the upper layer of the transition image
@@ -771,6 +865,7 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
       radius: 7
     }))) : loadingArea;
   }
+
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref3) {
     var prefixCls = _ref3.prefixCls;
     return /*#__PURE__*/React.createElement(Portal, {
@@ -835,17 +930,20 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
             originLeft: imageEle.offsetLeft,
             hasOverflow: imageHasOverflow(imageEle)
           });
+
           if (index === openIndex) {
             initTransformer(index);
           } else {
             setPlaceholders(function (holders) {
               var _extends4;
+
               return _extends({}, holders, (_extends4 = {}, _extends4[index] = true, _extends4));
             });
           }
         },
         onError: function onError() {
           imageDomsRef.current[index] = null;
+
           if (index === openIndex) {
             var transImage = transImageInfo == null ? void 0 : transImageInfo.movingImage;
             removeChild(transImage);
@@ -890,7 +988,6 @@ export function methodsGenerator(Comp) {
   };
 }
 var ImagePreviewWithGlobalContext = CompWithGlobalContext(ImagePreview);
-
 /**
  * 图片预览组件，支持循环轮播、双指/双击缩放、缩略图放大效果。
  * @en The image preview, supports circular rotation, two-finger/double-tap zoom, and thumbnail zoom effects.
@@ -899,4 +996,5 @@ var ImagePreviewWithGlobalContext = CompWithGlobalContext(ImagePreview);
  * @name 图片预览
  * @name_en ImagePreview
  */
+
 export default componentWrapper(ImagePreview, methodsGenerator(ImagePreviewWithGlobalContext));