@arco-design/mobile-react 2.31.6 → 2.32.0

package/esnext/icon/IconUser/index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ContextLayout } from '../../context-provider';
+export default function IconUser(props) {
+    const { className = '', useCurrentColor = true, style, ...other } = props;
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement("svg", Object.assign({ className: `${prefixCls}-icon ${prefixCls}-icon-user ${className}`, width: "1em", height: "1em", style: style, viewBox: "0 0 1024 1024", xmlns: "http://www.w3.org/2000/svg" }, other),
+        React.createElement("path", { fill: useCurrentColor ? 'currentColor' : '#000', d: "M512 192a106.688 106.688 0 000 213.333A106.688 106.688 0 00512 192zM320 298.667a192 192 0 11384 0 192 192 0 01-384 0zM398.293 640C320.64 640 256 703.936 256 785.067v68.266h512v-68.266C768 703.936 703.36 640 625.707 640H398.293zM170.667 785.067c0-127.254 101.973-230.4 227.626-230.4h227.414c125.653 0 227.626 103.146 227.626 230.4v115.2c0 21.205-17.066 38.4-37.973 38.4H208.64c-20.907 0-37.973-17.195-37.973-38.4v-115.2z" })))));
+}

package/esnext/icon/IconUserFill/index.d.ts

@@ -0,0 +1,7 @@
+import { SVGAttributes, CSSProperties } from 'react';
+export interface IconProps extends SVGAttributes<SVGElement> {
+    className?: string;
+    useCurrentColor?: boolean;
+    style?: CSSProperties;
+}
+export default function IconUserFill(props: IconProps): JSX.Element;

package/esnext/icon/IconUserFill/index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ContextLayout } from '../../context-provider';
+export default function IconUserFill(props) {
+    const { className = '', useCurrentColor = true, style, ...other } = props;
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement("svg", Object.assign({ className: `${prefixCls}-icon ${prefixCls}-icon-user-fill ${className}`, width: "1em", height: "1em", style: style, viewBox: "0 0 20 20", fill: useCurrentColor ? 'currentColor' : '#000', xmlns: "http://www.w3.org/2000/svg" }, other),
+        React.createElement("path", { d: "M12.5 10.833c2.301 0 5 1.786 5 5v2.5c0 .46-.373.834-.833.834H3.333a.833.833 0 01-.833-.834v-2.5c0-3.211 2.699-5 5-5h5zM10 1.25a4.167 4.167 0 110 8.333 4.167 4.167 0 010-8.333z" })))));
+}

package/esnext/icon/IconWarnCircle/index.d.ts

@@ -0,0 +1,7 @@
+import { SVGAttributes, CSSProperties } from 'react';
+export interface IconProps extends SVGAttributes<SVGElement> {
+    className?: string;
+    useCurrentColor?: boolean;
+    style?: CSSProperties;
+}
+export default function IconWarnCircle(props: IconProps): JSX.Element;

package/esnext/icon/IconWarnCircle/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ContextLayout } from '../../context-provider';
+export default function IconWarnCircle(props) {
+    const { className = '', useCurrentColor = true, style, ...other } = props;
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement("svg", Object.assign({ className: `${prefixCls}-icon ${prefixCls}-icon-warn-circle ${className}`, width: "1em", height: "1em", style: style, fill: useCurrentColor ? 'currentColor' : '#000', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" }, other),
+        React.createElement("path", { d: "M12 24C5.4 24 0 18.6 0 12S5.4 0 12 0s12 5.4 12 12-5.4 12-12 12zm0-22.5C6.2 1.5 1.5 6.2 1.5 12S6.2 22.5 12 22.5 22.5 17.8 22.5 12 17.8 1.5 12 1.5z" }),
+        React.createElement("path", { d: "M11.8 15.2h.3c.4 0 .7-.3.7-.7V7.2c0-.4-.3-.7-.7-.7h-.3c-.4 0-.7.3-.7.7v7.3c0 .4.3.7.7.7zM12.2 16.5h-.3c-.4 0-.7.3-.7.7v.3c0 .4.3.7.7.7h.3c.4 0 .7-.3.7-.7v-.3c0-.4-.3-.7-.7-.7z" })))));
+}

