@arco-design/mobile-react 2.30.2 → 2.30.3

package/esm/image-preview/index.js

@@ -145,7 +145,7 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
       transformersRef.current = []; // 移除过渡图片
       // @en Remove transition image
 
-      removeChild(document.querySelector('.image-preview-fake-trans-image'));
+      removeChild(transImageRef.current);
       setTransImageInfo(null);
       setPlaceholders({});
       var mounted = isInitialMount.current;
@@ -188,7 +188,9 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
 
   function removeChild(child) {
     try {
-      child && document.body.removeChild(child);
+      var _domRef$current, _domRef$current$query, _domRef$current$query2;
+
+      child && ((_domRef$current = domRef.current) == null ? void 0 : (_domRef$current$query = _domRef$current.querySelectorAll('.carousel-item')) == null ? void 0 : (_domRef$current$query2 = _domRef$current$query[innerIndexRef.current]) == null ? void 0 : _domRef$current$query2.removeChild(child));
     } catch (e) {}
   } // 监听滑动到上下边缘后还在往外滑动的操作，则关闭弹窗
   // @en Monitor the operation of sliding out after sliding to the upper and lower edges, then close the popup
@@ -607,7 +609,41 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }
 
-  var handleClick = useSingleAndDoubleClick(handleImageClick, handleImageDoubleClick);
+  var handleClick = useSingleAndDoubleClick(handleImageClick, handleImageDoubleClick); // 当使用 getThumbBounds 时，关闭图片预览有缩小效果
+  // @en When using getThumbBounds, closing the image preview has a shrinking effect
+
+  function animateBeforeClose() {
+    var _imagesRef$current$in2;
+
+    var index = innerIndexRef.current;
+    var imageDom = (_imagesRef$current$in2 = imagesRef.current[index]) == null ? void 0 : _imagesRef$current$in2.image;
+    var thumbBounds = getThumbBounds == null ? void 0 : getThumbBounds(index);
+
+    if (!imageDom || !thumbBounds || !thumbBounds.width || !thumbBounds.height) {
+      return;
+    } // 小图超过一半在视野外时，不展示缩小效果
+    // @en When more than half of the thumbnail is outside the field of view, the zoom effect will not be displayed
+
+
+    if (thumbBounds.top < -1 * thumbBounds.height / 2 || thumbBounds.top > windowHeight - thumbBounds.height / 2 || thumbBounds.left < -1 * thumbBounds.width / 2 || thumbBounds.left > windowWidth - thumbBounds.width / 2) {
+      return;
+    }
+
+    var imageDomRect = imageDom.getBoundingClientRect();
+
+    if (!imageDomRect.width || !imageDomRect.height) {
+      return;
+    }
+
+    imageDom.classList.add('closing-animation');
+    setImageBounds(imageDom, imageDomRect, imageDomRect);
+    imageDom.style.objectPosition = images[index].thumbPosition || 'top center';
+    nextTick(function () {
+      imageDom.style.transitionDuration = displayDuration + "ms";
+      imageDom.style.webkitTransitionDuration = displayDuration + "ms";
+      setImageBounds(imageDom, thumbBounds, imageDomRect);
+    });
+  }
 
   function goClose(e) {
     if (closingRef.current) {
@@ -615,6 +651,7 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
     }
 
     closingRef.current = true;
+    animateBeforeClose();
     close(e);
   }
   /**
@@ -637,7 +674,7 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
 
 
   function setDisplayAnimation(index) {
-    var _imagesStatusRef$curr4;
+    var _imagesStatusRef$curr4, _domRef$current2, _domRef$current2$quer, _domRef$current2$quer2;
 
     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属性才有放大过渡效果
@@ -668,7 +705,7 @@ 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，没拿到就取消小图放大效果
+    (_domRef$current2 = domRef.current) == null ? void 0 : (_domRef$current2$quer = _domRef$current2.querySelectorAll('.carousel-item')) == null ? void 0 : (_domRef$current2$quer2 = _domRef$current2$quer[index]) == null ? void 0 : _domRef$current2$quer2.prepend(transImage); // 拿到放大之后的位置rect，没拿到就取消小图放大效果
     // @en Get the zoomed-in position rect, and cancel the zoom-in effect if not getting it
 
     getNewImageBounds(index, fallbackSrc, transImage, function (rect) {
@@ -690,9 +727,10 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
             return _extends({}, holders, (_extends3 = {}, _extends3[index] = true, _extends3));
           });
         }, Math.max(0, displayDuration - 80));
+        var transitionEndDelay = images[index].transitionEndDelay || 30;
         setTimeout(function () {
           resetAnimation(index);
-        }, displayDuration + 30);
+        }, displayDuration + transitionEndDelay);
       });
     });
   }
@@ -851,18 +889,14 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
     }) : 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, {
-      getContainer: getContainer
-    }, /*#__PURE__*/React.createElement("div", {
+  function renderLoadingArea() {
+    return /*#__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) {
@@ -910,7 +944,7 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
           imagesRef.current[index] = r;
         },
         showLoading: showLoading,
-        loadingArea: renderLoadingArea(index),
+        loadingArea: renderLoadingArea(),
         errorArea: errorArea,
         showError: showError,
         retryTime: retryTime,

package/esm/image-preview/style/css/index.css

@@ -575,6 +575,7 @@
   height: 100%;
   opacity: 0;
 }
+.arco-image-preview .image-container img.closing-animation,
 .image-preview-fake-trans-image {
   position: fixed;
   left: 0;
@@ -584,7 +585,7 @@
   transition:  all cubic-bezier(0.34, 0.69, 0.1, 1) ;
   will-change: transform;
   pointer-events: none;
-  z-index: 1001;
+  height: auto !important;
 }
 .image-preview-loading-area {
   position: fixed;

package/esm/image-preview/style/index.less

@@ -77,6 +77,7 @@
     opacity: 0;
 }
 
+.@{prefix}-image-preview .image-container img.closing-animation,
 .image-preview-fake-trans-image {
     position: fixed;
     left: 0;
@@ -85,7 +86,7 @@
     .use-var(transition, image-preview-thumb-transition);
     will-change: transform;
     pointer-events: none;
-    z-index: @full-screen-z-index + 1;
+    height: auto !important;
 }
 
 .image-preview-loading-area {

package/esm/popover/style/css/index.css

@@ -549,6 +549,10 @@
   font-size: 0.4rem;
   line-height: 1;
 }
+[dir="rtl"] .arco-popover-menu-icon {
+  margin-right: initial;
+  margin-left: 0.16rem;
+}
 .arco-popover-menu-icon > * {
   float: left;
 }
@@ -634,7 +638,6 @@
   width: -webkit-max-content;
   width: max-content;
   z-index: 1010;
-  right: 0;
   background-color: transparent;
   visibility: hidden;
   will-change: transform;
@@ -716,11 +719,15 @@
   padding:  0 0.2rem 0 0.22rem ;
 }
 .arco-popover-inner .text-suffix {
-  padding:  0 0.24rem 0 0 ;
+  padding-right:  0.24rem ;
   -webkit-box-flex: 0;
   -webkit-flex: 0 0 auto;
           flex: 0 0 auto;
 }
+[dir="rtl"] .arco-popover-inner .text-suffix {
+  padding-right: initial;
+  padding-left:  0.24rem ;
+}
 .arco-popover-inner .popover-arrow {
   position: absolute;
   -webkit-transform: rotate(45deg);

package/esm/popover/style/css/menu.css

@@ -549,6 +549,10 @@
   font-size: 0.4rem;
   line-height: 1;
 }
+[dir="rtl"] .arco-popover-menu-icon {
+  margin-right: initial;
+  margin-left: 0.16rem;
+}
 .arco-popover-menu-icon > * {
   float: left;
 }

package/esm/popover/style/index.less

@@ -29,7 +29,6 @@
     position: absolute;
     width: max-content;
     z-index: @full-screen-z-index + 10;
-    right: 0;
     background-color: transparent;
     visibility: hidden;
     will-change: transform;
@@ -104,7 +103,7 @@
     }
 
     .text-suffix {
-        .use-var(padding, popover-text-suffix-padding);
+        .use-var-with-rtl(padding-right, popover-text-suffix-edge);
         flex: 0 0 auto;
     }
 

package/esm/popover/style/menu.less

@@ -32,7 +32,7 @@
         }
     }
     &-icon {
-        .rem(margin-right, 8);
+        .rem-with-rtl(margin-right, 8);
         .rem(font-size, 20);
         line-height: 1;
         & > * {

package/esm/slider/hooks/useSliderEvents.js

@@ -1,5 +1,6 @@
 import { useCallback, useContext, useState, useEffect, useMemo, useRef } from 'react';
 import { SliderContext } from '.';
+import { GlobalContext } from '../../context-provider';
 var IsTouchingStatus;
 
 (function (IsTouchingStatus) {
@@ -15,13 +16,16 @@ export var useSliderEvents = function useSliderEvents(_ref) {
       setValueGroup = _ref.setValueGroup,
       setCommonIsTouching = _ref.setCommonIsTouching;
 
-  var _useContext = useContext(SliderContext),
-      disabled = _useContext.disabled,
-      step = _useContext.step,
-      min = _useContext.min,
-      max = _useContext.max,
-      type = _useContext.type,
-      draggableTrackOnly = _useContext.draggableTrackOnly;
+  var _useContext = useContext(GlobalContext),
+      useRtl = _useContext.useRtl;
+
+  var _useContext2 = useContext(SliderContext),
+      disabled = _useContext2.disabled,
+      step = _useContext2.step,
+      min = _useContext2.min,
+      max = _useContext2.max,
+      type = _useContext2.type,
+      draggableTrackOnly = _useContext2.draggableTrackOnly;
 
   var _useState = useState(IsTouchingStatus.Idle),
       isTouching = _useState[0],
@@ -47,7 +51,8 @@ export var useSliderEvents = function useSliderEvents(_ref) {
         length = _linePositionRef$curr.length,
         start = _linePositionRef$curr.start;
     if (length === 0) return 0;
-    var newWidth = isHorizontal ? touchPosition - start : length - touchPosition + start;
+    var rtlRatio = useRtl ? -1 : 1;
+    var newWidth = isHorizontal ? (touchPosition - start) * rtlRatio : length - touchPosition + start;
 
     if (newWidth < 0) {
       newWidth = 0;

package/esm/slider/hooks/useSliderStyle.js

@@ -1,16 +1,20 @@
 import { useContext, useMemo } from 'react';
 import { SliderContext } from '.';
+import { GlobalContext } from '../../context-provider';
 export var useSliderStyle = function useSliderStyle(_ref) {
   var getLinePosition = _ref.getLinePosition,
       commonIsTouching = _ref.commonIsTouching,
       valueGroup = _ref.valueGroup;
 
-  var _useContext = useContext(SliderContext),
-      size = _useContext.size,
-      useAnimation = _useContext.useAnimation,
-      min = _useContext.min,
-      max = _useContext.max,
-      type = _useContext.type;
+  var _useContext = useContext(GlobalContext),
+      useRtl = _useContext.useRtl;
+
+  var _useContext2 = useContext(SliderContext),
+      size = _useContext2.size,
+      useAnimation = _useContext2.useAnimation,
+      min = _useContext2.min,
+      max = _useContext2.max,
+      type = _useContext2.type;
 
   var isHorizontal = /^horizontal/g.test(type);
   var heightStyle = useMemo(function () {
@@ -44,7 +48,8 @@ export var useSliderStyle = function useSliderStyle(_ref) {
       length = (larger - min) / (max - min) * length - start;
     }
 
-    return _ref3 = {}, _ref3[isHorizontal ? 'left' : 'bottom'] = start + "px", _ref3[isHorizontal ? 'width' : 'height'] = Math.abs(length) + "px", _ref3;
+    var leftStyle = useRtl ? 'right' : 'left';
+    return _ref3 = {}, _ref3[isHorizontal ? leftStyle : 'bottom'] = start + "px", _ref3[isHorizontal ? 'width' : 'height'] = Math.abs(length) + "px", _ref3;
   }, [valueGroup, getLinePosition, min, max, isHorizontal]);
   return {
     heightStyle: heightStyle,

package/esm/slider/index.js

@@ -8,7 +8,8 @@ import Marks from './marks';
 var Slider = /*#__PURE__*/forwardRef(function (_, ref) {
   var _useContext = useContext(GlobalContext),
       _useContext$prefixCls = _useContext.prefixCls,
-      prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls;
+      prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls,
+      useRtl = _useContext.useRtl;
 
   var _useContext2 = useContext(SliderContext),
       className = _useContext2.className,
@@ -59,9 +60,10 @@ var Slider = /*#__PURE__*/forwardRef(function (_, ref) {
         top = _ref.top,
         height = _ref.height;
 
+    var leftValue = useRtl ? left + width : left;
     return {
       length: isHorizontal ? width : height,
-      start: isHorizontal ? left : top
+      start: isHorizontal ? leftValue : top
     };
   }, [isHorizontal, firstRender]);
 

package/esm/slider/marks.js

@@ -13,7 +13,8 @@ function Marks(_ref) {
 
   var _useContext = useContext(GlobalContext),
       _useContext$prefixCls = _useContext.prefixCls,
-      prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls;
+      prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls,
+      useRtl = _useContext.useRtl;
 
   var _useContext2 = useContext(SliderContext),
       type = _useContext2.type,
@@ -25,7 +26,8 @@ function Marks(_ref) {
   var genMarkStyle = useCallback(function (value) {
     var _ref2;
 
-    return _ref2 = {}, _ref2[isHorizontal ? 'left' : 'bottom'] = (value - min) / (max - min) * 100 + "%", _ref2;
+    var leftStyle = useRtl ? 'right' : 'left';
+    return _ref2 = {}, _ref2[isHorizontal ? leftStyle : 'bottom'] = (value - min) / (max - min) * 100 + "%", _ref2;
   }, [isHorizontal, min, max]);
   return /*#__PURE__*/React.createElement("div", {
     className: prefixCls + "-slider-marks"

package/esm/slider/style/css/index.css

@@ -541,6 +541,10 @@
 .is-horizontal .arco-slider-label {
   margin-right:  0.24rem ;
 }
+[dir="rtl"] .is-horizontal .arco-slider-label {
+  margin-right: initial;
+  margin-left:  0.24rem ;
+}
 .is-vertical .arco-slider-label {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
@@ -552,6 +556,10 @@
   margin-right: 0;
   margin-left:  0.24rem ;
 }
+[dir="rtl"] .is-horizontal .arco-slider-wrapper + .arco-slider-label {
+  margin-left: initial;
+  margin-right:  0.24rem ;
+}
 .is-vertical .arco-slider-wrapper + .arco-slider-label {
   margin-bottom: 0;
   margin-top:  0.24rem ;
@@ -636,11 +644,27 @@
   -webkit-transform: translateX(50%);
           transform: translateX(50%);
 }
+[dir="rtl"] .is-horizontal .arco-slider-thumb-wrapper.is-end {
+  right: initial;
+  left: 0;
+}
+[dir="rtl"] .is-horizontal .arco-slider-thumb-wrapper.is-end {
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
 .is-horizontal .arco-slider-thumb-wrapper.is-start {
   left: 0;
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
 }
+[dir="rtl"] .is-horizontal .arco-slider-thumb-wrapper.is-start {
+  left: initial;
+  right: 0;
+}
+[dir="rtl"] .is-horizontal .arco-slider-thumb-wrapper.is-start {
+  -webkit-transform: translateX(50%);
+          transform: translateX(50%);
+}
 .arco-slider-popover-wrapper .arco-slider-thumb {
   position: relative;
 }
@@ -739,6 +763,10 @@
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
 }
+[dir="rtl"] .arco-slider-marks-item {
+  -webkit-transform: translateX(50%);
+          transform: translateX(50%);
+}
 .arco-slider-marks-item.is-activated {
   background:  #165DFF ;
 }

package/esm/slider/style/index.less

@@ -31,7 +31,7 @@
         .use-var(color, slider-text-color);
 
         .is-horizontal & {
-            .use-var(margin-right, slider-label-gutter);
+            .use-var-with-rtl(margin-right, slider-label-gutter);
         }
 
         .is-vertical & {
@@ -44,7 +44,7 @@
 
         .is-horizontal & {
             margin-right: 0;
-            .use-var(margin-left, slider-label-gutter);
+            .use-var-with-rtl(margin-left, slider-label-gutter);
         }
 
         .is-vertical & {
@@ -124,13 +124,19 @@
                 bottom: 0;
 
                 &.is-end {
-                    right: 0;
+                    .set-prop-with-rtl(right, 0);
                     transform: translateX(50%);
+                    [dir="rtl"] & {
+                        transform: translateX(-50%);
+                    }
                 }
 
                 &.is-start {
-                    left: 0;
+                    .set-prop-with-rtl(left, 0);
                     transform: translateX(-50%);
+                    [dir="rtl"] & {
+                        transform: translateX(50%);
+                    }
                 }
             }
         }
@@ -236,6 +242,9 @@
             .use-var(border-radius, slider-mark-border-radius);
             .use-var(background, slider-line-color);
             transform: translateX(-50%);
+            [dir="rtl"] & {
+                transform: translateX(50%);
+            }
 
             &.is-activated {
                 .use-var(background, slider-line-activated-color);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.30.2",
+    "version": "2.30.3",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "2.17.2",
+        "@arco-design/mobile-utils": "2.17.3",
         "@arco-design/transformable": "^1.0.0",
         "lodash.throttle": "^4.1.1",
         "resize-observer-polyfill": "^1.5.1"
@@ -49,5 +49,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "41b5f19cac228f71b84b7a5df4dcdbd6262e2c46"
+    "gitHead": "3d93718fb907f11e31056284bbf7c03aee981fe4"
 }

package/tokens/app/arcodesign/default/css-variables.less

@@ -466,7 +466,7 @@
     --popover-icon-divider-height: ~`pxtorem(12)`;
     --popover-icon-size: ~`pxtorem(16)`;
     --popover-icon-padding: ~`pxtorem(0)` ~`pxtorem(10)` ~`pxtorem(0)` ~`pxtorem(11)`;
-    --popover-text-suffix-padding: ~`pxtorem(0)` ~`pxtorem(12)` ~`pxtorem(0)` ~`pxtorem(0)`;
+    --popover-text-suffix-edge: ~`pxtorem(12)`;
     --popover-mask-background: var(--mask-background);
     --load-more-font-size: ~`pxtorem(14)`;
     --dark-load-more-text-color: var(--dark-sub-info-font-color);

package/tokens/app/arcodesign/default/index.d.ts

@@ -465,7 +465,7 @@ export interface ArcodesignToken extends Record<string, string> {
     'popover-icon-divider-height': string;
     'popover-icon-size': string;
     'popover-icon-padding': string;
-    'popover-text-suffix-padding': string;
+    'popover-text-suffix-edge': string;
     'popover-mask-background': string;
     'load-more-font-size': string;
     'dark-load-more-text-color': string;

package/tokens/app/arcodesign/default/index.js

@@ -477,7 +477,7 @@ var tokens = {
   "popover-icon-divider-height": "0.24rem",
   "popover-icon-size": "0.32rem",
   "popover-icon-padding": "0 0.2rem 0 0.22rem",
-  "popover-text-suffix-padding": "0 0.24rem 0 0",
+  "popover-text-suffix-edge": "0.24rem",
   "popover-mask-background": "var(--mask-background)",
   "load-more-font-size": "0.28rem",
   "dark-load-more-text-color": "var(--dark-sub-info-font-color)",

package/tokens/app/arcodesign/default/index.json

@@ -7921,15 +7921,15 @@
             "en": "Popover shadow color"
         }
     },
-    "popoverTextSuffixPadding": {
-        "cssKey": "popover-text-suffix-padding",
-        "desc": "textSuffix 元素 padding",
+    "popoverTextSuffixEdge": {
+        "cssKey": "popover-text-suffix-edge",
+        "desc": "textSuffix 元素和气泡边缘的距离",
         "override": "",
-        "value": "~`pxtorem(0)` ~`pxtorem(12)` ~`pxtorem(0)` ~`pxtorem(0)`",
-        "jsValue": "@getRem@0 @getRem@12 @getRem@0 @getRem@0",
-        "staticValue": "0 0.24rem 0 0",
+        "value": "~`pxtorem(12)`",
+        "jsValue": "@getRem@12",
+        "staticValue": "0.24rem",
         "localeDesc": {
-            "ch": "textSuffix 元素 padding",
+            "ch": "textSuffix 元素和气泡边缘的距离",
             "en": "Popover textSuffix element padding"
         }
     },

package/tokens/app/arcodesign/default/index.less

@@ -465,7 +465,7 @@
 @popover-icon-divider-height: ~`pxtorem(12)`;
 @popover-icon-size: ~`pxtorem(16)`;
 @popover-icon-padding: ~`pxtorem(0)` ~`pxtorem(10)` ~`pxtorem(0)` ~`pxtorem(11)`;
-@popover-text-suffix-padding: ~`pxtorem(0)` ~`pxtorem(12)` ~`pxtorem(0)` ~`pxtorem(0)`;
+@popover-text-suffix-edge: ~`pxtorem(12)`;
 @popover-mask-background: @mask-background;
 @load-more-font-size: ~`pxtorem(14)`;
 @dark-load-more-text-color: @dark-sub-info-font-color;

package/umd/form/type.d.ts

@@ -99,7 +99,7 @@ export interface IFormDataMethods {
      * 注册表单项
      * @en Register field
      */
-    registerField: (name: string, self: ReactNode) => () => void;
+    registerField: (name: string, self: any) => () => void;
 }
 export declare enum ValidateStatus {
     Init = "init",
@@ -130,7 +130,7 @@ export interface InternalHooks {
      * 注册表单项
      * @en Register field
      */
-    registerField: (name: string, self: ReactNode) => () => void;
+    registerField: (name: string, self: any) => () => void;
     setInitialValues: (values: FieldItem) => void;
     setCallbacks: (callbacks: Callbacks) => void;
 }

package/umd/image-preview/index.d.ts

@@ -18,6 +18,12 @@ export interface PreviewImageProps {
      * @en Transition image url
      */
     fallbackSrc?: string;
+    /**
+     * 过渡图到原图放大动效完成后，移除过渡图的延迟时间(ms)，一般当原图过大时有调整需求
+     * @en After the transition image to the original image enlargement effect is completed, the delay time (ms) before the transition image is removed
+     * @default 30
+     */
+    transitionEndDelay?: number;
     /**
      * 缩略图填充方式（backgroundPosition），默认top center
      * @en Thumbnail fill mode (backgroundPosition), default value is top center