@arco-design/mobile-react 2.30.2 → 2.30.4

package/cjs/image-preview/index.js

@@ -179,7 +179,7 @@ var ImagePreview = /*#__PURE__*/(0, _react.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;
@@ -222,7 +222,9 @@ var ImagePreview = /*#__PURE__*/(0, _react.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
@@ -641,7 +643,45 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }
 
-  var handleClick = (0, _helpers.useSingleAndDoubleClick)(handleImageClick, handleImageDoubleClick);
+  var handleClick = (0, _helpers.useSingleAndDoubleClick)(handleImageClick, handleImageDoubleClick); // 当使用 getThumbBounds 时，关闭图片预览有缩小效果
+  // @en When using getThumbBounds, closing the image preview has a shrinking effect
+
+  function animateBeforeClose() {
+    var _imagesRef$current$in2;
+
+    if (isTransformed()) {
+      return;
+    }
+
+    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';
+    (0, _mobileUtils.nextTick)(function () {
+      imageDom.style.transitionDuration = displayDuration + "ms";
+      imageDom.style.webkitTransitionDuration = displayDuration + "ms";
+      setImageBounds(imageDom, thumbBounds, imageDomRect);
+    });
+  }
 
   function goClose(e) {
     if (closingRef.current) {
@@ -649,6 +689,7 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
 
     closingRef.current = true;
+    animateBeforeClose();
     close(e);
   }
   /**
@@ -671,7 +712,7 @@ var ImagePreview = /*#__PURE__*/(0, _react.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属性才有放大过渡效果
@@ -702,7 +743,7 @@ var ImagePreview = /*#__PURE__*/(0, _react.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) {
@@ -724,9 +765,10 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
             return (0, _extends5.default)({}, 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);
       });
     });
   }
@@ -811,10 +853,10 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         bottomOverlap: null
       }, getImageProps(image, index))));
 
-      return image.extraNode ? /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement("div", {
         className: "preview-image-wrap-container",
         key: "outer-" + index
-      }, innerNode, image.extraNode) : innerNode;
+      }, innerNode, image.extraNode);
     }));
   }
 
@@ -886,18 +928,14 @@ var ImagePreview = /*#__PURE__*/(0, _react.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.default.createElement(_portal.default, {
-      getContainer: getContainer
-    }, /*#__PURE__*/_react.default.createElement("div", {
+  function renderLoadingArea() {
+    return /*#__PURE__*/_react.default.createElement("div", {
       className: "image-preview-loading-area"
     }, loadingArea || /*#__PURE__*/_react.default.createElement(_loading.default, {
       type: "circle",
       className: "loading-icon",
       radius: 7
-    }))) : loadingArea;
+    }));
   }
 
   return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref3) {
@@ -945,7 +983,7 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           imagesRef.current[index] = r;
         },
         showLoading: showLoading,
-        loadingArea: renderLoadingArea(index),
+        loadingArea: renderLoadingArea(),
         errorArea: errorArea,
         showError: showError,
         retryTime: retryTime,

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

