@canlooks/can-ui 0.0.1

package/dist/cjs/components/typography/typography.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Typography = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const typography_style_1 = require("./typography.style");
+const button_1 = require("../button");
+const icons_1 = require("@ant-design/icons");
+const tooltip_1 = require("../tooltip");
+const input_1 = require("../input");
+const textarea_1 = require("../textarea");
+exports.Typography = (0, react_1.memo)((0, react_1.forwardRef)(({ component: Component = 'p', color = 'text', editable, onEditFinish, copyable, onCopy, editComponentProps, ellipsisRows = 0, wordBreak = 'break-all', expandable, expandButtonProps, ...props }, ref) => {
+    /**
+     * -------------------------------------------------------------------
+     * 编辑
+     */
+    const [editing, setEditing] = (0, react_1.useState)(false);
+    const [multipleRows, setMultipleRows] = (0, react_1.useState)(false);
+    const [originHeight, setOriginHeight] = (0, react_1.useState)(0);
+    const [defaultText, setDefaultText] = (0, react_1.useState)('');
+    const innerRef = (0, react_1.useRef)(null);
+    const editHandler = () => {
+        const { height, lineHeight, marginTop, marginBottom } = getComputedStyle(innerRef.current);
+        const heightNum = parseFloat(height);
+        setOriginHeight(heightNum + parseFloat(marginTop) + parseFloat(marginBottom));
+        setDefaultText(innerRef.current.innerText);
+        setMultipleRows(heightNum >= parseFloat(lineHeight) * 2);
+        setEditing(true);
+    };
+    const blurHandler = (e) => {
+        setEditing(false);
+        onEditFinish?.(e.target.value);
+    };
+    /**
+     * -------------------------------------------------------------------
+     * 复制
+     */
+    const textRef = (0, react_1.useRef)(null);
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const unmounted = (0, utils_1.useUnmounted)();
+    const copyHandler = () => {
+        if (copied) {
+            return;
+        }
+        const text = textRef.current.innerText;
+        navigator.clipboard.writeText(text);
+        onCopy?.(text);
+        setCopied(true);
+        setTimeout(() => {
+            !unmounted.current && setCopied(false);
+        }, 3000);
+    };
+    /**
+     * -------------------------------------------------------------------
+     * 省略
+     */
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    (0, react_1.useLayoutEffect)(() => {
+        if (textRef.current && ellipsisRows > 1) {
+            const { lineHeight } = getComputedStyle(textRef.current);
+            textRef.current.style.height = parseFloat(lineHeight) * ellipsisRows + 'px';
+        }
+    });
+    const style = (0, typography_style_1.useStyle)({ color });
+    const EditComponent = multipleRows ? textarea_1.Textarea : input_1.Input;
+    return editing
+        ? (0, jsx_runtime_1.jsx)("div", { css: typography_style_1.editStyle, className: typography_style_1.classes.editWrap, style: { height: originHeight }, children: (0, jsx_runtime_1.jsx)(EditComponent, { ...editComponentProps, className: (0, utils_1.classnames)(typography_style_1.classes.editComponent, editComponentProps?.className), autoFocus: true, defaultValue: defaultText, onBlur: blurHandler, fullWidth: multipleRows ? true : void 0 }) })
+        : (0, jsx_runtime_1.jsxs)(Component, { "data-component": typeof Component === 'string' ? Component : '', ...props, ref: (0, utils_1.cloneRef)(ref, innerRef), css: style, className: (0, utils_1.classnames)(typography_style_1.classes.root, props.className), "data-ellipsis-rows": expanded ? '0' : ellipsisRows, children: [(0, jsx_runtime_1.jsx)("span", { ref: textRef, className: typography_style_1.classes.text, style: {
+                        WebkitLineClamp: ellipsisRows > 1 ? ellipsisRows : void 0,
+                        wordBreak
+                    }, children: props.children }), !expanded && expandable && ellipsisRows > 0 &&
+                    (0, jsx_runtime_1.jsx)(button_1.Button, { ...expandButtonProps, className: (0, utils_1.classnames)(typography_style_1.classes.expand, typography_style_1.classes.action, expandButtonProps?.className), variant: "plain", onClick: () => setExpanded(true), children: "\u5C55\u5F00" }), editable &&
+                    (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u7F16\u8F91", children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: typography_style_1.classes.action, variant: "plain", onClick: editHandler, children: (0, jsx_runtime_1.jsx)(icons_1.EditOutlined, {}) }) }), copyable && (copied
+                    ? (0, jsx_runtime_1.jsx)("div", { className: typography_style_1.classes.copied, children: (0, jsx_runtime_1.jsx)(icons_1.CheckOutlined, {}) })
+                    : (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u590D\u5236", children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: typography_style_1.classes.action, variant: "plain", onClick: copyHandler, children: (0, jsx_runtime_1.jsx)(icons_1.CopyOutlined, {}) }) }))] });
+}));
+exports.Typography.h1 = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "h1" })));
+exports.Typography.h2 = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "h2" })));
+exports.Typography.h3 = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "h3" })));
+exports.Typography.h4 = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "h4" })));
+exports.Typography.h5 = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "h5" })));
+exports.Typography.h6 = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "h6" })));
+exports.Typography.mark = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "mark" })));
+exports.Typography.code = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "code" })));
+exports.Typography.kbd = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "kbd" })));
+exports.Typography.a = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "a" })));
+exports.Typography.i = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "i" })));
+exports.Typography.b = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "b" })));
+exports.Typography.u = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "u" })));
+exports.Typography.del = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "del" })));

