@cloudbase/weda-ui 3.2.0 → 3.3.0

package/dist/src/web/components/formdetail/index.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { CommonPropsType, ICompRef } from '../../types';
+import './index.css';
+export interface PropsType extends CommonPropsType {
+    name?: string;
+    value?: any;
+    isPureArray?: boolean;
+    parent: any;
+}
+declare type TCompRef = ICompRef<{
+    addition: () => void;
+    remove: (key: string) => void;
+}>;
+export declare const reorderContext: (data: any, name: any, isPureArray: any) => any;
+export declare const newContextItem: (childFormItem: any, name: any, isPureArray: any) => {
+    index: number;
+    _id: string;
+};
+export declare const changeHandle: ({ type, name, data, childFormItem, isPureArray, params, }: {
+    type: any;
+    name: any;
+    data: any;
+    childFormItem: any;
+    isPureArray: any;
+    params: any;
+}) => any;
+declare const _default: React.ForwardRefExoticComponent<PropsType & React.RefAttributes<TCompRef>>;
+export default _default;

package/dist/src/web/components/formdetail/index.js

@@ -0,0 +1,173 @@
+import React, { useEffect, forwardRef, useImperativeHandle, useState, useCallback, } from 'react';
+import destr from 'destr';
+import classNames from '../../utils/classnames';
+import { usePlatform, randomStr } from '../../utils/platform';
+import isObjectEqual from '../../utils/isObjectEqual';
+import './index.css';
+export const reorderContext = (data, name, isPureArray) => data.map((i, index) => {
+    const item = { ...i };
+    Object.keys(i).forEach((j) => {
+        var _a;
+        if ((_a = item[j]) === null || _a === void 0 ? void 0 : _a.name) {
+            item[j].name = isPureArray
+                ? `${name}[${index}]`
+                : `${name}[${index}].${j}`;
+        }
+    });
+    item.index = index;
+    return item;
+});
+export const newContextItem = (childFormItem, name, isPureArray) => {
+    const mock = { index: 0, _id: randomStr() };
+    childFormItem === null || childFormItem === void 0 ? void 0 : childFormItem.forEach((i) => {
+        mock[i] = {
+            name: isPureArray ? `${name}[0]` : `${name}[0].${i}`,
+            value: null,
+        };
+    });
+    return mock;
+};
+export const changeHandle = ({ type, name, data, childFormItem, isPureArray, params, }) => {
+    switch (type) {
+        case 'add': {
+            const mock = newContextItem(childFormItem, name, isPureArray);
+            data.push({ ...mock, _id: randomStr() });
+            data = reorderContext(data, name, isPureArray);
+            break;
+        }
+        case 'remove': {
+            data.splice(params.index, 1);
+            data = reorderContext(data, name, isPureArray);
+            break;
+        }
+        case 'change': {
+            data = data.map((i) => {
+                const item = { ...i };
+                for (const [key, subItem] of Object.entries(item)) {
+                    if (params.name === (subItem === null || subItem === void 0 ? void 0 : subItem.name)) {
+                        item[key].value = params === null || params === void 0 ? void 0 : params.value;
+                    }
+                }
+                return item;
+            });
+            break;
+        }
+        default: {
+            break;
+        }
+    }
+    return data;
+};
+export default forwardRef(function FormDetail(props, ref) {
+    const { className, id, style, children, events, name, value: initDetailValue, isPureArray, parent, } = props;
+    const [defaultValue, setDetailValue] = useState([]);
+    const [contextData, setContextData] = useState([]);
+    const [childFormItem, setCildFormItem] = useState([]);
+    const platform = usePlatform();
+    const init = useCallback((defaultValue) => {
+        var _a;
+        const formDetailItemValue = {};
+        let childFormItem = defaultValue[0] ? Object.keys(defaultValue[0]) : [];
+        // 纯数组，默认key值为'arrayItem'
+        if (isPureArray) {
+            childFormItem = ['arrayItem'];
+        }
+        setCildFormItem(childFormItem);
+        let initialValues = [];
+        try {
+            initialValues = defaultValue.map((i, index) => {
+                let item = {};
+                if (isPureArray) {
+                    // eslint-disable-next-line no-prototype-builtins
+                    const val = (i === null || i === void 0 ? void 0 : i.hasOwnProperty('arrayItem')) ? null : i;
+                    item['arrayItem'] = { name: `${name}[${index}]`, value: val };
+                    formDetailItemValue[`${name}[${index}]`] = val;
+                }
+                else {
+                    item = { ...i };
+                    Object.keys(i).forEach((j) => {
+                        const key = `${name}[${index}].${j}`;
+                        const val = i[j];
+                        item[j] = { name: key, value: val };
+                        formDetailItemValue[key] = val;
+                    });
+                }
+                item.index = index;
+                item._id = randomStr();
+                return item;
+            });
+        }
+        catch (error) {
+            console.error(error);
+        }
+        const mock = newContextItem(childFormItem, name, isPureArray);
+        const data = (initialValues === null || initialValues === void 0 ? void 0 : initialValues.length) ? initialValues : [mock];
+        setContextData(data);
+        (_a = events === null || events === void 0 ? void 0 : events.onDataChange) === null || _a === void 0 ? void 0 : _a.call(events, {
+            data,
+        });
+        // 解决web端，编辑场景不回显初始值的问题
+        // eslint-disable-next-line rulesdir/no-timer
+        setTimeout(() => {
+            if (!isObjectEqual(formDetailItemValue, {})) {
+                if ((parent === null || parent === void 0 ? void 0 : parent.setValue) && typeof (parent === null || parent === void 0 ? void 0 : parent.setValue) === 'function') {
+                    parent === null || parent === void 0 ? void 0 : parent.setValue(formDetailItemValue);
+                }
+            }
+        }, 0);
+    }, [events, isPureArray, name, parent]);
+    // 初始化context的值
+    useEffect(() => {
+        if (!isObjectEqual(initDetailValue, defaultValue)) {
+            setDetailValue(initDetailValue);
+            init(initDetailValue);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initDetailValue]);
+    useEffect(() => {
+        init(initDetailValue);
+        setDetailValue(initDetailValue);
+        // 组件卸载时触发
+        return () => {
+            var _a;
+            (_a = events === null || events === void 0 ? void 0 : events.onDataChange) === null || _a === void 0 ? void 0 : _a.call(events, { data: [] });
+        };
+        // 只执行一次;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const onChange = useCallback((type, params) => {
+        var _a;
+        let data = destr(contextData);
+        data = changeHandle({
+            type,
+            name,
+            data,
+            childFormItem,
+            isPureArray,
+            params,
+        });
+        setContextData(data);
+        (_a = events === null || events === void 0 ? void 0 : events.onDataChange) === null || _a === void 0 ? void 0 : _a.call(events, { data });
+    }, [childFormItem, contextData, events, isPureArray, name]);
+    useImperativeHandle(ref, () => {
+        return {
+            methods: {
+                addition: () => {
+                    onChange('add', null);
+                },
+                remove: (params) => {
+                    onChange('remove', params);
+                },
+                change: (params) => {
+                    onChange('change', params);
+                },
+            },
+        };
+    }, [onChange]);
+    return (React.createElement("div", { className: classNames({
+            'weda-ui': true,
+            'form-detail-wrap': true,
+            'h5-form-detail-wrap': platform === 'h5',
+            [className]: className,
+        }), id: id, style: style, role: "container", "data-testid": "formDetail" }, children));
+});

package/dist/src/web/components/graphicCard/index.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+import './index.css';
+import type { CommonPropsType } from '../../types';
+export declare type INavOption = {
+    params: Array<{
+        key: string;
+        value: string;
+    }>;
+    paramObj?: any;
+    icon: string;
+    title: string;
+    des: string;
+    tapStatus: 'tap' | 'inside' | 'outer';
+    insideUrl?: string;
+    outerUrl?: string;
+    newPage?: boolean;
+    withParams?: boolean;
+};
+export interface IGraphicCardPropsType extends CommonPropsType {
+    /**
+     * 导航配置
+     */
+    navOption?: Readonly<INavOption[]>;
+    titleVisible: boolean;
+    titleColor: string;
+    titleFontWeight: string;
+    titleFontSize: number;
+    titleLineHeight: string;
+    titleMaxLines: number;
+    desColor: string;
+    desFontWeight: string;
+    desVisible: boolean;
+    desFontSize: number;
+    desLineHeight: string;
+    desMaxLines: number;
+    buttonVisible: boolean;
+    buttonText: string;
+    ColMobile: number;
+    ColPC: number;
+    percentageVisible: boolean;
+    iconWidthSize: string;
+    iconHeightSize: string;
+    textAlign?: 'start' | 'end' | 'left' | 'right' | 'center' | 'justify';
+    imageStyle: any;
+}
+export default function GraphicCard({ navOption, ColMobile, ColPC, iconWidthSize, iconHeightSize, titleVisible, desVisible, buttonVisible, textAlign, className, titleColor, titleFontWeight, titleFontSize, titleLineHeight, titleMaxLines, desColor, desFontWeight, desFontSize, desLineHeight, desMaxLines, buttonText, style, }: IGraphicCardPropsType): JSX.Element;

package/dist/src/web/components/graphicCard/index.js

@@ -0,0 +1,178 @@
+import React, { useMemo } from 'react';
+import './index.css';
+import classNames from '../../utils/classnames';
+import { Row, Col, ConfigProvider, Button, Text } from 'tea-component';
+import { usePlatform } from '../../utils/platform';
+import { IconFont } from 'tdesign-icons-react';
+import Image from '../image';
+import { useWindowSize } from '@react-hookz/web';
+import isObjectEqual from '../../utils/isObjectEqual';
+import { emptyArray } from '../../utils/constant';
+const CLASS_PREFIX = 'weda-graphic-card';
+export default function GraphicCard({ navOption = emptyArray, ColMobile, ColPC, iconWidthSize, iconHeightSize, titleVisible, desVisible, buttonVisible, textAlign, className, titleColor, titleFontWeight, titleFontSize, titleLineHeight, titleMaxLines, desColor, desFontWeight, desFontSize, desLineHeight, desMaxLines, buttonText, style, }) {
+    const platform = usePlatform();
+    const isH5 = platform === 'h5';
+    // 一个栅格的宽度
+    const { width } = useWindowSize();
+    const singleGrid = useMemo(() => (width - 24 * 2) / 12, [width]);
+    // 两次默认值不同, 需要刷新
+    const prevNavOptionRef = React.useRef(null);
+    const prevColRef = React.useRef(0);
+    const cls = classNames({
+        [CLASS_PREFIX]: true,
+        [className]: className,
+        [`${CLASS_PREFIX}-mobile`]: isH5,
+    });
+    const colCount = useMemo(() => {
+        const col = isH5 ? ColMobile : ColPC;
+        return col !== null && col !== void 0 ? col : 2;
+    }, [ColMobile, ColPC, isH5]);
+    const cardList = useMemo(() => {
+        const list = [];
+        if (prevColRef.current !== colCount ||
+            (navOption.length > 0 &&
+                !isObjectEqual(prevNavOptionRef.current !== navOption))) {
+            list.length = Math.floor(navOption.length / colCount);
+            list.forEach((item, index) => {
+                list[index] = [];
+            });
+            navOption.forEach((item, index) => {
+                const _index = Math.floor(index / colCount);
+                if (!list[_index] || list[_index].length <= 0) {
+                    // 保证每个col 的数据都是有的，列入总共7个数据，那么第二行的3， 4，5数据是undefined, 占位
+                    list[_index] = Array(colCount).fill(null);
+                }
+                const paramObj = {};
+                if (item === null || item === void 0 ? void 0 : item.params) {
+                    for (const info of item.params) {
+                        paramObj[info.key] = info.value;
+                    }
+                }
+                item.paramObj = paramObj;
+                list[_index][index - _index * colCount] = item;
+                prevNavOptionRef.current = [...navOption];
+                prevColRef.current = colCount;
+            });
+        }
+        return list;
+    }, [colCount, navOption]);
+    const elementStyle = document.createElement('body').style;
+    const vendor = (() => {
+        const transformNames = {
+            webkit: 'webkitTransform',
+            Moz: 'MozTransform',
+            O: 'OTransform',
+            ms: 'msTransform',
+            standard: 'transform',
+        };
+        for (const key in transformNames) {
+            if (elementStyle[transformNames[key]] !== undefined) {
+                return key;
+            }
+        }
+        return false;
+    })();
+    function prefixStyle(style) {
+        if (vendor === false) {
+            return false;
+        }
+        if (vendor === 'standard') {
+            return style;
+        }
+        return '-' + vendor + style.charAt(0).toUpperCase() + style.substr(1);
+    }
+    const boxStyle = prefixStyle('-box');
+    //标题样式
+    const titleStyle = {
+        display: `${boxStyle}`,
+        WebkitLineClamp: `${titleMaxLines ? titleMaxLines : 'inherit'}`,
+        overflow: 'hidden',
+        color: `${titleColor}`,
+        fontWeight: `${titleFontWeight}`,
+        fontSize: `${titleFontSize}` + 'px',
+        textAlign: `${textAlign}`,
+        lineHeight: `${titleLineHeight == 'auto' ? 'normal' : titleLineHeight}`,
+    };
+    const desStyle = {
+        display: `${boxStyle}`,
+        WebkitLineClamp: `${desMaxLines ? desMaxLines : 'inherit'}`,
+        overflow: 'hidden',
+        color: `${desColor}`,
+        fontWeight: `${desFontWeight}`,
+        fontSize: `${desFontSize}` + 'px',
+        textAlign: `${textAlign}`,
+        lineHeight: `${desLineHeight == 'auto' ? 'normal' : desLineHeight}`,
+    };
+    // 图片高度： 100% 基础下 H5: 1列 200px；2列 98px   PC： 3列 220px 4列 162px
+    const imageStyle = React.useMemo(() => {
+        let width = '100%';
+        let height = platform === 'h5' ? '200' : '220';
+        if (platform === 'h5' && ColMobile === 2) {
+            height = '98';
+        }
+        if (platform !== 'h5' && ColPC === 4) {
+            height = '162';
+        }
+        const numReg = /^\d+$/;
+        width = numReg.test(iconWidthSize) ? iconWidthSize + 'px' : iconWidthSize;
+        height = numReg.test(iconHeightSize)
+            ? iconHeightSize + 'px' //纯数字
+            : iconHeightSize.indexOf('%') == -1
+                ? iconHeightSize
+                : (Number(height) * parseInt(iconHeightSize)) / 100 + 'px';
+        return { width, height };
+    }, [platform, ColMobile, ColPC, iconWidthSize, iconHeightSize]);
+    const tapTo = (colInfo = navOption[0]) => {
+        switch (colInfo === null || colInfo === void 0 ? void 0 : colInfo.tapStatus) {
+            case 'tap':
+                return null;
+            case 'inside':
+                if (colInfo.insideUrl) {
+                    app.navigateTo({
+                        mode: 'weDa',
+                        pageId: colInfo.insideUrl,
+                        params: (colInfo === null || colInfo === void 0 ? void 0 : colInfo.withParams) && (colInfo === null || colInfo === void 0 ? void 0 : colInfo.params.length) > 0
+                            ? colInfo.paramObj
+                            : null,
+                    });
+                }
+                break;
+            //return renderCancel();
+            case 'outer':
+                if (colInfo.newPage) {
+                    colInfo.outerUrl ? window.open(colInfo.outerUrl) : false;
+                }
+                else {
+                    colInfo.outerUrl ? (window.location.href = colInfo.outerUrl) : false;
+                }
+                break;
+            default:
+                return null;
+        }
+    };
+    return (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+        React.createElement("div", { className: cls, "data-testid": "graphicCard", style: style },
+            React.createElement("div", { className: `${CLASS_PREFIX}__wrapper` }, cardList.map((row, rowIndex) => {
+                return (React.createElement(Row, { className: `${CLASS_PREFIX}__row`, key: rowIndex },
+                    React.createElement(React.Fragment, null, row &&
+                        row.map((col, colIndex) => {
+                            return (
+                            // 每列内容左右间距为0.1栅格列宽
+                            React.createElement(Col, { style: {
+                                    width: `${(1 / colCount) * 100}%`,
+                                    padding: `0 ${singleGrid * 0.1}px`,
+                                    cursor: (col === null || col === void 0 ? void 0 : col.tapStatus) != 'tap' ? 'pointer' : 'auto',
+                                }, className: `${CLASS_PREFIX}__col ${CLASS_PREFIX}__col--${textAlign}`, key: colIndex },
+                                React.createElement("div", { className: "wedatea2td-grid__box", "data-testid": `${colIndex}_click`, onClick: () => tapTo(col) },
+                                    React.createElement("div", { className: `${CLASS_PREFIX}__col-body` },
+                                        col && (React.createElement("div", { className: `${CLASS_PREFIX}__icon`, style: imageStyle },
+                                            React.createElement(Image, { mode: 'scaleToFill', lazyLoad: false, maskClosable: false, imgPreview: false, fit: 'cover', alt: '', src: col === null || col === void 0 ? void 0 : col.icon, className: `${CLASS_PREFIX}__img` }))),
+                                        React.createElement("div", { className: `${CLASS_PREFIX}__detail` },
+                                            titleVisible && (col === null || col === void 0 ? void 0 : col.title) && (React.createElement("div", { className: `${CLASS_PREFIX}__title`, style: titleStyle }, col === null || col === void 0 ? void 0 : col.title)),
+                                            desVisible && (col === null || col === void 0 ? void 0 : col.des) && (React.createElement("div", { className: `${CLASS_PREFIX}__desc`, style: desStyle }, col === null || col === void 0 ? void 0 : col.des)))),
+                                    buttonVisible && col && (React.createElement(Button, { type: "link", className: `${CLASS_PREFIX}__btn` },
+                                        React.createElement(Text, { className: `${CLASS_PREFIX}__btn--text` }, buttonText),
+                                        React.createElement(IconFont, { name: "arrow-right", className: `${CLASS_PREFIX}__btn-icon` }))))));
+                        }))));
+            })))));
+}