@@ -4,7 +4,7 @@
  * @name_en General Mixin
  */
 /**
- * 根据base-font-size，设置单位尺寸为rem
+ * 根据 base-font-size，设置单位尺寸为 rem
  * @desc {en} set the unit size to rem based on base-font-size
  * @param @property css属性名
  * @param @property {en} css property
@@ -21,7 +21,7 @@
  * ```
  */
 /**
- * 根据base-font-size，设置常规模式和rtl模式下单位尺寸为rem
+ * 根据 base-font-size，设置常规模式和 rtl 模式下单位尺寸为 rem
  * @desc {en} set the unit size to rem for regular and RTL modes based on the base-font-size
  * @param @property css属性名
  * @param @property {en} css property
@@ -38,8 +38,8 @@
  * ```
  */
 /**
- * 当less变量use-dark-mode=1时，为原生暗黑模式媒体查询事件prefers-color-scheme:dark绑定对应css规则
- * @desc {en} bind corresponding CSS rules to the native dark mode media query event prefers-color-scheme: dark when the less variable use-dark-mode=1.
+ * 当 less 变量 use-dark-mode=1 时，自定义暗黑模式样式规则
+ * @desc {en} Customize dark mode style rules when the less variable use-dark-mode=1.
  * @param @rules 对应的暗黑模式规则
  * @param @rules {en} Corresponding dark mode rules
  * @example
@@ -54,7 +54,7 @@
  * ```
  */
 /**
- * 为属性设置arco提供的token变量
+ * 为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute
  * @param @property css属性名
  * @param @property {en} css property
@@ -76,11 +76,11 @@
  * ```
  */
 /**
- * 在常规模式和rtl模式下为属性设置arco提供的token变量
+ * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
- * @param @property css属性名
+ * @param @property css 属性名
  * @param @property {en} css property
- * @param @variables token变量名
+ * @param @variables token 变量名
  * @param @variables {en} token variable name
  * @param @preValues
  * @param @preValues {en}
@@ -96,9 +96,9 @@
  * ```
  */
 /**
- * 0.5px的边框线
+ * 0.5px 的边框线
  * @desc {en} a border line of 0.5 pixels
- * @param @color 使用css变量为线设置颜色
+ * @param @color 使用 css 变量为线设置颜色
  * @param @color {en} set border-color by CSS variable
  * @param @direction 边框方向，默认为全部方向
  * @param @direction {en} border direction，default to all directions.
@@ -115,9 +115,9 @@
 /**
  * 字体加粗
  * @desc {en} font bold
- * @param @color 使用css变量设置加粗的字体颜色，默认继承文字当前颜色
+ * @param @color 使用 css 变量设置加粗的字体颜色，默认继承文字当前颜色
  * @param @color {en} set color by CSS variable
- * @param @stroke 字体粗细，默认0.3px
+ * @param @stroke 字体粗细，默认 0.3px
  * @param @stroke {en} font weight, default 0.3 pixel
  * @example
  * ```
@@ -130,17 +130,17 @@
  * ```
  */
 /**
- * 1px边框
+ * 1px 边框
  * @desc {en} 1 pixel border
  * @param @direction 边框方向
  * @param @direction {en} border direction
- * @param @borderColor 使用css变量设置边框颜色
+ * @param @borderColor 使用 css 变量设置边框颜色
  * @param @borderColor {en} set border-color by CSS variable
- * @param @borderRadius border-radius，默认为0
+ * @param @borderRadius border-radius，默认为 0
  * @param @borderRadius {en} border-radius, default value is 0
- * @param @borderWidth border-width，默认为1px
+ * @param @borderWidth border-width，默认为 1px
  * @param @borderWidth {en} border-width, default value is 1 pixel
- * @param @borderStyle border-style，默认为solid
+ * @param @borderStyle border-style，默认为 solid
  * @param @borderStyle {en} border-style, default value is solid
  * @example
  * ```
@@ -153,9 +153,9 @@
  * ```
  */
 /**
- * 元素右下0.5px边框
+ * 元素右下 0.5px 边框
  * @desc {en} 0.5px border on bottom right
- * @param @color 使用css变量设置边框颜色
+ * @param @color 使用 css 变量设置边框颜色
  * @param @color {en} set border-color by CSS variable
  * @example
  * ```
@@ -167,9 +167,9 @@
  * ```
  */
 /**
- * 元素左上0.5px边框
+ * 元素左上 0.5px 边框
  * @desc {en} 0.5px border on top left
- * @param @color 使用css变量设置边框颜色
+ * @param @color 使用 css 变量设置边框颜色
  * @param @color {en} set border-color by CSS variable
  * @example
  * ```
@@ -181,9 +181,9 @@
  * ```
  */
 /**
- * 设置Loading组件颜色
+ * 设置 Loading 组件颜色
  * @desc {en} set Loading component color
- * @param @color 使用css变量设置颜色
+ * @param @color 使用 css 变量设置颜色
  * @param @color {en} set color by CSS variable
  * @example
  * ```
@@ -197,9 +197,9 @@
 /**
  * 设置最小字号
  * @desc {en} set minimum font-size
- * @param @size 使用css变量设置最小字号
+ * @param @size 使用 css 变量设置最小字号
  * @param @size {en} set minimum font-size by CSS variable
- * @param @scale 设置最小字号下文字缩放比例，默认为0.9
+ * @param @scale 设置最小字号下文字缩放比例，默认为 0.9
  * @param @scale {en} set minimum font-size down text scale，default value is 0.9
  * @example
  * ```
@@ -212,9 +212,9 @@
  * ```
  */
 /**
- * 设置content-box盒模型下元素宽度
+ * 设置 content-box 盒模型下元素宽度
  * @desc {en} set box width in content-box
- * @param @property css属性名
+ * @param @property css 属性名
  * @param @property {en} css property
  * @param @width 元素总宽度，包含内边距
  * @param @width element width, include padding
@@ -232,11 +232,11 @@
  * ```
  */
 /**
- * 设置Steps组件颜色
+ * 设置 Steps 组件颜色
  * @desc {en} set Steps component color
- * @param @color 使用css变量设置主颜色
+ * @param @color 使用 css 变量设置主颜色
  * @param @color {en} set main step color by CSS variable
- * @param @finish-color 使用css变量设置已完成步骤的颜色
+ * @param @finish-color 使用 css 变量设置已完成步骤的颜色
  * @param @finish-color {en} set finished step color by CSS variable
  * @example
  * ```
@@ -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/cjs/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 {
@@ -106,7 +107,7 @@
  *               Arco Theme Style                  *
  *                                                 *
  ***************************************************/