package/esnext/icon/IconWarnCircleFill/index.d.ts

@@ -0,0 +1,7 @@
+import { SVGAttributes, CSSProperties } from 'react';
+export interface IconProps extends SVGAttributes<SVGElement> {
+    className?: string;
+    useCurrentColor?: boolean;
+    style?: CSSProperties;
+}
+export default function IconWarnCircleFill(props: IconProps): JSX.Element;

package/esnext/icon/IconWarnCircleFill/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ContextLayout } from '../../context-provider';
+export default function IconWarnCircleFill(props) {
+    const { className = '', useCurrentColor = true, style, ...other } = props;
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement("svg", Object.assign({ className: `${prefixCls}-icon ${prefixCls}-icon-warn-circle-fill ${className}`, width: "1em", height: "1em", style: style, fill: useCurrentColor ? 'currentColor' : '#000', viewBox: "0 0 1024 1024", xmlns: "http://www.w3.org/2000/svg" }, other),
+        React.createElement("defs", null),
+        React.createElement("path", { d: "M0 512c0 281.6 230.4 512 512 512s512-230.4 512-512S793.6 0 512 0 0 230.4 0 512zm512 160h32c19.2 0 32 12.8 32 32v32c0 19.2-12.8 32-32 32h-32c-19.2 0-32-12.8-32-32v-32c0-19.2 12.8-32 32-32zm0-416h32c19.2 0 32 12.8 32 32v256c0 19.2-12.8 32-32 32h-32c-19.2 0-32-12.8-32-32V288c0-19.2 12.8-32 32-32z" })))));
+}

package/esnext/icon/index.d.ts

@@ -0,0 +1,59 @@
+export { default as IconSquareChecked } from './IconSquareChecked';
+export { default as IconTriUp } from './IconTriUp';
+export { default as IconMore } from './IconMore';
+export { default as IconSound } from './IconSound';
+export { default as IconEyeVisible } from './IconEyeVisible';
+export { default as IconEyelashInvisible } from './IconEyelashInvisible';
+export { default as IconWarnCircleFill } from './IconWarnCircleFill';
+export { default as IconSquareDisabled } from './IconSquareDisabled';
+export { default as IconCircleChecked } from './IconCircleChecked';
+export { default as IconSquareUnchecked } from './IconSquareUnchecked';
+export { default as IconUser } from './IconUser';
+export { default as IconEyeInvisible } from './IconEyeInvisible';
+export { default as IconCircleUnchecked } from './IconCircleUnchecked';
+export { default as IconCircleDisabled } from './IconCircleDisabled';
+export { default as IconSetting } from './IconSetting';
+export { default as IconMinus } from './IconMinus';
+export { default as IconDelete } from './IconDelete';
+export { default as IconPlay } from './IconPlay';
+export { default as IconHeart } from './IconHeart';
+export { default as IconStarFill } from './IconStarFill';
+export { default as IconSearch } from './IconSearch';
+export { default as IconEdit } from './IconEdit';
+export { default as IconSad } from './IconSad';
+export { default as IconLikeCircle } from './IconLikeCircle';
+export { default as IconNotice } from './IconNotice';
+export { default as IconHome } from './IconHome';
+export { default as IconArrowIn } from './IconArrowIn';
+export { default as IconCheck } from './IconCheck';
+export { default as IconNoticeOff } from './IconNoticeOff';
+export { default as IconSmileFill } from './IconSmileFill';
+export { default as IconStar } from './IconStar';
+export { default as IconRefresh } from './IconRefresh';
+export { default as IconScan } from './IconScan';
+export { default as IconPicture } from './IconPicture';
+export { default as IconTriDown } from './IconTriDown';
+export { default as IconClose } from './IconClose';
+export { default as IconArrowUp } from './IconArrowUp';
+export { default as IconArrowBack } from './IconArrowBack';
+export { default as IconArrowDown } from './IconArrowDown';
+export { default as IconAdd } from './IconAdd';
+export { default as IconUserFill } from './IconUserFill';
+export { default as IconClear } from './IconClear';
+export { default as IconQuestionCircle } from './IconQuestionCircle';
+export { default as IconSuccessCircle } from './IconSuccessCircle';
+export { default as IconWarnCircle } from './IconWarnCircle';
+export { default as IconErrorCircle } from './IconErrorCircle';
+export { default as IconCheckBold } from './IconCheckBold';
+export { default as IconCloseBold } from './IconCloseBold';
+export { default as IconShop } from './IconShop';
+export { default as IconShopping } from './IconShopping';
+export { default as IconSubway } from './IconSubway';
+export { default as IconGift } from './IconGift';
+export { default as IconStarHalf } from './IconStarHalf';
+export { default as IconKeyboard } from './IconKeyboard';
+export { default as IconKeyboardDelete } from './IconKeyboardDelete';
+export { default as IconDownload } from './IconDownload';
+export { default as IconFile } from './IconFile';
+export { default as IconUpload } from './IconUpload';
+export * from './type';

