@cloudbase/weda-ui 3.4.16 → 3.5.1

package/dist/web/components/form/switch/{switch.module.css → index.css}

@@ -1,4 +1,4 @@
-.switch_wedaSwitchInput__iwKfX.weui-switch-cp__input {
+.weda-switch-input .weui-switch-cp__input {
   position: absolute;
   width: 0;
   height: 0;

package/dist/web/components/form/switch/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { CommonFormPropsType } from '../types';
+import './style';
+export default function Switch({ id, className, style, name, events, label, labelVisible, checked: defaultChecked, layout, disabled, requiredFlag, decorator, onChange: outerOnChange, }: PropsType): JSX.Element;
+export interface PropsType extends CommonFormPropsType {
+    checked?: boolean;
+}

package/dist/web/components/form/switch/index.js

@@ -6,7 +6,7 @@ import { ConfigProvider, Switch as TeaSwitch } from 'tea-component';
 import { renderDecorator } from '../renderDecorator';
 import { useSyncValue } from '../../../utils/hooks/useSyncValue';
 import { emptyObject } from '../../../utils/constant';
-import styles from './switch.module.css';
+import './style';
 export default function Switch({ 
 // 系统属性
 id, className, style, name, events = emptyObject, 
@@ -31,7 +31,7 @@ label = '标题', labelVisible = true, checked: defaultChecked, layout = 'horizo
     // 现在低码组件往源码组件传入的id不唯一, 暂时使用hashcode替代
     const hashcode = getLocalCounter();
     const _id = `switch-${hashcode}`;
-    const switchElement = platform === 'h5' ? (_jsxs("div", { className: subCls, "data-testid": "form-switch", children: [isFlex ? _jsx("div", { className: "weui-cell__bd" }) : null, _jsx("div", { className: isFlex ? 'weui-cell__ft' : 'weui-cell__bd', children: _jsxs("label", { htmlFor: _id, className: "weui-switch-cp", children: [_jsx("input", { id: _id, name: name, className: `weui-switch-cp__input ${styles.wedaSwitchInput}`, type: "checkbox", checked: checked, disabled: disabled, onChange: (ev) => {
+    const switchElement = platform === 'h5' ? (_jsxs("div", { className: subCls, "data-testid": "form-switch", children: [isFlex ? _jsx("div", { className: "weui-cell__bd" }) : null, _jsx("div", { className: isFlex ? 'weui-cell__ft' : 'weui-cell__bd', children: _jsxs("label", { htmlFor: _id, className: "weui-switch-cp", children: [_jsx("input", { id: _id, name: name, className: `weui-switch-cp__input weda-switch-input`, type: "checkbox", checked: checked, disabled: disabled, onChange: (ev) => {
                                 const value = ev.target.checked;
                                 setChecked(value);
                                 outerOnChange === null || outerOnChange === void 0 ? void 0 : outerOnChange(value);

package/dist/web/components/form/switch/style.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.css';

package/dist/web/components/form/switch/style.js

@@ -0,0 +1,3 @@
+// common style
+import '../../style';
+import './index.css';

package/dist/web/components/form/textarea/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { CommonFormPropsType } from '../types';
+import './style';
+export default function Textarea({ id, className, style, events, label, labelVisible, defaultValue, placeholder, maxLength, disabled, focus: autoFocus, layout, requiredFlag, counterVisible, size, decorator, onChange: outerOnChange, }: PropsType): JSX.Element;
+export interface PropsType extends CommonFormPropsType {
+    defaultValue?: string;
+    placeholder?: string;
+    maxLength?: number;
+    focus?: boolean;
+    counterVisible?: boolean;
+    size?: 's' | 'm' | 'l' | 'full';
+    onChange: (val: string) => void;
+}

package/dist/web/components/form/textarea/index.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import classNames from '../../../utils/classnames';
-import './index.css';
 import { ConfigProvider, Input } from 'tea-component';
 import { usePlatform } from '../../../utils/platform';
 import { renderDecorator } from '../renderDecorator';
 import { useSyncValue } from '../../../utils/hooks/useSyncValue';
 import { emptyObject } from '../../../utils/constant';
+import './style';
 export default function Textarea({ 
 // 系统属性
 id, className, style, events = emptyObject, 

package/dist/web/components/form/textarea/style.d.ts

@@ -0,0 +1,2 @@
+import './index.css';
+import '../../style';

package/dist/web/components/form/textarea/style.js

@@ -0,0 +1,2 @@
+import './index.css';
+import '../../style';

package/dist/web/components/form/tips/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { CommonPropsType } from '../../../types';
+import './style';
+export default function Tips({ className, tips, type, id, style, }: PropsType): JSX.Element;
+export interface PropsType extends CommonPropsType {
+    tips?: string;
+    type?: 'warn' | 'normal';
+}

package/dist/web/components/form/tips/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from '../../../utils/classnames';
-import './index.css';
+import './style';
 export default function Tips({ 
 // 系统属性
 className, 

package/dist/web/components/form/tips/style.d.ts

@@ -0,0 +1,2 @@
+import './index.css';
+import '../../style';

package/dist/web/components/form/tips/style.js

@@ -0,0 +1,3 @@
+import './index.css';
+// common style
+import '../../style';

package/dist/web/components/form/uploader/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { H5UploaderProps } from './uploader.h5';
+import { PropsType as PcUploaderProps } from './uploader.pc';
+import './style';
+type UploaderProps = (H5UploaderProps | PcUploaderProps) & {
+    showShape?: string;
+    showType?: string;
+};
+export default function Uploader(props: UploaderProps): JSX.Element;
+export {};

package/dist/web/components/form/uploader/index.js

@@ -5,7 +5,7 @@ import { usePlatform } from '../../../utils/platform';
 import { ImageUploaderH5 as UploaderH5 } from './uploader.h5';
 import classNames from '../../../utils/classnames';
 import { UploaderPCInner } from './uploader.pc';
-import './index.css';
+import './style';
 import { renderDecorator } from '../renderDecorator';
 /**
  * 图片组件上传，区分 h5端/pc端

package/dist/web/components/form/uploader/style.d.ts

@@ -0,0 +1,2 @@
+import './index.css';
+import '../../style';

package/dist/web/components/form/uploader/style.js

@@ -0,0 +1,2 @@
+import './index.css';
+import '../../style';

package/dist/web/components/form/uploader/uploader.h5.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import type { CommonFormPropsType } from '../types';
+import type { CommonPropsType } from '../../../types';
+/**
+ * H5端
+ */
+export declare function ImageUploaderH5({ title: label, maxUploadCount, maxSize, acceptTypes, className, id, events, layout: _layout, defaultValue, single, disabled, requiredFlag, labelVisible, onChange, style, imgTypeCls, readOnly, }: H5UploaderProps): JSX.Element;
+export interface SingleImageProps {
+    src: string;
+    deleteBySrc: (url: string) => void;
+    disabled: boolean;
+    imgTypeCls?: string;
+}
+export interface H5UploaderProps extends CommonFormPropsType, CommonPropsType {
+    title?: string;
+    imgTypeCls?: string;
+    maxSize?: number;
+    acceptTypes?: Readonly<unknown[]>;
+    maxUploadCount?: number;
+    defaultValue?: string[] | string;
+    single?: boolean;
+    onChange?: (v: any) => void;
+    readOnly?: boolean;
+}

package/dist/web/components/form/uploader/uploader.h5.js

@@ -8,14 +8,12 @@ import { useSyncValue } from '../../../utils/hooks/useSyncValue';
 import { randomStr, browserEnv } from '../../../utils/platform';
 import { IMAGE_TYPES, encodeConvert } from './uploader.pc';
 import { useTempUrl } from '../../../utils/hooks/use-cloud-id-temp-url';
-import { getParentForm } from '../../../utils/widget-api';
 import { emptyObject } from '../../../utils/constant';
 const uploadPath = 'weda-uploader';
 /**
  * H5端
  */
-export function ImageUploaderH5({ title: label, maxUploadCount, maxSize = 10, acceptTypes = IMAGE_TYPES, className, id, events = emptyObject, layout: _layout, defaultValue, single = false, disabled = false, requiredFlag = false, labelVisible = true, onChange, style, imgTypeCls, $node, }) {
-    var _a;
+export function ImageUploaderH5({ title: label, maxUploadCount, maxSize = 10, acceptTypes = IMAGE_TYPES, className, id, events = emptyObject, layout: _layout, defaultValue, single = false, disabled = false, requiredFlag = false, labelVisible = true, onChange, style, imgTypeCls, readOnly, }) {
     const layout = _layout !== 'vertical' ? 'horizontal' : 'vertical';
     const layoutCls = layout === 'horizontal' ? 'weda-formcells weui-flex' : '';
     const cls = classNames({
@@ -27,7 +25,6 @@ export function ImageUploaderH5({ title: label, maxUploadCount, maxSize = 10, ac
     //上传进度
     const [progress, setProgress] = React.useState(0);
     const [inputValue, setInputValue] = useSyncValue(defaultValue, isObjectEqual);
-    const formType = ((_a = getParentForm($node)) === null || _a === void 0 ? void 0 : _a.formType) || 'create';
     const fileIdList = React.useMemo(() => {
         // 兼容h5默认值为空时情况
         if (inputValue === null) {
@@ -96,29 +93,6 @@ export function ImageUploaderH5({ title: label, maxUploadCount, maxSize = 10, ac
             ? IMAGE_TYPES
             : Array.from(new Set(acceptTypes));
     }, [acceptTypes]);
-    const islegalType = (files, accepts) => {
-        const illegalType = [];
-        let isImage = true;
-        for (const file of files) {
-            if ((file === null || file === void 0 ? void 0 : file.type.split('/')[0]) !== 'image') {
-                weui.alert('请上传图片', {
-                    title: 'Image Type Error',
-                });
-                isImage = false;
-                break;
-            }
-            accepts.some((item) => item === (file === null || file === void 0 ? void 0 : file.type))
-                ? null
-                : illegalType.push(file === null || file === void 0 ? void 0 : file.type);
-        }
-        if (!isImage)
-            return false;
-        if (illegalType.length > 0) {
-            weui.alert('不支持上传' + Array.from(new Set(illegalType)).join(',') + '格式图片');
-            return false;
-        }
-        return true;
-    };
     const showAdd = React.useMemo(() => {
         if (single) {
             // single 模式时，当数组为空且不在上传文件过程中时显示
@@ -128,8 +102,6 @@ export function ImageUploaderH5({ title: label, maxUploadCount, maxSize = 10, ac
     }, [fileIdList, single, maxUploadCount, uploading]);
     const uploadChange = async (e) => {
         const files = [...e.target.files];
-        if (!islegalType(files, accepts))
-            return;
         if (files.some((f) => f.size > maxSize * 1024 * 1024)) {
             weui.alert(`请上传不超过 ${maxSize}M 的图片`);
             return false;
@@ -148,7 +120,7 @@ export function ImageUploaderH5({ title: label, maxUploadCount, maxSize = 10, ac
         const ids = [].concat(fileIdList, result);
         handleChange(ids);
     };
-    return (_jsx("div", { className: cls, id: id, style: style, children: _jsxs("div", { className: classNames('weui-uploader weui-cells weui-cells_form weda-formcells', layout, layoutCls), children: [_jsx("div", { className: classNames('weui-uploader__hd', layout), children: _jsx(UploaderLabel, { layout: layout, label: label, labelVisible: labelVisible, currentCount: fileIdList.length, maxCount: finalMaxImgCount, requiredFlag: requiredFlag }) }), _jsxs("div", { className: "weui-uploader__bd", children: [_jsxs("ul", { className: "weui-uploader__files", id: "uploaderFiles", children: [(fileIdList !== null && fileIdList !== void 0 ? fileIdList : []).map((f) => (_jsx(SingleImage, { src: f, deleteBySrc: deleteFile, disabled: disabled, imgTypeCls: imgTypeCls }, f))), fileIdList.length < 1 && formType === 'read' && _jsx(_Fragment, { children: "\u2014" }), uploading && (_jsx("li", { className: `weui-uploader__file weui-uploader__file_status ${imgTypeCls}`, children: _jsxs("div", { className: "weui-uploader__file-content", children: [progress, "%"] }) }))] }), showAdd && formType !== 'read' && (_jsx("div", { className: `weui-uploader__input-box ${imgTypeCls}`, children: !disabled && (_jsx("input", { "data-testid": "uploaderh5_input", id: "uploaderInput", className: "weui-uploader__input", type: "file", accept: accepts.join(','), multiple: !single && !(browserEnv().android && browserEnv().weixin), onChange: uploadChange })) }))] })] }) }));
+    return (_jsx("div", { className: cls, id: id, style: style, children: _jsxs("div", { className: classNames('weui-uploader weui-cells weui-cells_form weda-formcells', layout, layoutCls), children: [_jsx("div", { className: classNames('weui-uploader__hd', layout), children: _jsx(UploaderLabel, { layout: layout, label: label, labelVisible: labelVisible, currentCount: fileIdList.length, maxCount: finalMaxImgCount, requiredFlag: requiredFlag }) }), _jsxs("div", { className: "weui-uploader__bd", children: [_jsxs("ul", { className: "weui-uploader__files", id: "uploaderFiles", children: [(fileIdList !== null && fileIdList !== void 0 ? fileIdList : []).map((f) => (_jsx(SingleImage, { src: f, deleteBySrc: deleteFile, disabled: disabled, imgTypeCls: imgTypeCls }, f))), fileIdList.length < 1 && readOnly && _jsx(_Fragment, { children: "\u2014" }), uploading && (_jsx("li", { className: `weui-uploader__file weui-uploader__file_status ${imgTypeCls}`, children: _jsxs("div", { className: "weui-uploader__file-content", children: [progress, "%"] }) }))] }), showAdd && !readOnly && (_jsx("div", { className: `weui-uploader__input-box ${imgTypeCls}`, children: !disabled && (_jsx("input", { "data-testid": "uploaderh5_input", id: "uploaderInput", className: "weui-uploader__input", type: "file", accept: accepts.join(','), multiple: !single && !(browserEnv().android && browserEnv().weixin), onChange: uploadChange })) }))] })] }) }));
 }
 function SingleImage({ src, deleteBySrc, disabled, imgTypeCls, }) {
     const cls = classNames({

package/dist/web/components/form/uploader/uploader.pc.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { H5UploaderProps } from './uploader.h5';
+export declare const CLASS_PREFIX = "weda-uploader-pc";
+export declare const IMAGE_TYPES: string[];
+/**
+ * 上传图片-官方组件
+ */
+export declare function UploaderPC({ layout, className, id, style, title, tips, ...props }: {
+    [x: string]: any;
+    layout: any;
+    className: any;
+    id: any;
+    style: any;
+    title: any;
+    tips: any;
+}): JSX.Element;
+export declare function UploaderPCInner(props: any): JSX.Element;
+export interface TcbImageProps {
+    fileID?: string;
+    isZoom?: boolean;
+    onError?: (e: unknown) => void;
+    imgTypeCls?: string;
+}
+export declare const TcbImage: (props: TcbImageProps) => JSX.Element;
+export interface PropsType extends H5UploaderProps {
+    tips?: string;
+    value: string | string[];
+    btnTitle?: string;
+    uploadPath?: string;
+    readOnly?: boolean;
+}
+export declare function encodeConvert(src: any): any;

package/dist/web/components/form/uploader/uploader.pc.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { Upload, Button, Icon, message, ErrorTip, ImagePreview, ConfigProvider, } from 'tea-component';
+import { Upload, Button, Icon, ErrorTip, ImagePreview, ConfigProvider, } from 'tea-component';
 import classNames from '../../../utils/classnames';
 import { getCloudInstance } from '../../../utils/tcb';
 import { randomStr } from '../../../utils/platform';
 import isObjectEqual from '../../../utils/isObjectEqual';
 import { emptyObject } from '../../../utils/constant';
 import { useTempUrl } from '../../../utils/hooks/use-cloud-id-temp-url';
-import { getParentForm } from '../../../utils/widget-api';
 // 默认组件类前缀
 export const CLASS_PREFIX = 'weda-uploader-pc';
 // 默认图片类型
@@ -34,17 +33,15 @@ export function UploaderPC({ layout, className, id, style, title, tips, ...props
     return (_jsxs("div", { className: cls, id: id, style: style, children: [_jsxs("div", { className: `${CLASS_PREFIX}__header`, children: [title && _jsx("div", { className: `${CLASS_PREFIX}__title`, children: title }), tips && (_jsx("div", { className: `${CLASS_PREFIX}__description`, children: tips || '' }))] }), _jsx(UploaderPCInner, { ...props })] }));
 }
 export function UploaderPCInner(props) {
-    var _a;
     const { tips = '', btnTitle = '上传图片', maxUploadCount = 9, maxSize = 10, defaultValue, // 需要兼容 cloud:和https: 协议，需要兼容 字符串和字符串数组
-    acceptTypes = IMAGE_TYPES, uploadPath = 'weda-uploader', events = emptyObject, single = false, disabled = false, onChange, imgTypeCls, $node, value, // 数据管理后台中，formily使用此字段传默认值
-     } = props;
+    acceptTypes = IMAGE_TYPES, uploadPath = 'weda-uploader', events = emptyObject, single = false, disabled = false, onChange, imgTypeCls, value, // 数据管理后台中，formily使用此字段传默认值
+    readOnly, } = props;
     // 上传中
     const [uploading, setUploading] = React.useState(false);
     //上传进度
     const [progress, setProgress] = React.useState(0);
     // 文件列表
     const [fileIDList, setfileIDList] = React.useState([]);
-    const formType = ((_a = getParentForm($node)) === null || _a === void 0 ? void 0 : _a.formType) || 'create';
     const defaultValueRef = React.useRef(null);
     React.useEffect(() => {
         if (isObjectEqual(defaultValueRef.current, defaultValue))
@@ -65,36 +62,10 @@ export function UploaderPCInner(props) {
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
         (_a = events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value });
     };
-    //验证上传文件类型是否合法
-    const islegalType = (files, accepts) => {
-        const illegalType = [];
-        let isImage = true;
-        for (const file of files) {
-            if ((file === null || file === void 0 ? void 0 : file.type.split('/')[0]) !== 'image') {
-                message.error({ content: '请上传图片' });
-                isImage = false;
-                break;
-            }
-            accepts.some((item) => item === (file === null || file === void 0 ? void 0 : file.type))
-                ? null
-                : illegalType.push(file === null || file === void 0 ? void 0 : file.type);
-        }
-        if (!isImage)
-            return false;
-        if (illegalType.length > 0) {
-            message.error({
-                content: '不支持上传' +
-                    Array.from(new Set(illegalType)).join(',') +
-                    '格式图片',
-            });
-            return false;
-        }
-        return true;
-    };
     // 方法：上传前，判断图片大小、数量是否满足，取消默认组件的上传事件，用自定义的 tcb 上传方法
     const beforeHandle = (file, fileList, isAccepted, error) => {
-        if (!islegalType(fileList, extraProps['accept']))
-            return;
+        var _a, _b, _c, _d, _e, _f;
+        const finalMaxImgCount = single ? 1 : maxUploadCount;
         if (!isAccepted) {
             try {
                 const errorList = [];
@@ -104,7 +75,10 @@ export function UploaderPCInner(props) {
                 if (error.find((item) => (item === null || item === void 0 ? void 0 : item.code) === 'file-too-large')) {
                     errorList.push(`上传图片大小不能超过${maxSize}M`);
                 }
-                message.error({ content: errorList.join(', ') });
+                (_b = (_a = window === null || window === void 0 ? void 0 : window.$w) === null || _a === void 0 ? void 0 : _a.utils) === null || _b === void 0 ? void 0 : _b.showToast({
+                    title: errorList.join(', '),
+                    icon: 'error',
+                });
             }
             catch (e) { }
             return false;
@@ -112,6 +86,21 @@ export function UploaderPCInner(props) {
         const ids = fileList.filter((f) => !!f.id);
         if (ids.length < fileList.length)
             return false;
+        if (fileList.length > finalMaxImgCount) {
+            // 防止一下子选择过多文件
+            (_d = (_c = window === null || window === void 0 ? void 0 : window.$w) === null || _c === void 0 ? void 0 : _c.utils) === null || _d === void 0 ? void 0 : _d.showToast({
+                title: `最多只能上传${finalMaxImgCount}张图片，请重新选择`,
+                icon: 'error',
+            });
+            return false;
+        }
+        if (fileIDList.length + fileList.length > finalMaxImgCount) {
+            (_f = (_e = window === null || window === void 0 ? void 0 : window.$w) === null || _e === void 0 ? void 0 : _e.utils) === null || _f === void 0 ? void 0 : _f.showToast({
+                title: `最多只能上传${finalMaxImgCount}张图片`,
+                icon: 'error',
+            });
+            return false;
+        }
         uploadTcbMulti(fileList);
         return false;
     };
@@ -124,7 +113,7 @@ export function UploaderPCInner(props) {
     };
     // 自定义上传到 Tcb 的 COS
     const uploadTcb = async (file) => {
-        var _a;
+        var _a, _b, _c;
         try {
             setUploading(true);
             const tcb = await getCloudInstance();
@@ -139,7 +128,10 @@ export function UploaderPCInner(props) {
             return fileID;
         }
         catch (err) {
-            message.error({ content: '上传失败，请检查网络后重试' });
+            (_c = (_b = window === null || window === void 0 ? void 0 : window.$w) === null || _b === void 0 ? void 0 : _b.utils) === null || _c === void 0 ? void 0 : _c.showToast({
+                title: '上传失败，请检查网络后重试',
+                icon: 'error',
+            });
             events.error && events.error(err);
         }
         finally {
@@ -172,9 +164,10 @@ export function UploaderPCInner(props) {
             : Array.from(new Set(acceptTypes));
     tips && (extraProps['title'] = tips);
     maxSize && (extraProps['maxSize'] = maxSize * 1024 * 1024);
-    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsxs("div", { className: "_weda-fn-upload-result", children: [fileIDList.map((d) => (_jsxs("div", { className: `_weda-fn-upload-result__item ${imgTypeCls}`, children: [_jsx(TcbImage, { fileID: d, imgTypeCls: imgTypeCls }), _jsx("div", { className: `_weda-fn-upload-result__op ${imgTypeCls}`, children: _jsx(Button, { disabled: disabled, onClick: () => deleteHandle(d), className: `${CLASS_PREFIX}__btn`, children: "\u5220\u9664" }) })] }, d))), uploading && (_jsx("div", { className: `_weda-fn-upload-result__item ${imgTypeCls}`, children: _jsxs("div", { className: "_weda-fn-upload-result__status", children: [_jsx(Icon, { type: "loading" }), !!progress && (_jsxs("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset", children: ["\u4E0A\u4F20", progress, "%..."] }))] }, "_place_image") })), _jsxs("div", { className: `${CLASS_PREFIX}__input-box`, children: [formType === 'read' && fileIDList.length < 1 && _jsx("div", { children: "\u2014" }), disabled && formType !== 'read' ? (_jsx("li", { className: `_weda-fn-upload-result__item wedatea2td-disabled ${imgTypeCls}`, children: _jsxs("div", { className: "_weda-fn-upload-result__status", children: [_jsx("i", { className: "wedatea2td-icon wedatea2td-icon-plus", role: "img", "aria-label": "plus" }), _jsx("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset", children: btnTitle })] }) })) : (((!single && fileIDList.length < maxUploadCount) ||
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsxs("div", { className: "_weda-fn-upload-result", children: [fileIDList.map((d) => (_jsxs("div", { className: `_weda-fn-upload-result__item ${imgTypeCls}`, children: [_jsx(TcbImage, { fileID: d, imgTypeCls: imgTypeCls }), readOnly ? null : (_jsx("div", { className: `_weda-fn-upload-result__op ${imgTypeCls}`, children: _jsx(Button, { disabled: disabled, onClick: () => deleteHandle(d), className: `${CLASS_PREFIX}__btn`, children: "\u5220\u9664" }) }))] }, d))), uploading && (_jsx("div", { className: `_weda-fn-upload-result__item ${imgTypeCls}`, children: _jsxs("div", { className: "_weda-fn-upload-result__status", children: [_jsx(Icon, { type: "loading" }), !!progress && (_jsxs("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset", children: ["\u4E0A\u4F20", progress, "%..."] }))] }, "_place_image") })), _jsxs("div", { className: `${CLASS_PREFIX}__input-box`, children: [readOnly && fileIDList.length < 1 && _jsx("div", { children: "\u2014" }), disabled && !readOnly ? (_jsx("li", { className: `_weda-fn-upload-result__item wedatea2td-disabled ${imgTypeCls}`, children: _jsxs("div", { className: "_weda-fn-upload-result__status", children: [_jsx("i", { className: "wedatea2td-icon wedatea2td-icon-plus", role: "img", "aria-label": "plus" }), _jsx("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset", children: btnTitle })] }) })) : (((!single && fileIDList.length < maxUploadCount) ||
                             (single && fileIDList.length < 1 && !uploading)) &&
-                            formType !== 'read' && ( // single 模式时，当数组为空且不在上传文件过程中时显示
+                            !readOnly && (
+                        // single 模式时，当数组为空且不在上传文件过程中时显示
                         _jsx(Upload, { ...extraProps, beforeUpload: beforeHandle, children: _jsxs("li", { 
                                 // className={"_weda-fn-upload-result__item _weda-fn-upload-result__item--upload" imgTypeCls}
                                 // className={classNames(

package/dist/web/components/form/uploaderFile/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 文件组件上传，区分 h5端/pc端
+ */
+export default function UploaderFile(props: any): JSX.Element;

package/dist/web/components/form/uploaderFile/index.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { usePlatform } from '../../../utils/platform';
 import { UploadFileH5 as UploaderH5 } from './uploadFile.h5';
 import { UploadFilePc } from './uploadFile.pc';
-import './index.css';
+import './style';
 /**
  * 文件组件上传，区分 h5端/pc端
  */

package/dist/web/components/form/uploaderFile/style.d.ts

@@ -0,0 +1,2 @@
+import './index.css';
+import '../../style';

package/dist/web/components/form/uploaderFile/style.js

@@ -0,0 +1,2 @@
+import './index.css';
+import '../../style';

package/dist/web/components/form/uploaderFile/uploadFile.h5.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import type { CommonFormPropsType } from '../types';
+export declare const FILES_TYPES: string[];
+export declare function UploadFileH5({ layout, id, style, labelVisible, label, requiredFlag, disabled, className, acceptTypes, tips, btnTitle, maxUploadCount, maxSize, deleteVisible, downloadVisible, value, // 需要兼容 cloud:和https: 协议，需要兼容字符串和字符串数组
+events, defaultValue, uploadPath, single, onChange, isEdit, $node, readOnly, }: IUploadFileH5): JSX.Element;
+export interface IUploadFileH5 extends CommonFormPropsType {
+    className?: string;
+    label?: string;
+    tips?: string;
+    btnTitle?: string;
+    maxUploadCount?: number;
+    deleteVisible?: boolean;
+    downloadVisible?: boolean;
+    acceptTypes?: Readonly<string[] | string>;
+    disabled?: boolean;
+    defaultValue?: string | string[];
+    maxSize?: number;
+    value?: Readonly<string | string[]>;
+    uploadPath?: string;
+    single?: boolean;
+    onChange?: (v: any) => void;
+    isEdit: boolean;
+    readOnly?: boolean;
+}

package/dist/web/components/form/uploaderFile/uploadFile.h5.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import * as React from 'react';
 import weui from '../../../utils/weui';
 import isObjectEqual from '../../../utils/isObjectEqual';
-import { ConfigProvider, Button, Icon, Text, List, Progress, Tooltip, message, } from 'tea-component';
+import { ConfigProvider, Button, Icon, Text, List, Progress, Tooltip, } from 'tea-component';
 import { filterStrList, isCloudFileID, isHttpFileID, transSize, downloadFile, transFileCloudidToName, randomStr, isInIde, isWebInMiniprogram, } from '../../../utils/platform';
 import { getCloudInstance } from '../../../utils/tcb';
 import classNames from '../../../utils/classnames';
@@ -10,6 +10,7 @@ import { renderDecorator } from '../renderDecorator';
 import { emptyArray, emptyObject } from '../../../utils/constant';
 import { useTempUrl } from '../../../utils/hooks/use-cloud-id-temp-url';
 import { getParentForm } from '../../../utils/widget-api';
+import { useSyncValue } from '../../../utils/hooks/useSyncValue';
 // 默认组件类前缀
 const CLASS_PREFIX = 'weda-upload-file-mobile';
 // 默认图片类型
@@ -38,9 +39,9 @@ export function UploadFileH5({
 layout, id = '', style = defaultStyle, labelVisible = true, label = '上传文件', requiredFlag = false, disabled = false, className = '', acceptTypes = emptyArray, 
 // 组件属性
 tips = '', btnTitle = '点击上传', maxUploadCount = 9, maxSize = 10, deleteVisible = true, downloadVisible = true, value = emptyArray, // 需要兼容 cloud:和https: 协议，需要兼容字符串和字符串数组
-events = emptyObject, defaultValue, uploadPath = 'weda-uploader', single = true, onChange = null, isEdit = true, $node, }) {
+events = emptyObject, defaultValue, uploadPath = 'weda-uploader', single = true, onChange = null, isEdit = true, $node, readOnly, }) {
     var _a;
-    const [fileIDList, setfileIDList] = React.useState(isInIde() ? [] : filterStrList([].concat(defaultValue, value))); // 上传成功文件ID列表，fileID[]
+    const [fileIDList, setfileIDList] = useSyncValue(isInIde() ? [] : filterStrList([].concat(defaultValue, value)), (a, b) => isObjectEqual(a, b, true)); // 上传成功文件ID列表，fileID[]
     const [fileList, setFileList] = React.useState([]); // 上传中的文件列表，file[]，file为原始文件 + uuid属性
     const [fileSizeObj, setFileSizeObj] = React.useState({}); // 管理上传文件大小 {uuid:size}
     // 两次默认值不同, 需要刷新
@@ -56,7 +57,7 @@ events = emptyObject, defaultValue, uploadPath = 'weda-uploader', single = true,
         }
     }, [defaultValue]);
     React.useEffect(() => {
-        var _a, _b;
+        var _a;
         if (isObjectEqual(fileRef.current, fileIDList))
             return;
         // 外部 onChange 事件
@@ -64,7 +65,6 @@ events = emptyObject, defaultValue, uploadPath = 'weda-uploader', single = true,
         const value = single ? pureFileIDList[0] || '' : pureFileIDList;
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
         (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value });
-        (_b = events === null || events === void 0 ? void 0 : events.success) === null || _b === void 0 ? void 0 : _b.call(events, { value: pureFileIDList });
         fileRef.current = fileIDList;
     }, [fileIDList]);
     // 外层组件类
@@ -82,14 +82,17 @@ events = emptyObject, defaultValue, uploadPath = 'weda-uploader', single = true,
     }, [acceptTypes]);
     // 上传后文件列表 fileIDList 改变事件，'add'|'delete'
     const handleChange = ({ fileID, uuid, type, size }) => {
-        // 上传时新增事件
-        if (type === 'add') {
-            fileID && setFileSizeObj((obj) => ({ ...obj, [fileID]: size }));
-            fileID && setfileIDList((fileIDList) => [...fileIDList, fileID]);
-        }
-        else {
-            fileID &&
+        var _a;
+        if (fileID) {
+            // 上传时新增事件
+            if (type === 'add') {
+                setFileSizeObj((obj) => ({ ...obj, [fileID]: size }));
+                setfileIDList((fileIDList) => [...fileIDList, fileID]);
+                (_a = events === null || events === void 0 ? void 0 : events.success) === null || _a === void 0 ? void 0 : _a.call(events, { value: fileID });
+            }
+            else {
                 setfileIDList((fileIDList) => fileIDList.filter((f) => f !== fileID));
+            }
         }
         uuid && setFileList((list) => list.filter((item) => uuid !== (item === null || item === void 0 ? void 0 : item._uuid)));
     };
@@ -114,7 +117,7 @@ events = emptyObject, defaultValue, uploadPath = 'weda-uploader', single = true,
                 isEdit,
                 events,
                 fileSizeObj,
-            }, children: _jsx("div", { "data-testid": "uploadFileH5", className: cls, id: id, style: style, children: _jsxs("div", { className: classNames(`${CLASS_PREFIX}`), children: [isEdit && (_jsx("div", { className: classNames(`${CLASS_PREFIX}__hd`, layout), children: _jsx("div", { children: btnDisabled ? (_jsx(Button, { type: "weak", className: classNames(`${CLASS_PREFIX}__btn--weak`), disabled: btnDisabled, children: btnTitle })) : (_jsxs("div", { children: [_jsx("input", { id: "uploaderInput", type: "file", "data-testid": "button-up", className: "weui-uploader-mobile__input", accept: accepts.join(','), multiple: !single, onChange: (e) => {
+            }, children: _jsx("div", { "data-testid": "uploadFileH5", className: cls, id: id, style: style, children: _jsxs("div", { className: classNames(`${CLASS_PREFIX}`), children: [isEdit && (_jsx("div", { className: classNames(`${CLASS_PREFIX}__hd`, layout), children: _jsx("div", { children: btnDisabled ? (readOnly ? null : (_jsx(Button, { type: "weak", className: classNames(`${CLASS_PREFIX}__btn--weak`), disabled: btnDisabled, children: btnTitle }))) : (_jsxs("div", { children: [_jsx("input", { id: "uploaderInput", type: "file", "data-testid": "button-up", className: "weui-uploader-mobile__input", accept: accepts.join(','), multiple: !single, onChange: (e) => {
                                                 const fileList = [...e.target.files];
                                                 if (single && fileList.length > 1) {
                                                     weui.alert(`上传文件总数不能超过1个`);
@@ -136,7 +139,7 @@ events = emptyObject, defaultValue, uploadPath = 'weda-uploader', single = true,
                                                 }
                                                 fileList.forEach((f) => (f['_uuid'] = randomStr()));
                                                 setFileList((list) => [...list, ...fileList]);
-                                            } }), _jsx("a", { type: "weak", className: "wedatea2td-btn wedatea2td-btn--weak", children: "\u70B9\u51FB\u4E0A\u4F20" }), !single && (_jsx(Text, { className: `${CLASS_PREFIX}__tips`, children: "\u652F\u6301\u6279\u91CF\u4E0A\u4F20" }))] })) }) })), _jsxs("div", { className: `${CLASS_PREFIX}__bd`, children: [fileIDList && fileIDList.length > 0 && (_jsx("div", { className: "weda-uploader-files_split" })), _jsxs(List, { children: [fileIDList.map((d) => (_jsx(List.Item, { children: _jsx(TcbFileEcho, { fileID: d, fileList: fileList, onChange: handleChange, disabled: disabled, deleteVisible: deleteVisible, downloadVisible: downloadVisible, formType: formType }) }, d))), fileList.map((item) => (_jsx(List.Item, { children: _jsx(TcbFileUpload, { disabled: disabled, file: item, downloadVisible: downloadVisible, deleteVisible: deleteVisible && !disabled, formType: formType }) }, item === null || item === void 0 ? void 0 : item._uuid)))] })] })] }) }) }) }))({
+                                            } }), _jsx("a", { type: "weak", className: "wedatea2td-btn wedatea2td-btn--weak", children: btnTitle }), !single && (_jsx(Text, { className: `${CLASS_PREFIX}__tips`, children: "\u652F\u6301\u6279\u91CF\u4E0A\u4F20" }))] })) }) })), _jsxs("div", { className: `${CLASS_PREFIX}__bd`, children: [fileIDList && fileIDList.length > 0 && (_jsx("div", { className: "weda-uploader-files_split" })), _jsxs(List, { children: [fileIDList.map((d) => (_jsx(List.Item, { children: _jsx(TcbFileEcho, { fileID: d, fileList: fileList, onChange: handleChange, disabled: disabled, deleteVisible: deleteVisible, downloadVisible: downloadVisible, formType: formType }) }, d))), fileList.map((item) => (_jsx(List.Item, { children: _jsx(TcbFileUpload, { disabled: disabled, file: item, downloadVisible: downloadVisible, deleteVisible: deleteVisible && !disabled, formType: formType }) }, item === null || item === void 0 ? void 0 : item._uuid)))] })] })] }) }) }) }))({
         id,
         className: cls,
         style,
@@ -150,11 +153,13 @@ events = emptyObject, defaultValue, uploadPath = 'weda-uploader', single = true,
  * 基于 FileID 文件回显组件
  */
 const TcbFileEcho = ({ fileID, disabled, formType }) => {
+    var _a, _b;
     const { fileSizeObj } = React.useContext(FileContext) || {};
     const { data: src, error } = useTempUrl(fileID);
     if (error) {
-        message.error({
-            content: `cloud id ${fileID} 资源获取错误`,
+        (_b = (_a = window === null || window === void 0 ? void 0 : window.$w) === null || _a === void 0 ? void 0 : _a.utils) === null || _b === void 0 ? void 0 : _b.showToast({
+            title: `cloud id ${fileID} 资源获取错误`,
+            icon: 'error',
         });
     }
     //上传文件名称
@@ -176,7 +181,7 @@ const TcbFileUpload = ({ file, disabled, formType }) => {
     const { uploadPath, onChange, events } = React.useContext(FileContext) || {};
     const [percent, setPercent] = React.useState(0); // 上传进度
     const [status, setStatus] = React.useState('UPLOAD_STATUS_PENDING'); // 上传状态
-    const cancleRef = React.useRef(''); // 取消的uuid
+    const cancelRef = React.useRef(''); // 取消的uuid
     // 上传文件相关属性
     const { size, title, uuid } = React.useMemo(() => {
         const size = transSize(file === null || file === void 0 ? void 0 : file.size);
@@ -203,7 +208,7 @@ const TcbFileUpload = ({ file, disabled, formType }) => {
                     setPercent(percent < 100 ? percent : 100);
                 },
             });
-            !cancleRef.current && (onChange === null || onChange === void 0 ? void 0 : onChange({ fileID, type: 'add', uuid, size }));
+            !cancelRef.current && (onChange === null || onChange === void 0 ? void 0 : onChange({ fileID, type: 'add', uuid, size }));
             setStatus('UPLOAD_STATUS_SUCCESS');
         }
         catch (err) {
@@ -212,9 +217,9 @@ const TcbFileUpload = ({ file, disabled, formType }) => {
         }
     };
     return (_jsxs("div", { className: `${CLASS_PREFIX}__item`, role: "TcbFileUpload", children: [_jsx("div", { className: `${CLASS_PREFIX}__item-left`, children: _jsx(UploadFileStatus, { status: status, percent: percent, size: size, title: title, percentSize: (((file === null || file === void 0 ? void 0 : file.size) / 1024) * percent) / 100, formType: formType }) }), _jsx("div", { className: `${CLASS_PREFIX}__btn-group`, children: _jsx(UploadFileAction, { file: file, uuid: file === null || file === void 0 ? void 0 : file._uuid, status: status, onCancel: (uuid) => {
-                        cancleRef.current = uuid;
+                        cancelRef.current = uuid;
                         onChange === null || onChange === void 0 ? void 0 : onChange({ type: 'delete', uuid });
-                    }, onReLoad: handleUpload, disabled: disabled }) })] }));
+                    }, onReLoad: handleUpload, disabled: disabled, readOnly: formType === 'read' }) })] }));
 };
 /**
  * 上传文件状态组件