@cloudbase/weda-ui 3.2.0 → 3.3.0

package/dist/src/web/components/form/select/use-options.js

@@ -0,0 +1,103 @@
+import { useAsync, useDeepCompareEffect } from '@react-hookz/web';
+import destr from 'destr';
+import { useCallback, useEffect } from 'react';
+import { getWhereList } from '../../../utils/platform';
+import { callDataSource as tcbCallDataSource, callWedaApi as tcbCallWedaApi, } from '../../../utils/tcb';
+import { useSyncValue } from '../../../utils/useSyncValue';
+const formatNeedDataFetch = ['father-son', 'related', 'x-enum'];
+export function useOptions(params) {
+    const { format, controlledValue, callDataSource = tcbCallDataSource, callWedaApi = tcbCallWedaApi, ...restOptions } = params;
+    // 获取自定义选项集
+    const fetchEnumData = useCallback(async (param) => {
+        var _a, _b, _c;
+        const data = await callWedaApi({
+            action: 'DescribeGeneralOptionsDetailList',
+            data: param,
+        });
+        const config = (_c = destr((_b = (_a = data === null || data === void 0 ? void 0 : data.Items) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.Config)) !== null && _c !== void 0 ? _c : [];
+        const enumOption = config.map((item) => {
+            return {
+                label: item.value,
+                value: item.key,
+            };
+        });
+        return enumOption;
+    }, [callWedaApi]);
+    const fetchData = useCallback(async (param) => {
+        let pageNo = 1;
+        const pageSize = 200;
+        let records = [];
+        let total = 99999;
+        for (let index = 0; index < Math.floor(total / pageSize) + 1; index++) {
+            const data = await callDataSource({
+                dataSourceName: param.dataSourceName,
+                viewId: param.viewId,
+                methodName: param.methodName,
+                params: {
+                    pageNo: pageNo,
+                    pageSize: pageSize,
+                    where: param.params,
+                },
+            });
+            pageNo = pageNo + 1;
+            if (data === null || data === void 0 ? void 0 : data.records) {
+                total = (data === null || data === void 0 ? void 0 : data.total) || 0;
+                records = records.concat(data === null || data === void 0 ? void 0 : data.records);
+            }
+        }
+        return records;
+    }, [callDataSource]);
+    const [options, setOptions] = useSyncValue(controlledValue);
+    const [state, actions] = useAsync(async () => {
+        if (format === 'father-son' || format === 'related') {
+            const { dataSourceName, viewId, where, primaryField } = restOptions;
+            const whereEffected = [].concat(getWhereList(where));
+            const results = await fetchData({
+                dataSourceName,
+                viewId,
+                methodName: 'wedaGetRecords',
+                params: whereEffected,
+            });
+            if (primaryField) {
+                if (results && results.length !== 0) {
+                    const option = results.map((item) => {
+                        return {
+                            label: item[primaryField] || item._id,
+                            value: item._id,
+                        };
+                    });
+                    return option;
+                }
+                else {
+                    // 留一个空的weui才正常
+                    return [{ label: '', value: '' }];
+                }
+            }
+            return results.map((opt) => ({
+                label: opt._id,
+                value: opt._id,
+            })); // 兜底 正常来说一定有primaryField
+        }
+        if (format === 'x-enum') {
+            // 如果绑定字段类型为枚举，且传入自定义选项集的名称则默认使用自定义选项集的内容作为选项
+            const { enumName } = restOptions;
+            return fetchEnumData({
+                OptNameList: [enumName],
+                PageIndex: 1,
+                PageSize: 10,
+            });
+        }
+    }, []);
+    useDeepCompareEffect(() => {
+        if (formatNeedDataFetch.includes(format)) {
+            actions.execute();
+        }
+        // @ts-ignore not check
+    }, [format, restOptions.enumName, restOptions.where]);
+    useEffect(() => {
+        if (state.status === 'success') {
+            setOptions(state.result);
+        }
+    }, [setOptions, state, state.status]);
+    return [options];
+}

package/dist/src/web/components/form/select/year.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import './index.css';
+/**
+ * pc 版简易年份选择器
+ * 传参与 DatePicker 保持一致
+ */
+export default function YearPicker(props: any): JSX.Element;

package/dist/src/web/components/form/select/year.js

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { Popover, ConfigProvider, useConfig, Input, Icon, Button, } from 'tea-component';
+import classNames from '../../../utils/classnames';
+import { moment } from './index';
+import './index.css';
+/**
+ * pc 版简易年份选择器
+ * 传参与 DatePicker 保持一致
+ */
+export default function YearPicker(props) {
+    const { range = [], disabled, value, onChange, className, placeholder, size, ...rest } = props;
+    const { classPrefix } = useConfig();
+    const inputRef = React.useRef(null);
+    const [show, setShow] = React.useState(false);
+    const [page, setPage] = React.useState(0);
+    const [inputValue, setInputValue] = React.useState(transValueToYear(value));
+    const { pageYears, pageStart, pageEnd } = getYears(inputValue, page);
+    const [min, max] = [
+        transValueToYear(range === null || range === void 0 ? void 0 : range[0]),
+        transValueToYear(range === null || range === void 0 ? void 0 : range[1]),
+    ];
+    React.useEffect(() => {
+        setInputValue(transValueToYear(value));
+    }, [value]);
+    return (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+        React.createElement(Popover, { trigger: "click", visible: show, onVisibleChange: (v) => !v && setShow(v), overlay: React.createElement("div", { className: classNames(`${classPrefix}-dropdown-box`, 'year-picker__overlay') },
+                React.createElement("div", { className: classNames(`${classPrefix}-calendar__caption`, 'year-picker__header') },
+                    React.createElement("div", { className: "year-picker__header-title" },
+                        pageStart,
+                        "-",
+                        pageEnd),
+                    React.createElement("div", { className: "year-picker__header-actions" },
+                        React.createElement(Button, { type: "link", icon: "arrowleft", title: "\u4E0A\u4E8C\u5341\u5E74", onClick: () => setPage((d) => d - 1) }),
+                        React.createElement(Button, { type: "link", icon: "cur-active", title: "\u5F53\u524D\u4E8C\u5341\u5E74", onClick: () => setPage(0) }),
+                        React.createElement(Button, { type: "link", icon: "arrowright", title: "\u4E0B\u4E8C\u5341\u5E74", onClick: () => setPage((d) => d + 1) }))),
+                React.createElement("div", { className: classNames(`${classPrefix}-calendar__type--year`, 'year-picker__body') }, pageYears.map((list) => (React.createElement("div", { key: list.join(), className: classNames(`${classPrefix}-calendar__row`) }, list.map((item) => {
+                    const isSelected = item === inputValue;
+                    const isDisabled = (min && Number(item) < Number(min)) ||
+                        (max && Number(item) > Number(max));
+                    return (React.createElement("div", { key: item, className: classNames(`${classPrefix}-calendar__cell`, 'year-picker__cell', {
+                            'is-selected': isSelected,
+                            'is-disabled': isDisabled,
+                        }), onClick: () => {
+                            if (isDisabled)
+                                return;
+                            setShow(false);
+                            setInputValue(item);
+                            onChange === null || onChange === void 0 ? void 0 : onChange(moment(item));
+                        } },
+                        React.createElement("span", null, item)));
+                })))))) },
+            React.createElement("div", { ...rest, onClick: () => !disabled && setShow(true), className: classNames(`${classPrefix}-datepicker`, className) },
+                React.createElement("div", { className: classNames(`${classPrefix}-datepicker__input`) },
+                    React.createElement(Input, { size: size, ref: inputRef, disabled: disabled, placeholder: placeholder, value: inputValue, onFocus: () => inputRef.current.blur() }),
+                    React.createElement(Icon, { type: "dismiss" }))))));
+}
+/**
+ * 获取当前20年，page 表示分页，1表示下一页，-1表示上一页
+ * @returns [][]
+ */
+const getYears = (currentYear, page = 0) => {
+    currentYear = currentYear || new Date().getFullYear();
+    const startYear = (Math.floor(parseInt(currentYear) / 20) + page) * 20;
+    const pageYears = Array.from({ length: 5 }).map((item, i1) => Array.from({ length: 4 }).map((item, i2) => i1 * 4 + i2 + startYear + ''));
+    return { pageYears, pageStart: startYear, pageEnd: startYear + 20 - 1 };
+};
+/**
+ * 输入 moment 值转 string 年份
+ */
+const transValueToYear = (val) => {
+    return moment.isMoment(val) ? val.format('YYYY') : '';
+};

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

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

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

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import classNames from '../../../utils/classnames';
+import getLocalCounter from '../../../utils/getLocalCounter';
+import { usePlatform } from '../../../utils/platform';
+import { ConfigProvider, Switch as TeaSwitch } from 'tea-component';
+import { renderDecorator } from '../renderDecorator';
+import { useSyncValue } from '../../../utils/useSyncValue';
+import { emptyObject } from '../../../utils/constant';
+import styles from './switch.module.css';
+export default function Switch({ 
+// 系统属性
+id, className, style, events = emptyObject, 
+// 组件属性
+label = '标题', labelVisible = true, checked: defaultChecked, layout = 'horizontal', disabled = false, requiredFlag = false, decorator, }) {
+    const isFlex = layout !== 'vertical';
+    const cls = classNames({
+        'weda-ui': true,
+        'weda-switch': true,
+        [className]: className,
+    });
+    const subCls = classNames({
+        'weui-cell': true,
+        'weui-cell_active': true,
+        'weui-cell_switch': true,
+        'weui-flex__item': isFlex,
+        'weui-cell_disabled': disabled,
+    });
+    const platform = usePlatform();
+    // 两次默认值不同时, 需要刷新
+    const [checked, setChecked] = useSyncValue(defaultChecked);
+    // 现在低码组件往源码组件传入的id不唯一, 暂时使用hashcode替代
+    const hashcode = getLocalCounter();
+    const _id = `switch-${hashcode}`;
+    const switchElement = platform === 'h5' ? (React.createElement("div", { className: subCls, "data-testid": "form-switch" },
+        isFlex ? React.createElement("div", { className: "weui-cell__bd" }) : null,
+        React.createElement("div", { className: isFlex ? 'weui-cell__ft' : 'weui-cell__bd' },
+            React.createElement("label", { htmlFor: _id, key: _id, className: "weui-switch-cp" },
+                React.createElement("input", { id: _id, className: `weui-switch-cp__input ${styles.wedaSwitchInput}`, type: "checkbox", checked: checked, disabled: disabled, onChange: (ev) => {
+                        const value = ev.target.checked;
+                        setChecked(value);
+                        events.change({ value }, { orgianalEvent: ev });
+                    } }),
+                React.createElement("div", { className: "weui-switch-cp__box" }))))) : (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+        React.createElement(TeaSwitch, { id: _id, value: checked, disabled: disabled, onChange: (value, context) => {
+                const originEvent = context.event;
+                setChecked(value);
+                events.change({ value }, { originEvent });
+            }, "data-testid": "form-switch" })));
+    return renderDecorator(switchElement, decorator)({
+        id,
+        className: cls,
+        style,
+        label: labelVisible ? label : null,
+        layout,
+        multiCell: false,
+        requiredFlag,
+    });
+}

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

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

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

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import classNames from '../../../utils/classnames';
+import './index.css';
+import { ConfigProvider, Input } from 'tea-component';
+import { usePlatform } from '../../../utils/platform';
+import { renderDecorator } from '../renderDecorator';
+import { useSyncValue } from '../../../utils/useSyncValue';
+import { emptyObject } from '../../../utils/constant';
+export default function Textarea({ 
+// 系统属性
+id, className, style, events = emptyObject, 
+// 组件属性
+label = '标题', labelVisible = true, defaultValue = '', placeholder = '请输入', maxLength = 140, disabled = false, focus: autoFocus = false, layout = 'horizontal', requiredFlag = false, counterVisible = true, size = 'l', decorator, }) {
+    const platform = usePlatform();
+    const cls = classNames({
+        'weda-ui': true,
+        'weda-textarea': true,
+        [className]: className,
+    });
+    const subCls = classNames({
+        'weui-cell': true,
+        'weui-cell_active': true,
+        'weui-cell_form': true,
+        'weui-cell_disabled': disabled,
+    });
+    // 两次默认值不同时, 需要刷新value
+    const [value, setValue] = useSyncValue(defaultValue);
+    const counter = React.useMemo(() => (value === null || value === void 0 ? void 0 : value.length) || 0, [value]);
+    const onChange = function (e) {
+        const text = typeof e === 'string' ? e : e.target.value;
+        setValue(text);
+        events.change({ value: text });
+    };
+    const onFocus = function (e) {
+        var _a;
+        (_a = events.focus) === null || _a === void 0 ? void 0 : _a.call(events, { value: e.target.value }, { originEvent: e });
+    };
+    const onBlur = function (e) {
+        var _a;
+        (_a = events.blur) === null || _a === void 0 ? void 0 : _a.call(events, { value: e.target.value }, { originEvent: e });
+    };
+    let textAreaElement;
+    if (platform === 'h5') {
+        textAreaElement = (React.createElement("div", { className: subCls },
+            React.createElement("div", { className: "weui-cell__bd" },
+                React.createElement("textarea", { className: "weui-textarea", placeholder: placeholder, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, maxLength: maxLength, disabled: disabled, autoFocus: autoFocus }),
+                counterVisible ? (React.createElement("div", { className: "weui-textarea-counter" },
+                    React.createElement("span", null, counter),
+                    "/",
+                    maxLength)) : null)));
+    }
+    else {
+        textAreaElement = (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+            React.createElement(Input.TextArea, { "data-testid": "weui-textarea-test", size: size, placeholder: placeholder, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, maxLength: maxLength, disabled: disabled, autoFocus: autoFocus, showCount: true })));
+    }
+    return renderDecorator(textAreaElement, decorator)({
+        id,
+        className: cls,
+        style,
+        label: labelVisible ? label : null,
+        layout,
+        multiCell: false,
+        requiredFlag,
+        size,
+    });
+}

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

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

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import classNames from '../../../utils/classnames';
+import './index.css';
+export default function Tips({ 
+// 系统属性
+className, 
+// 组件属性
+tips = '表单提示', type = 'normal', id, style, }) {
+    const cls = classNames({
+        'weda-ui': true,
+        'weda-tips': true,
+        'weui-cells__tips': !!tips,
+        'weui-cells__tips_warn': !!tips && type === 'warn',
+        [className]: className,
+    });
+    return (React.createElement("div", { className: cls, id: id, style: style }, tips));
+}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import './index.css';
+export default function Uploader(props: any): JSX.Element;

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