package/esnext/icon/index.js

@@ -0,0 +1,59 @@
+export { default as IconSquareChecked } from './IconSquareChecked';
+export { default as IconTriUp } from './IconTriUp';
+export { default as IconMore } from './IconMore';
+export { default as IconSound } from './IconSound';
+export { default as IconEyeVisible } from './IconEyeVisible';
+export { default as IconEyelashInvisible } from './IconEyelashInvisible';
+export { default as IconWarnCircleFill } from './IconWarnCircleFill';
+export { default as IconSquareDisabled } from './IconSquareDisabled';
+export { default as IconCircleChecked } from './IconCircleChecked';
+export { default as IconSquareUnchecked } from './IconSquareUnchecked';
+export { default as IconUser } from './IconUser';
+export { default as IconEyeInvisible } from './IconEyeInvisible';
+export { default as IconCircleUnchecked } from './IconCircleUnchecked';
+export { default as IconCircleDisabled } from './IconCircleDisabled';
+export { default as IconSetting } from './IconSetting';
+export { default as IconMinus } from './IconMinus';
+export { default as IconDelete } from './IconDelete';
+export { default as IconPlay } from './IconPlay';
+export { default as IconHeart } from './IconHeart';
+export { default as IconStarFill } from './IconStarFill';
+export { default as IconSearch } from './IconSearch';
+export { default as IconEdit } from './IconEdit';
+export { default as IconSad } from './IconSad';
+export { default as IconLikeCircle } from './IconLikeCircle';
+export { default as IconNotice } from './IconNotice';
+export { default as IconHome } from './IconHome';
+export { default as IconArrowIn } from './IconArrowIn';
+export { default as IconCheck } from './IconCheck';
+export { default as IconNoticeOff } from './IconNoticeOff';
+export { default as IconSmileFill } from './IconSmileFill';
+export { default as IconStar } from './IconStar';
+export { default as IconRefresh } from './IconRefresh';
+export { default as IconScan } from './IconScan';
+export { default as IconPicture } from './IconPicture';
+export { default as IconTriDown } from './IconTriDown';
+export { default as IconClose } from './IconClose';
+export { default as IconArrowUp } from './IconArrowUp';
+export { default as IconArrowBack } from './IconArrowBack';
+export { default as IconArrowDown } from './IconArrowDown';
+export { default as IconAdd } from './IconAdd';
+export { default as IconUserFill } from './IconUserFill';
+export { default as IconClear } from './IconClear';
+export { default as IconQuestionCircle } from './IconQuestionCircle';
+export { default as IconSuccessCircle } from './IconSuccessCircle';
+export { default as IconWarnCircle } from './IconWarnCircle';
+export { default as IconErrorCircle } from './IconErrorCircle';
+export { default as IconCheckBold } from './IconCheckBold';
+export { default as IconCloseBold } from './IconCloseBold';
+export { default as IconShop } from './IconShop';
+export { default as IconShopping } from './IconShopping';
+export { default as IconSubway } from './IconSubway';
+export { default as IconGift } from './IconGift';
+export { default as IconStarHalf } from './IconStarHalf';
+export { default as IconKeyboard } from './IconKeyboard';
+export { default as IconKeyboardDelete } from './IconKeyboardDelete';
+export { default as IconDownload } from './IconDownload';
+export { default as IconFile } from './IconFile';
+export { default as IconUpload } from './IconUpload';
+export * from './type';