package/dist/cjs/components/typography/typography.style.d.ts

@@ -0,0 +1,14 @@
+import { TypographyProps } from './typography';
+export declare const classes: {
+    text: string;
+    ellipsis: string;
+    action: string;
+    expand: string;
+    copied: string;
+    editWrap: string;
+    editComponent: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ color }: Required<Pick<TypographyProps, 'color'>>): import("@emotion/react").SerializedStyles;
+export declare const editStyle: import("@emotion/react").SerializedStyles;

package/dist/cjs/components/typography/typography.style.js

@@ -0,0 +1,164 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.editStyle = exports.classes = void 0;
+exports.useStyle = useStyle;
+const tslib_1 = require("tslib");
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const color_1 = tslib_1.__importDefault(require("color"));
+exports.classes = (0, utils_1.defineClasses)('typography', [
+    'text',
+    'ellipsis',
+    'expand',
+    'action',
+    'copied',
+    'editWrap',
+    'editComponent'
+]);
+function useStyle({ color }) {
+    const colorValue = (0, utils_1.useColor)(color);
+    return (0, utils_1.useCss)(({ mode, colors, gray, borderRadius, easing }) => {
+        const lighter = (0, color_1.default)(colorValue).lighten(.1).hex();
+        return (0, react_1.css) `
+            color: ${colorValue};
+
+            &[data-component=p] {
+                margin: 1em 0;
+            }
+
+            &[data-component=h1],
+            &[data-component=h2],
+            &[data-component=h3],
+            &[data-component=h4],
+            &[data-component=h5],
+            &[data-component=h6] {
+                margin-top: 1em;
+                margin-bottom: 0.5em;
+            }
+            
+            &[data-component=h1] {
+                font-size: ${38 / 14}em;
+            }
+            
+            &[data-component=h2] {
+                font-size: ${30 / 14}em;
+            }
+            
+            &[data-component=h3] {
+                font-size: ${24 / 14}em;
+            }
+            
+            &[data-component=h4] {
+                font-size: ${20 / 14}em;
+            }
+            
+            &[data-component=h5] {
+                font-size: ${17 / 14}em;
+            }
+            
+            &[data-component=h6] {
+                font-size: 1em;
+            }
+
+            &[data-component=mark] {
+                background-color: ${(0, color_1.default)(colors.warning).lighten(.2).hex()};
+            }
+
+            &[data-component=kbd] {
+                background-color: ${gray(mode === 'light' ? .06 : .22)};
+                font-size: ${13 / 14}em;
+                padding: 4px 6px;
+                border-radius: ${borderRadius / 2}px;
+                box-shadow: ${mode === 'light'
+            ? '0 1px 2px rgba(0, 0, 0, .4), -1px 2px rgba(255, 255, 255, .4)'
+            : '-1px 2px rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .6)'};
+                margin: 0 3px;
+            }
+
+            &[data-component=code] {
+                background-color: ${gray(.08)};
+                border: 1px solid ${gray(.3)};
+                font-size: ${13 / 14}em;
+                padding: 3px 6px;
+                border-radius: .15em;
+                margin: 0 3px;
+            }
+
+            &[data-component=a] {
+                color: ${colors.primary};
+                transition: color .2s ${easing.easeOut};
+
+                &:hover {
+                    color: ${lighter};
+                }
+
+                &:active {
+                    transition: color 0s;
+                    color: ${lighter};
+                }
+            }
+
+            &:not([data-ellipsis-rows="0"]) {
+                display: flex;
+                max-width: 100%;
+                align-items: flex-end;
+
+                &[data-component=mark],
+                &[data-component=kbd],
+                &[data-component=code],
+                &[data-component=a] {
+                    display: inline-flex;
+                }
+
+                .${exports.classes.text} {
+                    overflow: hidden;
+                }
+
+                &[data-ellipsis-rows="1"] {
+                    .${exports.classes.text} {
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                    }
+                }
+
+                &:not([data-ellipsis-rows="1"]) {
+                    .${exports.classes.text} {
+                        display: -webkit-box;
+                        -webkit-box-orient: vertical;
+                    }
+                }
+            }
+
+            .${exports.classes.action},
+            .${exports.classes.copied} {
+                height: 1.5em;
+                vertical-align: text-bottom;
+                margin-left: .5em;
+                white-space: nowrap;
+            }
+
+            .${exports.classes.copied} {
+                align-items: center;
+                color: ${colors.success};
+                animation: ${copyCheckAnim} .2s ${easing.swing};
+            }
+        `;
+    }, [colorValue]);
+}
+const copyCheckAnim = (0, react_1.keyframes) `
+    0% {
+        transform: scale(0);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+`;
+exports.editStyle = (0, react_1.css) `
+    display: flex;
+    align-items: center;
+
+    .${exports.classes.editComponent} {
+        flex: 1;
+    }
+`;

