@cloudbase/weda-ui 3.16.0 → 3.17.0

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

@@ -5,7 +5,7 @@ export declare const IMAGE_TYPES: string[];
 interface TempFileProps {
     progress?: number;
     loading?: boolean;
-    realUrl?: string;
+    cloudId?: string;
     tempUrl?: string;
     key?: string;
 }

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

@@ -1,14 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
-import { Upload, Icon, ErrorTip, ConfigProvider } from 'tea-component';
+import { Icon, ErrorTip, ConfigProvider } from 'tea-component';
 import { useTempUrl } from '../../../utils/hooks/use-cloud-id-temp-url';
-import { toBase64Uri } from '../../../utils/file2base64';
-import { isNil } from '../../../utils/lodash';
 import { errorHandler } from '../../../utils/error';
-import { alertErrorMessage } from '../../../utils/platform';
 import { WdIcon } from '../../wd-icon';
-import { useUploader } from './useUploadFile';
 import { ImagePreview } from '../../wd-image/ImagePreview';
+import { Upload } from './upload';
 // 默认组件类前缀
 export const CLASS_PREFIX = 'weda-uploader-pc';
 // 默认图片类型
@@ -22,117 +19,50 @@ export const IMAGE_TYPES = [
     'image/gif',
 ];
 export function UploaderPCInner(props) {
-    const { tips = '', btnTitle = '上传图片', maxUploadCount = 9, maxSize = 10, acceptTypes = IMAGE_TYPES, events, single = false, disabled = false, onChange, imgTypeCls, readOnly, sourceType, callbacks, popupContainer: portalContainer, } = props;
-    const { tempFile, uploading, upload, getTempFile } = useUploader(props);
-    const handleChange = (allFile = [], isDelete = false) => {
-        var _a;
-        const value = getTempFile(allFile);
-        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, isDelete });
-    };
-    // 方法：上传前，判断图片大小、数量是否满足，取消默认组件的上传事件，用自定义的 tcb 上传方法
-    const beforeHandle = async (file, fileList, isAccepted, error) => {
-        const finalMaxImgCount = single ? 1 : maxUploadCount;
-        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(`上传图片大小不能超过${maxSize}M`);
-                }
-                alertErrorMessage({
-                    message: errorList.join(', '),
-                    icon: 'error',
-                });
-            }
-            catch (e) {
-                errorHandler({
-                    code: 'BEFORE_UPLOAD_ERROR',
-                    error: e,
-                });
-            }
-            return Promise.reject(false);
-        }
-        const ids = fileList.filter((f) => !!f.id);
-        if (ids.length < fileList.length)
-            return Promise.reject(false);
-        if (fileList.length > finalMaxImgCount) {
-            // 防止一下子选择过多文件
-            alertErrorMessage({
-                message: `最多只能上传${finalMaxImgCount}张图片，请重新选择`,
-                icon: 'error',
-            });
-            return Promise.reject(false);
-        }
-        if (tempFile.length + fileList.length > finalMaxImgCount) {
-            alertErrorMessage({
-                message: `最多只能上传${finalMaxImgCount}张图片`,
-                icon: 'error',
-            });
-            return Promise.reject(false);
-        }
-        let shouldUploadToCos = true;
-        if (typeof (callbacks === null || callbacks === void 0 ? void 0 : callbacks.beforeUpload) === 'function') {
-            try {
-                const base64Uri = await Promise.all(fileList.map((file) => toBase64Uri(file)));
-                const ret = await callbacks.beforeUpload({
-                    files: fileList,
-                    base64Uri,
-                });
-                if (typeof ret === 'boolean') {
-                    shouldUploadToCos = ret;
-                }
-                else if (Array.isArray(ret) && ret.every((item) => item instanceof File)) {
-                    fileList = ret;
-                }
-                else if (!isNil(ret)) {
-                    throw new TypeError('web端返回值接受布尔值 / File对象数组');
-                }
-            }
-            catch (err) {
-                errorHandler({
-                    code: 'BEFORE_UPLOAD_ERROR',
-                    error: err,
-                });
-                shouldUploadToCos = false;
-            }
-        }
-        if (shouldUploadToCos === false) {
-            return Promise.reject(false);
+    const { tips = '', btnTitle = '上传图片', maxUploadCount = 9, maxSize = 10, acceptTypes = IMAGE_TYPES, single = false, disabled = false, imgTypeCls, readOnly, sourceType, popupContainer: portalContainer, defaultValue, setUploadHandle: outSetUploadHandle, } = props;
+    const uploadRef = React.useRef(null);
+    const [uploadHandle, setUploadHandle] = React.useState({});
+    const tempFile = React.useMemo(() => (uploadHandle === null || uploadHandle === void 0 ? void 0 : uploadHandle.previewFile) || [], [uploadHandle === null || uploadHandle === void 0 ? void 0 : uploadHandle.previewFile]);
+    const uploading = tempFile === null || tempFile === void 0 ? void 0 : tempFile.some((i) => i.loading);
+    const setUploadRef = React.useCallback((uploadHandle) => {
+        setUploadHandle(uploadHandle);
+        // 设置最外层组件方法
+        // 兼容云后台数据库中使用uploader组件，未传outSetUploadHandle
+        if (outSetUploadHandle) {
+            outSetUploadHandle(uploadHandle);
         }
-        const allFile = await upload(fileList);
-        handleChange(allFile);
-    };
+    }, [outSetUploadHandle]);
     // 删除图片