@@ -0,0 +1,42 @@
+/* eslint-disable react/prop-types */
+import * as React from 'react';
+import { usePlatform } from '../../../utils/platform';
+import { ImageUploaderH5 as UploaderH5 } from './uploader.h5';
+import classNames from '../../../utils/classnames';
+import { UploaderPCInner } from './uploader.pc';
+import './index.css';
+import { renderDecorator } from '../renderDecorator';
+/**
+ * 图片组件上传，区分 h5端/pc端
+ */
+function UploaderPc(props) {
+    const { layout, className, id, style, labelVisible = true, title = '上传图片', requiredFlag = false, decorator, ...restProps } = props;
+    const cls = classNames({
+        'weda-ui': true,
+        [className]: className,
+        cloudbase_standard: true,
+    });
+    return renderDecorator(React.createElement(UploaderPCInner, { ...restProps, style: {
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+        } }), decorator)({
+        id,
+        className: cls,
+        style,
+        label: labelVisible ? title : null,
+        layout,
+        multiCell: false,
+        requiredFlag,
+    });
+}
+export default function Uploader(props) {
+    const platform = usePlatform();
+    if ((props === null || props === void 0 ? void 0 : props.showType) === 'pc') {
+        return React.createElement(UploaderPc, { ...props });
+    }
+    if ((props === null || props === void 0 ? void 0 : props.showType) === 'h5') {
+        return React.createElement(UploaderH5, { ...props });
+    }
+    return platform === 'h5' ? (React.createElement(UploaderH5, { ...props })) : (React.createElement(UploaderPc, { ...props }));
+}

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

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

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

