@cloudbase/weda-ui 3.5.3 → 3.6.0

package/dist/web/components/form/selectMultiple/dropdown-select/ui.js

@@ -1,33 +1,37 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import classNames from '../../../../utils/classnames';
 import { noop } from '../../../../utils/constant';
 import { useSyncValue } from '../../../../utils/hooks/useSyncValue';
 import { alertErrorMessage } from '../../../../utils/platform';
 import { PureSelect } from './index';
-const transformValue = (value) => {
-    return value ? value : null;
-};
+import { WdFormItemReadOnly } from '../../../wd-form-item';
+import { useDeepCompareEffect } from '@react-hookz/web';
+import lodashGet from 'lodash.get';
+import equal from '../../../../utils/isObjectEqual';
+import { arrayToMap } from '../../../../utils/tool';
 export function PureSelectPc(props) {
-    const { size, onChange, value, placeholder, params, disabled } = props;
-    const previousValueRef = useRef();
-    return (_jsx(PureSelect, { isShow: false, params: params, placeholder: placeholder, size: size, selectedValue: value, disabled: disabled, updateValue: (value) => {
-            if (previousValueRef.current != transformValue(value)) {
-                if (value.length > 50) {
-                    alertErrorMessage({
-                        message: '最多选择50条数据',
-                    });
+    const { size, onChange, value, placeholder, params, disabled, ignoreCase, onSearchValueInput, } = props;
+    const previousValueRef = useRef(value);
+    useEffect(() => {
+        previousValueRef.current = props.value;
+    }, [props.value]);
+    return (_jsx(PureSelect, { ignoreCase: ignoreCase, isShow: false, params: params, placeholder: placeholder, size: size, selectedValue: value, disabled: disabled, onSearchValueInput: onSearchValueInput, updateValue: (v, triggerEvent) => {
+            if (previousValueRef.current != v) {
+                if (Array.isArray(v) && v.length > 50) {
+                    alertErrorMessage({ message: '最多选择50条数据' });
                 }
                 else {
-                    onChange(value);
+                    onChange(v, triggerEvent);
                 }
-                previousValueRef.current = value;
+                previousValueRef.current = v;
             }
         }, closeModal: undefined, allOption: () => { } }));
 }
 export function PureSelectH5(props) {
-    const { placeholder, name, disabled, onChange = noop, layout, className, params, } = props;
+    const { placeholder, name, disabled, onChange = noop, layout, className, params, ignoreCase, onSearchValueInput, } = props;
     const [value, setValue] = useSyncValue(props.value);
+    const previousValueRef = useRef(value);
     const [currentMultiLabels, setCurrentMultiLabels] = useState([]);
     const [allOption, setAllOption] = useState([]);
     const [isShow, setIsShow] = useState(false);
@@ -39,60 +43,55 @@ export function PureSelectH5(props) {
         'weui-cell_disabled': disabled,
     }, className);
     useEffect(() => {
-        var _a;
-        const labels = [];
-        if (value && !((_a = props === null || props === void 0 ? void 0 : props.params) === null || _a === void 0 ? void 0 : _a.dataSourceName)) {
-            Array.isArray(value) &&
-                value.forEach((item) => {
-                    const obj = props.params.controlledValue.find((el) => el.value === item);
-                    obj && labels.push(obj.label);
-                });
-            setCurrentMultiLabels(labels);
+        previousValueRef.current = props.value;
+    }, [props.value]);
+    const setLabels = (values, options) => {
+        let labels = values;
+        if (Array.isArray(values) && Array.isArray(options)) {
+            const rm = arrayToMap(options, 'value');
+            labels = values.map((d) => {
+                const obj = rm.get(d);
+                return lodashGet(obj, 'label', d);
+            });
+        }
+        setCurrentMultiLabels(labels || '');
+    };
+    useDeepCompareEffect(() => {
+        if (!lodashGet(props, 'params.dataSourceName')) {
+            setLabels(value, lodashGet(props, 'params.controlledValue'));
         }
     }, [value, props.params]);
-    useEffect(() => {
-        const label = [];
-        Array.isArray(value) &&
-            value.forEach((item) => {
-                const obj = allOption.find((el) => el.value === item);
-                obj && label.push(obj.label);
-            });
-        setCurrentMultiLabels(label);
+    useDeepCompareEffect(() => {
+        setLabels(value, allOption);
     }, [allOption, value]);
     // 选择回调
     const onChooseCallback = (option) => {
-        if (!option || Object.keys(option).length === 0) {
-            setValue([]);
-            onChange([]);
-            setCurrentMultiLabels([]);
+        let values = Array.isArray(value) ? [].concat(value) : [];
+        if (option == null) {
+            values = null;
             setIsShow(false);
         }
         else {
-            if (typeof value === 'object') {
-                const arr = value;
-                // const labels = currentMultiLabels;
-                const obj = arr.find((item) => item === option.value);
-                if (obj) {
-                    // const labelIndex = currentMultiLabels.indexOf(option.label);
-                    // labels.splice(labelIndex, 1);
-                    const valueIndex = value.indexOf(option.value);
-                    arr.splice(valueIndex, 1);
+            if (Array.isArray(option)) {
+                values = option.map((item) => item.value);
+            }
+            else {
+                const v = lodashGet(option, 'value');
+                const index = values.findIndex((d) => d === v);
+                if (index > -1) {
+                    values = values.filter((d) => d !== v);
                 }
                 else {
-                    // labels.push(option?.label);
-                    arr.push(option === null || option === void 0 ? void 0 : option.value);
+                    values.push(v);
                 }
-                const label = [];
-                arr.forEach((item) => {
-                    const obj = allOption.find((el) => el.value === item);
-                    obj && label.push(obj.label);
-                });
-                setCurrentMultiLabels(label);
-                setValue(arr);
-                onChange(arr);
-                // setCurrentMultiLabels(labels);
             }
         }
+        setLabels(values, allOption);
+        if (!equal(previousValueRef.current, values)) {
+            setValue(values);
+            onChange(values);
+            previousValueRef.current = values;
+        }
     };
     const onClick = () => {
         setIsShow(true);
@@ -103,11 +102,12 @@ export function PureSelectH5(props) {
     const getAllOption = (val) => {
         setAllOption(val);
     };
-    return (_jsxs("div", { children: [_jsx("div", { className: subCls, children: _jsxs("div", { className: "weui-cell__bd weui-flex select-picker", children: [_jsx("div", { style: { width: '100%' }, onClick: disabled ? null : onClick, children: _jsx("input", { className: "weui-input multiple weda-ui-show-label", 
-                                // style={{
-                                //   display: currentMultiLabels.length > 0 ? 'none' : 'block',
-                                // }}
-                                type: "select", name: name, placeholder: placeholder, value: currentMultiLabels, disabled: disabled, autoComplete: 'off', readOnly: true, "data-testid": "form-item-select-multiple" }) }), currentMultiLabels.length > 0 && (_jsx("span", { className: 'weui-input-clear', onClick: () => {
-                                onChooseCallback(undefined);
-                            } })), _jsx("span", { className: 'weui-input-arrow' })] }) }), _jsx(PureSelect, { params: params, updateValue: onChooseCallback, selectedValue: value, isShow: isShow, size: undefined, disabled: undefined, placeholder: undefined, closeModal: close, allOption: getAllOption })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(WdFormItemReadOnly, { readValue: currentMultiLabels, children: _jsx("div", { className: subCls, children: _jsxs("div", { className: "weui-cell__bd weui-flex select-picker", children: [_jsx("div", { style: { width: '100%' }, onClick: disabled ? null : onClick, children: _jsx("input", { className: "weui-input multiple weda-ui-show-label", 
+                                    // style={{
+                                    //   display: currentMultiLabels.length > 0 ? 'none' : 'block',
+                                    // }}
+                                    type: "select", name: name, placeholder: placeholder, value: currentMultiLabels, disabled: disabled, autoComplete: 'off', readOnly: true, "data-testid": "form-item-select-multiple" }) }), Array.isArray(currentMultiLabels) &&
+                                currentMultiLabels.length > 0 && (_jsx("span", { className: 'weui-input-clear', onClick: () => {
+                                    onChooseCallback(null);
+                                } })), _jsx("span", { className: 'weui-input-arrow' })] }) }) }), _jsx(PureSelect, { ignoreCase: ignoreCase, params: params, updateValue: onChooseCallback, selectedValue: value, isShow: isShow, size: undefined, disabled: undefined, placeholder: undefined, onSearchValueInput: onSearchValueInput, closeModal: close, allOption: getAllOption })] }));
 }

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { PropsType } from './index';
-export default function SelectH5({ events, name, placeholder, disabled, range, primaryField, dataSourceName, format, onChange, defaultValue, readOnly, }: PropsType): JSX.Element;
+export default function SelectH5({ events, name, placeholder, disabled, range, primaryField, dataSourceName, format, onChange, onSearchValueInput, defaultValue, readOnly, ignoreCase, }: PropsType): JSX.Element;

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

@@ -1,28 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
 import { defaultProps } from './index';
 import { emptyObject } from '../../../utils/constant';
 import { PureSelectH5 } from './dropdown-select/ui';
-export default function SelectH5({ events = emptyObject, name, placeholder, disabled = false, range = defaultProps.range, primaryField, dataSourceName, format, onChange, defaultValue, readOnly, }) {
-    const [selectedValue, setSelectedValue] = React.useState(defaultValue);
-    // 两次默认值不同, 需要刷新;
-    const prevDefaultRef = React.useRef({});
-    React.useEffect(() => {
-        var _a;
-        let hasChange = false;
-        if (((_a = prevDefaultRef.current) === null || _a === void 0 ? void 0 : _a.defaultValue) !== defaultValue) {
-            setSelectedValue(defaultValue);
-            hasChange = true;
-        }
-        if (hasChange) {
-            prevDefaultRef.current = {
-                defaultValue,
-            };
-        }
-    });
-    let params = {
-        controlledValue: range,
-    };
+import { useSyncValue } from '../../../utils/hooks/useSyncValue';
+export default function SelectH5({ events = emptyObject, name, placeholder, disabled = false, range = defaultProps.range, primaryField, dataSourceName, format, onChange, onSearchValueInput, defaultValue, readOnly, ignoreCase, }) {
+    const [selectedValue, setSelectedValue] = useSyncValue(defaultValue);
+    let params = { controlledValue: range };
     if (format === 'many-many' || format === 'one-many') {
         params = {
             format,
@@ -31,10 +14,10 @@ export default function SelectH5({ events = emptyObject, name, placeholder, disa
             controlledValue: range,
         };
     }
-    return (_jsx(PureSelectH5, { className: "weda-ui weda-picker", name: name, value: selectedValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, params: params, onChange: (value) => {
+    return (_jsx(PureSelectH5, { ignoreCase: ignoreCase, className: "weda-ui weda-picker", name: name, value: selectedValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, params: params, onChange: (value) => {
             var _a;
             setSelectedValue(value);
             onChange === null || onChange === void 0 ? void 0 : onChange(value);
             (_a = events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value });
-        } }));
+        }, onSearchValueInput: onSearchValueInput }));
 }

package/dist/web/components/form/selectMultiple/index.css

@@ -28,10 +28,3 @@
 .select-region-pc .wedatea2td-cascader-menu--thin .wedatea2td-list > li {
   padding: 10px 24px 10px 8px;
 }
-.weda-ui-custom-picker__header-confirm {
-  flex: 0 0 auto;
-  padding: 0 20px;
-  font-size: 16px;
-  color: #0052d9;
-  cursor: pointer;
-}

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

@@ -34,10 +34,12 @@ export interface PropsType extends CommonFormPropsType {
     requiredFlag?: boolean;
     regionTree?: any[];
     defaultMutiRegion?: string;
-    onChange?: (v: any) => void;
+    onChange?: (v: any, c?: any) => void;
+    onSearchValueInput?: (v: unknown) => void;
     params?: IUseoptionsParams;
     isTurnPages?: boolean;
     readOnly?: boolean;
+    ignoreCase?: boolean;
 }
 export declare const defaultProps: {
     events: {};
@@ -49,8 +51,5 @@ export declare const defaultProps: {
     layout: string;
     disabled: boolean;
     requiredFlag: boolean;
-    range: {
-        name: string;
-        value: string;
-    }[];
+    range: any[];
 };

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
 import { usePlatform } from '../../../utils/platform';
 import SelectH5 from './h5';
 import classNames from '../../../utils/classnames';
 import { ConfigProvider } from 'tea-component';
 import { renderDecorator } from '../renderDecorator';
 import { emptyObject } from '../../../utils/constant';
+import { useSyncValue } from '../../../utils/hooks/useSyncValue';
 import { CommonErrorBoundary } from '../../common/error-boundary';
 import { useLoopRenderDetect } from '../../common/use-loop-render-detect';
 import { PureSelectPc } from './dropdown-select/ui';
@@ -52,15 +52,11 @@ export const defaultProps = {
     layout: 'horizontal',
     disabled: false,
     requiredFlag: false,
-    range: [{ name: '选项1', value: '1' }],
+    range: [],
 };
-function SelectPc({ dataSourceName, format, primaryField, defaultValue, placeholder = '请选择', events = emptyObject, disabled = false, range = defaultProps.range, size = defaultProps.size, onChange, readOnly, }) {
-    // 两次默认值不同, 需要刷新
-    const prevDefaultRef = React.useRef();
-    const [selectedValue, setSelectedValue] = React.useState(defaultValue);
-    let params = {
-        controlledValue: range,
-    };
+function SelectPc({ dataSourceName, format, primaryField, defaultValue, placeholder = '请选择', events = emptyObject, disabled = false, range = defaultProps.range, size = defaultProps.size, onChange, onSearchValueInput, readOnly, ignoreCase, }) {
+    const [selectedValue, setSelectedValue] = useSyncValue(defaultValue);
+    let params = { controlledValue: range };
     if (format === 'many-many' || format === 'one-many') {
         params = {
             format,
@@ -69,26 +65,13 @@ function SelectPc({ dataSourceName, format, primaryField, defaultValue, placehol
             controlledValue: range,
         };
     }
-    React.useEffect(() => {
-        var _a;
-        let hasChange = false;
-        if (((_a = prevDefaultRef.current) === null || _a === void 0 ? void 0 : _a.defaultValue) !== defaultValue) {
-            setSelectedValue(defaultValue);
-            hasChange = true;
-        }
-        if (hasChange) {
-            prevDefaultRef.current = {
-                defaultValue,
-            };
-        }
-    });
     const createDropdown = () => {
-        return (_jsx(PureSelectPc, { params: params, disabled: disabled, readOnly: readOnly, placeholder: placeholder, size: size, value: selectedValue, onChange: (value) => {
+        return (_jsx(PureSelectPc, { ignoreCase: ignoreCase, params: params, disabled: disabled, readOnly: readOnly, placeholder: placeholder, size: size, value: selectedValue, onChange: (value, triggerEvent) => {
                 var _a;
                 onChange && onChange(value);
                 setSelectedValue(value);
-                (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value });
-            } }));
+                triggerEvent && ((_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value }));
+            }, onSearchValueInput: onSearchValueInput }));
     };
     const dropdown = createDropdown();
     return _jsx(ConfigProvider, { classPrefix: "wedatea2td", children: dropdown });

package/dist/web/components/form/selectMultiple/request.js

@@ -69,7 +69,7 @@ export const requestFatherRelatedOption = async (params, pageNo, type, searchVal
 export const transFormatTeaSelectKey = (options) => {
     return options.map((item) => {
         return {
-            value: item.value,
+            ...item,
             text: item.label,
         };
     });

package/dist/web/components/form/selectMultiple/status/index.css

@@ -19,7 +19,7 @@
 }
 
 .weda-ui-custom-picker__status--loading {
-  color: #0052d9;
+  color: var(--wd-color-brand, #0052d9);
   display: flex;
   align-items: center;
 }
@@ -59,5 +59,5 @@
 }
 
 .weda-ui-custom-picker__btn--link {
-  color: #0052d9;
+  color: var(--wd-color-brand, #0052d9);
 }

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

@@ -0,0 +1,4 @@
+import type { DataType } from '../../../../configs/components/wd-upload-image';
+type CompressImageOptions = Pick<DataType, 'compressQuality' | 'compressedHeight' | 'compressedWidth'>;
+export declare function compressImage<T extends File | Blob>(file: T, options: CompressImageOptions): Promise<T>;
+export {};

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

@@ -0,0 +1,39 @@
+import Compressor from 'compressorjs';
+import { debug } from '../../../utils/console';
+const logger = debug('compress');
+const normalizeOptions = (inputOptions) => {
+    var _a;
+    let quality = (_a = inputOptions.compressQuality) !== null && _a !== void 0 ? _a : 0.7;
+    if (typeof quality !== 'number') {
+        quality = 0.7;
+    }
+    if (quality > 1) {
+        quality = quality / 100;
+    }
+    let { compressedHeight, compressedWidth } = inputOptions;
+    if (typeof compressedHeight !== 'number' || compressedWidth <= 0) {
+        compressedHeight = undefined;
+    }
+    if (typeof compressedWidth !== 'number' || compressedWidth <= 0) {
+        compressedWidth = undefined;
+    }
+    return {
+        quality,
+        width: compressedWidth,
+        height: compressedHeight,
+    };
+};
+export async function compressImage(file, options) {
+    const normalizedOptions = normalizeOptions(options);
+    logger.debug(normalizedOptions);
+    return new Promise((resolve, reject) => {
+        new Compressor(file, {
+            ...normalizedOptions,
+            // 模拟微信compressImage行为
+            resize: 'cover',
+            // @ts-expect-error it is a Blob but with name property
+            success: (file) => resolve(file),
+            error: reject,
+        });
+    });
+}

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

@@ -152,3 +152,22 @@
 .img-shape-rounded-tectangle:before {
   border-radius: 6px;
 }
+
+.weda-uploader-gallery__disabled .weui-gallery__opr {
+  display: none;
+}
+
+.weda-uploader-pc__image-actions {
+  color: white;
+  flex-direction: row;
+}
+
+.weda-uploader-pc__image-actions .wd-icon {
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.weda-uploader-pc__image-actions-separator {
+  font-size: 16px;
+  margin: 0 16px;
+}

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

@@ -1,19 +1,22 @@
 /// <reference types="react" />
 import type { CommonFormPropsType } from '../types';
+import type { DataType, EventsType } from '../../../../configs/components/wd-upload-image';
 import type { CommonPropsType } from '../../../types';
+import type { Except } from 'type-fest';
 /**
  * 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 declare function ImageUploaderH5({ title: label, maxUploadCount, maxSize, acceptTypes, className, id, events, layout: _layout, defaultValue, single, disabled, requiredFlag, labelVisible, onChange, style, imgTypeCls, readOnly, sourceType, isCompressBeforeUpload, compressQuality, compressedHeight, compressedWidth, callbacks, }: H5UploaderProps): JSX.Element;
 export interface SingleImageProps {
     src: string;
     deleteBySrc: (url: string) => void;
     disabled: boolean;
     imgTypeCls?: string;
 }
-export interface H5UploaderProps extends CommonFormPropsType, CommonPropsType {
+export interface H5UploaderProps extends Except<CommonFormPropsType, 'events'>, Except<CommonPropsType, 'events'>, EventsType, Pick<DataType, 'isCompressBeforeUpload' | 'compressQuality' | 'compressedHeight' | 'compressedWidth' | 'callbacks'> {
     title?: string;
     imgTypeCls?: string;
+    sourceType?: string;
     maxSize?: number;
     acceptTypes?: Readonly<unknown[]>;
     maxUploadCount?: number;

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

@@ -9,11 +9,14 @@ import { randomStr, browserEnv } from '../../../utils/platform';
 import { IMAGE_TYPES, encodeConvert } from './uploader.pc';
 import { useTempUrl } from '../../../utils/hooks/use-cloud-id-temp-url';
 import { emptyObject } from '../../../utils/constant';
+import { compressImage } from './compress';
+import { toBase64Uri } from '../../../utils/file2base64';
+import { isNil } from '../../../utils/lodash';
 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, readOnly, }) {
+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, sourceType, isCompressBeforeUpload, compressQuality, compressedHeight, compressedWidth, callbacks, }) {
     const layout = _layout !== 'vertical' ? 'horizontal' : 'vertical';
     const layoutCls = layout === 'horizontal' ? 'weda-formcells weui-flex' : '';
     const cls = classNames({
@@ -65,7 +68,7 @@ export function ImageUploaderH5({ title: label, maxUploadCount, maxSize = 10, ac
         setProgress(percentCompleted);
     };
     const uploadToTcb = async (file) => {
-        var _a;
+        var _a, _b;
         try {
             setUploading(true);
             const tcb = await getCloudInstance();
@@ -80,7 +83,11 @@ export function ImageUploaderH5({ title: label, maxUploadCount, maxSize = 10, ac
             return fileID;
         }
         catch (err) {
-            weui.alert('上传失败，请检查网络后重试');
+            (_b = window === null || window === void 0 ? void 0 : window.$w) === null || _b === void 0 ? void 0 : _b.utils.showModal({
+                title: '上传失败，请重试',
+                content: err.message,
+                showCancel: false,
+            });
             events.error && events.error(err);
         }
         finally {
@@ -89,7 +96,7 @@ export function ImageUploaderH5({ title: label, maxUploadCount, maxSize = 10, ac
         }
     };
     const accepts = React.useMemo(() => {
-        return acceptTypes.includes('image/*') || acceptTypes.length === 0
+        return acceptTypes.length === 0
             ? IMAGE_TYPES
             : Array.from(new Set(acceptTypes));
     }, [acceptTypes]);
@@ -101,7 +108,7 @@ export function ImageUploaderH5({ title: label, maxUploadCount, maxSize = 10, ac
         return fileIdList.length < maxUploadCount;
     }, [fileIdList, single, maxUploadCount, uploading]);
     const uploadChange = async (e) => {
-        const files = [...e.target.files];
+        let files = [...e.target.files];
         if (files.some((f) => f.size > maxSize * 1024 * 1024)) {
             weui.alert(`请上传不超过 ${maxSize}M 的图片`);
             return false;
@@ -115,12 +122,48 @@ export function ImageUploaderH5({ title: label, maxUploadCount, maxSize = 10, ac
             weui.alert(`最多只能上传${finalMaxImgCount}张图片`);
             return false;
         }
-        const promiseAll = files.map((f) => uploadToTcb(f));
+        let shouldUploadToCos = true;
+        if (typeof (callbacks === null || callbacks === void 0 ? void 0 : callbacks.beforeUpload) === 'function') {
+            try {
+                const base64Uri = await Promise.all(files.map((file) => toBase64Uri(file)));
+                const ret = await callbacks.beforeUpload({ files, base64Uri });
+                if (typeof ret === 'boolean') {
+                    shouldUploadToCos = ret;
+                }
+                else if (Array.isArray(ret) &&
+                    ret.every((item) => item instanceof File)) {
+                    files = ret;
+                }
+                else if (!isNil(ret)) {
+                    throw new TypeError('web端返回值接受布尔值 / File对象数组');
+                }
+            }
+            catch (err) {
+                console.error('上传前处理函数抛错', err);
+                shouldUploadToCos = false;
+            }
+        }
+        if (shouldUploadToCos === false) {
+            return;
+        }
+        const promiseAll = files.map(async (f) => {
+            if (isCompressBeforeUpload) {
+                const compressed = await compressImage(f, {
+                    compressedHeight,
+                    compressedWidth,
+                    compressQuality,
+                });
+                return uploadToTcb(compressed);
+            }
+            return uploadToTcb(f);
+        });
         const result = await Promise.all(promiseAll);
         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 && 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 })) }))] })] }) }));
+    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 || readOnly || sourceType === 'album', 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 &&
+                                sourceType !== 'album' &&
+                                (sourceType === 'camera' ? (_jsx("input", { "data-testid": "uploaderh5_input", id: "uploaderInput", className: "weui-uploader__input", type: "file", accept: accepts.join(','), multiple: !single && !(browserEnv().android && browserEnv().weixin), capture: true, onChange: uploadChange })) : (_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({
@@ -132,8 +175,12 @@ function SingleImage({ src, deleteBySrc, disabled, imgTypeCls, }) {
     const imgStyle = {
         backgroundImage: 'url("' + encodeURI(encodeSrc) + '")',
     };
+    const galleryCls = classNames({
+        'weda-uploader-gallery__disabled': disabled,
+    });
     const showGallery = () => {
         const gallery = weui.gallery("'" + encodeURI(encodeSrc) + "'", {
+            className: galleryCls,
             onDelete: function () {
                 if (!disabled) {
                     deleteBySrc(src);

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

@@ -1,25 +1,15 @@
-/// <reference types="react" />
+import * as React from '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 declare function UploaderPCInner(props: PropsType): JSX.Element;
 export interface TcbImageProps {
     fileID?: string;
     isZoom?: boolean;
     onError?: (e: unknown) => void;
     imgTypeCls?: string;
+    preivewIcon?: string;
+    actions?: React.ReactNode;
 }
 export declare const TcbImage: (props: TcbImageProps) => JSX.Element;
 export interface PropsType extends H5UploaderProps {