@cloudbase/weda-ui 2.0.27 → 3.1.1

package/dist/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, range = []) => {
+    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/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/web/components/form/switch/index.js

@@ -0,0 +1,57 @@
+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';
+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 },
+        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" },
+                !disabled && (React.createElement("input", { id: _id, className: "weui-switch-cp__input", 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 });
+            } })));
+    return renderDecorator(switchElement, decorator)({
+        id,
+        className: cls,
+        style,
+        label: labelVisible ? label : null,
+        layout,
+        multiCell: false,
+        requiredFlag,
+    });
+}

package/{src → dist}/web/components/form/textarea/index.css

@@ -3,7 +3,7 @@
 }
 
 .weda-ui .weda-textarea .weui-cell_form {
-  padding: 16px;
+  padding: 1.14286rem;
 }
 
 .weda-ui .weda-textarea .weui-flex__item .weui-cell_form {

package/dist/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/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, { 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/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/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/{src → dist}/web/components/form/uploader/index.css

@@ -8,17 +8,17 @@
 
 .weda-uploader-pc .weda-uploader-pc__title {
   color: #000000;
-  line-height: 20px;
+  line-height: 1.42857rem;
   font-weight: 400;
-  margin-bottom: 4px;
+  margin-bottom: 0.28571rem;
 }
 
 /* 单张图片回显 */
 .weda-uploader-pc .weda-uploader-pc__image-box {
-  height: 100px;
-  width: 100px;
-  margin-right: 8px;
-  margin-bottom: 8px;
+  height: 7.14286rem;
+  width: 7.14286rem;
+  margin-right: 0.57143rem;
+  margin-bottom: 0.57143rem;
   background: #f2f2f2;
   position: relative;
   display: flex;
@@ -28,21 +28,21 @@
 }
 
 .weda-uploader-pc .weda-uploader-pc__body {
-  margin-bottom: 8px;
+  margin-bottom: 0.57143rem;
 }
 
 .weda-uploader-pc .weda-uploader-pc__input-box {
-  margin-bottom: 8px;
+  margin-bottom: 0.57143rem;
 }
 .weda-uploader-pc.cloudbase_standard .weda-uploader-pc__body {
-  margin-bottom: 0px;
+  margin-bottom: 0;
 }
 
 .weda-uploader-pc.cloudbase_standard .weda-uploader-pc__input-box {
-  margin-bottom: 0px;
+  margin-bottom: 0;
 }
 .weda-uploader-pc.cloudbase_standard .weda-uploader-pc__image-list {
-  margin-left: 8px;
+  margin-left: 0.57143rem;
 }
 
 .weda-uploader-pc .weda-uploader-pc__image-box:hover .weda-uploader-pc__action {
@@ -81,7 +81,7 @@
 }
 
 .weui-uploader.horizontal .weda-formcells__label {
-  width: 130px;
+  width: 9.28571rem;
 }
 
 .weda-ui .weui-uploader__hd {
@@ -97,10 +97,10 @@
 }
 
 .weda-ui .weui-uploader.horizontal .weui-uploader__bd {
-  padding: 16px 0;
+  padding: 1.14286rem 0;
 }
 .weda-ui .weui-uploader.vertical .weui-uploader__bd {
-  padding: 16px;
+  padding: 1.14286rem;
 }
 
 .weui-uploader__hd.vertical {

package/dist/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/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/web/components/form/uploader/uploader.h5.d.ts

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

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

@@ -0,0 +1,201 @@
+import * as React from 'react';
+import weui from '../../../utils/weui';
+import classNames from '../../../utils/classnames';
+import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
+import isObjectEqual from '../../../utils/isObjectEqual';
+import { useSyncValue } from '../../../utils/useSyncValue';
+import { isCloudFileID, randomStr } from '../../../utils/platform';
+import { IMAGE_TYPES } from './uploader.pc';
+const uploadPath = 'weda-uploader';
+/**
+ * H5端
+ */
+export function ImageUploaderH5({ title, maxUploadCount, maxSize = 10, acceptTypes, className, id, events, layout, defaultValue, single = 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 inputValueRef = React.useRef(inputValue);
+    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]);
+    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 });
+        }
+    }, [fileIdList]);
+    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) => {
+        if ((file === null || file === void 0 ? void 0 : file.type.split('/')[0]) !== 'image') {
+            weui.alert('请上传图片', {
+                title: 'Image Type Error',
+            });
+            return false;
+        }
+        setUploading(true);
+        getCloudInstance().then(async (tcb) => {
+            var _a;
+            try {
+                const fileType = (_a = file.type.split('/')) === null || _a === void 0 ? void 0 : _a[1];
+                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(`${err}` || '上传失败');
+                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 showAdd = React.useMemo(() => {
+        if (single) {
+            // single 模式时，仅当数组为空时显示
+            return fileIdList.length < 1;
+        }
+        return fileIdList.length < maxUploadCount;
+    }, [fileIdList, single, maxUploadCount]);
+    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 }))),
+                    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" },
+                    React.createElement("input", { id: "uploaderInput", className: "weui-uploader__input", type: "file", accept: accepts.join(','), multiple: true, onChange: (e) => {
+                            const files = [...e.target.files];
+                            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 [error, setError] = React.useState(false);
+    const cls = classNames({
+        'weui-uploader__file': true,
+    });
+    const [realSrc, setRealSrc] = React.useState('');
+    React.useEffect(() => {
+        const getSrc = async () => {
+            try {
+                const _src = await getTempFileURL(src);
+                setRealSrc(_src);
+                return _src;
+            }
+            catch (e) {
+                setError(true);
+                console.error('图片加载失败');
+            }
+        };
+        if (isCloudFileID(src)) {
+            getSrc();
+        }
+        else {
+            setRealSrc(src);
+        }
+    }, [src]);
+    const imgStyle = {
+        backgroundImage: `url(${realSrc})`,
+    };
+    const showGallery = () => {
+        const gallery = weui.gallery(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/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;
+}