package/dist/cjs/components/upload/dropArea.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { DIVProps } from '../../../types';
+export interface DropAreaProps extends Omit<DIVProps, 'onDrop'> {
+    description?: ReactNode;
+    onDrop?(files: FileList): void;
+}
+export declare const DropArea: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<DropAreaProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/cjs/components/upload/dropArea.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropArea = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const dropArea_style_1 = require("./dropArea.style");
+const utils_1 = require("../../utils");
+const icons_1 = require("@ant-design/icons");
+exports.DropArea = (0, react_1.memo)((0, react_1.forwardRef)(({ description = '将文件拖拽到这里', onDrop, ...props }, ref) => {
+    const [draggingOver, setDraggingOver] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const fn = (e) => e.preventDefault();
+        document.body.addEventListener('dragenter', fn);
+        document.body.addEventListener('dragover', fn);
+        document.body.addEventListener('drop', fn);
+        return () => {
+            document.body.removeEventListener('dragenter', fn);
+            document.body.removeEventListener('dragover', fn);
+            document.body.removeEventListener('drop', fn);
+        };
+    }, []);
+    const dropHandler = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const { files } = e.dataTransfer;
+        files.length && onDrop?.(files);
+        setDraggingOver(false);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: dropArea_style_1.style, className: (0, utils_1.classnames)(dropArea_style_1.classes.root, props.className), "data-over": draggingOver, onDragEnter: e => {
+            props.onDragEnter?.(e);
+            setDraggingOver(true);
+        }, onDragLeave: e => {
+            props.onDragLeave?.(e);
+            setDraggingOver(false);
+        }, onDrop: dropHandler, children: [(0, jsx_runtime_1.jsx)(icons_1.InboxOutlined, { className: dropArea_style_1.classes.icon }), (0, jsx_runtime_1.jsx)("div", { className: dropArea_style_1.classes.description, children: description })] }));
+}));