package/esnext/icon/type.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface OriginIconProps extends React.SVGProps<SVGSVGElement> {
+    className?: string;
+    prefix?: string;
+    width?: string;
+    height?: string;
+    useCurrentColor?: boolean;
+    spin?: boolean;
+}
+export declare type IconProps = React.PropsWithoutRef<OriginIconProps> & React.RefAttributes<SVGSVGElement>;

package/esnext/icon/type.js

@@ -0,0 +1 @@
+export {};

package/esnext/image/index.d.ts

@@ -0,0 +1,186 @@
+import React, { ReactNode, CSSProperties } from 'react';
+export declare type ImageStatus = 'loading' | 'loaded' | 'init' | 'error';
+export interface ImageProps {
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: CSSProperties;
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 指定图片状态，staticLabel=false时有效
+     * @en The specified image state, valid when staticLabel=false
+     */
+    status?: ImageStatus;
+    /**
+     * 图片链接
+     * @@en Image resource
+     *  */
+    src: string;
+    /**
+     * 容器宽度，传数值，默认单位为px，传字符串则接受传入的单位
+     * @en Container width, when number is input, the default unit is px, if a string is input, the unit is accepted
+     *  */
+    width?: string | number;
+    /**
+     * 容器高度，传数值，默认单位为px，传字符串则接受传入的单位
+     * @en Container height, when number is input, the default unit is px, if a string is input, the unit is accepted
+     *  */
+    height?: string | number;
+    /**
+     * 替代文本
+     * @en Alternative text
+     * @default ""
+     */
+    alt?: string;
+    /**
+     * 图片填充模式(object-fit)，传preview-*为预览模式，预览模式仅staticLabel=false时有效
+     * @en Image fill mode (object-fit), preview-* is preview mode, preview mode is only valid when staticLabel=false
+     * @default "fill"
+     */
+    fit?: CSSProperties['objectFit'] | 'preview-y' | 'preview-x';
+    /**
+     * 图片填充位置(object-position)
+     * @en Image fill position(object-position)
+     * @default "center"
+     */
+    position?: CSSProperties['objectPosition'];
+    /**
+     * 图片圆角
+     * @en Image border radius
+     *  */
+    radius?: string | number;
+    /**
+     * 是否加边框
+     * @en Whether to add a border
+     *  */
+    bordered?: boolean;
+    /**
+     * 自定义展示加载中内容
+     * @en Custom display loading content, valid when staticLabel=false
+     *  */
+    loadingArea?: ReactNode;
+    /**
+     * 自定义展示加载失败内容
+     * @en Custom display failed to load content, valid when staticLabel=false
+     *  */
+    errorArea?: ReactNode;
+    /**
+     * 是否展示图片加载中提示
+     * @en Whether to display the image loading prompt, valid when staticLabel=false
+     *  */
+    showLoading?: boolean;
+    /**
+     * 是否展示图片加载失败提示
+     * @en Whether to display the image loading failure prompt, valid when staticLabel=false
+     *  */
+    showError?: boolean;
+    /**
+     * 加载完时展现动画时长，staticLabel=false时有效
+     * @en Display animation duration when loading is complete, valid when staticLabel=false
+     * @default 200
+     */
+    animateDuration?: number;
+    /**
+     * 失败时自动重试次数
+     * @en Number of automatic retries on failure
+     * @default 0
+     */
+    retryTime?: number;
+    /**
+     * 是否强制使用https
+     * @en Whether to force the use of https
+     *  */
+    forceHttps?: boolean;
+    /**
+     * 预览模式下，父容器宽度
+     * @en In preview mode, the width of the parent container
+     *  */
+    boxWidth?: number;
+    /**
+     * 预览模式下，父容器高度
+     * @en In preview mode, the height of the parent container
+     *  */
+    boxHeight?: number;
+    /**
+     * 图片顶层内容
+     * @en Top-level content of the image
+     */
+    topOverlap?: ReactNode;
+    /**
+     * 图片底层内容（placeholder），默认是灰色兜底，传null可移除
+     * @en The bottom content of the image (placeholder), the default is gray bottom, input null to remove
+     *  */
+    bottomOverlap?: ReactNode;
+    /**
+     * 手动控制是否加载图片
+     * @en Manually control whether to load images
+     *  */
+    showImage?: boolean;
+    /**
+     * 是否直接渲染<img>标签，不走加载图片流程
+     * @en Whether to render the <img> tag directly without going through the image loading process
+     *  */
+    staticLabel?: boolean;
+    /**
+     * img标签原生属性，优先级低于单独设置
+     * @en Img tag native attributes, the priority is lower than the separate setting
+     */
+    nativeProps?: React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
+    /**
+     * 切换status时触发的回调
+     * @en Callback triggered when switching status
+     */
+    onChange?: (status: string) => void;
+    /**
+     * 点击图片时触发的回调
+     * @en Callback when clicking image
+     */
+    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /**
+     * 图片加载完毕时触发的回调
+     * @en Callback when the image is loaded
+     * */
+    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 | null) => void;
+    /**
+     * 图片加载失败时自动重试触发的回调
+     * @en Callback triggered by automatic retry when image loading fails
+     */
+    onAutoRetry?: (e: string | Event | null) => void;
+}
+export interface ImageRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 原生图片元素 DOM
+     * @en Native image element DOM
+     */
+    image: HTMLImageElement | null;
+    /**
+     * 手动重试图片加载
+     * @en Manually retry image loading
+     */
+    retry: () => void;
+}
+/**
+ * 增强版的 img 标签，提供多种图片填充模式，支持图片加载中提示、加载失败提示。
+ * @en Enhanced img tag, provides a variety of image filling modes, and supports image loading prompts and loading failure prompts.
+ * @type 信息展示
+ * @type_en Data Display
+ * @name 图片
+ * @name_en Image
+ */
+export declare const BaseImage: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<ImageRef>>;
+export default BaseImage;

