@ioca/react 1.5.10 → 1.5.11

package/lib/index.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import classNames from 'classnames';
-import { debounce, uid, throttle, title } from 'radash';
+import { debounce, uid, throttle } from 'radash';
 import { useState, useRef, useEffect, useCallback, useMemo, Children, cloneElement, createElement, isValidElement, memo, Fragment as Fragment$1, useTransition, forwardRef, useLayoutEffect, createContext, useContext, useImperativeHandle } from 'react';
-import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, UndoRound, RedoRound, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, StrikethroughSRound, ClearAllRound, PlayArrowRound, PauseRound, StopRound, VolumeDownRound, VolumeOffRound, FullscreenRound, FullscreenExitRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, KeyboardDoubleArrowUpRound, SyncAltRound, VisibilityRound, VisibilityOffRound, MoreHorizRound, SearchRound, CheckRound, UnfoldMoreRound, CalendarMonthTwotone, AccessTimeRound, InfoOutlined, KeyboardArrowDownRound, ListAltRound, DriveFolderUploadOutlined, PlusSharp } from '@ricons/material';
+import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, UndoRound, RedoRound, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, StrikethroughSRound, ClearAllRound, PlayArrowRound, PauseRound, StopRound, VolumeDownRound, VolumeOffRound, FullscreenRound, FullscreenExitRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, KeyboardDoubleArrowUpRound, SyncAltRound, VisibilityRound, VisibilityOffRound, MoreHorizRound, SearchRound, CheckRound, UnfoldMoreRound, CalendarMonthTwotone, AccessTimeRound, InfoOutlined, KeyboardArrowDownRound, MoveToInboxTwotone, OutboxTwotone, FilePresentOutlined, DriveFolderUploadOutlined, PlusSharp } from '@ricons/material';
 import { createRoot } from 'react-dom/client';
 import { getScrollbarSize, List as List$2 } from 'react-window';
 import { createPortal } from 'react-dom';
@@ -3657,7 +3657,7 @@ function renderFile(props) {
         case TFileType.VIDEO:
             return jsx(Video, { ...props });
         default:
-            return (jsxs("div", { className: 'i-preview-unknown', children: [jsx(Icon, { icon: jsx(FeedOutlined, {}), size: '3em' }), jsx("h5", { className: 'mt-4', children: name || suffix || "?" })] }));
+            return (jsxs("div", { className: "i-preview-unknown", children: [jsx(Icon, { icon: jsx(FeedOutlined, {}), size: "3em" }), jsx("h5", { className: "mt-4", children: name || suffix })] }));
     }
 }
 
@@ -5991,155 +5991,220 @@ const Tree = (props) => {
     return (jsx(TreeList, { data: data, selected: selectedKey, checked: checkedKeys, partofs: partofs, nodeProps: oNodeProps, onItemCheck: handleCheck, onItemSelect: handleSelect, ...restProps }));
 };
 
-const ListContainer = (props) => {
-    const { sortable, onSortEnd, itemProps, ...restProps } = props;
-    const customProps = {
-        className: "i-upload-list",
-        onClick: (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-        },
+const Dropbox = (props) => {
+    const { multiple, accept, disabled, children, onChange, onDropFiles } = props;
+    const [dragging, setDragging] = useState(false);
+    const inputRef = useRef(null);
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    const handleDragEnter = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!disabled)
+            setDragging(true);
+    };
+    const handleDragLeave = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragging(false);
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragging(false);
+        if (disabled)
+            return;
+        const files = Array.from(e.dataTransfer.files);
+        if (files.length)
+            onDropFiles(files);
+    };
+    const handleClick = () => {
+        if (!disabled)
+            inputRef.current?.click();
     };