package/dist/cjs/components/upload/dropArea.style.d.ts

@@ -0,0 +1,7 @@
+export declare const classes: {
+    icon: string;
+    description: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/cjs/components/upload/dropArea.style.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('upload-drop-area', [
+    'icon',
+    'description'
+]);
+exports.style = (0, utils_1.defineCss)(({ spacing, gray, divider, borderRadius, text, colors }) => (0, react_1.css) `
+    height: 100px;
+    display: flex;
+    gap: ${spacing[1]}px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border: 1px dashed ${divider};
+    background-color: ${gray(.1)};
+    border-radius: ${borderRadius}px;
+    color: ${text.disabled};
+
+    .${exports.classes.icon}, .${exports.classes.description} {
+        pointer-events: none;
+    }
+
+    .${exports.classes.icon} {
+        font-size: ${30 / 14}em;
+    }
+
+    &[data-over=true] {
+        border-color: ${colors.primary};
+        color: ${colors.primary};
+    }
+`);

package/dist/cjs/components/upload/fileItem.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement, Ref } from 'react';
+import { ItemProps, ItemRef } from './itemStatus';
+export declare const FileItem: <R, A extends any[]>(props: ItemProps<R, A> & {
+    ref?: Ref<ItemRef<R, A>>;
+}) => ReactElement;

package/dist/cjs/components/upload/fileItem.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileItem = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const upload_style_1 = require("./upload.style");
+const icons_1 = require("@ant-design/icons");
+const loadingIndicator_1 = require("../loadingIndicator");
+const button_1 = require("../button");
+const progress_1 = require("../progress");
+const app_1 = require("../app");
+const itemStatus_1 = require("./itemStatus");
+exports.FileItem = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
+    const { status, progress } = (0, itemStatus_1.useItemStatus)(props, ref);
+    const { colors } = (0, app_1.useTheme)();
+    const statusToIcon = {
+        'default': (0, jsx_runtime_1.jsx)(icons_1.PaperClipOutlined, {}),
+        uploading: (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {}),
+        success: (0, jsx_runtime_1.jsx)(icons_1.CheckCircleFilled, { style: { color: colors.success } }),
+        error: (0, jsx_runtime_1.jsx)(icons_1.CloseCircleFilled, { style: { color: colors.error } })
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: upload_style_1.classes.file, "data-status": status, children: [(0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.icon, children: statusToIcon[status] }), (0, jsx_runtime_1.jsxs)("div", { className: upload_style_1.classes.info, children: [(0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.name, children: props.file.name }), status !== 'default' &&
+                        (0, jsx_runtime_1.jsx)(progress_1.Progress, { className: upload_style_1.classes.progress, barWidth: 2, showInfo: false, value: progress, status: status === 'uploading' ? 'processing' : status })] }), (0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.control, children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "plain", color: "error", onClick: props.onRemove, children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}) }) })] }));
+}));

package/dist/cjs/components/upload/imageItem.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement, Ref } from 'react';
+import { ItemProps, ItemRef } from './itemStatus';
+export declare const ImageItem: <R, A extends any[]>(props: ItemProps<R, A> & {
+    ref?: Ref<ItemRef<R, A>>;
+}) => ReactElement;

