@arco-design/mobile-react 2.19.0

package/esm/image-preview/index.js

@@ -0,0 +1,992 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+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"];
+import React, { useRef, forwardRef, useImperativeHandle, useEffect, useState } from 'react';
+import { nextTick, componentWrapper, preventEleScroll, freeEleScroll, cls } from '@arco-design/mobile-utils';
+import TransformAble from '@arco-design/transformable';
+import { ContextLayout } from '../context-provider';
+import Carousel from '../carousel';
+import Transition from '../transition';
+import BaseImage from '../image';
+import { useWindowSize, useRefState, usePopupScroll, getStyleWithVendor, useSystem, useSingleAndDoubleClick } from '../_helpers';
+import Portal from '../portal';
+import { open } from './methods';
+import Loading from '../loading';
+export * from './methods';
+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);
+
+  var system = useSystem();
+  var domRef = useRef(null);
+  var imagesRef = useRef([]);
+  var carouselRef = useRef(null);
+  var transformersRef = useRef([]);
+  var dblTimerRef = useRef(null);
+  var longTimerRef = useRef(null);
+  var transImageRef = useRef(null);
+  var imageDomsRef = useRef([]);
+  var touchStartXRef = useRef(0);
+  var startTouchingSideRef = useRef(false);
+  var movedRef = useRef(false);
+  var dblClickingRef = useRef(false);
+  var longTapCheckingRef = useRef(false);
+  var innerIndexRef = useRef(openIndex);
+  var touchingSideDisRef = useRef(0);
+  var lastScaleRef = useRef(0);
+  var closingRef = useRef(false);
+  var isInitialMount = useRef(false);
+
+  var _useState = useState({}),
+      showPlaceholders = _useState[0],
+      setPlaceholders = _useState[1];
+
+  var _useRefState = useRefState([]),
+      imagesStatus = _useRefState[0],
+      imagesStatusRef = _useRefState[1],
+      setImagesStatus = _useRefState[2];
+
+  var _useState2 = useState(null),
+      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;
+
+  useImperativeHandle(ref, function () {
+    return {
+      dom: domRef.current,
+      imageDoms: imageDomsRef.current
+    };
+  });
+  usePopupScroll(visible, domRef.current, function () {
+    return [];
+  }, 'top', handlePreventCallback);
+  useEffect(function () {
+    if (visible) {
+      innerIndexRef.current = openIndex;
+      closingRef.current = false;
+      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
+        };
+      }));
+      setDisplayAnimation(openIndex);
+    } else {
+      // 移除长按事件监听
+      // @en Remove long press event listener
+      longTimerRef.current && clearTimeout(longTimerRef.current);
+      longTapCheckingRef.current = false; // 图片状态重置
+      // @en Reset image state
+
+      setImagesStatus(imagesStatusRef.current.map(function (status) {
+        return _extends({}, status, {
+          animated: false,
+          loaded: false
+        });
+      }));
+      transformersRef.current = []; // 移除过渡图片
+      // @en Remove transition image
+
+      removeChild(document.querySelector('.image-preview-fake-trans-image'));
+      setTransImageInfo(null);
+      setPlaceholders({});
+      var mounted = isInitialMount.current;
+      setTimeout(function () {
+        mounted && onClose && onClose();
+      }, displayDuration);
+    }
+
+    isInitialMount.current = true;
+  }, [visible]);
+  useEffect(function () {
+    if (visible && openLoaded && openAnimated) {
+      setTimeout(function () {
+        removeChild(transImageRef.current);
+        transImageRef.current = null;
+      }, 100);
+    }
+  }, [visible, openLoaded, openAnimated]);
+  useEffect(function () {
+    // 执行过渡动画时避免滚动穿透
+    // @en Avoid scroll penetration when performing transition animation
+    if (transImageInfo) {
+      preventEleScroll();
+    } else {
+      nextTick(function () {
+        freeEleScroll();
+      });
+    }
+  }, [transImageInfo]);
+  useEffect(function () {
+    (transformersRef.current || []).forEach(function (transformer, index) {
+      transformer && transformer.setMinScale(getImageMinScale(index));
+    });
+  }, [getMinScale]);
+  useEffect(function () {
+    (transformersRef.current || []).forEach(function (transformer, index) {
+      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 {
+      // 缩放插件中对长图的处理：放大状态为模拟手势滚动，还原状态为真实滚动
+      // @en The processing of long images in the zoom plugin: the zoomed state is simulated gesture scrolling, and the restored state is real scrolling
+      transformersRef.current[index] = new TransformAble({
+        // wrapDom为无transform和transition的纯净容器
+        // @en wrapDom is a pure container without transform and transition
+        dom: wrapDom,
+        motionThreshold: 0,
+        dragMode: 'always',
+        transformMode: 'matrix',
+        useDomBoundary: false,
+        cubic: {
+          scroll: scrollBezier
+        },
+        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; // 判断下只有图片缩放发生改变时重写图片样式
+          // @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%)' : '';
+            img.style.width = width * scale + "px";
+            img.style.height = height * scale + "px";
+            var transform = "scale(" + 1 / scale + ") translateZ(0)" + atCenter;
+            img.style.transform = transform;
+            img.style.webkitTransform = transform;
+            img.style.transformOrigin = 'top left';
+            img.style.webkitTransformOrigin = 'top left';
+          }
+        },
+        onRestore: function onRestore() {
+          lastScaleRef.current = 0;
+        },
+        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) {
+            if (!transformer.fixedY) {
+              transformer.setFixedY(true);
+              transformer.bounce();
+            }
+          } else if (imageRect.width <= windowWidth) {
+            if (!transformer.fixedX) {
+              transformer.setFixedX(true);
+              transformer.bounce();
+            }
+          }
+        },
+        minScale: getImageMinScale(index),
+        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; // 边界范围变为图片范围和容器范围的并集
+    // @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),
+          right: Math.max(_rect.right, eleRect.right),
+          top: Math.min(_rect.top, eleRect.top),
+          bottom: Math.max(_rect.bottom, eleRect.bottom)
+        }, true);
+      }
+    }
+  }
+  /**
+   * 获取最小缩放倍数
+   * @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();
+    var toRight = transformer == null ? void 0 : transformer.toRight == null ? void 0 : transformer.toRight();
+    return {
+      side: !toLeft || !toRight,
+      left: !toLeft,
+      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; // 单点长按才触发长按
+    // @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;
+          movedRef.current = true;
+          onImageLongTap && onImageLongTap(innerIndexRef.current, imageDomsRef.current[innerIndexRef.current], e);
+        }
+      }, 300);
+    } 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; // 缩放状态下，到边缘时如果还在往外滑动，则触发轮播手势
+    // @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
+    // @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)) {
+          goClose(e);
+        }
+      }
+    }, 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); // 双击时根据配置放大或缩小
+    // @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
+        // @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,
+            callback: function callback() {
+              return transformer.restore();
+            }
+          });
+        } else {
+          transformer.bounce();
+          transformer.restore();
+        }
+      } else {
+        transformer.zoomToScreenCenter(dblScale, [windowWidth / 2, windowHeight / 2], {
+          duration: 200,
+          silent: false
+        });
+      }
+    }
+  }
+
+  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属性才有放大过渡效果
+    // @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，如果没获取到就取消放大过渡效果
+    // @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的图做小图放大效果
+    // @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');
+    setImageBounds(transImage, thumbBounds, thumbBounds);
+    transImage.src = fallbackSrc;
+    transImage.style.objectPosition = images[index].thumbPosition || 'top center';
+    transImage.style.opacity = '0';
+    transImage.style.transitionDuration = displayDuration + "ms";
+    transImage.style.webkitTransitionDuration = displayDuration + "ms";
+    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做放大效果
+      // @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));
+        setTimeout(function () {
+          resetAnimation(index);
+        }, displayDuration + 30);
+      });
+    });
+  }
+  /**
+   * 取消小图放大过渡效果
+   * @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";
+    var transform = "translate3d(" + rect.left + "px, " + rect.top + "px, 0) scale(" + rect.width / thumbRect.width;
+    image.style.transform = transform;
+    image.style.webkitTransform = transform;
+    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,
+      index: index,
+      movingImage: transImage,
+      onLoad: function onLoad(_, image) {
+        setTimeout(function () {
+          callback(image.getBoundingClientRect());
+        }, 20);
+      },
+      onError: function onError() {
+        return callback(null);
+      }
+    });
+  }
+  /**
+   * @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", {
+        key: index,
+        className: "preview-image-wrap",
+        style: {
+          padding: "0 " + spaceBetween + "px"
+        }
+      }, /*#__PURE__*/React.createElement(BaseImage, _extends({
+        className: "preview-image",
+        fit: image.fit || fit || 'preview-y',
+        boxWidth: windowWidth - spaceBetween * 2,
+        boxHeight: windowHeight,
+        bottomOverlap: null
+      }, getImageProps(image, index))));
+    }));
+  }
+
+  function getImageClass(index) {
+    var _ref = imagesStatus[index] || {},
+        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
+    // 所以这里强制设置overflow为visible，溢出滚动的部分交由外层来做
+    // @en So it is forced to set overflow to visible, and the part of overflow scrolling is left to the outer layer.
+    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时图片会消失一下造成闪动，因此在底下垫一张图
+  // @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;
+
+    var trans = hasOverflow ? {} : getStyleWithVendor({
+      transform: 'translateY(-50%)'
+    });
+    return system === 'ios' && showPlaceholders[index] && originWidth && originHeight ? /*#__PURE__*/React.createElement("img", {
+      src: src,
+      style: _extends({
+        position: 'absolute',
+        width: originWidth,
+        height: originHeight,
+        left: originLeft,
+        top: originTop
+      }, trans)
+    }) : null;
+  }
+
+  function renderLoadingArea(index) {
+    // loadingArea提出来，放到过渡图上层
+    // @en The loadingArea is extracted and placed on the upper layer of the transition image
+    return index === openIndex ? /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
+      className: "image-preview-loading-area"
+    }, loadingArea || /*#__PURE__*/React.createElement(Loading, {
+      type: "circle",
+      className: "loading-icon",
+      radius: 7
+    }))) : loadingArea;
+  }
+
+  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref3) {
+    var prefixCls = _ref3.prefixCls;
+    return /*#__PURE__*/React.createElement(Portal, {
+      getContainer: getContainer
+    }, /*#__PURE__*/React.createElement(Transition, {
+      in: visible,
+      timeout: displayDuration,
+      type: "fade",
+      mountOnEnter: true,
+      unmountOnExit: true
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cls(prefixCls + "-image-preview", 'all-border-box', {
+        noselect: noselect
+      }, className),
+      style: style,
+      ref: domRef,
+      onClick: handleClick,
+      onDoubleClick: handleImageDoubleClick
+    }, renderContent(_extends({
+      indicatorPos: indicatorPos,
+      initialIndex: openIndex,
+      ref: carouselRef,
+      renderIndicator: renderPreviewIndicator,
+      onChange: function onChange(index) {
+        innerIndexRef.current = index;
+        _onChange && _onChange(index);
+      },
+      onAfterChange: function onAfterChange(index, oldIndex) {
+        _onAfterChange && _onAfterChange(index);
+        restoreTransformer(oldIndex);
+        nextTick(function () {
+          initTransformer(innerIndexRef.current);
+        });
+      },
+      onTouchMove: handleImageWrapTouchMove,
+      onTouchStart: handleImageWrapTouchStart,
+      onTouchEnd: handleImageWrapTouchEnd
+    }, otherProps), images, function (image, index) {
+      return {
+        src: image.src,
+        ref: function ref(r) {
+          imagesRef.current[index] = r;
+        },
+        showLoading: showLoading,
+        loadingArea: renderLoadingArea(index),
+        errorArea: errorArea,
+        showError: showError,
+        retryTime: retryTime,
+        staticLabel: staticLabel,
+        animateDuration: transImageInfo ? 0 : void 0,
+        style: getImageStyle(),
+        className: getImageClass(index),
+        bottomOverlap: renderImagePlaceholder(image.fallbackSrc || image.src, index),
+        onLoad: function onLoad(_, imageEle) {
+          imageDomsRef.current[index] = imageEle;
+          setImagesStatusByIndex(index, {
+            loaded: true,
+            firstLoaded: true,
+            originWidth: imageEle.offsetWidth,
+            originHeight: imageEle.offsetHeight,
+            originTop: imageEle.offsetTop,
+            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);
+            setImagesStatusByIndex(index, {
+              animated: true,
+              loaded: true
+            });
+            setTransImageInfo(null);
+          }
+        }
+      };
+    }), transImageInfo ? /*#__PURE__*/React.createElement("div", {
+      className: "image-preview-fake-rect"
+    }, renderContent({
+      initialIndex: 0
+    }, [{
+      src: transImageInfo.src,
+      fit: transImageInfo.fit
+    }], function () {
+      return {
+        staticLabel: staticLabel,
+        src: transImageInfo.src,
+        animateDuration: 0,
+        onLoad: transImageInfo.onLoad,
+        onError: transImageInfo.onError
+      };
+    })) : null)), transImageInfo ? /*#__PURE__*/React.createElement("div", {
+      className: "image-preview-lock-modal",
+      onClick: goClose
+    }) : null);
+  });
+});
+export function methodsGenerator(Comp) {
+  return {
+    /**
+     * 打开图片预览
+     * @desc {en} Open image preview
+     * @param {ImagePreviewProps} config configuration
+     * @returns {{ close: () => void; update: (newConfig: ImagePreviewProps) => void; }}
+     */
+    open: open(Comp)
+  };
+}
+/**
+ * 图片预览组件，支持循环轮播、双指/双击缩放、缩略图放大效果。
+ * @en The image preview, supports circular rotation, two-finger/double-tap zoom, and thumbnail zoom effects.
+ * @type 数据展示
+ * @type_en Data Display
+ * @name 图片预览
+ * @name_en ImagePreview
+ */
+
+export default componentWrapper(ImagePreview, methodsGenerator(ImagePreview));