-    const deleteHandle = (fileItem) => {
-        const fileList = tempFile.filter((d) => d.key !== fileItem.key);
-        handleChange(fileList, true);
+    const deleteHandle = (file) => {
+        var _a;
+        (_a = uploadRef === null || uploadRef === void 0 ? void 0 : uploadRef.current) === null || _a === void 0 ? void 0 : _a.delete({ cloudId: file.cloudId });
     };
     // 转换后的属性
-    const extraProps = {};
+    const extraProps = { ...props };
     //是否支持多选
     extraProps['multiple'] = !single;
     extraProps['accept'] = acceptTypes.length === 0 ? IMAGE_TYPES : Array.from(new Set(acceptTypes));
     tips && (extraProps['title'] = tips);
     maxSize && (extraProps['maxSize'] = maxSize * 1024 * 1024);
     const hasActions = !uploading && !readOnly && !(disabled || sourceType === 'camera');
-    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsxs("div", { className: "_weda-fn-upload-result", children: [tempFile === null || tempFile === void 0 ? void 0 : tempFile.map((d, index) => (_jsx("div", { className: `_weda-fn-upload-result__item ${imgTypeCls}`, children: _jsx(TcbImage, { index: index, allFile: tempFile, tempFile: d, imgTypeCls: imgTypeCls, isZoom: true, previewIcon: "td:browse", portalContainer: portalContainer, actions: hasActions && (_jsx(WdIcon, { className: `${CLASS_PREFIX}__image-actions-delete`, name: "td:delete", onClick: () => deleteHandle(d), size: "sm" })) }) }, d.key))), _jsxs("div", { className: `${CLASS_PREFIX}__input-box`, children: [readOnly && tempFile.length < 1 && _jsx("div", { children: "-" }), sourceType === 'camera' || (disabled && !readOnly) ? (_jsx("div", { className: `_weda-fn-upload-result__item wedatea2td-disabled weda-uploader-btn__box ${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 && tempFile.length < maxUploadCount) || (single && tempFile.length < 1 && !uploading)) &&
-                            !readOnly && (
-                        // single 模式时，当数组为空且不在上传文件过程中时显示
-                        _jsx(Upload, { ...extraProps, beforeUpload: beforeHandle, children: _jsxs("div", { 
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx(Upload, { ...extraProps, ref: uploadRef, value: defaultValue, setUploadHandle: setUploadRef, children: _jsxs("div", { className: "_weda-fn-upload-result", children: [tempFile === null || tempFile === void 0 ? void 0 : tempFile.map((d, index) => (_jsx("div", { className: `_weda-fn-upload-result__item ${imgTypeCls}`, children: _jsx(TcbImage, { index: index, allFile: tempFile, tempFile: d, imgTypeCls: imgTypeCls, isZoom: true, previewIcon: "td:browse", portalContainer: portalContainer, actions: hasActions && (_jsx(WdIcon, { className: `${CLASS_PREFIX}__image-actions-delete`, name: "td:delete", onClick: () => deleteHandle(d), size: "sm" })) }) }, d.cloudId))), _jsxs("div", { className: `${CLASS_PREFIX}__input-box`, children: [readOnly && tempFile.length < 1 && _jsx("div", { children: "-" }), sourceType === 'camera' || (disabled && !readOnly) ? (_jsx("div", { className: `_weda-fn-upload-result__item wedatea2td-disabled weda-uploader-btn__box ${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 && tempFile.length < maxUploadCount) || (single && tempFile.length < 1 && !uploading)) &&
+                                !readOnly && (
+                            // single 模式时，当数组为空且不在上传文件过程中时显示
+                            _jsxs("div", { 
                                 // className={"_weda-fn-upload-result__item _weda-fn-upload-result__item--upload" imgTypeCls}
                                 // className={classNames(
                                 //   `_weda-fn-upload-result__item _weda-fn-upload-result__item--upload`,
                                 //   imgTypeCls
                                 // )}
-                                className: `_weda-fn-upload-result__item weda-uploader-btn__box _weda-fn-upload-result__item--upload ${imgTypeCls}`, children: [imgTypeCls, _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 })] })] }) })))] })] }) }));
+                                className: `_weda-fn-upload-result__item weda-uploader-btn__box _weda-fn-upload-result__item--upload ${imgTypeCls}`, onClick: () => {
+                                    var _a;
+                                    (_a = uploadRef === null || uploadRef === void 0 ? void 0 : uploadRef.current) === null || _a === void 0 ? void 0 : _a.upload();
+                                }, children: [imgTypeCls, _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 })] })] })))] })] }) }) }));
 }
 export const TcbImage = (props) => {
-    const { fileID, tempFile = { progress: 100, loading: false, realUrl: null, tempUrl: null }, isZoom, imgTypeCls, previewIcon, actions, allFile = [], index, portalContainer, ...rest } = props;
-    const { progress, loading, realUrl, tempUrl } = tempFile;
-    const fileCloudID = (realUrl !== null && realUrl !== void 0 ? realUrl : tempUrl) || fileID;
+    const { fileID, tempFile = { progress: 100, loading: false, cloudId: null, tempUrl: null }, isZoom, imgTypeCls, previewIcon, actions, allFile = [], index, portalContainer, ...rest } = props;
+    const { progress, loading, cloudId, tempUrl } = tempFile;
+    const fileCloudID = (cloudId !== null && cloudId !== void 0 ? cloudId : tempUrl) || fileID;
     const [isError, setIsError] = React.useState(false);
     const { data: src, error: requestError } = useTempUrl(fileCloudID);
     const encodeSrc = encodeConvert(src);
@@ -152,7 +82,7 @@ export const TcbImage = (props) => {
     };
     if (!isZoom)
         return renderImg();
-    const previewImageList = allFile.map((i) => i.realUrl || i.tempUrl);
+    const previewImageList = allFile.map((i) => i.cloudId || i.tempUrl);
     const previewProps = {
         index,
         'data-testid': 'uploaderpc_imgStyle',

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

@@ -1,4 +1,20 @@
+import { TempFileProps } from './upload/index';
+export declare const DEFAULT_UPLOAD_PATH = "weda-uploader";
 export declare const getBase64: (files: any) => Promise<any[]>;
 export declare const uploadTcbMulti: (files: any, props: any) => Promise<any[]>;
 export declare const filenameRegex: RegExp;
 export declare const checkAcceptedFiles: (file: any, acceptedFiles: any) => any;
+export declare const checkBeforeUpload: ({ tempFile, files, accepts, maxSize, maxUploadCount }: {
+    tempFile: any;
+    files: any;
+    accepts: any;
+    maxSize: any;
+    maxUploadCount: any;
+}) => boolean;
+export declare const getPreviewFileMap: (previewFile: any) => any;
+export declare const getInitTempFile: ({ value }: {
+    value?: any;
+}) => TempFileProps[];
+export declare const CLASS_PREFIX = "weda-uploader-pc";
+export declare const IMAGE_TYPES: string[];
+export declare const upload: (fileList: any, uploadInstance: any, allTempFile: any) => Promise<void>;

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

@@ -1,8 +1,9 @@
 import { compressImage } from './compress';
 import { getCloudInstance, getDefaultUploadPath } from '../../../utils/tcb';
 import { toBase64Uri } from '../../../utils/file2base64';
-import { randomStr } from '../../../utils/platform';
+import { randomStr, alertErrorMessage } from '../../../utils/platform';
 import { errorHandler } from '../../../utils/error';
+export const DEFAULT_UPLOAD_PATH = 'weda-uploader';
 export const getBase64 = (files) => {
     return Promise.all(files.map(async (item) => {
         let tempUrl = '';
@@ -35,13 +36,29 @@ export const uploadTcbMulti = async (files, props) => {
     return result;
 };
 export const filenameRegex = /[^a-zA-Z0-9\u4e00-\u9fff-*!_.]/g;
+const sanitizeFilename = (filename, replacement = '') => {
+    return (filename
+        // 移除非法字符
+        // eslint-disable-next-line no-control-regex
+        .replace(/[<>.:"\\|?*\x00-\x1F]/g, replacement)
+        // 处理Windows保留文件名（CON, PRN等）
+        .replace(/^(CON|PRN|AUX|NUL|COM[1-9]|LPT[1-9])(\..*)?$/i, replacement)
+        // 移除开头和结尾的点,空格,反斜杠（Windows不允许）
+        .replace(/^[. /]+/, '')
+        .replace(/[. /]+$/, '')
+        // 可选：限制长度
+        .slice(0, 255));
+};
 const uploadToTcb = async (item, props) => {
     var _a;
-    const { onUploadProgress, onUploadFinish, onUploadError } = props;
-    const { file, uploadPath } = item;
+    const { onUploadProgress, onUploadFinish, onUploadError, uploadPath, customUploadPath } = props;
+    const { file } = item;
     try {
         const tcb = await getCloudInstance();
-        const _uploadPath = getDefaultUploadPath(uploadPath);
+        let _uploadPath = getDefaultUploadPath(uploadPath);
+        if (customUploadPath) {
+            _uploadPath = `${_uploadPath}/${sanitizeFilename(customUploadPath, '')}}`;
+        }
         const cloudPath = `${_uploadPath}/${randomStr()}-${(_a = file === null || file === void 0 ? void 0 : file.name) === null || _a === void 0 ? void 0 : _a.replace(filenameRegex, '-')}`;
         const { fileID } = await tcb.uploadFile({
             cloudPath,
@@ -67,7 +84,7 @@ const uploadToTcb = async (item, props) => {
             ...item,
             progress: 100,
             loading: false,
-            realUrl: fileID,
+            cloudId: fileID,
         };
         if (onUploadFinish) {
             onUploadFinish(fileItem);
@@ -109,3 +126,87 @@ export const checkAcceptedFiles = (file, acceptedFiles) => {
     }
     return true;
 };
+export const checkBeforeUpload = ({ tempFile, files, accepts, maxSize, maxUploadCount }) => {
+    const isAccepted = files.every((i) => checkAcceptedFiles(i, accepts));
+    if (!isAccepted) {
+        alertErrorMessage({
+            message: `上传图片类型错误`,
+            icon: 'error',
+        });
+        return false;
+    }
+    if (files.some((f) => f.size > maxSize * 1024 * 1024)) {
+        alertErrorMessage({
+            message: `请上传不超过 ${maxSize}M 的图片`,
+            icon: 'error',
+        });
+        return false;
+    }
+    if (files.length > maxUploadCount) {
+        // 防止一下子选择过多文件
+        alertErrorMessage({
+            message: `最多只能上传${maxUploadCount}张图片，请重新选择`,
+            icon: 'error',
+        });
+        return false;
+    }
+    if ((tempFile === null || tempFile === void 0 ? void 0 : tempFile.length) + (files === null || files === void 0 ? void 0 : files.length) > maxUploadCount) {
+        alertErrorMessage({
+            message: `最多只能上传${maxUploadCount}张图片`,
+            icon: 'error',
+        });
+        return false;
+    }
+    return true;
+};
+export const getPreviewFileMap = (previewFile) => {
+    return previewFile.reduce((acc, obj) => {
+        acc[obj === null || obj === void 0 ? void 0 : obj.cloudId] = obj; // 使用 cloudId 作为新对象的 key
+        return acc;
+    }, {});
+};
+export const getInitTempFile = ({ value }) => {
+    const tempFile = value.map((i) => ({
+        key: randomStr(),
+        cloudId: i,
+        tempUrl: '',
+        progress: 100,
+        loading: false,
+    }));
+    return tempFile;
+};
+// 默认组件类前缀
+export const CLASS_PREFIX = 'weda-uploader-pc';
+// 默认图片类型
+export const IMAGE_TYPES = [
+    'image/jpg',
+    'image/png',
+    'image/tif',
+    'image/bmp',
+    'image/jpeg',
+    'image/tiff',
+    'image/gif',
+];
+export const upload = async (fileList, uploadInstance, allTempFile) => {
+    const { config = {}, onComplete, onSuccess, onFail, onUploadProgress } = uploadInstance;
+    const { isCompressBeforeUpload, compressQuality, compressedHeight, compressedWidth } = config;
+    const result = await uploadTcbMulti(fileList, {
+        isCompressBeforeUpload,
+        compressedHeight,
+        compressedWidth,
+        compressQuality,
+        customUploadPath: config.customUploadPath,
+        uploadPath: DEFAULT_UPLOAD_PATH,
+        onUploadProgress: (item) => {
+            onUploadProgress(item);
+        },
+        onUploadFinish: (item) => {
+            onSuccess(item);
+        },
+        onUploadError: (err) => {
+            onFail(err);
+        },
+    });
+    const allFile = allTempFile.map((i) => result.find((j) => (j === null || j === void 0 ? void 0 : j.key) === (i === null || i === void 0 ? void 0 : i.key)) || i);
+    onComplete(allFile);
+};

package/dist/web/components/uploaderView/index.js

@@ -38,7 +38,7 @@ alt = '[加载失败]', gutter = 8, height = 100, width = 100, events = emptyObj
                         onLoad: () => setSuccessList((list) => [...list, d]),
                         onError: () => setErrorList((list) => [...list, d]),
                         portalContainer,
-                        allFile: values === null || values === void 0 ? void 0 : values.map((d) => ({ realUrl: d })),
+                        allFile: values === null || values === void 0 ? void 0 : values.map((d) => ({ cloudId: d })),
                         index: i,
                     };
                     return (_jsx("div", { className: `${CLASS_PREFIX}__image-box`, style: boxStyle, title: d, children: _jsx(TcbImage, { ...imgProps }) }, `${d}-${i}`));

package/dist/web/components/wd-ad/wd-ad.js

@@ -9,13 +9,11 @@ import { X_RUNTIME_DEFAULT } from '../../../configs/type-utils/x-runtime-default
  */
 export function WdAd(props) {
     const { className, id, style, adType: _adType = X_RUNTIME_DEFAULT.adType, gridCount: _gridCount = X_RUNTIME_DEFAULT.gridCount, } = props;
-    const adType = ['banner', 'video', 'grid'].includes(_adType)
-        ? _adType
-        : 'banner';
+    const adType = ['banner', 'video', 'grid', 'rewardedVideoAd'].includes(_adType) ? _adType : 'banner';
     const gridCount = _gridCount == 8 ? 8 : 5;
     const { classPrefix } = useConfig();
     const canPreview = useCanPreview();
     if (!canPreview)
         return null;
-    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx(Bubble, { placement: "auto", openDelay: 300, content: _jsxs(_Fragment, { children: ["\u8BE5\u7EC4\u4EF6\u5FC5\u987B\u5728\u5C0F\u7A0B\u5E8F\u771F\u5B9E\u73AF\u5883\u4F7F\u7528\u624D\u80FD\u591F\u770B\u5230\u5B9E\u9645\u6548\u679C\u3002", _jsx("br", {}), "\u8BF7\u9075\u5FAA\u5FAE\u4FE1\u5E7F\u544A\u7EC4\u4EF6\u5E94\u7528\u89C4\u8303\uFF0C\u5426\u5219\u53EF\u80FD\u5BFC\u81F4\u5C0F\u7A0B\u5E8F\u5BA1\u6838\u5931\u8D25\u3002"] }), children: _jsxs("div", { className: `${classPrefix}-ad ${classPrefix}-ad--${adType} ${className}`, id: id, style: style, children: [adType === 'banner' && _jsx(BannerAd, {}), adType === 'video' && _jsx(VideoAd, {}), adType === 'grid' && _jsx(GridAd, { gridCount: gridCount })] }) }) }));
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx(Bubble, { placement: "auto", openDelay: 300, content: _jsxs(_Fragment, { children: ["\u8BE5\u7EC4\u4EF6\u5FC5\u987B\u5728\u5C0F\u7A0B\u5E8F\u771F\u5B9E\u73AF\u5883\u4F7F\u7528\u624D\u80FD\u591F\u770B\u5230\u5B9E\u9645\u6548\u679C\u3002", _jsx("br", {}), "\u8BF7\u9075\u5FAA\u5FAE\u4FE1\u5E7F\u544A\u7EC4\u4EF6\u5E94\u7528\u89C4\u8303\uFF0C\u5426\u5219\u53EF\u80FD\u5BFC\u81F4\u5C0F\u7A0B\u5E8F\u5BA1\u6838\u5931\u8D25\u3002"] }), children: _jsxs("div", { className: `${classPrefix}-ad ${classPrefix}-ad--${adType} ${className}`, id: id, style: style, children: [adType === 'banner' && _jsx(BannerAd, {}), ['rewardedVideoAd', 'video'].includes(adType) && _jsx(VideoAd, {}), adType === 'grid' && _jsx(GridAd, { gridCount: gridCount })] }) }) }));
 }

package/dist/web/components/wd-upload-image/wd-upload-image.js

@@ -1,28 +1,33 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo, useRef } from 'react';
+import { forwardRef, useMemo, useRef, useState } from 'react';
 import { useFormInputTrait } from '../../components/form-input-hooks';
 import { WdFormItem } from '../wd-form-item';
 import Uploader from '../form/uploader';
 import { emptyObject } from '../../utils/constant';
 import { convertSingleValue } from '../../utils/tool';
+import { useSetWidgetApi } from '../../utils/widget-api/use-set-widget-api';
 import { X_RUNTIME_DEFAULT } from '../../../configs/type-utils/x-runtime-default';
 import './style';
+import { Upload } from '../form/uploader/upload/index';
 /**
  * 图片上传-标准化
  */
 export const WdUploadImage = forwardRef(function WdUploadImage(props, ref) {
     const { classRoot = 'upload-image', showShape = X_RUNTIME_DEFAULT.showShape, acceptTypes = X_RUNTIME_DEFAULT.acceptTypes, maxSize = X_RUNTIME_DEFAULT.maxSize, single = X_RUNTIME_DEFAULT.single, maxUploadCount = X_RUNTIME_DEFAULT.maxUploadCount, events = emptyObject, isCompressBeforeUpload = false, 
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    compressQuality = 70, compressedHeight = 0, compressedWidth = 0, sourceType = 'both', tips, callbacks, } = props;
+    compressQuality = 70, compressedHeight = 0, compressedWidth = 0, sourceType = 'both', tips, callbacks, template = 'normal', children, } = props;
     // 强制转换初始值
     const initRef = useRef(false);
+    const uploadRef = useRef(null);
     const formValue = useMemo(() => {
         if (initRef.current)
             return props.value;
         initRef.current = true;
         return convertSingleValue(props.value, single);
     }, [props.value, single]);
-    const traitProps = { ...props, value: formValue, inputRef: ref };
+    const [innerHandle, setInnerHandle] = useState({});
+    const [uploadHandle, setUploadHandle] = useState({});
+    const traitProps = { ...props, value: formValue, inputRef: ref, setInnerHandle };
     const trait = useFormInputTrait(traitProps);
     const { value, onChange, disabled, readOnly, visible } = trait;
     const formItemProps = {
@@ -32,7 +37,12 @@ export const WdUploadImage = forwardRef(function WdUploadImage(props, ref) {
         readOnly: false,
         size: 'md',
     };
+    useSetWidgetApi(() => ({
+        ...innerHandle,
+        ...uploadHandle,
+    }), [innerHandle, uploadHandle], ref);
+    const multiple = !single;
     if (!visible)
         return null;
-    return (_jsx(WdFormItem, { ...formItemProps, children: _jsx(Uploader, { events: events, labelVisible: false, acceptTypes: acceptTypes, defaultValue: value, maxSize: maxSize, maxUploadCount: maxUploadCount, single: single, tips: tips, showShape: showShape, readOnly: readOnly, disabled: disabled, decorator: null, onChange: onChange, isCompressBeforeUpload: isCompressBeforeUpload, compressQuality: compressQuality, compressedHeight: compressedHeight, compressedWidth: compressedWidth, sourceType: sourceType, callbacks: callbacks }) }));
+    return (_jsx(WdFormItem, { ...formItemProps, children: template === 'custom' ? (_jsx(Upload, { events: events, acceptTypes: acceptTypes, maxSize: maxSize, maxUploadCount: maxUploadCount, readOnly: readOnly, disabled: disabled, isCompressBeforeUpload: isCompressBeforeUpload, compressQuality: compressQuality, compressedHeight: compressedHeight, compressedWidth: compressedWidth, callbacks: callbacks, value: value, multiple: multiple, capture: sourceType === 'camera' ? 'capture' : null, onChange: onChange, ref: uploadRef, setUploadHandle: setUploadHandle, children: children })) : (_jsx(Uploader, { events: events, labelVisible: false, acceptTypes: acceptTypes, defaultValue: value, maxSize: maxSize, maxUploadCount: maxUploadCount, single: single, tips: tips, showShape: showShape, readOnly: readOnly, disabled: disabled, decorator: null, onChange: onChange, isCompressBeforeUpload: isCompressBeforeUpload, compressQuality: compressQuality, compressedHeight: compressedHeight, compressedWidth: compressedWidth, sourceType: sourceType, callbacks: callbacks, setUploadHandle: setUploadHandle })) }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudbase/weda-ui",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "main": "./dist/index.js",
   "module": "./dist/index",
   "miniprogram": "mpdist",
@@ -85,7 +85,7 @@
   "description": "腾讯云微搭低代码组件库模板",
   "dependencies": {
     "@antv/g6": "^4.8.5",
-    "@cloudbase/weda-client": "^1.1.26",
+    "@cloudbase/weda-client": "^1.1.27",
     "@codemirror/autocomplete": "^6.16.0",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-json": "^6.0.1",
@@ -148,8 +148,8 @@
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.22.15",
     "@cloudbase/cals": "^1.2.13",
-    "@cloudbase/lowcode-cli": "^0.22.1",
-    "@cloudbase/weda-cloud-sdk": "^1.0.97",
+    "@cloudbase/lowcode-cli": "^0.22.2",
+    "@cloudbase/weda-cloud-sdk": "^1.0.99",
     "@commitlint/cli": "^16.0.2",
     "@commitlint/config-conventional": "^17.7.0",
     "@craco/craco": "^7.1.0",

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

@@ -1,16 +0,0 @@
-export declare const CLASS_PREFIX = "weda-uploader-pc";
-export declare const IMAGE_TYPES: string[];
-interface TempFileProps {
-    progress?: number;
-    loading?: boolean;
-    realUrl?: string;
-    tempUrl?: string;
-    key?: string;
-}
-export declare function useUploader(props: any): {
-    tempFile: TempFileProps[];
-    uploading: boolean;
-    upload: (fileList: any) => Promise<any[]>;
-    getTempFile: (allFile?: any[]) => any[];
-};
-export {};

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

@@ -1,99 +0,0 @@
-import * as React from 'react';
-import { randomStr } from '../../../utils/platform';
-import isObjectEqual from '../../../utils/isObjectEqual';
-import { getBase64, uploadTcbMulti } from './util';
-// 默认组件类前缀
-export const CLASS_PREFIX = 'weda-uploader-pc';
-// 默认图片类型
-export const IMAGE_TYPES = [
-    'image/jpg',
-    'image/png',
-    'image/tif',
-    'image/bmp',
-    'image/jpeg',
-    'image/tiff',
-    'image/gif',
-];
-const getInitTempFile = ({ single, value, defaultValue, uploadPath }) => {
-    let initialValue = []
-        .concat(value ? value : defaultValue)
-        .filter((d) => typeof d === 'string' && d !== '');
-    if (single) {
-        initialValue = initialValue[0] ? [initialValue[0]] : [];
-    }
-    const tempFile = initialValue.map((i) => ({
-        key: randomStr(),
-        uploadPath,
-        realUrl: i,
-        tempUrl: '',
-        progress: 100,
-        loading: false,
-    }));
-    return tempFile;
-};
-export function useUploader(props) {
-    const { defaultValue, // 需要兼容 cloud:和https: 协议，需要兼容 字符串和字符串数组
-    uploadPath = 'weda-uploader', events, single = false, value, // 数据管理后台中，formily使用此字段传默认值
-    isCompressBeforeUpload, compressQuality, compressedHeight, compressedWidth, } = props;
-    // 上传中
-    const [uploading, setUploading] = React.useState(false);
-    // 文件列表
-    const [tempFile, setTempFile] = React.useState(() => {
-        return getInitTempFile(props);
-    });
-    const defaultValueRef = React.useRef(null);
-    React.useEffect(() => {
-        if (isObjectEqual(defaultValueRef.current, defaultValue))
-            return;
-        const tempFile = getInitTempFile({
-            single,
-            value,
-            defaultValue,
-            uploadPath,
-        });
-        defaultValueRef.current = defaultValue;
-        setTempFile(tempFile);
-    }, [defaultValue, single, uploadPath, value]);
-    // 方法：上传前，判断图片大小、数量是否满足，取消默认组件的上传事件，用自定义的 tcb 上传方法
-    const upload = async (fileList) => {
-        let tempFiles = fileList.map((i) => ({
-            file: i,
-            key: randomStr(),
-            uploadPath,
-            progress: 0,
-            loading: true,
-        }));
-        tempFiles = await getBase64(tempFiles);
-        const allTempFile = [...tempFile, ...tempFiles];
-        setTempFile(allTempFile);
-        setUploading(true);
-        const result = await uploadTcbMulti(tempFiles, {
-            isCompressBeforeUpload,
-            compressedHeight,
-            compressedWidth,
-            compressQuality,
-            onUploadProgress: (item) => {
-                setTempFile((allTempFile) => allTempFile.map((i) => (i.key === item.key ? { ...i, ...item } : i)));
-            },
-            onUploadFinish: (item) => {
-                var _a;
-                (_a = events === null || events === void 0 ? void 0 : events.success) === null || _a === void 0 ? void 0 : _a.call(events, { value: item.realUrl, file: item.file });
-                setUploading(false);
-                setTempFile((allTempFile) => allTempFile.map((i) => (i.key === item.key ? { ...i, ...item } : i)));
-            },
-            onUploadError: (err) => {
-                events.error && events.error(err);
-                setUploading(false);
-            },
-        });
-        const allFile = allTempFile.map((i) => result.find((j) => (j === null || j === void 0 ? void 0 : j.key) === (i === null || i === void 0 ? void 0 : i.key)) || i);
-        return allFile;
-    };
-    const getTempFile = (allFile = []) => {
-        setTempFile(allFile);
-        let value = allFile.map((i) => i === null || i === void 0 ? void 0 : i.realUrl).filter((j) => !!j);
-        value = single ? value[0] || '' : value;
-        return value;
-    };
-    return { tempFile, uploading, upload, getTempFile };
-}