package/dist/cjs/components/upload/imageItem.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageItem = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const itemStatus_1 = require("./itemStatus");
+const upload_style_1 = require("./upload.style");
+const image_1 = require("../image");
+const button_1 = require("../button");
+const icons_1 = require("@ant-design/icons");
+const progress_1 = require("../progress");
+const utils_1 = require("../../utils");
+exports.ImageItem = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
+    const [previewOpen, setPreviewOpen] = (0, react_1.useState)(false);
+    const { status, progress } = (0, itemStatus_1.useItemStatus)(props, ref);
+    return ((0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.imageWrap, children: (0, jsx_runtime_1.jsx)(image_1.Image, { className: upload_style_1.classes.image, src: props.file.url, previewProps: {
+                open: previewOpen,
+                onOpenChange: setPreviewOpen
+            }, actions: [
+                (0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", variant: "text", shape: "circular", color: "text", onClick: () => setPreviewOpen(true), children: (0, jsx_runtime_1.jsx)(icons_1.EyeOutlined, {}) }, "preview"),
+                (0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", variant: "text", shape: "circular", color: "error", onClick: props.onRemove, children: (0, jsx_runtime_1.jsx)(icons_1.DeleteOutlined, {}) }, "delete")
+            ], children: status !== 'default' &&
+                (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.classnames)(upload_style_1.classes.progress), children: (0, jsx_runtime_1.jsx)(progress_1.Progress, { variant: "circular", showInfo: status !== 'uploading', value: progress, status: status === 'uploading' ? 'processing' : status }) }) }) }));
+}));

package/dist/cjs/components/upload/index.d.ts

@@ -0,0 +1,2 @@
+export * from './dropArea';
+export * from './upload';

package/dist/cjs/components/upload/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./dropArea"), exports);
+tslib_1.__exportStar(require("./upload"), exports);

package/dist/cjs/components/upload/itemStatus.d.ts

@@ -0,0 +1,15 @@
+import { Dispatch, Ref, SetStateAction } from 'react';
+import { UploadSharedProps, UploadFile, UploadStatus } from './upload';
+export type ItemRef<R, A extends any[]> = {
+    upload(...args: A): Promise<R>;
+    setStatus: Dispatch<SetStateAction<UploadStatus>>;
+    setProgress: Dispatch<SetStateAction<number>>;
+};
+export interface ItemProps<R, A extends any[]> extends UploadSharedProps<R, A> {
+    file: UploadFile<R, A>;
+    onRemove(): void;
+}
+export declare function useItemStatus<R, A extends any[]>(props: ItemProps<R, A>, ref: Ref<ItemRef<R, A>>): {
+    status: "success" | "error" | "default" | "uploading";
+    progress: number;
+};

package/dist/cjs/components/upload/itemStatus.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemStatus = useItemStatus;
+const react_1 = require("react");
+function useItemStatus(props, ref) {
+    if (props.type === 'image') {
+        props.file.url ||= URL.createObjectURL(props.file);
+    }
+    const upload = props.file.upload = async (...args) => {
+        try {
+            setStatus('uploading');
+            setProgress(0);
+            const ret = await props.onUpload([props.file], setProgress, ...args);
+            setStatus('success');
+            setProgress(100);
+            return ret;
+        }
+        catch (e) {
+            setStatus('error');
+            throw e;
+        }
+    };
+    const [status, setStatus] = (0, react_1.useState)(props.file.status || 'default');
+    props.file.status = status;
+    const [progress, setProgress] = (0, react_1.useState)(0);
+    props.file.progress = progress;
+    (0, react_1.useImperativeHandle)(ref, () => ({ upload, setStatus, setProgress }));
+    return { status, progress };
+}

package/dist/cjs/components/upload/upload.d.ts