@@ -0,0 +1,199 @@
+import * as React from 'react';
+import weui from '../../../utils/weui';
+import classNames from '../../../utils/classnames';
+import { getCloudInstance } from '../../../utils/tcb';
+import isObjectEqual from '../../../utils/isObjectEqual';
+import { useSyncValue } from '../../../utils/useSyncValue';
+import { randomStr } from '../../../utils/platform';
+import { IMAGE_TYPES } from './uploader.pc';
+import { useTempUrl } from '../../../utils/use-cloud-id-temp-url';
+const uploadPath = 'weda-uploader';
+/**
+ * H5端
+ */
+export function ImageUploaderH5({ title, maxUploadCount, maxSize = 10, acceptTypes, className, id, events, layout, defaultValue, single = false, disabled = false, requiredFlag = false, onChange, style, }) {
+    const cls = classNames({
+        'weda-ui': true,
+        'weui-cells': true,
+        'weui-cells_form': true,
+        [className]: className,
+    });
+    // 上传中
+    const [uploading, setUploading] = React.useState(false);
+    //上传进度
+    const [progress, setProgress] = React.useState(0);
+    const [inputValue, setInputValue] = useSyncValue(defaultValue, isObjectEqual);
+    const fileIdList = React.useMemo(() => {
+        //兼容h5默认值为空时情况
+        if (inputValue === null) {
+            setInputValue('');
+        }
+        if (typeof inputValue === 'string') {
+            // single = true 传入的是字符串
+            return [inputValue].filter((i) => i.length > 0); // 排除空串
+        }
+        if (Array.isArray(inputValue)) {
+            return inputValue;
+        }
+        return [];
+    }, [inputValue, setInputValue]);
+    const finalMaxImgCount = React.useMemo(() => {
+        if (single)
+            return 1;
+        return maxUploadCount;
+    }, [single, maxUploadCount]);
+    const deleteFile = (url) => {
+        if (single) {
+            setInputValue('');
+            return;
+        }
+        setInputValue((list) => list.filter((f) => f !== url));
+    };
+    React.useEffect(() => {
+        if (single) {
+            const file = fileIdList[0] || '';
+            onChange && onChange(file);
+            events.change && events.change({ value: file });
+        }
+        else {
+            onChange && onChange(fileIdList);
+            events.change && events.change({ value: fileIdList });
+        }
+    }, [events, fileIdList, onChange, single]);
+    const onProgress = (progressEvent) => {
+        let percentCompleted = 0;
+        try {
+            percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+            percentCompleted < 100 ? percentCompleted : 100;
+        }
+        catch (e) { }
+        setProgress(percentCompleted);
+    };
+    const uploadToTcb = (file) => {
+        setUploading(true);
+        getCloudInstance().then(async (tcb) => {
+            try {
+                const cloudPath = `${uploadPath}/${randomStr()}-${file === null || file === void 0 ? void 0 : file.name}`;
+                const { fileID } = await tcb.uploadFile({
+                    cloudPath,
+                    filePath: file,
+                    onUploadProgress: onProgress,
+                });
+                fileID && setInputValue((list) => [...list, fileID]);
+                fileID && events.success && events.success({ value: fileID, file });
+            }
+            catch (err) {
+                weui.alert('上传失败，请检查网络后重试');
+                events.error && events.error(err);
+            }
+            finally {
+                setUploading(false);
+                setProgress(0);
+            }
+        });
+    };
+    const accepts = React.useMemo(() => {
+        return acceptTypes.includes('image/*') || acceptTypes.length === 0
+            ? IMAGE_TYPES
+            : Array.from(new Set(acceptTypes));
+    }, [acceptTypes]);
+    const islegalType = (files, accepts) => {
+        const illegalType = [];
+        let isImage = true;
+        for (const file of files) {
+            if ((file === null || file === void 0 ? void 0 : file.type.split('/')[0]) !== 'image') {
+                weui.alert('请上传图片', {
+                    title: 'Image Type Error',
+                });
+                isImage = false;
+                break;
+            }
+            accepts.some((item) => item === (file === null || file === void 0 ? void 0 : file.type))
+                ? null
+                : illegalType.push(file === null || file === void 0 ? void 0 : file.type);
+        }
+        if (!isImage)
+            return false;
+        if (illegalType.length > 0) {
+            weui.alert('不支持上传' + Array.from(new Set(illegalType)).join(',') + '格式图片');
+            return false;
+        }
+        return true;
+    };
+    const showAdd = React.useMemo(() => {
+        if (single) {
+            // single 模式时，当数组为空且不在上传文件过程中时显示
+            return fileIdList.length < 1 && !uploading;
+        }
+        return fileIdList.length < maxUploadCount;
+    }, [fileIdList, single, maxUploadCount, uploading]);
+    return (React.createElement("div", { className: cls, id: id, style: style },
+        React.createElement("div", { className: classNames('weui-uploader', layout) },
+            React.createElement("div", { className: classNames('weui-uploader__hd', layout) },
+                React.createElement(UploaderLabel, { layout: layout, title: title, currentCount: fileIdList.length, maxCount: finalMaxImgCount, requiredFlag: requiredFlag })),
+            React.createElement("div", { className: "weui-uploader__bd" },
+                React.createElement("ul", { className: "weui-uploader__files", id: "uploaderFiles" },
+                    (fileIdList !== null && fileIdList !== void 0 ? fileIdList : []).map((f) => (React.createElement(SingleImage, { key: f, src: f, deleteBySrc: deleteFile, disabled: disabled }))),
+                    uploading && (React.createElement("li", { className: "weui-uploader__file weui-uploader__file_status" },
+                        React.createElement("div", { className: "weui-uploader__file-content" },
+                            progress,
+                            "%")))),
+                showAdd && (React.createElement("div", { className: "weui-uploader__input-box" }, !disabled && (React.createElement("input", { id: "uploaderInput", className: "weui-uploader__input", type: "file", accept: accepts.join(','), multiple: true, onChange: (e) => {
+                        const files = [...e.target.files];
+                        if (!islegalType(files, accepts))
+                            return;
+                        if (files.some((f) => f.size > maxSize * 1024 * 1024)) {
+                            weui.alert('请上传不超过10M的图片');
+                            return false;
+                        }
+                        if (files.length > finalMaxImgCount) {
+                            // 防止一下子选择过多文件
+                            weui.alert(`最多只能上传${finalMaxImgCount}张图片，请重新选择`);
+                            return false;
+                        }
+                        if (fileIdList.length + files.length > finalMaxImgCount) {
+                            weui.alert(`最多只能上传${finalMaxImgCount}张图片`);
+                            return false;
+                        }
+                        files.forEach((f) => uploadToTcb(f));
+                    } }))))))));
+}
+function SingleImage({ src, deleteBySrc }) {
+    const cls = classNames({
+        'weui-uploader__file': true,
+    });
+    const { data: realSrc, error } = useTempUrl(src);
+    const imgStyle = {
+        backgroundImage: `url(${realSrc})`,
+    };
+    const showGallery = () => {
+        const gallery = weui.gallery(encodeURI(realSrc), {
+            onDelete: function () {
+                deleteBySrc(src);
+                gallery.hide();
+            },
+        });
+    };
+    return (React.createElement("li", { className: cls, style: imgStyle, onClick: showGallery }, error || status ? (React.createElement("div", { className: "weui-uploader__file-content" }, error ? (React.createElement("i", { role: "img", "aria-label": "\u9519\u8BEF", className: "weui-icon-warn" })) : (React.createElement("i", { className: "weui-loading", style: { width: 30, height: 30 } })))) : (false)));
+}
+const UploaderLabel = ({ layout, title, currentCount, maxCount, requiredFlag, }) => {
+    if (layout === 'horizontal') {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "weda-formcells__label weui-cell" },
+                React.createElement("div", null,
+                    React.createElement("p", { className: "weui-uploader__title" }, title),
+                    React.createElement("div", { className: "weui-uploader__info" },
+                        React.createElement("span", { id: "uploadCount" }, currentCount),
+                        "/",
+                        maxCount)),
+                requiredFlag && React.createElement("label", { className: "weda-formcells__flag" }, "*"))));
+    }
+    return (React.createElement("div", { className: "weda-formcells__label weui-cell" },
+        React.createElement("div", { className: "weui-uploader__label" },
+            React.createElement("p", { className: "weui-uploader__title" }, title),
+            requiredFlag && React.createElement("label", { className: "weda-formcells__flag" }, "*")),
+        React.createElement("div", { className: "weui-uploader__info" },
+            React.createElement("span", { id: "uploadCount" }, currentCount),
+            "/",
+            maxCount)));
+};

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

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