@arco-design/mobile-react 2.29.4 → 2.29.6

package/esm/pull-refresh/android-pull-refresh.js

@@ -1,10 +1,11 @@
-import React, { useState, useRef, forwardRef, useCallback, useMemo, useContext, useEffect, useImperativeHandle } from 'react';
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useRef, forwardRef, useCallback, useMemo, useContext, useEffect, useImperativeHandle } from 'react';
 import { cls, nextTick, defaultLocale } from '@arco-design/mobile-utils';
 import Loading from '../loading';
 import { GlobalContext } from '../context-provider';
 import { PullRefreshStatus } from './model';
 import { useCommonState, useAddScrollEvents, useCheckAsStart } from './hooks';
-import { getStyleWithVendor } from '../_helpers';
+import { setStyleWithVendor } from '../_helpers';
 
 var dampRateCalculate = function dampRateCalculate(val, tipsHeight, dampRate) {
   return val > tipsHeight ? tipsHeight + (val - tipsHeight) / dampRate : val;
@@ -53,11 +54,7 @@ export var PullRefresh = /*#__PURE__*/forwardRef(function (props, ref) {
       onRefresh = props.onRefresh,
       _props$allowPullWhenN = props.allowPullWhenNotTop,
       allowPullWhenNotTop = _props$allowPullWhenN === void 0 ? false : _props$allowPullWhenN;
-
-  var _useState = useState({}),
-      transition = _useState[0],
-      setTransition = _useState[1];
-
+  var placeRef = useRef(null);
   var touchRef = useRef(null);
   var currentTranslateYRef = useRef(0);
   var onTouching = useRef(false);
@@ -94,17 +91,7 @@ export var PullRefresh = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var scroll = function scroll(y, ms, callback) {
     if (y < 5) {
-      if (y < 0) {
-        currentTranslateYRef.current = 0;
-        return;
-      }
-
-      if (ms === 0) {
-        setTimeout(function () {
-          setTransition({
-            transition: 'all 0s'
-          });
-        });
+      if (y < 0 || ms === 0) {
         currentTranslateYRef.current = 0;
         return;
       }
@@ -112,10 +99,11 @@ export var PullRefresh = /*#__PURE__*/forwardRef(function (props, ref) {
 
     var translateY = dampRateCalculate(y, loosingHeight, dampRate);
     currentTranslateYRef.current = translateY;
-    setTransition({
-      transform: translateY ? "translateY(" + translateY + "px)" : '',
+    placeRef.current && setStyleWithVendor(placeRef.current, _extends({
+      transform: translateY ? "translateY(" + translateY + "px) translateZ(0)" : ''
+    }, ms ? {
       transition: "all " + ms / 1000 + "s"
-    });
+    } : {}));
     setTimeout(function () {
       callback == null ? void 0 : callback();
     }, ms);
@@ -133,6 +121,9 @@ export var PullRefresh = /*#__PURE__*/forwardRef(function (props, ref) {
 
       loadingRef.current = false;
       setStatus(PullRefreshStatus.Static);
+      placeRef.current && setStyleWithVendor(placeRef.current, {
+        transition: ''
+      });
       callback();
     });
   };
@@ -260,7 +251,7 @@ export var PullRefresh = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: domRef
   }, /*#__PURE__*/React.createElement("div", {
     className: cls(prefixCls + "-pull-refresh-place"),
-    style: getStyleWithVendor(transition)
+    ref: placeRef
   }, /*#__PURE__*/React.createElement("div", {
     className: cls(prefixCls + "-pull-refresh-label"),
     ref: labelRef,

package/esm/pull-refresh/hooks.js

@@ -96,9 +96,9 @@ export var useCheckAsStart = function useCheckAsStart(_ref3) {
   var allowPullWhenNotTop = _ref3.allowPullWhenNotTop,
       domRef = _ref3.domRef;
   var ifShouldHandle = useCallback(function () {
-    var _domRef$current$getBo, _domRef$current9, _domRef$current9$getB;
+    var _domRef$current$offse, _domRef$current9;
 
-    var domRefHeight = (_domRef$current$getBo = (_domRef$current9 = domRef.current) == null ? void 0 : (_domRef$current9$getB = _domRef$current9.getBoundingClientRect()) == null ? void 0 : _domRef$current9$getB.height) != null ? _domRef$current$getBo : 0;
+    var domRefHeight = (_domRef$current$offse = (_domRef$current9 = domRef.current) == null ? void 0 : _domRef$current9.offsetHeight) != null ? _domRef$current$offse : 0;
     return domRef.current && !(!allowPullWhenNotTop && (domRef.current.scrollTop < 0 || domRef.current.scrollTop > domRef.current.scrollHeight - domRefHeight));
   }, [allowPullWhenNotTop]);
   return {

package/esm/pull-refresh/style/css/index.css

@@ -51,7 +51,6 @@
   overflow-y: auto;
 }
 .arco-pull-refresh-place {
-  will-change: transform;
   position: relative;
   height: 100%;
 }

package/esm/pull-refresh/style/index.less

@@ -51,7 +51,6 @@
     }
 
     &-place {
-        will-change: transform;
         position: relative;
         height: 100%;
     }

package/esm/style.d.ts

@@ -1,13 +1,14 @@
 import '../style/public.less';
 import './tabs/style';
 import './sticky/style';
-import './load-more/style';
-import './cell/style';
+import './portal/style';
+import './toast/style';
 import './action-sheet/style';
 import './avatar/style';
 import './badge/style';
 import './button/style';
 import './carousel/style';
+import './cell/style';
 import './checkbox/style';
 import './circle-progress/style';
 import './collapse/style';
@@ -27,6 +28,7 @@ import './image-preview/style';
 import './index-bar/style';
 import './input/style';
 import './keyboard/style';
+import './load-more/style';
 import './loading/style';
 import './masking/style';
 import './nav-bar/style';
@@ -38,14 +40,13 @@ import './picker-view/style';
 import './popover/style';
 import './popup/style';
 import './popup-swiper/style';
-import './portal/style';
 import './progress/style';
 import './pull-refresh/style';
 import './radio/style';
 import './rate/style';
 import './search-bar/style';
-import './skeleton/style';
 import './show-monitor/style';
+import './skeleton/style';
 import './slider/style';
 import './stepper/style';
 import './steps/style';
@@ -55,5 +56,4 @@ import './switch/style';
 import './tab-bar/style';
 import './tag/style';
 import './textarea/style';
-import './toast/style';
 import './transition/style';

package/esm/style.js

@@ -1,13 +1,14 @@
 import '../style/public.less';
 import './tabs/style';
 import './sticky/style';
-import './load-more/style';
-import './cell/style';
+import './portal/style';
+import './toast/style';
 import './action-sheet/style';
 import './avatar/style';
 import './badge/style';
 import './button/style';
 import './carousel/style';
+import './cell/style';
 import './checkbox/style';
 import './circle-progress/style';
 import './collapse/style';
@@ -27,6 +28,7 @@ import './image-preview/style';
 import './index-bar/style';
 import './input/style';
 import './keyboard/style';
+import './load-more/style';
 import './loading/style';
 import './masking/style';
 import './nav-bar/style';
@@ -38,14 +40,13 @@ import './picker-view/style';
 import './popover/style';
 import './popup/style';
 import './popup-swiper/style';
-import './portal/style';
 import './progress/style';
 import './pull-refresh/style';
 import './radio/style';
 import './rate/style';
 import './search-bar/style';
-import './skeleton/style';
 import './show-monitor/style';
+import './skeleton/style';
 import './slider/style';
 import './stepper/style';
 import './steps/style';
@@ -55,5 +56,4 @@ import './switch/style';
 import './tab-bar/style';
 import './tag/style';
 import './textarea/style';
-import './toast/style';
 import './transition/style';

package/esm/tabs/index.js

@@ -229,7 +229,10 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
     // 利用受控手动更改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);

package/esm/tabs/tab-pane.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect, useMemo } from 'react';
 import lodashThrottle from 'lodash.throttle';
-import { cls, scrollWithAnimation, getScrollContainerRect } from '@arco-design/mobile-utils';
+import { cls, scrollWithAnimation, getScrollContainerRect, isSSR } from '@arco-design/mobile-utils';
 import { getStyleWithVendor } from '../_helpers';
 var TabPane = /*#__PURE__*/forwardRef(function (props, ref) {
   var _cls;
@@ -234,12 +234,15 @@ var TabPane = /*#__PURE__*/forwardRef(function (props, ref) {
     }
 
     var translateStr = translateZ ? ' translateZ(0)' : '';
+    var translatePercentInSSR = (panes.length ? 100 / panes.length : 0) * activeIndex * rtlRatio * -1 + "%";
+    var verticalTranslate = distance - wrapWidth * activeIndex * rtlRatio + "px";
+    var horizontalTranslate = distance - wrapHeight * activeIndex + "px";
     var sizeStyle = tabDirection === 'vertical' ? {
       width: 100 * panes.length + "%",
-      transform: "translateX(" + (distance - wrapWidth * activeIndex * rtlRatio) + "px)" + translateStr
+      transform: "translateX(" + (isSSR() ? translatePercentInSSR : verticalTranslate) + ")" + translateStr
     } : {
       height: 100 * panes.length + "%",
-      transform: "translateY(" + (distance - wrapHeight * activeIndex) + "px)" + translateStr
+      transform: "translateY(" + (isSSR() ? translatePercentInSSR : horizontalTranslate) + ")" + translateStr
     };
     var heightStyle = currentPaneHeight && currentPaneHeight !== 'auto' ? {
       height: currentPaneHeight

package/esm/toast/index.d.ts

@@ -185,8 +185,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    toast: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    toast: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap" | "initialBodyOverflow">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap" | "initialBodyOverflow">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -196,8 +196,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    info: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    info: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap" | "initialBodyOverflow">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap" | "initialBodyOverflow">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -207,8 +207,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    success: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    success: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap" | "initialBodyOverflow">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap" | "initialBodyOverflow">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -218,8 +218,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    error: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    error: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap" | "initialBodyOverflow">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap" | "initialBodyOverflow">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -229,8 +229,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    loading: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    loading: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap" | "initialBodyOverflow">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap" | "initialBodyOverflow">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -240,8 +240,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    warn: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    warn: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap" | "initialBodyOverflow">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap" | "initialBodyOverflow">) => void;
         close: () => void;
         hide: () => void;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.29.4",
+    "version": "2.29.6",
     "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.16.7",
+        "@arco-design/mobile-utils": "2.16.9",
         "@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": "102b5dcc89375c9d6d47d230fa1cdd219ca10c19"
+    "gitHead": "0ac7a2b2a9f339e75d0b81d6af6dcf0f55ffad45"
 }

package/umd/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/umd/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/umd/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/umd/image/index.js

@@ -34,30 +34,6 @@
    * @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,
@@ -94,9 +70,33 @@
         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;
@@ -132,6 +132,21 @@
       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);
@@ -152,6 +167,43 @@
       }
     }
 
+    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
@@ -177,41 +229,8 @@
       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) {
@@ -237,9 +256,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;
@@ -304,7 +324,7 @@
       }, 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", {