package/dist/src/web/components/image/image.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { PropsType } from './index';
+interface ImageInnerPropsType extends Omit<PropsType, 'fit' | 'mode'> {
+    objectFit: React.CSSProperties['objectFit'];
+    isError: boolean;
+    setIsError: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export declare function ImageInner({ objectFit, style, className, alt, src, isError, setIsError, events, lazyLoad, maskClosable, imgPreview, }: ImageInnerPropsType): JSX.Element;
+export {};

package/dist/src/web/components/image/image.js

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { ConfigProvider, ImagePreview } from 'tea-component';
+import { usePlatform } from '../../utils/platform';
+import { useGesture } from '@use-gesture/react';
+export function ImageInner({ objectFit, style, className, alt, src, isError, setIsError, events, lazyLoad, maskClosable, imgPreview, }) {
+    const platform = usePlatform();
+    const [imgShow, setImgShow] = React.useState(false);
+    const onMaskClick = () => {
+        if (maskClosable) {
+            setImgShow(false);
+        }
+    };
+    const [showHeight, setShowHeight] = React.useState(0);
+    const realWidth = React.useRef(0);
+    const realHeight = React.useRef(0);
+    const [offsetHeight, setOffsetHeight] = React.useState(0);
+    const [translateX, setTranslateX] = React.useState(0);
+    const [translateY, setTranslateY] = React.useState(0);
+    const [previewScale, setPreviewScale] = React.useState(1);
+    React.useEffect(() => {
+        // 防止触发浏览器的放大缩小
+        const handler = (e) => e.preventDefault();
+        document.addEventListener('gesturestart', handler);
+        document.addEventListener('gesturechange', handler);
+        return () => {
+            document.removeEventListener('gesturestart', handler);
+            document.removeEventListener('gesturechange', handler);
+        };
+    }, []);
+    const bind = useGesture({
+        onClick: ({ event }) => {
+            // 防止冒泡出发关闭预览
+            event.stopPropagation();
+        },
+        onPinch: ({ offset }) => {
+            const [s] = offset;
+            setPreviewScale(s);
+        },
+        onDrag: ({ offset, event }) => {
+            event.stopPropagation();
+            const [x, y] = offset;
+            setTranslateX(x);
+            setTranslateY(y);
+        },
+    }, {
+        drag: {
+            delay: true,
+            preventDefault: true,
+        },
+        pinch: {
+            scaleBounds: { min: 0.6, max: 5 },
+            pointer: {
+                touch: true,
+            },
+        },
+    });
+    if (platform === 'h5' || !imgPreview || isError) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("img", { style: {
+                    objectFit,
+                    ...style,
+                }, className: className, alt: alt, src: src, onLoad: (e) => {
+                    const img = e.target;
+                    const { naturalHeight, naturalWidth } = img;
+                    realHeight.current = naturalHeight;
+                    realWidth.current = naturalWidth;
+                    setIsError(false);
+                    events.load && events.load({}, { originEvent: e });
+                }, onError: (e) => {
+                    setIsError(true);
+                    events.error && events.error({}, { originEvent: e });
+                }, onClick: (e) => {
+                    if (imgPreview && !isError) {
+                        setTranslateX(0);
+                        setTranslateY(0);
+                        setPreviewScale(1);
+                        const windowHeight = window.innerHeight;
+                        const windowWidth = window.innerWidth;
+                        let ratio = realWidth.current / realHeight.current;
+                        if (Number.isNaN(ratio)) {
+                            ratio = 1;
+                        }
+                        const height = windowWidth / ratio;
+                        setOffsetHeight(windowHeight / 2 - height / 2);
+                        setShowHeight(height);
+                        setImgShow(true);
+                    }
+                    events.tap && events.tap({}, { originEvent: e });
+                }, loading: lazyLoad ? 'lazy' : undefined }),
+            imgShow && (React.createElement("div", { className: "weda-img-mask", onClick: onMaskClick },
+                React.createElement("div", { onClick: () => setImgShow(false), className: "weda-img-modal-close-btn" },
+                    React.createElement("i", { className: "weui-icon-clear", style: { color: 'white' } })),
+                React.createElement("div", { ...bind(), className: "weda-img-preview", style: {
+                        touchAction: 'none',
+                        backgroundImage: `url(${src})`,
+                        width: '100%',
+                        height: showHeight,
+                        marginTop: offsetHeight,
+                        transform: `translate(${translateX}px, ${translateY}px) scale(${previewScale})`,
+                    } })))));
+    }
+    else {
+        return (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+            React.createElement(ImagePreview, { previewSrc: src, maskClosable: maskClosable, className: className, style: { ...style, objectFit } }, (open) => (React.createElement("img", { style: {
+                    objectFit,
+                    cursor: 'zoom-in',
+                    ...style,
+                }, className: className, alt: alt, src: src, onLoad: (e) => {
+                    setIsError(false);
+                    events.load && events.load({}, { originEvent: e });
+                }, onError: (e) => {
+                    setIsError(true);
+                    events.error && events.error({}, { originEvent: e });
+                }, loading: lazyLoad ? 'lazy' : undefined, onClick: (e) => {
+                    open();
+                    events.tap && events.tap({}, { originEvent: e });
+                } })))));
+    }
+}