+    return (jsxs("div", { className: classNames("i-upload-dropbox", dragging && "i-upload-dropbox-active"), onDragOver: handleDragOver, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleClick, children: [jsx("input", { ref: inputRef, type: "file", className: "i-input-file-hidden", multiple: multiple, accept: accept, disabled: disabled, onChange: onChange }), typeof children === "function"
+                ? children(dragging)
+                : children || (jsx(Icon, { icon: dragging ? (jsx(MoveToInboxTwotone, {})) : (jsx(OutboxTwotone, {})), size: "2em" }))] }));
+};
+
+const ListContainer = memo((props) => {
+    const { sortable, onSortEnd, children, ...restProps } = props;
     if (!sortable) {
-        return jsx("div", { ...customProps, ...restProps });
+        return (jsx("div", { className: "i-upload-list", onClick: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+            }, ...restProps, children: children }));
     }
-    return (jsx(SortableContainer, { draggedItemClassName: 'i-upload-item-dragged', onSortEnd: onSortEnd, ...customProps, ...restProps }));
-};
-const FileListItem = (props) => {
+    return (jsx(SortableContainer, { draggedItemClassName: "i-upload-item-dragged", onSortEnd: onSortEnd, className: "i-upload-list", ...restProps, children: children }));
+});
+const CloseBtn = memo(({ index, onRemove }) => (jsx(Helpericon, { active: true, className: "i-upload-delete", onClick: (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onRemove(index);
+    } })));
+const FileListItem = memo((props) => {
     const { ref, mode, index, file, renderItem, onRemove, onPreview } = props;
     if (!file)
-        return "";
-    const { id, name, size, url, src } = file;
+        return null;
+    const { name, size, url, src } = file;
     const type = getFileType(name, file.type);
+    const handleClick = useCallback(() => {
+        onPreview?.(index);
+    }, [onPreview, index]);
     if (renderItem) {
         return renderItem(file, index);
     }
-    const CloseBtn = (jsx(Helpericon, { active: true, className: 'i-upload-delete', onClick: (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            onRemove(index);
-        } }));
+    const node = useMemo(() => {
+        switch (type) {
+            case TFileType.IMAGE:
+                return (jsx(MemoImage, { lazyload: true, src: url || src, fit: "cover", onMouseDown: (e) => e.preventDefault() }));
+            case TFileType.VIDEO:
+                return jsx("video", { src: url || src, preload: "none" });
+            default:
+                return (jsxs(Fragment, { children: [jsx(Icon, { icon: jsx(FilePresentOutlined, {}), size: "1.5em" }), jsx("span", { className: "i-upload-file-name", children: name })] }));
+        }
+    }, [type, url, src, name]);
     switch (mode) {
         case "card":
-            let node = jsx(Fragment, {});
-            switch (type) {
-                case TFileType.IMAGE:
-                    node = (jsx(MemoImage, { lazyload: true, src: url || src, fit: 'cover', onMouseDown: (e) => e.preventDefault() }));
-                    break;
-                case TFileType.VIDEO:
-                    node = jsx("video", { src: url || src, preload: 'none' });
-                    break;
-                default:
-                    node = (jsxs(Fragment, { children: [jsx(Icon, { icon: jsx(ListAltRound, {}) }), jsx("span", { className: 'i-upload-file-name', children: title(name) })] }));
-                    break;
-            }
-            return (jsxs("div", { ref: ref, title: name, className: 'i-upload-item-card', onClick: () => onPreview?.(index), children: [node, CloseBtn] }));
+            return (jsxs("div", { ref: ref, className: "i-upload-item-card", onClick: handleClick, children: [node, jsx(CloseBtn, { index: index, onRemove: onRemove }), name && (jsx("span", { className: "px-12 py-8 i-upload-tip", children: name }))] }));
         default:
-            return (jsxs("div", { ref: ref, className: 'i-upload-item', onClick: () => onPreview?.(index), children: [jsx("span", { children: name }), jsx("i", { className: 'i-upload-size', children: formatBytes(size ?? 0) }), CloseBtn] }, id));
+            return (jsxs("div", { ref: ref, className: "i-upload-item", onClick: handleClick, children: [jsx("span", { children: name }), jsx("i", { className: "i-upload-size", children: formatBytes(size ?? 0) }), jsx(CloseBtn, { index: index, onRemove: onRemove })] }));
     }
-};
+});
 
