@arco-design/mobile-react 2.24.2 → 2.25.0

package/umd/image-preview/index.js

@@ -14,7 +14,6 @@
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
   _exports.__esModule = true;
   var _exportNames = {
     methodsGenerator: true
@@ -37,62 +36,58 @@
   });
   _loading = _interopRequireDefault(_loading);
   var _excluded = ["style", "className", "images", "loop", "openIndex", "fit", "noselect", "displayDuration", "spaceBetween", "showLoading", "loadingArea", "errorArea", "showError", "retryTime", "staticLabel", "replaceFallbackWhenLoaded", "scrollBezier", "lazyloadCount", "swipeToClose", "getMinScale", "getMaxScale", "getDoubleClickScale", "getContainer", "getThumbBounds", "renderIndicator", "onChange", "onAfterChange", "onImageClick", "onImageDoubleClick", "onImageLongTap", "close", "onClose", "onTouchStart", "onTouchMove", "onTouchEnd", "indicatorPos"];
-
   function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
   function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
   var MAX_ZOOM = 5;
   var MIN_ZOOM = 0.7;
   var ImagePreview = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
     var system = (0, _helpers.useSystem)();
     var domRef = (0, _react.useRef)(null);
     var imagesRef = (0, _react.useRef)([]);
@@ -112,28 +107,22 @@
     var lastScaleRef = (0, _react.useRef)(0);
     var closingRef = (0, _react.useRef)(false);
     var isInitialMount = (0, _react.useRef)(false);
-
     var _useState = (0, _react.useState)({}),
-        showPlaceholders = _useState[0],
-        setPlaceholders = _useState[1];
-
+      showPlaceholders = _useState[0],
+      setPlaceholders = _useState[1];
     var _useRefState = (0, _helpers.useRefState)([]),
-        imagesStatus = _useRefState[0],
-        imagesStatusRef = _useRefState[1],
-        setImagesStatus = _useRefState[2];
-
+      imagesStatus = _useRefState[0],
+      imagesStatusRef = _useRefState[1],
+      setImagesStatus = _useRefState[2];
     var _useState2 = (0, _react.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 = (0, _helpers.useWindowSize)(true),
-        windowWidth = _useWindowSize.windowWidth,
-        windowHeight = _useWindowSize.windowHeight;
-
+      windowWidth = _useWindowSize.windowWidth,
+      windowHeight = _useWindowSize.windowHeight;
     (0, _react.useImperativeHandle)(ref, function () {
       return {
         dom: domRef.current,
@@ -150,7 +139,6 @@
         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
@@ -161,18 +149,18 @@
         // 移除长按事件监听
         // @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 (0, _extends5.default)({}, status, {
             animated: false,
             loaded: false
           });
         }));
-        transformersRef.current = []; // 移除过渡图片
+        transformersRef.current = [];
+        // 移除过渡图片
         // @en Remove transition image
-
         removeChild(document.querySelector('.image-preview-fake-trans-image'));
         setTransImageInfo(null);
         setPlaceholders({});
@@ -181,7 +169,6 @@
           mounted && onClose && onClose();
         }, displayDuration);
       }
