@aozi6666/bee-design 0.1.0

package/build/components/Upload/upload.js

@@ -0,0 +1,192 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import axios from 'axios';
+import UploadList from './uploadList';
+import Dragger from './dragger';
+/**
+ * 通过点击或者拖拽上传文件
+ * ### 引用方法
+ *
+ * ~~~js
+ * import { Upload } from 'vikingship'
+ * ~~~
+ */
+export 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类型，不是数组  =》 转为数组
+        let 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` （文件本体 + 上传状态）
+        let _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 default Upload;

package/build/components/Upload/upload.types.d.ts

@@ -0,0 +1,48 @@
+export type UploadFileStatus = 'ready' | 'uploading' | 'success' | 'error';
+export interface UploadFile {
+    uid: string;
+    size: number;
+    name: string;
+    status?: UploadFileStatus;
+    percent: number;
+    raw?: File;
+    response?: any;
+    error?: any;
+}
+export interface UploadProps {
+    /** 必选参数, 上传的地址 */
+    action: string;
+    /** 上传的文件列表 */
+    defaultFileList?: UploadFile[];
+    /** 上传文件之前的钩子，返回 false 或 Promise 可以阻止上传 */
+    beforeUpload?: (file: File) => boolean | Promise<File>;
+    /** 文件上传时的钩子 */
+    onProgress?: (percentage: number, file: UploadFile) => void;
+    /** 文件上传成功时的钩子 */
+    onSuccess?: (data: any, file: UploadFile) => void;
+    /** 文件上传失败时的钩子 */
+    onError?: (err: any, file: UploadFile) => void;
+    /** 文件状态改变时的钩子，上传成功或者失败时都会被调用 */
+    onChange?: (file: UploadFile) => void;
+    /** 文件列表移除文件时的钩子 */
+    onRemove?: (file: UploadFile) => void;
+    /** 设置上传的请求头部 */
+    headers?: {
+        [key: string]: any;
+    };
+    /** 上传的文件字段名 */
+    name?: string;
+    /** 上传时附带的额外参数 */
+    data?: {
+        [key: string]: any;
+    };
+    /** 是否发送 cookie 凭证信息 */
+    withCredentials?: boolean;
+    /** 可选参数, 接受上传的文件类型 */
+    accept?: string;
+    /** 是否支持多选文件 */
+    multiple?: boolean;
+    /** 是否支持拖拽上传 */
+    drag?: boolean;
+    children?: React.ReactNode;
+}

package/build/components/Upload/upload.types.js

@@ -0,0 +1,3 @@
+// Upload 组件相关的 TS 类型定义
+// 独立成文件，方便在多个子组件之间复用
+export {};

package/build/components/Upload/uploadList.d.ts

@@ -0,0 +1,8 @@
+import type { FC } from 'react';
+import type { UploadFile } from './upload.types';
+interface UploadListProps {
+    fileList: UploadFile[];
+    onRemove: (_file: UploadFile) => void;
+}
+export declare const UploadList: FC<UploadListProps>;
+export default UploadList;

package/build/components/Upload/uploadList.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from '../Icon/icon';
+import Progress from '../Progress/progress';
+export 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));
+        }) }));
+};
+export default UploadList;

package/build/hooks/useClickOutside.d.ts

@@ -0,0 +1,3 @@
+import type { RefObject } from 'react';
+declare function useClickOutside<T extends HTMLElement>(ref: RefObject<T | null>, handler: (event: MouseEvent) => void): void;
+export default useClickOutside;

package/build/hooks/useClickOutside.js

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+function useClickOutside(ref, handler) {
+    useEffect(() => {
+        const listener = (event) => {
+            const el = ref?.current;
+            if (!el)
+                return;
+            if (el.contains(event.target))
+                return;
+            handler(event);
+        };
+        document.addEventListener('click', listener);
+        return () => {
+            document.removeEventListener('click', listener);
+        };
+    }, [ref, handler]);
+}
+export default useClickOutside;

package/build/hooks/useDebounce.d.ts

@@ -0,0 +1,2 @@
+declare function useDebounce(value: any, delay?: number): any;
+export default useDebounce;

package/build/hooks/useDebounce.js

@@ -0,0 +1,14 @@
+import { useState, useEffect } from 'react';
+function useDebounce(value, delay = 300) {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    useEffect(() => {
+        const handler = window.setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+}
+export default useDebounce;