+const normalizeFiles = (files) => (files ?? []).map((item) => {
+    const file = item;
+    if (item instanceof File) {
+        const src = file.src ?? URL.createObjectURL(item);
+        Object.assign(item, {
+            id: file.id ?? uid(7),
+            src,
+            url: file.url ?? src,
+        });
+        return item;
+    }
+    const src = file.src ?? file.name;
+    return {
+        ...file,
+        id: file.id ?? uid(7),
+        src,
+        url: file.url ?? src,
+    };
+});
 const Upload = (props) => {
-    const { ref, label, labelInline, value, files = [], initialFiles, placeholder, status = "normal", message, className, style, children, defaultButtonProps, mode = "default", cardSize = "4em", disabled, sortable, limit = props.multiple ? Infinity : 1, multiple, renderItem, shouldUpload = () => true, uploader, onChange, onFilesChange, onUpload, ...restProps } = props;
-    const [fileList, setFileListState] = useState(files);
-    const [uploadMessage, setUploadMessage] = useState(message);
+    const { label, labelInline, value, files, placeholder, status = "normal", message, className, style, children, droppable, dropbox, defaultButtonProps, mode = "default", cardSize = "3.2em", disabled, sortable, limit = props.multiple ? Infinity : 1, multiple, renderItem, shouldUpload = () => true, uploader, onChange, onFilesChange, onUpload, onRemove, ...restProps } = props;
+    const [internalFileList, setInternalFileList] = useState([]);
+    const isControlled = useMemo(() => value !== undefined || files !== undefined, [value, files]);
+    const fileList = isControlled
+        ? normalizeFiles(value ?? files ?? [])
+        : internalFileList;
+    const uploadMessage = message;
     const inputRef = useRef(null);
     const preview = usePreview();
-    const defBtnProps = Object.assign({
+    const defBtnProps = useMemo(() => ({
         children: (jsxs(Fragment, { children: [jsx(Icon, { icon: jsx(DriveFolderUploadOutlined, {}) }), " \u4E0A\u4F20"] })),
-    }, defaultButtonProps);
+        ...defaultButtonProps,
+    }), [defaultButtonProps]);
     const trigger = useMemo(() => {
         if (children)
             return children;
         switch (mode) {
             case "card":
-                return (jsx(Button, { className: 'i-upload-card-btn color-5', square: true, flat: true, outline: true, disabled: disabled, children: jsx(Icon, { icon: jsx(PlusSharp, {}) }) }));
+                return (jsx(Button, { className: "i-upload-card-btn color-5", square: true, flat: true, outline: true, disabled: disabled, children: jsx(Icon, { icon: jsx(PlusSharp, {}) }) }));
             default:
                 return (jsx(Button, { ...defBtnProps, className: classNames("i-upload-btn", defBtnProps.className), disabled: disabled }));
         }
-    }, [mode, children]);
-    const handleChange = (e) => {
-        const files = Array.from(e.target.files || []);
+    }, [mode, children, disabled, defBtnProps]);
+    const handleUpload = useCallback(async (files) => {
+        if (!uploader)
+            return;
+        const shouldUploadFiles = files.filter(shouldUpload);
+        const result = await Promise.all(shouldUploadFiles.map(uploader));
+        return onUpload?.(result);
+    }, [uploader, shouldUpload, onUpload]);
+    const processFiles = useCallback((inputFiles) => {
         const before = fileList;
         const changed = [];
-        files.map((f) => {
-            const { id, name, size, type } = f;
-            const same = before.find((pf) => {
-                const { name: n, size: s, type: t } = pf;
-                return n === name && s === size && t === type;
-            });
-            const src = URL.createObjectURL(f);
-            Object.assign(f, {
+        inputFiles.forEach((file) => {
+            const { id, name, size, type } = file;
+            const same = before.some((pf) => pf.name === name &&
+                pf.size === size &&
+                pf.type === type);
+            const src = URL.createObjectURL(file);
+            Object.assign(file, {
                 id: id ?? uid(7),
-                src: src ?? f.name,
-                url: src ?? f.name,
+                src: src ?? file.name,
+                url: src ?? file.name,
             });
-            !same && changed.push(f);
+            if (!same)
+                changed.push(file);
         });
         const after = [...before, ...changed];
         const last = after.at(-1);
-        const nextFiles = multiple ? after.slice(0, limit) : last ? [last] : [];
-        setFileListState(nextFiles);
-        setUploadMessage(message);
+        const nextFiles = multiple
+            ? after.slice(0, limit)
+            : last
+                ? [last]
+                : [];
+        return { nextFiles, changed };
+    }, [fileList, multiple, limit]);
+    const applyFiles = useCallback((nextFiles, changed, e) => {
+        if (!isControlled)
+            setInternalFileList(nextFiles);
         onFilesChange?.(nextFiles, changed, e);
         onChange?.(nextFiles, e);
         handleUpload(changed);
-        inputRef.current && (inputRef.current.value = "");
-    };
-    const handleRemove = (i) => {
-        const [...files] = fileList;
+    }, [isControlled, onFilesChange, onChange, handleUpload]);
+    const handleChange = useCallback((e) => {
+        const inputFiles = Array.from(e.target.files || []);
+        const { nextFiles, changed } = processFiles(inputFiles);
+        applyFiles(nextFiles, changed, e);
+        if (inputRef.current)
+            inputRef.current.value = "";
+    }, [processFiles, applyFiles]);
+    const handleDropFiles = useCallback((files) => {
+        const { nextFiles, changed } = processFiles(files);
+        applyFiles(nextFiles, changed);
+    }, [processFiles, applyFiles]);
+    const handleRemove = useCallback((i) => {
+        const files = [...fileList];
         const changed = files.splice(i, 1);
         URL.revokeObjectURL(changed[0]?.src || "");
-        setFileListState(files);
+        if (!isControlled)
+            setInternalFileList(files);
         onFilesChange?.(files, changed);
         onChange?.(files);
-        inputRef.current && (inputRef.current.value = "");
-    };
-    const handleUpload = async (files) => {
-        if (!uploader)
-            return;
-        const shouldUploadFiles = files.filter(shouldUpload);
-        const result = Promise.all(shouldUploadFiles.map(uploader));
-        return onUpload?.(result);
-    };
-    const handlePreview = (i) => {
-        preview({ items: fileList, initial: i });
-    };
-    const setFileList = (files) => {
-        if (!files)
-            return;
-        setFileListState(files.map((f) => {
-            const file = f;
-            return { ...file, id: file.id ?? uid(7) };
-        }));
-    };
-    const handleSortEnd = (before, after) => {
-        const [...files] = fileList;
+        onRemove?.(changed[0]);
+        if (inputRef.current)
+            inputRef.current.value = "";
+    }, [fileList, isControlled, onFilesChange, onChange, onRemove]);
+    const handlePreview = useCallback((i) => {
+        preview({
+            items: fileList,
+            initial: i,
+        });
+    }, [fileList, preview]);
+    const handleSortEnd = useCallback((before, after) => {
+        const files = [...fileList];
         const nextFiles = arrayMove(files, before, after);
-        setFileListState(nextFiles);
+        if (!isControlled)
+            setInternalFileList(nextFiles);
+        onFilesChange?.(nextFiles, []);
         onChange?.(nextFiles);
-    };
-    useEffect(() => {
-        setUploadMessage(message);
-    }, [status, message]);
-    useEffect(() => {
-        setFileListState(value?.filter?.((file) => !!file.id) ?? []);
-    }, [value]);
-    useEffect(() => {
-        setFileList(initialFiles);
-    }, []);
-    useImperativeHandle(ref, () => ({
-        getFileList: () => fileList,
-        setFileList,
-    }), [fileList]);
-    return (jsx(InputContainer, { as: 'div', label: label, labelInline: labelInline, className: classNames("i-input-label-file", className), style: style, children: jsxs("div", { className: classNames("i-upload-inner", {
+    }, [fileList, isControlled, onFilesChange, onChange]);
+    return (jsx(InputContainer, { as: "div", label: label, labelInline: labelInline, className: classNames("i-input-label-file", className), style: style, children: jsxs("div", { className: classNames("i-upload-inner", {
                 [`i-upload-${mode}`]: mode !== "default",
             }), style: { ["--upload-card-size"]: cardSize }, children: [jsx(ListContainer, { sortable: sortable, onSortEnd: handleSortEnd, children: fileList.map((file, i) => {
-                        const node = (jsx(FileListItem, { index: i, file: file, mode: mode, renderItem: renderItem, onRemove: handleRemove, onPreview: handlePreview }, i));
+                        const f = file;
+                        const key = f.id ?? i;
+                        const node = (jsx(FileListItem, { index: i, file: f, mode: mode, renderItem: renderItem, onRemove: handleRemove, onPreview: handlePreview }, key));
                         if (!sortable)
                             return node;
-                        return jsx(SortableItem, { children: node }, i);
-                    }) }), uploadMessage && (jsx("span", { className: 'i-upload-message', children: uploadMessage })), fileList.length < limit && (jsxs("label", { children: [jsx("input", { ...restProps, disabled: disabled, ref: inputRef, type: 'file', className: 'i-input-file-hidden', multiple: multiple, onChange: handleChange }), trigger] }))] }) }));
+                        return jsx(SortableItem, { children: node }, key);
+                    }) }), uploadMessage && (jsx("span", { className: "i-upload-message", children: uploadMessage })), fileList.length < limit &&
+                    (droppable ? (jsx(Dropbox, { multiple: multiple, accept: restProps.accept, disabled: disabled, onChange: handleChange, onDropFiles: handleDropFiles, children: dropbox })) : (jsxs("label", { children: [jsx("input", { ...restProps, disabled: disabled, ref: inputRef, type: "file", className: "i-input-file-hidden", multiple: multiple, onChange: handleChange }), trigger] })))] }) }));
 };
 
 const stores = new Map();