-    & when (@use-dark-mode = 1) {
+& when (@use-dark-mode = 1) {
     
   .process-bg-color-with-config,
   .process-custom-icon-bg-color-with-config {

package/cjs/index-bar/style/css/index.css

@@ -4,7 +4,7 @@
  * @name_en General Mixin
  */
 /**
- * 根据base-font-size，设置单位尺寸为rem
+ * 根据 base-font-size，设置单位尺寸为 rem
  * @desc {en} set the unit size to rem based on base-font-size
  * @param @property css属性名
  * @param @property {en} css property
@@ -21,7 +21,7 @@
  * ```
  */
 /**
- * 根据base-font-size，设置常规模式和rtl模式下单位尺寸为rem
+ * 根据 base-font-size，设置常规模式和 rtl 模式下单位尺寸为 rem
  * @desc {en} set the unit size to rem for regular and RTL modes based on the base-font-size
  * @param @property css属性名
  * @param @property {en} css property
@@ -38,8 +38,8 @@
  * ```
  */
 /**
- * 当less变量use-dark-mode=1时，为原生暗黑模式媒体查询事件prefers-color-scheme:dark绑定对应css规则
- * @desc {en} bind corresponding CSS rules to the native dark mode media query event prefers-color-scheme: dark when the less variable use-dark-mode=1.
+ * 当 less 变量 use-dark-mode=1 时，自定义暗黑模式样式规则
+ * @desc {en} Customize dark mode style rules when the less variable use-dark-mode=1.
  * @param @rules 对应的暗黑模式规则
  * @param @rules {en} Corresponding dark mode rules
  * @example
@@ -54,7 +54,7 @@
  * ```
  */
 /**
- * 为属性设置arco提供的token变量
+ * 为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute
  * @param @property css属性名
  * @param @property {en} css property
@@ -76,11 +76,11 @@
  * ```
  */
 /**
- * 在常规模式和rtl模式下为属性设置arco提供的token变量
+ * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
- * @param @property css属性名
+ * @param @property css 属性名
  * @param @property {en} css property
- * @param @variables token变量名
+ * @param @variables token 变量名
  * @param @variables {en} token variable name
  * @param @preValues
  * @param @preValues {en}
@@ -96,9 +96,9 @@
  * ```
  */
 /**
- * 0.5px的边框线
+ * 0.5px 的边框线
  * @desc {en} a border line of 0.5 pixels
- * @param @color 使用css变量为线设置颜色
+ * @param @color 使用 css 变量为线设置颜色
  * @param @color {en} set border-color by CSS variable
  * @param @direction 边框方向，默认为全部方向
  * @param @direction {en} border direction，default to all directions.
@@ -115,9 +115,9 @@
 /**
  * 字体加粗
  * @desc {en} font bold
- * @param @color 使用css变量设置加粗的字体颜色，默认继承文字当前颜色
+ * @param @color 使用 css 变量设置加粗的字体颜色，默认继承文字当前颜色
  * @param @color {en} set color by CSS variable
- * @param @stroke 字体粗细，默认0.3px
+ * @param @stroke 字体粗细，默认 0.3px
  * @param @stroke {en} font weight, default 0.3 pixel
  * @example
  * ```
@@ -130,17 +130,17 @@
  * ```
  */
 /**
- * 1px边框
+ * 1px 边框
  * @desc {en} 1 pixel border
  * @param @direction 边框方向
  * @param @direction {en} border direction
- * @param @borderColor 使用css变量设置边框颜色
+ * @param @borderColor 使用 css 变量设置边框颜色
  * @param @borderColor {en} set border-color by CSS variable
- * @param @borderRadius border-radius，默认为0
+ * @param @borderRadius border-radius，默认为 0
  * @param @borderRadius {en} border-radius, default value is 0
- * @param @borderWidth border-width，默认为1px
+ * @param @borderWidth border-width，默认为 1px
  * @param @borderWidth {en} border-width, default value is 1 pixel
- * @param @borderStyle border-style，默认为solid
+ * @param @borderStyle border-style，默认为 solid
  * @param @borderStyle {en} border-style, default value is solid
  * @example
  * ```
@@ -153,9 +153,9 @@
  * ```
  */
 /**
- * 元素右下0.5px边框
+ * 元素右下 0.5px 边框
  * @desc {en} 0.5px border on bottom right
- * @param @color 使用css变量设置边框颜色
+ * @param @color 使用 css 变量设置边框颜色
  * @param @color {en} set border-color by CSS variable
  * @example
  * ```
@@ -167,9 +167,9 @@
  * ```
  */
 /**
- * 元素左上0.5px边框
+ * 元素左上 0.5px 边框
  * @desc {en} 0.5px border on top left
- * @param @color 使用css变量设置边框颜色
+ * @param @color 使用 css 变量设置边框颜色
  * @param @color {en} set border-color by CSS variable
  * @example
  * ```
@@ -181,9 +181,9 @@
  * ```
  */
 /**
- * 设置Loading组件颜色
+ * 设置 Loading 组件颜色
  * @desc {en} set Loading component color
- * @param @color 使用css变量设置颜色
+ * @param @color 使用 css 变量设置颜色
  * @param @color {en} set color by CSS variable
  * @example
  * ```
@@ -197,9 +197,9 @@
 /**
  * 设置最小字号
  * @desc {en} set minimum font-size
- * @param @size 使用css变量设置最小字号
+ * @param @size 使用 css 变量设置最小字号
  * @param @size {en} set minimum font-size by CSS variable
- * @param @scale 设置最小字号下文字缩放比例，默认为0.9
+ * @param @scale 设置最小字号下文字缩放比例，默认为 0.9
  * @param @scale {en} set minimum font-size down text scale，default value is 0.9
  * @example
  * ```
@@ -212,9 +212,9 @@
  * ```
  */
 /**
- * 设置content-box盒模型下元素宽度
+ * 设置 content-box 盒模型下元素宽度
  * @desc {en} set box width in content-box
- * @param @property css属性名
+ * @param @property css 属性名
  * @param @property {en} css property
  * @param @width 元素总宽度，包含内边距
  * @param @width element width, include padding
@@ -232,11 +232,11 @@
  * ```
  */
 /**
- * 设置Steps组件颜色
+ * 设置 Steps 组件颜色
  * @desc {en} set Steps component color
- * @param @color 使用css变量设置主颜色
+ * @param @color 使用 css 变量设置主颜色
  * @param @color {en} set main step color by CSS variable
- * @param @finish-color 使用css变量设置已完成步骤的颜色
+ * @param @finish-color 使用 css 变量设置已完成步骤的颜色
  * @param @finish-color {en} set finished step color by CSS variable
  * @example
  * ```

package/cjs/index-bar/style/index.less

@@ -126,7 +126,7 @@
  *               Arco Theme Style                  *
  *                                                 *
  ***************************************************/
-    & when (@use-dark-mode = 1) {
+& when (@use-dark-mode = 1) {
     
   .process-bg-color-with-config,
   .process-custom-icon-bg-color-with-config {

package/cjs/index.d.ts

@@ -1,7 +1,7 @@
 export { default as Tabs } from './tabs';
 export { default as Sticky } from './sticky';
 export { default as Portal } from './portal';
-export { default as Toast } from './toast';
+export { default as Steps } from './steps';
 export { default as ActionSheet } from './action-sheet';
 export { default as Avatar } from './avatar';
 export { default as Badge } from './badge';
@@ -48,11 +48,11 @@ export { default as ShowMonitor } from './show-monitor';
 export { default as Skeleton } from './skeleton';
 export { default as Slider } from './slider';
 export { default as Stepper } from './stepper';
-export { default as Steps } from './steps';
 export { default as SwipeAction } from './swipe-action';
 export { default as SwipeLoad } from './swipe-load';
 export { default as Switch } from './switch';
 export { default as TabBar } from './tab-bar';
 export { default as Tag } from './tag';
 export { default as Textarea } from './textarea';
+export { default as Toast } from './toast';
 export { default as Transition } from './transition';

package/cjs/index.js

@@ -17,9 +17,9 @@ var _portal = _interopRequireDefault(require("./portal"));
 
 exports.Portal = _portal.default;
 
-var _toast = _interopRequireDefault(require("./toast"));
+var _steps = _interopRequireDefault(require("./steps"));
 
-exports.Toast = _toast.default;
+exports.Steps = _steps.default;
 
 var _actionSheet = _interopRequireDefault(require("./action-sheet"));
 
@@ -205,10 +205,6 @@ var _stepper = _interopRequireDefault(require("./stepper"));
 
 exports.Stepper = _stepper.default;
 
-var _steps = _interopRequireDefault(require("./steps"));
-
-exports.Steps = _steps.default;
-
 var _swipeAction = _interopRequireDefault(require("./swipe-action"));
 
 exports.SwipeAction = _swipeAction.default;
@@ -233,6 +229,10 @@ var _textarea = _interopRequireDefault(require("./textarea"));
 
 exports.Textarea = _textarea.default;
 
+var _toast = _interopRequireDefault(require("./toast"));
+
+exports.Toast = _toast.default;
+
 var _transition = _interopRequireDefault(require("./transition"));
 
 exports.Transition = _transition.default;