@arco-design/mobile-react 2.29.5 → 2.29.6

package/dist/index.js

@@ -5311,7 +5311,10 @@
         // 利用受控手动更改index时，给cell line加上动画
         // @en Animate the cell line when changeing the index
         setCellTrans(true);
-        changeFromRef.current = 'manual';
+
+        if (!changeFromRef.current) {
+          changeFromRef.current = 'manual';
+        }
       }, [activeTab]);
       useUpdateEffect(function () {
         onDistanceChange && onDistanceChange(distance, wrapWidth, activeIndex);
@@ -7306,9 +7309,7 @@
         }, normalize(config)), {
           visible: false,
           close: function close() {}
-        });
-
-        var dynamicProps = __assign$2({}, baseProps); // 不同的key用不同的容器挂载
+        }); // 不同的key用不同的容器挂载
 
 
         var id = "_" + (containerId || 'ARCO_MASKING') + "_DIV_" + (config.key || '') + "_";
@@ -7316,6 +7317,12 @@
         var leaving = false;
         var render = new ReactDOMRender(Component, div, context).render;
 
+        var dynamicProps = __assign$2(__assign$2({}, baseProps), {
+          getContainer: function getContainer() {
+            return div;
+          }
+        });
+
         function update(newConfig) {
           dynamicProps = __assign$2(__assign$2({}, dynamicProps), normalize(newConfig));
           render(dynamicProps);
@@ -7736,69 +7743,69 @@
      */
 
     var BaseImage = /*#__PURE__*/React.forwardRef(function (props, ref) {
-      var system = useSystem();
-
-      var _a = useWindowSize(),
-          windowWidth = _a.windowWidth,
-          windowHeight = _a.windowHeight;
-
-      var _b = useMountedState('init'),
-          imageStatus = _b[0],
-          setImageStatus = _b[1];
-
-      var _c = useMountedState(''),
-          wrapClass = _c[0],
-          setWrapClass = _c[1];
-
-      var _d = useMountedState(false),
-          staticRetrying = _d[0],
-          setStaticRetrying = _d[1];
-
-      var imageRef = React.useRef(null);
-      var imageDomRef = React.useRef(null);
-      var wrapRef = React.useRef(null);
-      var retryCountRef = React.useRef(0);
-      var loadingImageRef = React.useRef(null);
-      var hasLoadedRef = React.useRef(false);
       var style = props.style,
           className = props.className,
           status = props.status,
           src = props.src,
           width = props.width,
           height = props.height,
-          _e = props.alt,
-          alt = _e === void 0 ? '' : _e,
-          _f = props.fit,
-          fit = _f === void 0 ? 'cover' : _f,
-          _g = props.position,
-          position = _g === void 0 ? 'center' : _g,
+          _a = props.alt,
+          alt = _a === void 0 ? '' : _a,
+          _b = props.fit,
+          fit = _b === void 0 ? 'cover' : _b,
+          _c = props.position,
+          position = _c === void 0 ? 'center' : _c,
           radius = props.radius,
           bordered = props.bordered,
           loadingArea = props.loadingArea,
           errorArea = props.errorArea,
           showLoading = props.showLoading,
           showError = props.showError,
-          _h = props.animateDuration,
-          animateDuration = _h === void 0 ? 200 : _h,
-          _j = props.retryTime,
-          retryTime = _j === void 0 ? 0 : _j,
+          _d = props.animateDuration,
+          animateDuration = _d === void 0 ? 200 : _d,
+          _e = props.retryTime,
+          retryTime = _e === void 0 ? 0 : _e,
           forceHttps = props.forceHttps,
-          _k = props.boxWidth,
-          boxWidth = _k === void 0 ? 0 : _k,
-          _l = props.boxHeight,
-          boxHeight = _l === void 0 ? 0 : _l,
+          _f = props.boxWidth,
+          boxWidth = _f === void 0 ? 0 : _f,
+          _g = props.boxHeight,
+          boxHeight = _g === void 0 ? 0 : _g,
           topOverlap = props.topOverlap,
           bottomOverlap = props.bottomOverlap,
-          _m = props.showImage,
-          showImage = _m === void 0 ? true : _m,
+          _h = props.showImage,
+          showImage = _h === void 0 ? true : _h,
           staticLabel = props.staticLabel,
-          _o = props.nativeProps,
-          nativeProps = _o === void 0 ? {} : _o,
+          _j = props.nativeProps,
+          nativeProps = _j === void 0 ? {} : _j,
           onChange = props.onChange,
           onClick = props.onClick,
-          _onLoad = props.onLoad,
+          onLoad = props.onLoad,
           onError = props.onError,
           onAutoRetry = props.onAutoRetry;
+      var system = useSystem();
+
+      var _k = useWindowSize(),
+          windowWidth = _k.windowWidth,
+          windowHeight = _k.windowHeight;
+
+      var _l = useMountedState(staticLabel && showLoading ? 'loading' : 'init'),
+          imageStatus = _l[0],
+          setImageStatus = _l[1];
+
+      var _m = useMountedState(''),
+          wrapClass = _m[0],
+          setWrapClass = _m[1];
+
+      var _o = useMountedState(false),
+          staticRetrying = _o[0],
+          setStaticRetrying = _o[1];
+
+      var imageRef = React.useRef(null);
+      var imageDomRef = React.useRef(null);
+      var wrapRef = React.useRef(null);
+      var retryCountRef = React.useRef(0);
+      var loadingImageRef = React.useRef(null);
+      var hasLoadedRef = React.useRef(false);
       var isPreview = Boolean(fit.indexOf('preview') >= 0);
       var actualBoxWidth = boxWidth || windowWidth;
       var actualBoxHeight = boxHeight || windowHeight;
@@ -7834,6 +7841,21 @@
         retryCountRef.current = 0;
         loadImage();
       }, [attrs, width, height, showImage, staticLabel]);
+      React.useEffect(function () {
+        var _a; // 当使用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 && ((_a = imageDomRef.current) === null || _a === void 0 ? void 0 : _a.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);
@@ -7854,6 +7876,43 @@
         }
       }
 
+      function handleImageLoaded(evt, image) {
+        hasLoadedRef.current = true;
+        changeStatus('loaded');
+        var _a = image.width,
+            imageWidth = _a === void 0 ? 0 : _a,
+            _b = image.height,
+            imageHeight = _b === void 0 ? 0 : _b;
+        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
@@ -7879,41 +7938,8 @@
         image.onload = function (evt) {
           loadingImageRef.current = null;
           imageDomRef.current = image;
-          hasLoadedRef.current = true;
-          changeStatus('loaded');
-          var _a = image.width,
-              imageWidth = _a === void 0 ? 0 : _a,
-              _b = image.height,
-              imageHeight = _b === void 0 ? 0 : _b;
-          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) {
@@ -7939,9 +7965,10 @@
       }
 
       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;
@@ -8006,7 +8033,7 @@
         }, staticLabel && showImage && !staticRetrying ? /*#__PURE__*/React__default["default"].createElement("img", __assign$2({}, 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["default"].createElement("div", {
@@ -19596,9 +19623,7 @@
           unmountOnExit: true
         }, config || {}), {
           close: function close() {}
-        });
-
-        var dynamicProps = __assign$2({}, baseProps); // 不同的key用不同的容器挂载
+        }); // 不同的key用不同的容器挂载
         // @en Different keys are mounted in different containers
 
 
