@arco-design/mobile-react 2.29.4 → 2.29.6

package/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.29.6](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.29.5...@arco-design/mobile-react@2.29.6) (2023-10-09)
+
+
+### Bug Fixes
+
+* `Image` support loading & error area when using "staticLabel" ([#181](https://github.com/arco-design/arco-design-mobile/issues/181)) ([552a37d](https://github.com/arco-design/arco-design-mobile/commit/552a37d5a29cbbbe84107c0ba7cddeb1c685f2be))
+* `Tabs` duplicate scrolling when "activeTab" is controlled in scroll mode ([7632138](https://github.com/arco-design/arco-design-mobile/commit/7632138f8d1164d8be6b55f5a65cc543b3b22684))
+* incorrectly mounted elements when calling masking components using methods ([5740648](https://github.com/arco-design/arco-design-mobile/commit/5740648160fb6ff6d97a40da71c28d16034b4346))
+
+
+
+
+
+## [2.29.5](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.29.4...@arco-design/mobile-react@2.29.5) (2023-10-07)
+
+
+### Bug Fixes
+
+* `ImagePicker` the image will show up again if deleted when uploading ([#182](https://github.com/arco-design/arco-design-mobile/issues/182)) ([f26512a](https://github.com/arco-design/arco-design-mobile/commit/f26512a165e3c8ca082f716a64bdc8e7e86517b7))
+* `ImagePreview` refresh problem when onload of multiple pictures is triggered at the same time ([#173](https://github.com/arco-design/arco-design-mobile/issues/173)) ([c71c526](https://github.com/arco-design/arco-design-mobile/commit/c71c526e81a2851df6653682bfad9b9b84704462))
+* `LoadMore` support "getDataWithEndReachCheck" ([#180](https://github.com/arco-design/arco-design-mobile/issues/180)) ([25baa3c](https://github.com/arco-design/arco-design-mobile/commit/25baa3cae665edb7fa4f316d80886f497c38f7a3))
+* `PullRefresh` optimize transform performance & fix decimal point deviation in ifShouldHandle ([#179](https://github.com/arco-design/arco-design-mobile/issues/179)) ([a826ed2](https://github.com/arco-design/arco-design-mobile/commit/a826ed26096cec3a6487d2bd58345113a5d17dfd))
+* `Tabs` scroll offset in ssr when defaultActiveTab is greater than 0 ([#175](https://github.com/arco-design/arco-design-mobile/issues/175)) ([98aa1d7](https://github.com/arco-design/arco-design-mobile/commit/98aa1d7c5abe8851778f2aa5c2308fe807d5e4d9))
+
+
+
+
+
 ## [2.29.4](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.29.3...@arco-design/mobile-react@2.29.4) (2023-09-13)
 
 

package/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.29.3/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.29.3/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.29.5/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.29.5/dist/index.min.js"></script>
 ```
 
 ## Full import

package/README.md

@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.29.3/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.29.3/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.29.5/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.29.5/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/action-sheet/index.d.ts

@@ -86,11 +86,11 @@ declare const _default: React.ForwardRefExoticComponent<ActionSheetProps & React
      * @param {ActionSheetProps} config setting
      * @returns {{ close: () => void; update: (newConfig: ActionSheetProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "title" | "ref" | "key" | "context" | "translateZ" | "className" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "items" | "cancelText" | "subTitle"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "title" | "ref" | "key" | "context" | "translateZ" | "className" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "initialBodyOverflow" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "items" | "cancelText" | "subTitle"> & {
         key?: string | undefined;
     }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "title" | "ref" | "key" | "context" | "translateZ" | "className" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "items" | "cancelText" | "subTitle"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "title" | "ref" | "key" | "context" | "translateZ" | "className" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "initialBodyOverflow" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "items" | "cancelText" | "subTitle"> & {
             key?: string | undefined;
         }) => void;
     };

package/cjs/dialog/index.d.ts

@@ -193,11 +193,11 @@ declare const _default: React.ForwardRefExoticComponent<DialogProps & React.RefA
      * @param {DialogProps} config Configuration
      * @returns {{ close: () => void; update: (newConfig: DialogProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<DialogProps & React.RefAttributes<DialogRef>>, "platform" | "footer" | "title" | "children" | "ref" | "key" | "context" | "className" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<DialogProps & React.RefAttributes<DialogRef>>, "platform" | "footer" | "title" | "children" | "ref" | "key" | "context" | "className" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "initialBodyOverflow" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
         key?: string | undefined;
     }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<DialogProps & React.RefAttributes<DialogRef>>, "platform" | "footer" | "title" | "children" | "ref" | "key" | "context" | "className" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<DialogProps & React.RefAttributes<DialogRef>>, "platform" | "footer" | "title" | "children" | "ref" | "key" | "context" | "className" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "initialBodyOverflow" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
             key?: string | undefined;
         }) => void;
     };

package/cjs/image/index.d.ts

@@ -60,22 +60,22 @@ export interface ImageProps {
      *  */
     bordered?: boolean;
     /**
-     * 自定义展示加载中内容，staticLabel=false时有效
+     * 自定义展示加载中内容
      * @en Custom display loading content, valid when staticLabel=false
      *  */
     loadingArea?: ReactNode;
     /**
-     * 自定义展示加载失败内容，staticLabel=false时有效
+     * 自定义展示加载失败内容
      * @en Custom display failed to load content, valid when staticLabel=false
      *  */
     errorArea?: ReactNode;
     /**
-     * 是否展示图片加载中提示，staticLabel=false时有效
+     * 是否展示图片加载中提示
      * @en Whether to display the image loading prompt, valid when staticLabel=false
      *  */
     showLoading?: boolean;
     /**
-     * 是否展示图片加载失败提示，staticLabel=false时有效
+     * 是否展示图片加载失败提示
      * @en Whether to display the image loading failure prompt, valid when staticLabel=false
      *  */
     showError?: boolean;
@@ -145,17 +145,17 @@ export interface ImageProps {
      * 图片加载完毕时触发的回调
      * @en Callback when the image is loaded
      * */
-    onLoad?: (e: Event, image: HTMLImageElement) => void;
+    onLoad?: (e: Event | null, image: HTMLImageElement) => void;
     /**
      * 图片加载失败时触发的回调，如果有自动重试则在重试最终失败后触发
      * @en Callback when the image fails to load, triggered after the retry finally fails if there is an automatic retry
      */
-    onError?: (e: string | Event) => void;
+    onError?: (e: string | Event | null) => void;
     /**
      * 图片加载失败时自动重试触发的回调
      * @en Callback triggered by automatic retry when image loading fails
      */
-    onAutoRetry?: (e: string | Event) => void;
+    onAutoRetry?: (e: string | Event | null) => void;
 }
 export interface ImageRef {
     /**

package/cjs/image/index.js

@@ -30,30 +30,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @name_en Image
  */
 var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var system = (0, _helpers.useSystem)();
-
-  var _useWindowSize = (0, _helpers.useWindowSize)(),
-      windowWidth = _useWindowSize.windowWidth,
-      windowHeight = _useWindowSize.windowHeight;
-
-  var _useMountedState = (0, _helpers.useMountedState)('init'),
-      imageStatus = _useMountedState[0],
-      setImageStatus = _useMountedState[1];
-
-  var _useMountedState2 = (0, _helpers.useMountedState)(''),
-      wrapClass = _useMountedState2[0],
-      setWrapClass = _useMountedState2[1];
-
-  var _useMountedState3 = (0, _helpers.useMountedState)(false),
-      staticRetrying = _useMountedState3[0],
-      setStaticRetrying = _useMountedState3[1];
-
-  var imageRef = (0, _react.useRef)(null);
-  var imageDomRef = (0, _react.useRef)(null);
-  var wrapRef = (0, _react.useRef)(null);
-  var retryCountRef = (0, _react.useRef)(0);
-  var loadingImageRef = (0, _react.useRef)(null);
-  var hasLoadedRef = (0, _react.useRef)(false);
   var style = props.style,
       className = props.className,
       status = props.status,
@@ -90,9 +66,33 @@ var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       nativeProps = _props$nativeProps === void 0 ? {} : _props$nativeProps,
       onChange = props.onChange,
       onClick = props.onClick,
-      _onLoad = props.onLoad,
+      onLoad = props.onLoad,
       onError = props.onError,
       onAutoRetry = props.onAutoRetry;
+  var system = (0, _helpers.useSystem)();
+
+  var _useWindowSize = (0, _helpers.useWindowSize)(),
+      windowWidth = _useWindowSize.windowWidth,
+      windowHeight = _useWindowSize.windowHeight;
+
+  var _useMountedState = (0, _helpers.useMountedState)(staticLabel && showLoading ? 'loading' : 'init'),
+      imageStatus = _useMountedState[0],
+      setImageStatus = _useMountedState[1];
+
+  var _useMountedState2 = (0, _helpers.useMountedState)(''),
+      wrapClass = _useMountedState2[0],
+      setWrapClass = _useMountedState2[1];
+
+  var _useMountedState3 = (0, _helpers.useMountedState)(false),
+      staticRetrying = _useMountedState3[0],
+      setStaticRetrying = _useMountedState3[1];
+
+  var imageRef = (0, _react.useRef)(null);
+  var imageDomRef = (0, _react.useRef)(null);
+  var wrapRef = (0, _react.useRef)(null);
+  var retryCountRef = (0, _react.useRef)(0);
+  var loadingImageRef = (0, _react.useRef)(null);
+  var hasLoadedRef = (0, _react.useRef)(false);
   var isPreview = Boolean(fit.indexOf('preview') >= 0);
   var actualBoxWidth = boxWidth || windowWidth;
   var actualBoxHeight = boxHeight || windowHeight;
@@ -128,6 +128,21 @@ var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     retryCountRef.current = 0;
     loadImage();
   }, [attrs, width, height, showImage, staticLabel]);
+  (0, _react.useEffect)(function () {
+    var _imageDomRef$current;
+
+    // 当使用img标签时，onLoad可能加载完成前已经执行完，此时手动触发一次
+    // @en When using the img tag, onLoad may have been executed before loading is complete, and it needs to be triggered manually
+    if (staticLabel && !hasLoadedRef.current && (_imageDomRef$current = imageDomRef.current) != null && _imageDomRef$current.complete) {
+      // 图片有宽高认为正常加载，否则认为加载错误
+      // @en If the image has width and height, it is considered to be loaded normally, otherwise it is considered to be a loading error
+      if (imageDomRef.current.naturalWidth || imageDomRef.current.naturalHeight) {
+        handleImageLoaded(null, imageDomRef.current);
+      } else {
+        handleStaticImageError(null);
+      }
+    }
+  }, [staticLabel]);
 
   function changeStatus(newStatus) {
     setImageStatus(newStatus);
@@ -148,6 +163,43 @@ var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }
 
+  function handleImageLoaded(evt, image) {
+    hasLoadedRef.current = true;
+    changeStatus('loaded');
+    var _image$width = image.width,
+        imageWidth = _image$width === void 0 ? 0 : _image$width,
+        _image$height = image.height,
+        imageHeight = _image$height === void 0 ? 0 : _image$height;
+    var extraClass = '';
+
+    if (isPreview) {
+      var scale = imageWidth / imageHeight;
+      var windowScale = actualBoxWidth / actualBoxHeight;
+
+      if (fit === 'preview-y') {
+        if (scale < windowScale) {
+          image.style.width = actualBoxWidth + "px";
+          image.style.height = actualBoxWidth / scale + "px";
+          extraClass = 'preview-overflow-y';
+        } else {
+          extraClass = 'preview-fit-contain-y';
+        }
+      } else if (fit === 'preview-x') {
+        if (scale > windowScale) {
+          image.style.width = actualBoxHeight * scale + "px";
+          image.style.height = actualBoxHeight + "px";
+          extraClass = 'preview-overflow-x';
+        } else {
+          extraClass = 'preview-fit-contain-x';
+        }
+      }
+    }
+
+    extraClass && image.classList.add(extraClass);
+    setWrapClass(extraClass ? extraClass + "-container" : '');
+    onLoad && onLoad(evt, image);
+  }
+
   function loadImage(isFromRetry) {
     // 如果在加载图片前发现上一个图片还没加载完，则抛弃上一个图片的加载
     // @en Abort last image before starting loading new image
@@ -173,41 +225,8 @@ var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     image.onload = function (evt) {
       loadingImageRef.current = null;
       imageDomRef.current = image;
-      hasLoadedRef.current = true;
-      changeStatus('loaded');
-      var _image$width = image.width,
-          imageWidth = _image$width === void 0 ? 0 : _image$width,
-          _image$height = image.height,
-          imageHeight = _image$height === void 0 ? 0 : _image$height;
-      var extraClass = '';
-
-      if (isPreview) {
-        var scale = imageWidth / imageHeight;
-        var windowScale = actualBoxWidth / actualBoxHeight;
-
-        if (fit === 'preview-y') {
-          if (scale < windowScale) {
-            image.style.width = actualBoxWidth + "px";
-            image.style.height = actualBoxWidth / scale + "px";
-            extraClass = 'preview-overflow-y';
-          } else {
-            extraClass = 'preview-fit-contain-y';
-          }
-        } else if (fit === 'preview-x') {
-          if (scale > windowScale) {
-            image.style.width = actualBoxHeight * scale + "px";
-            image.style.height = actualBoxHeight + "px";
-            extraClass = 'preview-overflow-x';
-          } else {
-            extraClass = 'preview-fit-contain-x';
-          }
-        }
-      }
-
-      extraClass && image.classList.add(extraClass);
-      setWrapClass(extraClass ? extraClass + "-container" : '');
+      handleImageLoaded(evt, image);
       replaceChild(image);
-      _onLoad && _onLoad(evt, image);
     };
 
     image.onerror = function (evt) {
@@ -233,9 +252,10 @@ var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }
 
   function handleStaticImageError(e) {
-    var evt = e.nativeEvent;
+    var evt = e ? e.nativeEvent : null;
 
     if (retryCountRef.current >= retryTime) {
+      changeStatus('error');
       onError && onError(evt);
     } else {
       retryCountRef.current += 1;
@@ -300,7 +320,7 @@ var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, staticLabel && showImage && !staticRetrying ? /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({}, nativeProps, attrs, {
       ref: imageDomRef,
       onLoad: function onLoad(e) {
-        return _onLoad && _onLoad(e.nativeEvent, imageDomRef.current);
+        return handleImageLoaded(e.nativeEvent, imageDomRef.current);
       },
       onError: handleStaticImageError
     })) : null), showLoading && validStatus === 'loading' ? /*#__PURE__*/_react.default.createElement("div", {

package/cjs/image-picker/index.js

@@ -24,6 +24,8 @@ var _grid = _interopRequireDefault(require("../grid"));
 
 var _addIcon = _interopRequireDefault(require("./add-icon"));
 
+var _helpers = require("../_helpers");
+
 var _type = require("./type");
 
 Object.keys(_type).forEach(function (key) {
@@ -81,7 +83,7 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       onDeleteClick = props.onDeleteClick;
   var domRef = (0, _react.useRef)(null);
   var fileRef = (0, _react.useRef)(null);
-  var cacheRef = (0, _react.useRef)([]);
+  var cacheRef = (0, _helpers.useLatestRef)(images);
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       dom: domRef.current
@@ -148,7 +150,7 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           file: files[index]
         };
       });
-      cacheRef.current = [].concat(images, res);
+      cacheRef.current = [].concat(cacheRef.current, res);
       onChange([].concat(cacheRef.current)); // 执行upload
 
       if (typeof upload === 'function') {
@@ -161,15 +163,21 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
               var file = _ref2.file;
               return file === _file;
             });
-            cacheRef.current[index] = (0, _extends2.default)({}, cacheRef.current[index], data, {
-              status: undefined
-            });
+
+            if (index !== -1) {
+              cacheRef.current[index] = (0, _extends2.default)({}, cacheRef.current[index], data, {
+                status: undefined
+              });
+            }
           }).catch(function () {
             var index = cacheRef.current.findIndex(function (_ref3) {
               var file = _ref3.file;
               return file === _file;
             });
-            cacheRef.current[index].status = 'error';
+
+            if (index !== -1) {
+              cacheRef.current[index].status = 'error';
+            }
           }).finally(function () {
             onChange([].concat(cacheRef.current));
           });

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

@@ -274,9 +274,9 @@ declare const _default: React.ForwardRefExoticComponent<ImagePreviewProps & Reac
      * @param {ImagePreviewProps} config configuration
      * @returns {{ close: () => void; update: (newConfig: ImagePreviewProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "className" | "swipeable" | "lazyloadCount" | "onChange" | "onAfterChange" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "loadingArea" | "onClose" | "fit" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "animateDurationSlide" | "loop" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "extra" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "className" | "swipeable" | "lazyloadCount" | "onChange" | "onAfterChange" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "onClose" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "animateDurationSlide" | "loop" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "extra" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "className" | "swipeable" | "lazyloadCount" | "onChange" | "onAfterChange" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "loadingArea" | "onClose" | "fit" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "animateDurationSlide" | "loop" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "extra" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void;
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "className" | "swipeable" | "lazyloadCount" | "onChange" | "onAfterChange" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "onClose" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "animateDurationSlide" | "loop" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "extra" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void;
     };
 };
 /**

package/cjs/image-preview/index.js

@@ -658,9 +658,11 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
 
   function setImagesStatusByIndex(index, data) {
-    var newStatus = imagesStatusRef.current.slice();
-    newStatus[index] = (0, _extends5.default)({}, newStatus[index] || {}, data);
-    setImagesStatus(newStatus);
+    setImagesStatus(function (current) {
+      var newStatus = current.slice();
+      newStatus[index] = (0, _extends5.default)({}, newStatus[index] || {}, data);
+      return newStatus;
+    });
   }
   /**
    * 缩略图放大过渡动画设置
@@ -847,7 +849,9 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       return renderIndicator(currentIndex, total, lastIndex);
     }
 
-    return openLoaded ? /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement("div", {
+    return openLoaded ? /*#__PURE__*/_react.default.createElement(_portal.default, {
+      getContainer: getContainer
+    }, /*#__PURE__*/_react.default.createElement("div", {
       className: "image-preview-indicator"
     }, currentIndex + 1, "/", total)) : null;
   } // ios在重设style时图片会消失一下造成闪动，因此在底下垫一张图
@@ -885,7 +889,9 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   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, null, /*#__PURE__*/_react.default.createElement("div", {
+    return index === openIndex ? /*#__PURE__*/_react.default.createElement(_portal.default, {
+      getContainer: getContainer
+    }, /*#__PURE__*/_react.default.createElement("div", {
       className: "image-preview-loading-area"
     }, loadingArea || /*#__PURE__*/_react.default.createElement(_loading.default, {
       type: "circle",

package/cjs/image-preview/methods.d.ts

@@ -5,6 +5,7 @@ export interface OpenBaseProps {
     close: (e: any) => void;
     openIndex: number;
     images: any[];
+    getContainer?: () => HTMLElement;
 }
 export declare function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>): (config: Pick<P, Exclude<keyof P, "close">>, context?: GlobalContextParams | undefined) => {
     close: () => void;

package/cjs/image-preview/methods.js

@@ -17,8 +17,7 @@ function open(Component) {
       unmountOnExit: true
     }, config || {}, {
       close: function close() {}
-    });
-    var dynamicProps = (0, _extends2.default)({}, baseProps); // 不同的key用不同的容器挂载
+    }); // 不同的key用不同的容器挂载
     // @en Different keys are mounted in different containers
 
     var id = "_ARCO_IMAGE_PREVIEW_DIV_" + (baseProps.key || '') + "_";
@@ -31,6 +30,12 @@ function open(Component) {
     var _ReactDOMRender = new _render.ReactDOMRender(Component, div, context),
         render = _ReactDOMRender.render;
 
+    var dynamicProps = (0, _extends2.default)({}, baseProps, {
+      getContainer: function getContainer() {
+        return div;
+      }
+    });
+
     function update(newConfig) {
       dynamicProps = (0, _extends2.default)({}, dynamicProps, newConfig || {});
       render(dynamicProps);

package/cjs/index.d.ts

@@ -1,12 +1,13 @@
 export { default as Tabs } from './tabs';
 export { default as Sticky } from './sticky';
-export { default as LoadMore } from './load-more';
-export { default as Cell } from './cell';
+export { default as Portal } from './portal';
+export { default as Toast } from './toast';
 export { default as ActionSheet } from './action-sheet';
 export { default as Avatar } from './avatar';
 export { default as Badge } from './badge';
 export { default as Button } from './button';
 export { default as Carousel } from './carousel';
+export { default as Cell } from './cell';
 export { default as Checkbox } from './checkbox';
 export { default as CircleProgress } from './circle-progress';
 export { default as Collapse } from './collapse';
@@ -26,6 +27,7 @@ export { default as ImagePreview } from './image-preview';
 export { default as IndexBar } from './index-bar';
 export { default as Input } from './input';
 export { default as Keyboard } from './keyboard';
+export { default as LoadMore } from './load-more';
 export { default as Loading } from './loading';
 export { default as Masking } from './masking';
 export { default as NavBar } from './nav-bar';
@@ -37,14 +39,13 @@ export { default as PickerView } from './picker-view';
 export { default as Popover } from './popover';
 export { default as Popup } from './popup';
 export { default as PopupSwiper } from './popup-swiper';
-export { default as Portal } from './portal';
 export { default as Progress } from './progress';
 export { default as PullRefresh } from './pull-refresh';
 export { default as Radio } from './radio';
 export { default as Rate } from './rate';
 export { default as SearchBar } from './search-bar';
-export { default as Skeleton } from './skeleton';
 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';
@@ -54,5 +55,4 @@ 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

@@ -13,13 +13,13 @@ var _sticky = _interopRequireDefault(require("./sticky"));
 
 exports.Sticky = _sticky.default;
 
-var _loadMore = _interopRequireDefault(require("./load-more"));
+var _portal = _interopRequireDefault(require("./portal"));
 
-exports.LoadMore = _loadMore.default;
+exports.Portal = _portal.default;
 
-var _cell = _interopRequireDefault(require("./cell"));
+var _toast = _interopRequireDefault(require("./toast"));
 
-exports.Cell = _cell.default;
+exports.Toast = _toast.default;
 
 var _actionSheet = _interopRequireDefault(require("./action-sheet"));
 
@@ -41,6 +41,10 @@ var _carousel = _interopRequireDefault(require("./carousel"));
 
 exports.Carousel = _carousel.default;
 
+var _cell = _interopRequireDefault(require("./cell"));
+
+exports.Cell = _cell.default;
+
 var _checkbox = _interopRequireDefault(require("./checkbox"));
 
 exports.Checkbox = _checkbox.default;
@@ -117,6 +121,10 @@ var _keyboard = _interopRequireDefault(require("./keyboard"));
 
 exports.Keyboard = _keyboard.default;
 
+var _loadMore = _interopRequireDefault(require("./load-more"));
+
+exports.LoadMore = _loadMore.default;
+
 var _loading = _interopRequireDefault(require("./loading"));
 
 exports.Loading = _loading.default;
@@ -161,10 +169,6 @@ var _popupSwiper = _interopRequireDefault(require("./popup-swiper"));
 
 exports.PopupSwiper = _popupSwiper.default;
 
-var _portal = _interopRequireDefault(require("./portal"));
-
-exports.Portal = _portal.default;
-
 var _progress = _interopRequireDefault(require("./progress"));
 
 exports.Progress = _progress.default;
@@ -185,14 +189,14 @@ var _searchBar = _interopRequireDefault(require("./search-bar"));
 
 exports.SearchBar = _searchBar.default;
 
-var _skeleton = _interopRequireDefault(require("./skeleton"));
-
-exports.Skeleton = _skeleton.default;
-
 var _showMonitor = _interopRequireDefault(require("./show-monitor"));
 
 exports.ShowMonitor = _showMonitor.default;
 
+var _skeleton = _interopRequireDefault(require("./skeleton"));
+
+exports.Skeleton = _skeleton.default;
+
 var _slider = _interopRequireDefault(require("./slider"));
 
 exports.Slider = _slider.default;
@@ -229,10 +233,6 @@ 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;

package/cjs/load-more/index.d.ts

@@ -108,8 +108,8 @@ export interface LoadMoreProps {
      */
     getDataAtFirst?: boolean;
     /**
-     * 当 getDataAtFirst === false 且数据不满一屏时是否触发一次请求，trigger=scroll时有效
-     * @en Whether to trigger a request when getDataAtFirst === false and the data is not full of one screen, valid when trigger=scroll
+     * 当 getDataAtFirst 值为 false 且数据不满一屏时是否触发一次请求，trigger=scroll时有效
+     * @en Whether to trigger a request when getDataAtFirst equals false and the data is not full of one screen, valid when trigger=scroll
      * @default false
      */
     getDataWhenNoScrollAtFirst?: boolean;
@@ -140,6 +140,11 @@ export interface LoadMoreRef {
      * @en Change component state manually
      */
     changeStatus: (status: LoadMoreStatus, scene?: string) => void;
+    /**
+     * 判断是否滚动到底部并手动触发数据获取
+     * @en Determine whether to scroll to the bottom and manually trigger data acquisition
+     */
+    getDataWithEndReachCheck: () => void;
 }
 /**
  * 上拉加载组件，支持`scroll`和`click`两种触发加载方式，支持滚动监听。支持受控与不受控两种形式。<br>如果引入组件后发现仅触发了初始的`getData`，请确认是否在`getData`方法内没有调用`callback`移除 loading 状态，且未设置`blockWhenLoading`属性为 false。