@@ -0,0 +1,46 @@
+import { Dispatch, ReactElement, ReactNode, Ref, SetStateAction } from 'react';
+import { DIVProps } from '../../../types';
+import { ButtonProps } from '../button';
+import { DropArea } from './dropArea';
+export type UploadStatus = 'default' | 'uploading' | 'success' | 'error';
+export interface UploadFile<R, A extends any[]> extends File {
+    id: string;
+    progress?: number;
+    status?: UploadStatus;
+    url?: string;
+    upload?(...args: A): Promise<R>;
+}
+export interface UploadSharedProps<R, A extends any[]> {
+    type?: 'file' | 'image';
+    onUpload(files: UploadFile<R, A>[], setProgress: Dispatch<SetStateAction<number>>, ...args: A): Promise<R>;
+}
+export interface UploadProps<R, A extends any[]> extends UploadSharedProps<R, A>, Omit<DIVProps, 'defaultValue' | 'onChange'> {
+    inputProps?: JSX.IntrinsicElements['input'];
+    inputRef?: Ref<HTMLInputElement>;
+    accept?: string;
+    max?: number;
+    /**
+     * 是否显示"选择文件"按钮
+     * {@link type}为"file"生效
+     * @default true
+     */
+    showButton?: boolean;
+    buttonProps?: ButtonProps;
+    buttonText?: ReactNode;
+    /** {@link type}为"image"生效 */
+    variant?: 'square' | 'circular';
+    size?: number;
+    /** 是否支持“将文件拖拽到此处” */
+    droppable?: boolean;
+    sortable?: boolean;
+    defaultValue?: UploadFile<R, A>[];
+    value?: UploadFile<R, A>[];
+    onChange?(value: UploadFile<R, A>[]): void;
+}
+export interface UploadRef<R = any, A extends any[] = any[]> extends HTMLDivElement {
+    upload(...args: A): Promise<R>;
+}
+export declare const Upload: {
+    <R, A extends any[]>(props: UploadProps<R, A>): ReactElement;
+    DropArea: typeof DropArea;
+};

