@aozi6666/bee-design 0.1.2 → 0.2.2

package/dist/index.esm.js

@@ -0,0 +1,709 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import React, { createContext, useState, useRef, useContext, useMemo, useEffect } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { CSSTransition } from 'react-transition-group';
+import { clamp } from '@aozi6666/bee-utils';
+import axios from 'axios';
+
+/* 定义 Button 组件可以接收哪些 props（组件 API） */
+// TS 导出 两个固定值 'lg' / 'sm'
+/*
+as const: 把 ButtonSize对象的值 变成不可修改的 字面量类型
+  - 如果没有 as const: Large: string
+  - 如果有 as const: Large: "lg"
+
+不写 as const: Large: 'lg' 会被 TS 自动推导为 string 类型
+*/
+const ButtonType = {
+    Default: "default",
+    Link: "link",
+};
+
+const Button = ({ className, disabled = false, size, btnType = ButtonType.Default, children, href, ...restProps }) => {
+    // btn, btn-lg, btn-primary
+    // ① classNames 生成 class
+    /*
+    用户写：<Button btnType="primary" size="lg">
+    组件算出 class：btn btn-primary btn-lg
+    */
+    // 返回 字符串
+    const classes = classNames("btn", className, {
+        /*
+           外部传来 <Button btnType={ButtonType.Primary}>
+             -> 变成 { "btn-primary": true }
+             -> classNames 会加上: btn-primary
+             -> 最终变为 ： btn btn-primary
+        */
+        [`btn-${btnType}`]: btnType,
+        [`btn-${size}`]: size,
+        // 是 link 按钮 &&  disabled === true
+        // classNames 会加上: disabled
+        disabled: btnType === ButtonType.Link && disabled,
+    });
+    // ② 根据类型决定渲染：
+    /*
+    用户写：<Button btnType="link" href="https://xxx">
+    组件算出: <a class="btn btn-link">...</a>
+    */
+    if (btnType === ButtonType.Link && href) {
+        return (jsx("a", { className: classes, href: href, ...restProps, children: children }));
+    }
+    /*
+    用户写：<Button btnType="primary">
+    组件算出: <button class="btn btn-primary">
+    */
+    return (jsx("button", { className: classes, disabled: disabled, ...restProps, children: children }));
+};
+
+const MenuContext = createContext({ index: "0" });
+
+/**
+ * 为网站提供导航功能的菜单。支持横向纵向两种模式，支持下拉菜单。
+ *
+ * ```javascript
+ * import { Menu } from 'vikingship'
+ *
+ * //然后可以使用 Menu.Item 和 Menu.Submenu 访问选项和子下拉菜单组件
+ * ```
+ */
+const Menu = ({ className, mode = "horizontal", style, children, defaultIndex = "0", onSelect, defaultOpenSubMenus = [], }) => {
+    const [currentActive, setActive] = useState(defaultIndex);
+    const classes = classNames("viking-menu", className, {
+        "menu-vertical": mode === "vertical",
+        "menu-horizontal": mode !== "vertical",
+    });
+    const handleClick = (index) => {
+        setActive(index);
+        if (onSelect) {
+            onSelect(index);
+        }
+    };
+    const passedContext = {
+        index: currentActive ? currentActive : "0",
+        onSelect: handleClick,
+        mode,
+        defaultOpenSubMenus,
+    };
+    const renderChildren = () => {
+        return React.Children.map(children, (child, index) => {
+            const childElement = child;
+            const { displayName } = childElement.type;
+            if (displayName === "MenuItem" || displayName === "SubMenu") {
+                return React.cloneElement(childElement, {
+                    index: index.toString(),
+                });
+            }
+            else {
+                console.error("Warning: Menu has a child which is not a MenuItem component");
+            }
+        });
+    };
+    return (jsx("ul", { className: classes, style: style, "data-testid": "test-menu", children: jsx(MenuContext.Provider, { value: passedContext, children: renderChildren() }) }));
+};
+
+let didSetup = false;
+function setupIcons() {
+    if (didSetup)
+        return;
+    library.add(fas);
+    didSetup = true;
+}
+
+/**
+ * 提供了一套常用的图标集合 基于 react-fontawesome。
+ *
+ * 支持 react-fontawesome的所有属性 可以在这里查询 https://github.com/FortAwesome/react-fontawesome#basic
+ *
+ * 支持 fontawesome 所有 free-solid-icons，可以在这里查看所有图标 https://fontawesome.com/icons?d=gallery&s=solid&m=free
+ * ### 引用方法
+ *
+ * ~~~js
+ * import { Icon } from 'vikingship'
+ * ~~~
+ */
+const Icon = (props) => {
+    setupIcons();
+    // icon-primary
+    const { className, theme, ...restProps } = props;
+    const classes = classNames("viking-icon", className, {
+        [`icon-${theme}`]: theme,
+    });
+    return jsx(FontAwesomeIcon, { className: classes, ...restProps });
+};
+
+const Transition = (props) => {
+    const { children, classNames: classNamesProp, animation, wrapper = false, unmountOnExit = true, appear = true, timeout, ...restProps } = props;
+    const cls = animation ? animation : classNamesProp;
+    const nodeRef = useRef(null);
+    return (jsx(CSSTransition, { nodeRef: nodeRef, classNames: cls, unmountOnExit: unmountOnExit, appear: appear, timeout: timeout, ...restProps, children: jsx("div", { ref: nodeRef, "data-transition-wrapper": wrapper ? "true" : "false", children: children }) }));
+};
+
+const SubMenu = ({ index, title, children, className }) => {
+    const context = useContext(MenuContext);
+    const openedSubMenus = (context.defaultOpenSubMenus ?? []);
+    const isOpend = index && context.mode === "vertical" ? openedSubMenus.includes(index) : false;
+    const [menuOpen, setOpen] = useState(isOpend);
+    const classes = classNames("menu-item submenu-item", className, {
+        "is-active": context.index === index,
+        "is-opened": menuOpen,
+        "is-vertical": context.mode === "vertical",
+    });
+    const handleClick = (e) => {
+        e.preventDefault();
+        setOpen(!menuOpen);
+    };
+    let timer;
+    const handleMouse = (e, toggle) => {
+        if (timer)
+            clearTimeout(timer);
+        e.preventDefault();
+        timer = setTimeout(() => {
+            setOpen(toggle);
+        }, 300);
+    };
+    const clickEvents = context.mode === "vertical"
+        ? {
+            onClick: handleClick,
+        }
+        : {};
+    const hoverEvents = context.mode !== "vertical"
+        ? {
+            onMouseEnter: (e) => {
+                handleMouse(e, true);
+            },
+            onMouseLeave: (e) => {
+                handleMouse(e, false);
+            },
+        }
+        : {};
+    const renderChildren = () => {
+        const subMenuClasses = classNames("viking-submenu", {
+            "menu-opened": menuOpen,
+        });
+        const childrenComponent = React.Children.map(children, (child, i) => {
+            const childElement = child;
+            if (childElement.type.displayName === "MenuItem") {
+                return React.cloneElement(childElement, {
+                    index: `${index}-${i}`,
+                });
+            }
+            else {
+                console.error("Warning: SubMenu has a child which is not a MenuItem component");
+            }
+        });
+        return (jsx(Transition, { in: menuOpen, timeout: 300, animation: "zoom-in-top", children: jsx("ul", { className: subMenuClasses, children: childrenComponent }) }));
+    };
+    return (jsxs("li", { className: classes, ...hoverEvents, children: [jsxs("div", { className: "submenu-title", ...clickEvents, children: [title, jsx(Icon, { icon: "angle-down", className: "arrow-icon" })] }), renderChildren()] }, index));
+};
+SubMenu.displayName = "SubMenu";
+
+const MenuItem = (props) => {
+    const { index, disabled, className, style, children } = props;
+    const context = useContext(MenuContext);
+    const classes = classNames("menu-item", className, {
+        "is-disabled": disabled,
+        "is-active": context.index === index,
+    });
+    const handleClick = () => {
+        if (context.onSelect && !disabled && typeof index === "string") {
+            context.onSelect(index);
+        }
+    };
+    return (jsx("li", { className: classes, style: style, onClick: handleClick, children: children }));
+};
+MenuItem.displayName = "MenuItem";
+
+// Menu 做类型转换
+const TransMenu = Menu;
+// 把子组件挂到 Menu 上
+TransMenu.Item = MenuItem;
+TransMenu.SubMenu = SubMenu;
+
+const Input = (props) => {
+    const { disabled, size, icon, prepend, append, style, onChange, ...restProps } = props;
+    const classes = useMemo(() => classNames("viking-input-wrapper", {
+        [`input-size-${size}`]: size,
+        "input-group": prepend || append,
+        "input-group-prepend": !!prepend,
+        "input-group-append": !!append,
+    }), [append, prepend, size]);
+    const inputClasses = classNames("viking-input-inner", {
+        "is-disabled": disabled,
+    });
+    const handleChange = (e) => {
+        if (onChange)
+            onChange(e);
+    };
+    const renderPrepend = () => {
+        if (!prepend)
+            return null;
+        return jsx("div", { className: "viking-input-group-prepend", children: prepend });
+    };
+    const renderAppend = () => {
+        if (!append && !icon)
+            return null;
+        return (jsxs("div", { className: "viking-input-group-append", children: [append, icon ? (jsx("div", { className: "icon-wrapper", children: jsx(Icon, { icon: icon }) })) : null] }));
+    };
+    return (jsxs("div", { className: classes, style: style, children: [renderPrepend(), jsx("input", { className: inputClasses, disabled: disabled, onChange: handleChange, ...restProps }), renderAppend()] }));
+};
+
+/*
+防抖（debounce）Hook:
+  -频繁触发的操作 → 只在最后一次停顿后执行
+  - 只要输入还在继续，就一直取消定时器；
+  - 只有用户停下来 delay 毫秒，才把值更新出去。
+
+  若后续常用于对象 / 数组：
+  可以配合 useMemo 或 useCallback 使用，减少下游无谓重渲
+*/
+function useDebounce(value, delay = 300) {
+    // 初始值为 value
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    // 当 value值与 delay改变时，执行
+    useEffect(() => {
+        // 启动一个定时器，300ms后执行
+        const handler = window.setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+        // 清理函数：value 又变了，就取消上一次定时器
+        // 只要一直触发，就一直取消；直到停下来，才执行最后一次。
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+}
+
+// “点击某个区域外面时，执行一些事情。”
+/*监听整个页面点击，
+   -如果点击目标不在 ref 指向的 DOM 里，就执行回调。
+*/
+function useClickOutside(ref, handler, eventType = "click") {
+    const handlerRef = useRef(handler);
+    useEffect(() => {
+        handlerRef.current = handler;
+    }, [handler]);
+    useEffect(() => {
+        // 监听 document 的 click 事件
+        // 点击回调：页面每次被点击时，要执行的函数
+        const listener = (event) => {
+            // 拿到真实 边界DOM
+            const el = ref?.current;
+            // 空值保护： 当前拿不到 DOM，直接return
+            if (!el)
+                return;
+            // 点击发生在组件内部, 直接return
+            /*
+                event.target:  实际点到的元素
+                el.contains：DOM 原生 API，判断 el元素是否包含某个节点
+            */
+            // 复杂场景下如果下拉框通过 portal 渲染到 body 等其他 DOM 树中，单纯依赖 contains 判断可能不够，需要更通用的命中判断策略
+            if (el.contains(event.target))
+                return;
+            handlerRef.current(event); // 执行回调函数
+        };
+        // 监听挂在 document整个页面上
+        document.addEventListener(eventType, listener);
+        // 清理函数: 卸载组件时，移除监听（防止内存泄漏/重复监听）
+        return () => {
+            document.removeEventListener(eventType, listener);
+        };
+    }, [ref, eventType]);
+}
+
+const AutoCompleteDropdown = (props) => {
+    const { loading, showDropdown, suggestions, highlightIndex, onSelect, renderOption, onExited } = props;
+    const renderTemplate = (item) => {
+        return renderOption ? renderOption(item) : item.value;
+    };
+    return (jsx(Transition, { in: showDropdown || loading, animation: "zoom-in-top", timeout: 300, onExited: onExited, children: jsxs("ul", { className: "viking-suggestion-list", children: [loading && (jsx("div", { className: "suggestions-loading-icon", children: jsx(Icon, { icon: "spinner", spin: true }) })), suggestions.map((item, index) => {
+                    const cnames = classNames("suggestion-item", {
+                        "is-active": index === highlightIndex,
+                    });
+                    return (jsx("li", { className: cnames, onClick: () => onSelect(item), children: renderTemplate(item) }, index));
+                })] }) }));
+};
+
+/**
+ * 输入框自动完成功能。当输入值需要自动完成时使用，支持同步和异步两种方式
+ * 支持 Input 组件的所有属性 支持键盘事件选择
+ * ### 引用方法
+ *
+ * ~~~js
+ * import { AutoComplete } from 'vikingship'
+ * ~~~
+ */
+const AutoComplete = (props) => {
+    const { fetchSuggestions, onSelect, onChange, value, renderOption, ...restProps } = props;
+    // 输入框当前显示的文本
+    const [inputValue, setInputValue] = useState(value || "");
+    // 候选项列表:下拉建议列表的数据源（渲染 `<li>` 就靠它）
+    const [suggestions, setSugestions] = useState([]);
+    // 加载状态:异步请求进行中就显示 loading
+    const [loading, setLoading] = useState(false);
+    // 是否展示下拉（配合 `Transition` 动画）
+    const [showDropdown, setShowDropdown] = useState(false);
+    // 高亮索引:键盘上下选择时，哪一项高亮（对应 class `is-active`）
+    const [highlightIndex, setHighlightIndex] = useState(-1);
+    // 两个关键 ref：
+    // 用来区分“用户打字触发搜索” vs “用户选中后把值塞回去（不应该再搜一次）”
+    // 用户打字时:true，用户选中：false
+    const triggerSearch = useRef(false);
+    // 挂到最外层 div 上，给 `useClickOutside` 判断“点击是否发生在组件外”
+    const componentRef = useRef(null);
+    // 防抖Hook：把“频繁输入”变成“停顿后再触发一次”
+    const debouncedValue = useDebounce(inputValue, 300);
+    // 自定义Hook：点击组件外部时,触发自定义的回调
+    /* 在 `document` 上挂一个 `click` 监听
+     * @param componentRef 组件的 ref
+     * @param callback 点击外部时执行的回调
+     */
+    // componentRef： 指向 AutoComplete 最外层 DOM
+    useClickOutside(componentRef, () => {
+        setSugestions([]);
+        setShowDropdown(false);
+    });
+    // 监听 `debouncedValue防抖后的值` 变化
+    // fetchSuggestions这个函数本身的引用地址变没变，改变时，监听变化
+    // 因为：React在 effect 里用到了这个函数，避免：闭包拿到旧函数
+    useEffect(() => {
+        // 调度函数: 把 函数 放入微任务队列（执行）
+        // 页面更新等逻辑处理完再更新 UI，减少闪烁、时序混乱的问题
+        const schedule = (fn) => {
+            queueMicrotask(fn);
+        };
+        /* 停止搜索，关闭下拉框
+         * 两种情况：
+         * 1. 输入框为空（防抖后的值为空）
+         * 2. 用户选中下拉建议某一项后，输入框值会变为选中项的值（不应该再搜一次）
+         */
+        if (!debouncedValue || !triggerSearch.current) {
+            // 调用 调度函数: 把函数放入微任务队列（执行）
+            schedule(() => {
+                setShowDropdown(false); // 关闭下拉框 展示
+                setHighlightIndex(-1); // 重置高亮索引
+            });
+            return;
+        }
+        // 搜索执行
+        // 1. 拿当前输入内容，获取 建议项
+        const results = fetchSuggestions(debouncedValue);
+        // 异步返回：
+        if (results instanceof Promise) {
+            schedule(() => {
+                setLoading(true); // 显示“加载中”
+                setHighlightIndex(-1); // 不高亮任何项
+            });
+            // 异步返回： 拿到数据后，更新状态
+            results.then((data) => {
+                setLoading(false); // 关闭 “加载中”
+                setSugestions(data); // 更新建议项列表
+                setShowDropdown(data.length > 0); // 有数据，就显示下拉框
+            });
+        }
+        else {
+            // 同步返回： 本地有个数组，直接筛选
+            schedule(() => {
+                setLoading(false); // 关闭 “加载中”
+                setSugestions(results);
+                setShowDropdown(results.length > 0);
+                setHighlightIndex(-1);
+            });
+        }
+    }, [debouncedValue, fetchSuggestions]);
+    const highlight = (index) => {
+        // 调用utils: 限制索引在 0 和 （建议项长度 - 1） 之间
+        const nextIndex = clamp(index, 0, suggestions.length - 1);
+        setHighlightIndex(nextIndex);
+    };
+    const handleKeyDown = (e) => {
+        switch (e.keyCode) {
+            case 13:
+                if (suggestions[highlightIndex]) {
+                    handleSelect(suggestions[highlightIndex]);
+                }
+                break;
+            case 38:
+                highlight(highlightIndex - 1);
+                break;
+            case 40:
+                highlight(highlightIndex + 1);
+                break;
+            case 27:
+                setShowDropdown(false);
+                break;
+        }
+    };
+    // 回调：消息框内容发生变化
+    const handleChange = (e) => {
+        // 获取 输入框内容 （去掉首尾空格）
+        const value = e.target.value.trim();
+        // 更新 输入框内容
+        // `inputValue` 变化 → 经过 `useDebounce` 得到 `debouncedValue`
+        setInputValue(value);
+        // 组件使用者传来的回调：消息框内容发生变化
+        if (onChange) {
+            onChange(value);
+        }
+        // 告诉后面“这次是用户输入，应当触发搜索”
+        triggerSearch.current = true;
+    };
+    // 回调：用户选中某一项
+    const handleSelect = (item) => {
+        setInputValue(item.value);
+        setShowDropdown(false);
+        if (onSelect) {
+            onSelect(item);
+        }
+        triggerSearch.current = false;
+    };
+    return (jsxs("div", { className: "viking-auto-complete", ref: componentRef, children: [jsx(Input, { ...restProps, value: inputValue, onChange: handleChange, onKeyDown: handleKeyDown }), jsx(AutoCompleteDropdown, { loading: loading, showDropdown: showDropdown, suggestions: suggestions, highlightIndex: highlightIndex, onSelect: handleSelect, renderOption: renderOption, onExited: () => {
+                    setSugestions([]);
+                } })] }));
+};
+
+const Progress = (props) => {
+    const { percent, strokeHeight = 15, showText = true, styles, theme = "primary" } = props;
+    return (jsx("div", { className: "viking-progress-bar", style: styles, children: jsx("div", { className: "viking-progress-bar-outer", style: { height: `${strokeHeight}px` }, children: jsx("div", { className: `viking-progress-bar-inner color-${theme}`, style: { width: `${percent}%` }, children: showText && jsx("span", { className: "inner-text", children: `${percent}%` }) }) }) }));
+};
+
+const UploadList = (props) => {
+    // 从 Prop 中取出 fileList 文件列表 和 回调
+    const { fileList, onRemove } = props;
+    console.log("firelist", fileList);
+    return (jsx("ul", { className: "viking-upload-list", children: fileList.map((item) => {
+            return (jsxs("li", { className: "viking-upload-list-item", children: [jsxs("span", { className: `file-name file-name-${item.status}`, children: [jsx(Icon, { icon: "file-alt", theme: "secondary" }), item.name] }), jsxs("span", { className: "file-status", children: [(item.status === "uploading" || item.status === "ready") && (jsx(Icon, { icon: "spinner", spin: true, theme: "primary" })), item.status === "success" && jsx(Icon, { icon: "check-circle", theme: "success" }), item.status === "error" && jsx(Icon, { icon: "times-circle", theme: "danger" })] }), jsx("span", { className: "file-actions", children: jsx(Icon, { icon: "times", onClick: () => {
+                                onRemove(item);
+                            } }) }), item.status === "uploading" && jsx(Progress, { percent: item.percent || 0 })] }, item.uid));
+        }) }));
+};
+
+const Dragger = (props) => {
+    const { onFile, children } = props;
+    // 负责拖拽样式
+    const [dragOver, setDragOver] = useState(false);
+    // 使用 `classNames` 拼 `className`：
+    const klass = classNames("viking-uploader-dragger", {
+        // 如果 `dragOver === true` 时，再加一个：`is-dragover`
+        "is-dragover": dragOver,
+    });
+    // 上传流程
+    const handleDrop = (e) => {
+        e.preventDefault(); // 阻止默认行为
+        setDragOver(false); // 拖拽结束：改变拖拽样式
+        // dataTransfer： 浏览器 drop-API 的对象
+        // 包含: files(文件列表FileList)、items、types
+        // 通过 onFile回调 传回 Upload 处理
+        onFile(e.dataTransfer.files);
+    };
+    // 回调： 控制拖拽状态（改变样式）
+    const handleDrag = (e, over) => {
+        e.preventDefault();
+        setDragOver(over);
+    };
+    return (jsx("div", { className: klass, 
+        // e： 监听DragEvent拖拽事件对象
+        onDragOver: (e) => {
+            handleDrag(e, true);
+        }, onDragLeave: (e) => {
+            handleDrag(e, false);
+        }, onDrop: handleDrop, children: children }));
+};
+
+/**
+ * 通过点击或者拖拽上传文件
+ * ### 引用方法
+ *
+ * ~~~js
+ * import { Upload } from 'vikingship'
+ * ~~~
+ */
+const Upload = (props) => {
+    const { action, defaultFileList, beforeUpload, onProgress, onSuccess, onError, onChange, onRemove, name = "file", headers, data, withCredentials, accept, multiple, children, drag, } = props;
+    // 文件输入框 ref 引用
+    const fileInput = useRef(null);
+    // （子组件）页面上 正在显示 的 上传文件列表
+    const [fileList, setFileList] = useState(defaultFileList || []);
+    //  **`UploadList`** 子组件: 从 上传文件列表fileList 渲染一堆 列表项 class
+    // 上传列表状态更新器
+    const updateFileList = (updateFile, updateObj) => {
+        setFileList((prevList) => {
+            return prevList.map((file) => {
+                // 在列表里找到同一个 uid 文件
+                if (file.uid === updateFile.uid) {
+                    // 更新部分字段
+                    return { ...file, ...updateObj };
+                }
+                else {
+                    return file;
+                }
+            });
+        });
+    };
+    // 点击上传回调：用户点击 上传文件 输入框
+    const handleClick = () => {
+        // 用 ref 拿到“隐藏的” input元素
+        if (fileInput.current) {
+            // 调用浏览器的原生能力： 弹出 系统级文件选择框
+            fileInput.current.click();
+        }
+    };
+    // 文件上传回调：当有文件传来的时候触发
+    const handleFileChange = (e) => {
+        // 获取文件列表：类型为 FileList
+        const files = e.target.files;
+        if (!files) {
+            return;
+        }
+        // 调用 上传文件函数（含发送请求）：决定 每个/不同文件 怎么处理
+        uploadFiles(files);
+        // 清空 文件输入框
+        if (fileInput.current) {
+            fileInput.current.value = "";
+        }
+    };
+    // 传递给 UploadList 子组件的 回调函数
+    const handleRemove = (file) => {
+        setFileList((prevList) => {
+            return prevList.filter((item) => item.uid !== file.uid);
+        });
+        if (onRemove) {
+            onRemove(file);
+        }
+    };
+    // 函数： 上传文件： 决定 每个文件 上传
+    // （beforeUpload： “上传前钩子”）
+    const uploadFiles = (files, test) => {
+        // 传来的文件列表 FileList类型，不是数组  =》 转为数组
+        const postFiles = Array.from(files);
+        //
+        if (test) {
+            console.log("drag", postFiles[0]);
+        }
+        // 遍历 数组 每一项
+        postFiles.forEach((file) => {
+            // 没有配置 beforeUpload，直接上传
+            if (!beforeUpload) {
+                post(file);
+            }
+            else {
+                // 用户使用了 beforeUpload => 需要等待 用户的异步处理结果（例如压缩图片）
+                // beforeUpload(file)用户在钩子里写的回调： 会返回 Promise<newFile>
+                // 获取  Promise<newFile> 用这个处理完的 File 对象发送
+                // 执行用户传进来的回调函数，并把它的返回值接住，放进 result
+                const result = beforeUpload(file);
+                //
+                if (result && result instanceof Promise) {
+                    // 获取 异步回调 reslove(newFile)后的 newFile
+                    result.then((processedFile) => {
+                        post(processedFile); // 发送用户异步处理完的 新File文件
+                    });
+                }
+                else if (result !== false) {
+                    // 用户使用了拦截：return false ==> 永远不会触发 post， 不上传
+                    // 返回 true → 上传原文件
+                    post(file);
+                }
+            }
+        });
+    };
+    // 函数： 发axios请求
+    const post = (file) => {
+        // 改造浏览器原生File，创建 内部文件对象 `_file` （文件本体 + 上传状态）
+        const _file = {
+            uid: Date.now() + "upload-file",
+            status: "ready",
+            name: file.name,
+            size: file.size,
+            percent: 0,
+            raw: file,
+        };
+        // 请求发送之前放进 fileList，列表先显示出来
+        setFileList((prevList) => {
+            return [_file, ...prevList];
+        });
+        // 2) 构建 `FormData`
+        const formData = new FormData();
+        formData.append(name || "file", file);
+        // 如果传了 `data`， 额外字段也 append 进 FormData
+        // （例如 `userId`、`token`）
+        if (data) {
+            Object.keys(data).forEach((key) => {
+                formData.append(key, data[key]);
+            });
+        }
+        // 使用 axios 发送 POST 请求
+        axios
+            .post(action, formData, {
+            headers: {
+                ...headers,
+                "Content-Type": "multipart/form-data",
+            },
+            // 跨域请求 凭证信息（Cookie）
+            // 需要 后端 允许跨域携带凭证： Access-Control-Allow-Credentials: true
+            withCredentials,
+            // axios 提供的 请求配置回调（“系统回调”）
+            // （不需要手动调用）上传过程中，axios 内部自动不断触发 onUploadProgress
+            onUploadProgress: (e) => {
+                // 把字节进度算成百分比
+                const total = e.total ?? 0;
+                const percentage = total ? Math.round((e.loaded * 100) / total) : 0;
+                // 更新 fileList 中这条文件的 percent/status
+                if (percentage < 100) {
+                    // 更新 React state（驱动UI）：让 UploadList 子组件重新渲染
+                    updateFileList(_file, { percent: percentage, status: "uploading" });
+                    // 更新当前 _file 对象，保证传给回调的值是新的
+                    _file.status = "uploading";
+                    _file.percent = percentage;
+                    // 将 axios 的 onUploadProgress 得到的上传进度结果，包装一层
+                    // 提供给 Upload 组件的外部使用者 外部钩子onProgress：给组件外部使用
+                    if (onProgress) {
+                        onProgress(percentage, _file);
+                    }
+                }
+            },
+        })
+            .then((resp) => {
+            // 成功时：更新React UI内部状态
+            updateFileList(_file, { status: "success", response: resp.data });
+            // 更新当前 _file 对象，保证传给回调的值是新的
+            _file.status = "success";
+            _file.response = resp.data;
+            // 通知外部 onSuccess  / onChange 钩子
+            if (onSuccess) {
+                onSuccess(resp.data, _file);
+            }
+            if (onChange) {
+                onChange(_file);
+            }
+        })
+            .catch((err) => {
+            // 失败时：更新React UI内部状态
+            updateFileList(_file, { status: "error", error: err });
+            // 更新当前 _file 对象，保证传给回调的值是新的
+            _file.status = "error";
+            _file.error = err;
+            //
+            if (onError) {
+                onError(err, _file);
+            }
+            if (onChange) {
+                onChange(_file);
+            }
+        });
+    };
+    return (jsxs("div", { className: "viking-upload-component", children: [jsxs("div", { className: "viking-upload-input", style: { display: "inline-block" }, onClick: handleClick, children: [children, drag ? (
+                    // 传给 Dragger子组件回调函数 onFile
+                    // 当用户拖拽文件，Dragger 的onDrop状态触发 onFile(files)
+                    jsx(Dragger, { onFile: (files) => {
+                            uploadFiles(files, true);
+                        }, children: children })) : (
+                    // 如果 drag = false, 直接渲染 children(普通模式)
+                    children), jsx("input", { className: "viking-file-input", style: { display: "none" }, ref: fileInput, onChange: handleFileChange, type: "file", accept: accept, multiple: multiple })] }), jsx(UploadList, { fileList: fileList, onRemove: handleRemove })] }));
+};
+
+export { AutoComplete, Button, Icon, Input, TransMenu as Menu, Progress, Transition, Upload, setupIcons };
+//# sourceMappingURL=index.esm.js.map