package/lib/types/components/upload/type.d.ts

@@ -1,11 +1,9 @@
-import { InputHTMLAttributes, RefObject, ReactNode, ChangeEvent } from 'react';
+import { InputHTMLAttributes, ReactNode, ChangeEvent } from 'react';
 import { BaseInput } from '../../type/index.js';
 import { IButton } from '../button/type.js';
 
 interface IUpload extends Omit<BaseInput, "ref">, Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> {
-    ref?: RefObject<RefUpload | null>;
     files?: IFile[];
-    initialFiles?: IFile[] | File[];
     accept?: string;
     multiple?: boolean;
     directory?: boolean;
@@ -13,6 +11,7 @@ interface IUpload extends Omit<BaseInput, "ref">, Omit<InputHTMLAttributes<HTMLI
     sortable?: boolean;
     mode?: "default" | "card";
     droppable?: boolean;
+    dropbox?: (dragging?: boolean) => ReactNode;
     cardSize?: string;
     defaultButtonProps?: IButton;
     shouldUpload?: (file: IFile) => boolean;
@@ -29,9 +28,5 @@ interface IFile extends File {
     url?: string;
     [key: string]: any;
 }
-interface RefUpload {
-    getFileList: () => IFile[];
-    setFileList: (files?: IFile[] | File[]) => void;
-}
 
-export type { IFile, IUpload, RefUpload };
+export type { IFile, IUpload };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ioca/react",
-	"version": "1.5.10",
+	"version": "1.5.11",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",