package/dist/src/web/components/image/index.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import './index.css';
+import type { CommonPropsType } from '../../types';
+declare type TMode = 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right';
+export interface PropsType extends CommonPropsType, Pick<HTMLImageElement, 'src' | 'alt'> {
+    mode: TMode;
+    lazyLoad: boolean;
+    maskClosable: boolean;
+    imgPreview: boolean;
+    fit: React.CSSProperties['objectFit'] | ('widthFix' | 'heightFix');
+}
+export default function Image({ className, events, style, src, alt, mode, lazyLoad, imgPreview, maskClosable, fit, }: PropsType): JSX.Element;
+export {};

package/dist/src/web/components/image/index.js

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { useState, useMemo } from 'react';
+import classNames from '../../utils/classnames';
+import './index.css';
+import { ImageInner } from './image';
+import { emptyObject } from '../../utils/constant';
+import { useTempUrl } from '../../utils/use-cloud-id-temp-url';
+export default function Image({ 
+// 系统属性
+className, events = emptyObject, style, 
+// 组件属性
+src, alt, mode, lazyLoad, imgPreview, maskClosable, fit, }) {
+    const [isError, setIsError] = useState(false);
+    const cls = classNames({
+        'weda-ui': true,
+        'weda-image': true,
+        'weda-image-error': isError,
+        [className]: className,
+    });
+    const objectFit = fit || getObjectFitByWxImageMode(mode);
+    const { data: realSrc } = useTempUrl(src);
+    /**
+     * 模拟小程序的widthFix、heightFix模式
+     */
+    const realFit = useMemo(() => {
+        if (objectFit === 'widthFix' || objectFit === 'heightFix') {
+            return 'scale-down';
+        }
+        else {
+            return objectFit;
+        }
+    }, [objectFit]);
+    const realStyle = useMemo(() => {
+        if (objectFit === 'widthFix') {
+            return {
+                ...style,
+                height: 'auto',
+            };
+        }
+        else if (objectFit === 'heightFix') {
+            return {
+                ...style,
+                width: 'auto',
+            };
+        }
+        else {
+            return style;
+        }
+    }, [objectFit, style]);
+    return src === realSrc || (realSrc !== undefined && src !== realSrc) ? (React.createElement(ImageInner, { objectFit: realFit, style: realStyle, className: cls, alt: alt, src: realSrc, isError: isError, setIsError: setIsError, events: events, lazyLoad: lazyLoad, imgPreview: imgPreview, maskClosable: maskClosable })) : null;
+}
+function getObjectFitByWxImageMode(mode) {
+    const array = [
+        {
+            mode: 'scaleToFill',
+            h5: 'fill',
+        },
+        {
+            mode: 'aspectFit',
+            h5: 'contain',
+        },
+        {
+            mode: 'aspectFill',
+            h5: 'cover',
+        },
+        {
+            mode: 'widthFix',
+            h5: 'cover',
+        },
+        {
+            mode: 'heightFix',
+            h5: 'contain',
+        },
+    ];
+    const item = array.find((item) => item.mode === mode);
+    return item === null || item === void 0 ? void 0 : item.h5;
+}