@arco-design/mobile-react 2.24.1 → 2.25.0

package/esm/image-preview/index.js

@@ -17,54 +17,52 @@ 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([]);
@@ -84,28 +82,22 @@ 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,
@@ -122,7 +114,6 @@ 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
@@ -133,18 +124,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({});
@@ -153,7 +144,6 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
         mounted && onClose && onClose();
       }, displayDuration);
     }
-
     isInitialMount.current = true;
   }, [visible]);
   useEffect(function () {
@@ -185,36 +175,31 @@ 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
-
+  }
 
+  // 监听滑动到上下边缘后还在往外滑动的操作，则关闭弹窗
+  // @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 {
@@ -233,16 +218,15 @@ 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%)' : '';
@@ -261,23 +245,18 @@ 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) {
@@ -296,24 +275,19 @@ 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),
@@ -324,137 +298,111 @@ 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();
@@ -465,23 +413,20 @@ 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;
@@ -492,72 +437,61 @@ 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)) {
@@ -566,35 +500,29 @@ 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,
@@ -614,57 +542,48 @@ 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');
@@ -674,25 +593,23 @@ 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));
@@ -702,24 +619,22 @@ 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";
@@ -729,18 +644,16 @@ 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,
@@ -756,19 +669,18 @@ 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,
       loop: loop,
       lazyloadCount: lazyloadCount
     }, carouselProps), (allImages || []).map(function (image, index) {
-      return /*#__PURE__*/React.createElement("div", {
+      var innerNode = /*#__PURE__*/React.createElement("div", {
         key: index,
         className: "preview-image-wrap",
         style: {
@@ -781,24 +693,25 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
         boxHeight: windowHeight,
         bottomOverlap: null
       }, getImageProps(image, index))));
+      return image.extraNode ? /*#__PURE__*/React.createElement("div", {
+        className: "preview-image-wrap-container",
+        key: "outer-" + index
+      }, 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
@@ -807,31 +720,29 @@ 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) {
     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%)'
     });
@@ -846,7 +757,6 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
       }, trans)
     }) : null;
   }
-
   function renderLoadingArea(index) {
     // loadingArea提出来，放到过渡图上层
     // @en The loadingArea is extracted and placed on the upper layer of the transition image
@@ -858,7 +768,6 @@ 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, {
@@ -923,20 +832,17 @@ 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);
@@ -981,6 +887,7 @@ export function methodsGenerator(Comp) {
   };
 }
 var ImagePreviewWithGlobalContext = CompWithGlobalContext(ImagePreview);
+
 /**
  * 图片预览组件，支持循环轮播、双指/双击缩放、缩略图放大效果。
  * @en The image preview, supports circular rotation, two-finger/double-tap zoom, and thumbnail zoom effects.
@@ -989,5 +896,4 @@ var ImagePreviewWithGlobalContext = CompWithGlobalContext(ImagePreview);
  * @name 图片预览
  * @name_en ImagePreview
  */
-
 export default componentWrapper(ImagePreview, methodsGenerator(ImagePreviewWithGlobalContext));