package/dist/cjs/components/upload/upload.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Upload = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const upload_style_1 = require("./upload.style");
+const utils_1 = require("../../utils");
+const button_1 = require("../button");
+const icons_1 = require("@ant-design/icons");
+const fileItem_1 = require("./fileItem");
+const react_transition_group_1 = require("react-transition-group");
+const transitionBase_1 = require("../transitionBase");
+const imageItem_1 = require("./imageItem");
+const core_1 = require("@dnd-kit/core");
+const sortable_1 = require("@dnd-kit/sortable");
+const sortableItem_1 = require("../sortableItem");
+const dropArea_1 = require("./dropArea");
+const markFileId = (files) => {
+    if (files) {
+        for (const file of files) {
+            file.id ||= (0, utils_1.getShortID)();
+        }
+    }
+};
+exports.Upload = (0, react_1.memo)((0, react_1.forwardRef)(({ inputProps, inputRef, type = 'file', accept = type === 'image' ? 'image/*' : void 0, max = Infinity, showButton = true, buttonProps, buttonText = '选择文件', variant = 'square', sortable, droppable, defaultValue = [], value, onChange, onUpload, ...props }, ref) => {
+    const wrapperRef = (0, react_1.useRef)(null);
+    const itemRefs = (0, react_1.useRef)(new Map());
+    (0, react_1.useImperativeHandle)(ref, () => {
+        wrapperRef.current.upload = async (...args) => {
+            for (const [, itemRef] of itemRefs.current) {
+                itemRef?.setStatus('uploading');
+                itemRef?.setProgress(0);
+            }
+            try {
+                const ret = await onUpload(innerValue.current, progress => {
+                    for (const [, itemRef] of itemRefs.current) {
+                        itemRef?.setProgress(progress);
+                    }
+                }, ...args);
+                for (const [, itemRef] of itemRefs.current) {
+                    itemRef?.setStatus('success');
+                    itemRef?.setProgress(100);
+                }
+                return ret;
+            }
+            catch (e) {
+                for (const [, itemRef] of itemRefs.current) {
+                    itemRef?.setStatus('error');
+                }
+                throw e;
+            }
+        };
+        return wrapperRef.current;
+    });
+    const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, value => {
+        markFileId(value);
+        onChange?.(value);
+    });
+    markFileId(innerValue.current);
+    const innerInputRef = (0, react_1.useRef)(null);
+    const buttonClick = (e) => {
+        buttonProps?.onClick?.(e);
+        innerInputRef.current.click();
+    };
+    const inputChangeHandler = (e) => {
+        inputProps?.onChange?.(e);
+        changeFn(e.target.files);
+        // 触发onChange后需要清空输入框的值，避免下次上传相同文件时不触发onChange
+        e.target.value = '';
+    };
+    const changeFn = (files) => {
+        if (!files?.length) {
+            return;
+        }
+        if (max === 1) {
+            setInnerValue([files[0]]);
+        }
+        else {
+            const remain = max - innerValue.current.length;
+            remain > 0 && setInnerValue(o => {
+                const newValue = [
+                    ...o,
+                    ...[...files].slice(0, remain)
+                ];
+                return type === 'file' ? newValue : newValue.reverse();
+            });
+        }
+    };
+    const removeHandler = (id) => {
+        setInnerValue(o => o.filter(f => f.id !== id));
+    };
+    const dragEndHandler = (e) => {
+        const newValue = (0, utils_1.onDndDragEnd)(e, innerValue.current);
+        newValue && setInnerValue(newValue);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: wrapperRef, css: upload_style_1.style, className: (0, utils_1.classnames)(upload_style_1.classes.root, props.className), "data-file-type": type, "data-variant": variant, "data-sortable": sortable, children: [(0, jsx_runtime_1.jsx)("input", { type: "file", accept: accept, multiple: max !== 1, ...inputProps, ref: (0, utils_1.cloneRef)(innerInputRef, inputRef), className: (0, utils_1.classnames)(upload_style_1.classes.input, inputProps?.className), onChange: inputChangeHandler, "data-hidden": "true" }), (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: innerValue.current, disabled: !sortable, children: type === 'file'
+                        ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showButton &&
+                                    (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", prefix: (0, jsx_runtime_1.jsx)(icons_1.UploadOutlined, {}), ...buttonProps, onClick: buttonClick, children: buttonText }), (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { className: upload_style_1.classes.files, children: innerValue.current.map(file => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { component: transitionBase_1.Collapse, className: upload_style_1.classes.sortable, id: file.id, children: (0, jsx_runtime_1.jsx)(fileItem_1.FileItem, { ref: r => itemRefs.current.set(file.id, r), file: file, onRemove: () => removeHandler(file.id), onUpload: onUpload }) }, file.id)) })] })
+                        : (0, jsx_runtime_1.jsxs)(react_transition_group_1.TransitionGroup, { className: upload_style_1.classes.images, children: [(0, jsx_runtime_1.jsx)(transitionBase_1.Grow, { children: (0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.imageWrap, "data-clickable": "true", children: (0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.image, onClick: () => innerInputRef.current.click(), children: (0, jsx_runtime_1.jsx)(icons_1.PlusOutlined, {}) }) }) }), innerValue.current.map(file => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { component: transitionBase_1.Collapse, className: upload_style_1.classes.sortable, id: file.id, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(imageItem_1.ImageItem, { ref: r => itemRefs.current.set(file.id, r), type: type, file: file, onRemove: () => removeHandler(file.id), onUpload: onUpload }, file.id) }, file.id))] }) }) })] }));
+}));
+exports.Upload.DropArea = dropArea_1.DropArea;

package/dist/cjs/components/upload/upload.style.d.ts

@@ -0,0 +1,17 @@
+export declare const classes: {
+    info: string;
+    input: string;
+    progress: string;
+    image: string;
+    icon: string;
+    name: string;
+    file: string;
+    control: string;
+    files: string;
+    images: string;
+    imageWrap: string;
+    sortable: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;