@cloudbase/weda-ui 3.5.2-mp → 3.5.3

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

@@ -0,0 +1,269 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import weui from '../../../utils/weui';
+import isObjectEqual from '../../../utils/isObjectEqual';
+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';
+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';
+// 默认图片类型
+export const FILES_TYPES = [
+    '.doc',
+    '.docx',
+    '.xml',
+    'application/msword',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+];
+// 上传状态字典
+const statusMap = {
+    UPLOAD_STATUS_PENDING: { title: '等待上传', icon: 'pending' },
+    UPLOAD_STATUS_LOADING: { title: '上传中', icon: 'loading' },
+    UPLOAD_STATUS_SUCCESS: { title: '上传成功', icon: 'success' },
+    UPLOAD_STATUS_ERROR: { title: '上传失败', icon: 'error' },
+};
+// 上传文件Context
+const FileContext = React.createContext(null);
+/**
+ * 上传文件 H5 版本
+ */
+const defaultStyle = { margin: '0,-5px' };
+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, readOnly, }) {
+    var _a;
+    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}
+    // 两次默认值不同, 需要刷新
+    const prevDefaultRef = React.useRef([]);
+    const fileRef = React.useRef(fileIDList);
+    const maxSizeLimit = maxSize > 500 ? 500 : maxSize;
+    const formType = ((_a = getParentForm($node)) === null || _a === void 0 ? void 0 : _a.formType) || 'create';
+    const changeTypeRef = React.useRef('');
+    React.useEffect(() => {
+        //有有效默认值时不刷新，解决初次渲染默认值不显示问题
+        if (!isInIde() && !isObjectEqual(prevDefaultRef.current, defaultValue)) {
+            prevDefaultRef.current = defaultValue;
+            setfileIDList(filterStrList([].concat(defaultValue)));
+        }
+    }, [defaultValue]);
+    React.useEffect(() => {
+        var _a, _b;
+        if (isObjectEqual(fileRef.current, fileIDList))
+            return;
+        // 外部 onChange 事件
+        const pureFileIDList = fileIDList.filter((d) => isCloudFileID(d) || isHttpFileID(d));
+        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 });
+        if (changeTypeRef.current === 'add') {
+            (_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]);
+    // 外层组件类
+    const cls = classNames({
+        'weda-ui': true,
+        //'weui-cells': true,
+        //'weui-cells_form': true,
+        'weui-cells_checkbox': true,
+        [className]: className,
+    });
+    const accepts = React.useMemo(() => {
+        return acceptTypes.includes('*') || acceptTypes.length === 0
+            ? ['*']
+            : Array.from(new Set(acceptTypes));
+    }, [acceptTypes]);
+    // 上传后文件列表 fileIDList 改变事件，'add'|'delete'
+    const handleChange = ({ fileID, uuid, type, size }) => {
+        if (fileID) {
+            changeTypeRef.current = type;
+            if (type === 'add') {
+                setFileSizeObj((obj) => ({ ...obj, [fileID]: size }));
+                setfileIDList((fileIDList) => [...fileIDList, 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)));
+    };
+    // 上传组件属性
+    const uploadProps = {
+        multiple: !single,
+    };
+    tips && (uploadProps['label'] = tips);
+    maxSizeLimit && (uploadProps['maxSize'] = maxSizeLimit * 1024 * 1024);
+    const btnDisabled = React.useMemo(() => {
+        return (fileIDList.length >= maxUploadCount ||
+            (single && fileIDList.length > 0) ||
+            fileList.length >= maxUploadCount ||
+            (single && fileList.length > 0) ||
+            disabled);
+    }, [disabled, fileIDList.length, fileList.length, maxUploadCount, single]);
+    return renderDecorator(_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx(FileContext.Provider, { value: {
+                uploadPath,
+                downloadVisible,
+                deleteVisible,
+                onChange: handleChange,
+                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 ? (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个`);
+                                                    return false;
+                                                }
+                                                if (fileList.length + fileIDList.length >
+                                                    maxUploadCount) {
+                                                    weui.alert(`上传文件总数不能超过${maxUploadCount}个`);
+                                                    return false;
+                                                }
+                                                if (maxSizeLimit &&
+                                                    fileList.some((f) => f.size > maxSizeLimit * 1024 * 1024)) {
+                                                    weui.alert(`请上传不超过${maxSizeLimit}M的文件`);
+                                                    return false;
+                                                }
+                                                if (fileList.some((f) => f.size > 1024 * 1024 * 1024)) {
+                                                    weui.alert(`请上传不超过1024M的文件`);
+                                                    return false;
+                                                }
+                                                fileList.forEach((f) => (f['_uuid'] = randomStr()));
+                                                setFileList((list) => [...list, ...fileList]);
+                                            } }), _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,
+        label: labelVisible ? label : null,
+        layout,
+        multiCell: false,
+        requiredFlag,
+    });
+}
+/**
+ * 基于 FileID 文件回显组件
+ */
+const TcbFileEcho = ({ fileID, disabled, formType }) => {
+    var _a, _b;
+    const { fileSizeObj } = React.useContext(FileContext) || {};
+    const { data: src, error } = useTempUrl(fileID);
+    if (error) {
+        (_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',
+        });
+    }
+    //上传文件名称
+    const label = React.useMemo(() => {
+        if (isCloudFileID(fileID)) {
+            return transFileCloudidToName(fileID);
+        }
+        else {
+            return fileID;
+        }
+    }, [fileID]);
+    //上传文件列表展示
+    return (_jsxs("div", { className: `${CLASS_PREFIX}__item`, children: [_jsx("div", { className: `${CLASS_PREFIX}__item-left`, children: _jsx(UploadFileStatus, { title: label, size: fileSizeObj[fileID] || '-', formType: formType }) }), _jsx("div", { className: `${CLASS_PREFIX}__btn-group`, children: _jsx(UploadFileAction, { title: label, disabled: disabled, status: "UPLOAD_STATUS_SUCCESS", fileID: fileID, src: src }) })] }));
+};
+/**
+ * 基于 File 上传文件过程组件
+ */
+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 cancelRef = React.useRef(''); // 取消的uuid
+    // 上传文件相关属性
+    const { size, title, uuid } = React.useMemo(() => {
+        const size = transSize(file === null || file === void 0 ? void 0 : file.size);
+        const title = (file === null || file === void 0 ? void 0 : file.name) || '';
+        const uuid = file === null || file === void 0 ? void 0 : file._uuid;
+        return { size, title, uuid };
+    }, [file === null || file === void 0 ? void 0 : file._uuid]);
+    React.useEffect(() => {
+        handleUpload(file);
+    }, [file === null || file === void 0 ? void 0 : file._uuid]);
+    // 上传过程
+    const handleUpload = async (file) => {
+        var _a;
+        const tcb = await getCloudInstance();
+        try {
+            setStatus('UPLOAD_STATUS_PENDING');
+            const { fileID } = await tcb.uploadFile({
+                cloudPath: `${uploadPath}/${randomStr()}-${file === null || file === void 0 ? void 0 : file.name}`,
+                filePath: file,
+                onUploadProgress: (progressEvent) => {
+                    let percent = 0;
+                    percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+                    setStatus('UPLOAD_STATUS_LOADING');
+                    setPercent(percent < 100 ? percent : 100);
+                },
+            });
+            !cancelRef.current && (onChange === null || onChange === void 0 ? void 0 : onChange({ fileID, type: 'add', uuid, size }));
+            setStatus('UPLOAD_STATUS_SUCCESS');
+        }
+        catch (err) {
+            setStatus('UPLOAD_STATUS_ERROR');
+            (_a = events === null || events === void 0 ? void 0 : events.error) === null || _a === void 0 ? void 0 : _a.call(events, err);
+        }
+    };
+    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) => {
+                        cancelRef.current = uuid;
+                        onChange === null || onChange === void 0 ? void 0 : onChange({ type: 'delete', uuid });
+                    }, onReLoad: handleUpload, disabled: disabled, readOnly: formType === 'read' }) })] }));
+};
+/**
+ * 上传文件状态组件
+ */
+const UploadFileStatus = ({ status = 'UPLOAD_STATUS_SUCCESS', percent = 0, size, title = null, percentSize = 0, formType, }) => {
+    var _a, _b;
+    const { isEdit } = React.useContext(FileContext) || {};
+    //上传中、待上传状态
+    if (status == 'UPLOAD_STATUS_LOADING' ||
+        (status == 'UPLOAD_STATUS_PENDING' && percent)) {
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: `${CLASS_PREFIX}__file-detail`, children: _jsx(Text, { className: `${CLASS_PREFIX}__file-name`, children: title }) }), _jsx("div", { children: _jsx(Progress, { percent: percent, theme: "default", strokeColor: '#0052D9', className: `${CLASS_PREFIX}__file-progress` }) }), _jsxs("div", { className: `${CLASS_PREFIX}__file-foot`, children: [formType !== 'read' && (_jsxs("div", { children: [_jsxs(Text, { children: [Math.floor(percentSize), "K/"] }), _jsx(Text, { children: size })] })), _jsx(Text, { children: status === 'UPLOAD_STATUS_PENDING' ? '等待上传' : '上传中' })] })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: `${CLASS_PREFIX}__file-detail`, children: _jsx(Tooltip, { title: title, children: _jsx(Text, { className: `${CLASS_PREFIX}__file-name`, children: title }) }) }), isEdit && (_jsxs("div", { className: `${CLASS_PREFIX}__file-foot`, children: [formType !== 'read' && (_jsx("div", { children: _jsx(Text, { children: size }) })), isEdit && (_jsxs("div", { className: `${CLASS_PREFIX}__file-status`, children: [_jsx(Icon, { type: ((_a = statusMap[status]) === null || _a === void 0 ? void 0 : _a.icon) ||
+                                    statusMap['UPLOAD_STATUS_PENDING'].icon }), _jsx(Text, { className: `${CLASS_PREFIX}__file-status--msg`, children: ((_b = statusMap[status]) === null || _b === void 0 ? void 0 : _b.title) ||
+                                    statusMap['UPLOAD_STATUS_PENDING'].title })] }))] }))] }));
+};
+/**
+ * 操作列组件, onChange 从最外层 UploadFilePc 传进来
+ * props: { status, fileID, uuid, src, onChange }
+ */
+const UploadFileAction = ({ status = 'UPLOAD_STATUS_PENDING', fileID = '', uuid = '', src = '', file = null, onReLoad = null, onCancel = null, disabled, title = 'downfile', }) => {
+    const { onChange, downloadVisible, deleteVisible, isEdit } = React.useContext(FileContext) || {};
+    // 操作列按钮-删除
+    const renderDelete = () => isEdit && (_jsx(Button, { icon: "delete", onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange({ fileID, uuid, type: 'delete' }), disabled: disabled }));
+    // 操作列按钮-取消
+    const renderCancel = () => isEdit && _jsx(Button, { icon: "dismiss", onClick: () => onCancel === null || onCancel === void 0 ? void 0 : onCancel(uuid) });
+    // 操作列按钮-重新上传
+    const renderReLoad = () => isEdit && (_jsx(Button, { icon: "refresh", onClick: () => {
+            onReLoad === null || onReLoad === void 0 ? void 0 : onReLoad(file);
+        } }));
+    // 操作列按钮-下载
+    const renderDownLoad = () => (_jsx(Button, { icon: "download", onClick: () => downloadFile(src, title) }));
+    switch (status) {
+        case 'UPLOAD_STATUS_PENDING':
+            return renderCancel();
+        case 'UPLOAD_STATUS_LOADING':
+            return renderCancel();
+        case 'UPLOAD_STATUS_SUCCESS':
+            return (_jsxs(_Fragment, { children: [deleteVisible && renderDelete(), ' ', downloadVisible && !isWebInMiniprogram() && renderDownLoad()] }));
+        case 'UPLOAD_STATUS_ERROR':
+            return (_jsxs(_Fragment, { children: [deleteVisible && renderDelete(), " ", renderReLoad()] }));
+        default:
+            return null;
+    }
+};

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

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import type { CommonFormPropsType } from '../types';
+import type { unknownFunction } from '../../../types';
+/**
+ * 上传文件 PC 版本
+ */
+export declare function UploadFilePc({ layout, id, style, labelVisible, label, requiredFlag, disabled, className, events, decorator, tips, btnTitle, maxUploadCount, maxSize, single, defaultValue, // 组件默认初始化值
+value, // 用于模型组件中 formily 的值管理
+acceptTypes, downloadVisible, deleteVisible, uploadPath, onChange, isEdit, $node, readOnly, }: IUploaderFilePc): JSX.Element;
+export interface IUploaderFilePc extends CommonFormPropsType {
+    btnTitle?: string;
+    maxUploadCount?: number;
+    downloadVisible?: boolean;
+    deleteVisible?: boolean;
+    defaultValue?: Readonly<string | string[]>;
+    maxSize?: number;
+    single?: boolean;
+    acceptTypes?: Readonly<string[]>;
+    tips?: string;
+    value?: Readonly<string | string[]>;
+    uploadPath?: string;
+    isEdit?: boolean;
+    onChange?: unknownFunction;
+    readOnly?: boolean;
+}
+export interface IUploadFileAction {
+    status?: string;
+    fileID?: string;
+    uuid?: string;
+    src?: string;
+    file?: any;
+    onReLoad?: any;
+    onCancel?: any;
+    disabled: boolean;
+    title?: string;
+    readOnly?: boolean;
+}

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

@@ -0,0 +1,266 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { Upload, ConfigProvider, Button, Icon, Text, List, } from 'tea-component';
+import { filterStrList, isCloudFileID, isHttpFileID, transSize, downloadFile, cutFileTitle, transFileCloudidToName, randomStr, isInIde, isWebInMiniprogram, } from '../../../utils/platform';
+import { getCloudInstance } from '../../../utils/tcb';
+import classNames from '../../../utils/classnames';
+import { renderDecorator } from '../renderDecorator';
+import isObjectEqual from '../../../utils/isObjectEqual';
+import { emptyArray, emptyObject } from '../../../utils/constant';
+import { useTempUrl } from '../../../utils/hooks/use-cloud-id-temp-url';
+import { getParentForm } from '../../../utils/widget-api';
+// 默认组件类前缀
+const CLASS_PREFIX = 'weda-upload-file-pc';
+// 上传状态字典
+const statusMap = {
+    0: { title: '待上传', icon: 'pending-gray' },
+    1: { title: '上传 ...', icon: 'loading' },
+    2: { title: '上传成功', icon: 'success' },
+    3: { title: '上传失败', icon: 'error' },
+};
+// 上传文件Context
+const FileContext = React.createContext(null);
+/**
+ * 上传文件 PC 版本
+ */
+export function UploadFilePc({ 
+// 系统属性
+layout, id = '', style, labelVisible = true, label = '上传文件', requiredFlag = false, disabled = false, className = '', events = emptyObject, 
+// 组件属性
+decorator, tips = '', btnTitle = '点击上传', maxUploadCount = 9, maxSize = 1024, single = true, defaultValue = emptyArray, // 组件默认初始化值
+value = emptyArray, // 用于模型组件中 formily 的值管理
+acceptTypes = emptyArray, downloadVisible = true, deleteVisible = true, uploadPath = 'weda-uploader', onChange = null, isEdit = true, $node, readOnly, }) {
+    var _a;
+    const [fileIDList, setfileIDList] = React.useState(() => {
+        let defaultVal = defaultValue;
+        let val = value;
+        if (!Array.isArray(defaultVal)) {
+            defaultVal = [defaultValue];
+        }
+        if (!Array.isArray(val)) {
+            val = [val];
+        }
+        return isInIde() ? [] : filterStrList([].concat(defaultValue, value));
+    }); // 上传成功文件ID列表，fileID[]
+    const [fileList, setFileList] = React.useState([]); // 上传中的文件列表，file[]，file为原始文件 + uuid属性
+    const [fileSizeObj, setFileSizeObj] = React.useState({}); // 管理上传文件大小 {uuid:size}
+    // 两次默认值不同, 需要刷新
+    const prevDefaultRef = React.useRef([]);
+    const fileRef = React.useRef(fileIDList);
+    const maxSizeLimit = maxSize > 500 ? 500 : maxSize;
+    const formType = ((_a = getParentForm($node)) === null || _a === void 0 ? void 0 : _a.formType) || 'create';
+    const changeTypeRef = React.useRef('');
+    React.useEffect(() => {
+        //有有效默认值时不刷新，解决初次渲染默认值不显示问题
+        if (!isInIde() && !isObjectEqual(prevDefaultRef.current, defaultValue)) {
+            prevDefaultRef.current = defaultValue;
+            setfileIDList(filterStrList([].concat(Array.isArray(defaultValue) ? defaultValue : [defaultValue])));
+        }
+    }, [defaultValue]);
+    React.useEffect(() => {
+        var _a, _b;
+        if (isObjectEqual(fileRef.current, fileIDList))
+            return;
+        // 外部 onChange 事件
+        const pureFileIDList = fileIDList.filter((d) => isCloudFileID(d) || isHttpFileID(d));
+        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 });
+        if (changeTypeRef.current === 'add') {
+            (_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]);
+    // 外层组件类
+    const cls = classNames({
+        'weda-ui': true,
+        [className]: className,
+    });
+    // 批量上传文件前置事件
+    const handleBefore = (file, fileList, isAccepted, error) => {
+        var _a, _b, _c, _d;
+        if (fileList.length + fileIDList.length > maxUploadCount) {
+            (_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: `上传文件总数不能超过${maxUploadCount}个`,
+                icon: 'error',
+            });
+            return false;
+        }
+        if (!isAccepted) {
+            try {
+                const errorList = [];
+                if (error.find((item) => (item === null || item === void 0 ? void 0 : item.code) === 'file-invalid-type')) {
+                    errorList.push('上传文件类型错误');
+                }
+                if (error.find((item) => (item === null || item === void 0 ? void 0 : item.code) === 'file-too-large')) {
+                    errorList.push(`上传文件大小不能超过${maxSizeLimit}M`);
+                }
+                (_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: errorList.join(', '),
+                    icon: 'error',
+                });
+            }
+            catch (e) { }
+            return false;
+        }
+        file['_uuid'] = randomStr();
+        setFileList((list) => [...list, file]);
+        return false;
+    };
+    // 上传后文件列表 fileIDList 改变事件，'add'|'delete'
+    const handleChange = ({ fileID, uuid, type, size }) => {
+        if (fileID) {
+            changeTypeRef.current = type;
+            if (type === 'add') {
+                setFileSizeObj((obj) => ({ ...obj, [fileID]: size }));
+                setfileIDList((list) => [...list, fileID]);
+            }
+            else {
+                setfileIDList((list) => list.filter((d) => d !== fileID));
+            }
+        }
+        uuid && setFileList((list) => list.filter((item) => uuid !== (item === null || item === void 0 ? void 0 : item._uuid)));
+    };
+    // 上传组件属性
+    const uploadProps = { multiple: !single };
+    if (!(!(acceptTypes === null || acceptTypes === void 0 ? void 0 : acceptTypes.length) ||
+        (acceptTypes === null || acceptTypes === void 0 ? void 0 : acceptTypes.includes('*')) ||
+        (acceptTypes === null || acceptTypes === void 0 ? void 0 : acceptTypes.includes('')))) {
+        uploadProps['accept'] = Array.from(new Set(acceptTypes));
+    }
+    tips && (uploadProps['title'] = tips);
+    maxSize && (uploadProps['maxSize'] = maxSizeLimit * 1024 * 1024);
+    const btnDisabled = React.useMemo(() => {
+        fileList;
+        return (fileIDList.length >= maxUploadCount ||
+            (single && fileIDList.length > 0) ||
+            fileList.length >= maxUploadCount ||
+            (single && fileList.length > 0) ||
+            disabled ||
+            readOnly);
+    }, [disabled, fileIDList.length, fileList, maxUploadCount, single, readOnly]);
+    return renderDecorator(_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx(FileContext.Provider, { value: {
+                uploadPath,
+                downloadVisible,
+                deleteVisible,
+                onChange: handleChange,
+                isEdit,
+                events,
+                fileSizeObj,
+            }, "data-testid": "button-up", children: _jsxs("div", { className: `${CLASS_PREFIX}`, "data-testid": "UploadFilePc", children: [isEdit && (_jsx("div", { className: `${CLASS_PREFIX}__input-box`, children: btnDisabled ? (readOnly ? null : (_jsx(Button, { type: "weak", disabled: true, children: btnTitle }))) : (_jsxs(Upload, { ...uploadProps, beforeUpload: handleBefore, "data-testid": "Upload", children: [_jsx(Button, { type: "weak", className: `${CLASS_PREFIX}__btn--weak`, children: btnTitle }), !single && (_jsx(Text, { theme: "weak", className: `${CLASS_PREFIX}__btn-descripe`, children: "\u652F\u6301\u6279\u91CF\u4E0A\u4F20" }))] })) })), _jsxs(List, { split: "divide", children: [_jsx(List.Item, { children: _jsxs("div", { className: `${CLASS_PREFIX}--item ${CLASS_PREFIX}--item-header`, children: [_jsx("div", { className: `${CLASS_PREFIX}--item-title ${CLASS_PREFIX}--item-label`, children: "\u6587\u4EF6\u540D" }), formType !== 'read' && (_jsx("div", { className: `${CLASS_PREFIX}--item-size ${CLASS_PREFIX}--item-label`, children: "\u5927\u5C0F" })), _jsx("div", { className: `${CLASS_PREFIX}--item-status ${CLASS_PREFIX}--item-label`, children: "\u72B6\u6001" }), _jsx("div", { className: `${CLASS_PREFIX}--item-action`, children: "\u64CD\u4F5C" })] }) }), fileIDList.map((d) => (_jsx(List.Item, { children: _jsx(TcbFileEcho, { disabled: disabled, fileID: d, formType: formType }) }, d))), fileList.map((item) => (_jsx(List.Item, { children: _jsx(TcbFileUpload, { disabled: disabled, file: item, formType: formType }) }, item === null || item === void 0 ? void 0 : item._uuid))), !readOnly &&
+                                isEdit &&
+                                fileIDList.length === 0 &&
+                                fileList.length === 0 && (_jsx(List.Item, { className: `${CLASS_PREFIX}--item-empty`, children: _jsxs("div", { className: `${CLASS_PREFIX}--item`, children: ["\u70B9\u51FB\u4E0A\u65B9\u201C", btnTitle, "\u201D\u6309\u94AE"] }) }))] })] }) }) }), decorator)({
+        id,
+        className: cls,
+        style,
+        label: labelVisible ? label : null,
+        layout,
+        multiCell: false,
+        requiredFlag,
+    });
+}
+/**
+ * 基于 FileID 回显文件表格行组件
+ */
+const TcbFileEcho = ({ fileID, disabled, formType, readOnly, }) => {
+    const { fileSizeObj } = React.useContext(FileContext) || {};
+    const { data: src } = useTempUrl(fileID);
+    const title = React.useMemo(() => {
+        if (isCloudFileID(fileID)) {
+            return transFileCloudidToName(fileID);
+        }
+        else {
+            return fileID;
+        }
+    }, [fileID]);
+    return (_jsxs("div", { className: `${CLASS_PREFIX}--item ${CLASS_PREFIX}--item-body`, children: [_jsx("div", { className: `${CLASS_PREFIX}--item-title`, title: title, children: cutFileTitle(title) }), formType !== 'read' && (_jsx("div", { className: `${CLASS_PREFIX}--item-size`, children: fileSizeObj[fileID] || '--' })), _jsx("div", { className: `${CLASS_PREFIX}--item-status`, children: _jsx(UploadFileStatus, {}) }), _jsx("div", { className: `${CLASS_PREFIX}--item-action`, children: _jsx(UploadFileAction, { title: title, disabled: disabled, status: "2", fileID: fileID, src: src, readOnly: readOnly }) })] }));
+};
+/**
+ * 基于 File 上传文件过程表格行组件
+ */
+const TcbFileUpload = ({ file, disabled, formType }) => {
+    const { uploadPath, onChange, events } = React.useContext(FileContext) || {};
+    const [percent, setPercent] = React.useState(0); // 上传进度
+    const [status, setStatus] = React.useState('0'); // 上传状态
+    const cancelRef = React.useRef(''); // 取消的uuid
+    // 上传文件相关属性
+    const { size, title, uuid } = React.useMemo(() => {
+        const size = transSize(file === null || file === void 0 ? void 0 : file.size);
+        const title = (file === null || file === void 0 ? void 0 : file.name) || '';
+        const uuid = file === null || file === void 0 ? void 0 : file._uuid;
+        return { size, title, uuid };
+    }, [file === null || file === void 0 ? void 0 : file._uuid]);
+    React.useEffect(() => {
+        handleUpload(file);
+    }, [file === null || file === void 0 ? void 0 : file._uuid]);
+    // 上传过程
+    const handleUpload = async (file) => {
+        const tcb = await getCloudInstance();
+        try {
+            setStatus('0');
+            const { fileID } = await tcb.uploadFile({
+                cloudPath: `${uploadPath}/${randomStr()}-${file === null || file === void 0 ? void 0 : file.name}`,
+                filePath: file,
+                onUploadProgress: (progressEvent) => {
+                    let percent = 0;
+                    percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+                    setStatus('1');
+                    setPercent(percent < 100 ? percent : 100);
+                },
+            });
+            !cancelRef.current && (onChange === null || onChange === void 0 ? void 0 : onChange({ fileID, type: 'add', uuid, size }));
+            setStatus('2');
+        }
+        catch (e) {
+            setStatus('3');
+            events.error && events.error(e);
+        }
+    };
+    return (_jsxs("div", { className: `${CLASS_PREFIX}--item ${CLASS_PREFIX}--item-body`, children: [_jsx("div", { className: `${CLASS_PREFIX}--item-title`, title: title, children: cutFileTitle(title) }), formType !== 'read' && (_jsx("div", { className: `${CLASS_PREFIX}--item-size`, children: size })), _jsx("div", { className: `${CLASS_PREFIX}--item-status`, children: _jsx(UploadFileStatus, { status: status, percent: percent }) }), _jsx("div", { className: `${CLASS_PREFIX}--item-action`, children: _jsx(UploadFileAction, { file: file, uuid: file === null || file === void 0 ? void 0 : file._uuid, status: status, onCancel: (uuid) => {
+                        cancelRef.current = uuid;
+                        onChange === null || onChange === void 0 ? void 0 : onChange({ type: 'delete', uuid });
+                    }, disabled: disabled, onReLoad: handleUpload, readOnly: formType === 'read' }) })] }));
+};
+/**
+ * 上传文件状态组件
+ */
+const UploadFileStatus = ({ status = '2', percent = 0 }) => {
+    var _a, _b;
+    if (status == '1' && percent) {
+        return (_jsxs(_Fragment, { children: [_jsx(Icon, { type: "loading" }), "\u4E0A\u4F20", percent, "% ..."] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Icon, { type: ((_a = statusMap[status]) === null || _a === void 0 ? void 0 : _a.icon) || statusMap['0'].icon }), ((_b = statusMap[status]) === null || _b === void 0 ? void 0 : _b.title) || statusMap['0'].title] }));
+};
+/**
+ * 操作列组件, onChange 从最外层 UploadFilePc 传进来
+ * props: { status, fileID, uuid, src, onChange }
+ */
+const UploadFileAction = ({ title = 'downfile', status = '0', fileID = '', uuid = '', src = '', file = null, onReLoad = null, onCancel = null, disabled, readOnly, }) => {
+    const { onChange, downloadVisible, deleteVisible, isEdit } = React.useContext(FileContext) || {};
+    // 操作列按钮-删除
+    const renderDelete = () => isEdit &&
+        deleteVisible &&
+        !readOnly && (_jsx(Button, { type: "link", disabled: disabled, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange({ fileID, uuid, type: 'delete' }), children: "\u5220\u9664" }));
+    // 操作列按钮-取消
+    const renderCancel = () => isEdit && (_jsx(Button, { onClick: () => onCancel === null || onCancel === void 0 ? void 0 : onCancel(uuid), type: "link", children: "\u53D6\u6D88" }));
+    // 操作列按钮-重新上传
+    const renderReLoad = () => isEdit && (_jsx(Button, { type: "link", onClick: () => {
+            onReLoad === null || onReLoad === void 0 ? void 0 : onReLoad(file);
+        }, children: "\u91CD\u65B0\u4E0A\u4F20" }));
+    // 操作列按钮-下载
+    const renderDownLoad = () => downloadVisible &&
+        !isWebInMiniprogram() && (_jsx(Button, { type: "link", title: "\u70B9\u51FB\u4E0B\u8F7D\u6587\u4EF6", onClick: () => downloadFile(src, title), children: "\u4E0B\u8F7D" }));
+    switch (status) {
+        case '0':
+            return renderCancel();
+        case '1':
+            return renderCancel();
+        case '2':
+            return (_jsxs(_Fragment, { children: [renderDelete(), renderDownLoad()] }));
+        case '3':
+            return (_jsxs(_Fragment, { children: [renderDelete(), renderReLoad()] }));
+        default:
+            return null;
+    }
+};