@@ -19607,6 +19632,12 @@
         var leaving = false;
         var render = new ReactDOMRender(Component, div, context).render;
 
+        var dynamicProps = __assign$2(__assign$2({}, baseProps), {
+          getContainer: function getContainer() {
+            return div;
+          }
+        });
+
         function update(newConfig) {
           dynamicProps = __assign$2(__assign$2({}, dynamicProps), newConfig || {});
           render(dynamicProps);
@@ -20444,7 +20475,9 @@
           return renderIndicator(currentIndex, total, lastIndex);
         }
 
-        return openLoaded ? /*#__PURE__*/React__default["default"].createElement(Portal, null, /*#__PURE__*/React__default["default"].createElement("div", {
+        return openLoaded ? /*#__PURE__*/React__default["default"].createElement(Portal, {
+          getContainer: getContainer
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "image-preview-indicator"
         }, currentIndex + 1, "/", total)) : null;
       } // ios在重设style时图片会消失一下造成闪动，因此在底下垫一张图
@@ -20482,7 +20515,9 @@
       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["default"].createElement(Portal, null, /*#__PURE__*/React__default["default"].createElement("div", {
+        return index === openIndex ? /*#__PURE__*/React__default["default"].createElement(Portal, {
+          getContainer: getContainer
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "image-preview-loading-area"
         }, loadingArea || /*#__PURE__*/React__default["default"].createElement(Loading, {
           type: "circle",