package/esnext/image/index.js

@@ -0,0 +1,223 @@
+import React, { forwardRef, useImperativeHandle, useRef, useEffect, useMemo, } from 'react';
+import { cls, defaultLocale, nextTick } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import Loading from '../loading';
+import { useSystem, useWindowSize, getStyleWithVendor, useMountedState } from '../_helpers';
+/**
+ * 增强版的 img 标签，提供多种图片填充模式，支持图片加载中提示、加载失败提示。
+ * @en Enhanced img tag, provides a variety of image filling modes, and supports image loading prompts and loading failure prompts.
+ * @type 信息展示
+ * @type_en Data Display
+ * @name 图片
+ * @name_en Image
+ */
+export const BaseImage = forwardRef((props, ref) => {
+    const { style, className, status, src, width, height, alt = '', fit = 'cover', position = 'center', radius, bordered, loadingArea, errorArea, showLoading, showError, animateDuration = 200, retryTime = 0, forceHttps, boxWidth = 0, boxHeight = 0, topOverlap, bottomOverlap, showImage = true, staticLabel, nativeProps = {}, onChange, onClick, onLoad, onError, onAutoRetry, } = props;
+    const system = useSystem();
+    const { windowWidth, windowHeight } = useWindowSize();
+    const [imageStatus, setImageStatus] = useMountedState(staticLabel && showLoading ? 'loading' : 'init');
+    const [wrapClass, setWrapClass] = useMountedState('');
+    const [staticRetrying, setStaticRetrying] = useMountedState(false);
+    const imageRef = useRef(null);
+    const imageDomRef = useRef(null);
+    const wrapRef = useRef(null);
+    const retryCountRef = useRef(0);
+    const loadingImageRef = useRef(null);
+    const hasLoadedRef = useRef(false);
+    const isPreview = Boolean(fit.indexOf('preview') >= 0);
+    const actualBoxWidth = boxWidth || windowWidth;
+    const actualBoxHeight = boxHeight || windowHeight;
+    const validStatus = status === undefined ? imageStatus : status;
+    const attrs = useMemo(() => {
+        const imageStyle = {};
+        if (!isPreview) {
+            imageStyle.objectFit = fit;
+            imageStyle.objectPosition = position;
+        }
+        return {
+            alt,
+            src: forceHttps ? src.replace('http://', 'https://') : src,
+            className: `image-content${bordered ? ' bordered' : ''} ${system}`,
+            style: imageStyle,
+        };
+    }, [alt, bordered, fit, forceHttps, isPreview, position, radius, src, system]);
+    function retry() {
+        loadImage(true);
+    }
+    useImperativeHandle(ref, () => ({
+        dom: wrapRef.current,
+        image: imageDomRef.current,
+        retry,
+    }));
+    useEffect(() => {
+        retryCountRef.current = 0;
+        loadImage();
+    }, [attrs, width, height, showImage, staticLabel]);
+    useEffect(() => {
+        // 当使用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?.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) {
+                handleStaticImageLoaded(null, imageDomRef.current);
+            }
+            else {
+                handleStaticImageError(null);
+            }
+        }
+    }, [staticLabel]);
+    function changeStatus(newStatus) {
+        setImageStatus(newStatus);
+        onChange && onChange(newStatus);
+    }
+    function replaceChild(newChild) {
+        const dom = imageRef.current;
+        if (!dom) {
+            return;
+        }
+        if (dom.children && dom.children.length) {
+            dom.replaceChild(newChild, dom.children[0]);
+        }
+        else {
+            dom.appendChild(newChild);
+        }
+    }
+    function handleImageLoaded(image) {
+        hasLoadedRef.current = true;
+        changeStatus('loaded');
+        const { width: imageWidth = 0, height: imageHeight = 0 } = image;
+        let extraClass = '';
+        if (isPreview) {
+            const scale = imageWidth / imageHeight;
+            const 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` : '');
+    }
+    function loadImage(isFromRetry) {
+        // 如果在加载图片前发现上一个图片还没加载完，则抛弃上一个图片的加载
+        // @en Abort last image before starting loading new image
+        if (loadingImageRef.current) {
+            loadingImageRef.current.src = '';
+            loadingImageRef.current = null;
+        }
+        if (!showImage || staticLabel) {
+            return;
+        }
+        changeStatus('loading');
+        const image = new Image();
+        Object.keys(nativeProps).forEach(key => {
+            image[key] = nativeProps[key];
+        });
+        image.className = attrs.className;
+        Object.keys(attrs.style).forEach((key) => {
+            image.style[key] = attrs.style[key];
+        });
+        image.onload = evt => {
+            loadingImageRef.current = null;
+            imageDomRef.current = image;
+            handleImageLoaded(image);
+            replaceChild(image);
+            onLoad && onLoad(evt, image);
+        };
+        image.onerror = evt => {
+            loadingImageRef.current = null;
+            if (isFromRetry || retryCountRef.current >= retryTime) {
+                changeStatus('error');
+                const placeholder = document.createElement('div');
+                replaceChild(placeholder);
+                onError && onError(evt);
+            }
+            else {
+                retryCountRef.current += 1;
+                onAutoRetry && onAutoRetry(evt);
+                loadImage();
+            }
+        };
+        nextTick(() => {
+            image.src = attrs.src;
+            image.alt = attrs.alt;
+            loadingImageRef.current = image;
+        });
+    }
+    function handleStaticImageLoaded(evt, image) {
+        handleImageLoaded(image);
+        onLoad && onLoad(evt, image);
+    }
+    function handleStaticImageError(e) {
+        const evt = e ? e.nativeEvent : null;
+        if (retryCountRef.current >= retryTime) {
+            changeStatus('error');
+            onError && onError(evt);
+        }
+        else {
+            retryCountRef.current += 1;
+            onAutoRetry && onAutoRetry(evt);
+            // 强制刷新一下<img>使其重新加载
+            // @en Force refresh <img> to reload
+            setStaticRetrying(true);
+            nextTick(() => {
+                setStaticRetrying(false);
+            });
+        }
+    }
+    function getImageStyle() {
+        if (isPreview) {
+            const overflow = fit === 'preview-x'
+                ? {
+                    overflowX: 'auto',
+                }
+                : {
+                    overflowY: 'auto',
+                };
+            return {
+                width: actualBoxWidth,
+                height: actualBoxHeight,
+                ...overflow,
+            };
+        }
+        return {
+            width: Number(width) || width,
+            height: Number(height) || height,
+        };
+    }
+    return (React.createElement(ContextLayout, null, ({ prefixCls, locale = defaultLocale }) => (React.createElement("div", { className: cls(`${prefixCls}-image all-border-box`, { preview: isPreview }, system, wrapClass, className), style: { ...getImageStyle(), ...(style || {}) }, ref: wrapRef },
+        bottomOverlap !== null ? (React.createElement("div", { className: "image-content image-bottom-overlap", style: { borderRadius: radius } }, bottomOverlap || React.createElement("div", { className: "image-placeholder" }))) : null,
+        React.createElement("div", { className: cls('image-container', validStatus, {
+                animate: Boolean(animateDuration),
+                'static-label': staticLabel,
+                'has-loaded': hasLoadedRef.current,
+            }), style: getStyleWithVendor({
+                borderRadius: radius,
+                transitionDuration: `${animateDuration}ms`,
+            }), onClick: onClick, ref: imageRef }, staticLabel && showImage && !staticRetrying ? (React.createElement("img", Object.assign({}, nativeProps, attrs, { ref: imageDomRef, onLoad: e => handleStaticImageLoaded(e.nativeEvent, imageDomRef.current), onError: handleStaticImageError }))) : null),
+        showLoading && validStatus === 'loading' ? (React.createElement("div", { className: "image-content image-loading-container", style: { borderRadius: radius } }, loadingArea || (React.createElement("div", { className: "image-loading" },
+            React.createElement(Loading, { type: "circle", className: "loading-icon", radius: 8.5, stroke: 3 }))))) : null,
+        showError && validStatus === 'error' ? (React.createElement("div", { className: "image-content image-error-container", onClick: e => {
+                e.stopPropagation();
+                retry();
+            }, style: { borderRadius: radius } }, errorArea || (React.createElement("div", { className: "image-retry-load" }, locale.Image.loadError)))) : null,
+        topOverlap ? (React.createElement("div", { className: "image-content image-top-overlap", style: { borderRadius: radius } }, topOverlap)) : null))));
+});
+export default BaseImage;