-
       isInitialMount.current = true;
     }, [visible]);
     (0, _react.useEffect)(function () {
@@ -213,36 +200,31 @@
         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 {
@@ -261,16 +243,15 @@
           },
           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%)' : '';
@@ -289,23 +270,18 @@
           onZoomEnd: function onZoomEnd(_1, _2, pinchStartCenter) {
             setPlaceholders(function (holders) {
               var _extends2;
-
               return (0, _extends5.default)({}, 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) {
@@ -324,24 +300,19 @@
           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),
@@ -352,137 +323,111 @@
         }
       }
     }
+
     /**
      * 获取最小缩放倍数
      * @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();
@@ -493,23 +438,20 @@
         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;
@@ -520,72 +462,61 @@
       } 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)) {
@@ -594,35 +525,29 @@
         }
       }, 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,
@@ -642,57 +567,48 @@
         }
       }
     }
-
     var handleClick = (0, _helpers.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] = (0, _extends5.default)({}, 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');
@@ -702,25 +618,23 @@
       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
-
-
         (0, _mobileUtils.nextTick)(function () {
           transImage.style.opacity = '1';
           setImageBounds(transImage, rect, thumbBounds);
           setTimeout(function () {
             setPlaceholders(function (holders) {
               var _extends3;
-
               return (0, _extends5.default)({}, holders, (_extends3 = {}, _extends3[index] = true, _extends3));
             });
           }, Math.max(0, displayDuration - 80));
@@ -730,24 +644,22 @@
         });
       });
     }
+
     /**
      * 取消小图放大过渡效果
      * @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";
@@ -757,18 +669,16 @@
       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,
@@ -784,19 +694,18 @@
         }
       });
     }
+
     /**
      * @en 渲染轮播+图片展示
      * Rendering carousel + displaying image
      */
-
-
     function renderContent(carouselProps, allImages, getImageProps) {
       return /*#__PURE__*/_react.default.createElement(_carousel.default, (0, _extends5.default)({
         autoPlay: false,
         loop: loop,
         lazyloadCount: lazyloadCount
       }, carouselProps), (allImages || []).map(function (image, index) {
-        return /*#__PURE__*/_react.default.createElement("div", {
+        var innerNode = /*#__PURE__*/_react.default.createElement("div", {
           key: index,
           className: "preview-image-wrap",
           style: {
@@ -809,24 +718,25 @@
           boxHeight: windowHeight,
           bottomOverlap: null
         }, getImageProps(image, index))));
+        return image.extraNode ? /*#__PURE__*/_react.default.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 (0, _mobileUtils.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
@@ -835,31 +745,29 @@
       return {
         overflow: 'visible'
       };
-    } // 渲染轮播指引器
-
+    }
 
+    // 渲染轮播指引器
     function renderPreviewIndicator(currentIndex, total, lastIndex) {
       if (renderIndicator) {
         return renderIndicator(currentIndex, total, lastIndex);
       }
-
       return openLoaded ? /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.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 ? {} : (0, _helpers.getStyleWithVendor)({
         transform: 'translateY(-50%)'
       });
@@ -874,7 +782,6 @@
         }, trans)
       }) : null;
     }
-
     function renderLoadingArea(index) {
       // loadingArea提出来，放到过渡图上层
       // @en The loadingArea is extracted and placed on the upper layer of the transition image
@@ -886,7 +793,6 @@
         radius: 7
       }))) : loadingArea;
     }
-
     return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref3) {
       var prefixCls = _ref3.prefixCls;
       return /*#__PURE__*/_react.default.createElement(_portal.default, {
@@ -951,20 +857,17 @@
               originLeft: imageEle.offsetLeft,
               hasOverflow: imageHasOverflow(imageEle)
             });
-
             if (index === openIndex) {
               initTransformer(index);
             } else {
               setPlaceholders(function (holders) {
                 var _extends4;
-
                 return (0, _extends5.default)({}, 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);
@@ -997,7 +900,6 @@
       }) : null);
     });
   });
-
   function methodsGenerator(Comp) {
     return {
       /**
@@ -1009,8 +911,8 @@
       open: (0, _methods.open)(Comp)
     };
   }
-
   var ImagePreviewWithGlobalContext = (0, _contextProvider.CompWithGlobalContext)(ImagePreview);
+
   /**
    * 图片预览组件，支持循环轮播、双指/双击缩放、缩略图放大效果。
    * @en The image preview, supports circular rotation, two-finger/double-tap zoom, and thumbnail zoom effects.
@@ -1019,8 +921,6 @@
    * @name 图片预览
    * @name_en ImagePreview
    */
-
   var _default = (0, _mobileUtils.componentWrapper)(ImagePreview, methodsGenerator(ImagePreviewWithGlobalContext));
-
   _exports.default = _default;
 });