@aozi6666/bee-design 0.1.2 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/src/App.d.ts +4 -0
- package/{build → dist/components/src}/components/AutoComplete/autoCompleteDropdown.d.ts +2 -2
- package/dist/components/src/components/AutoComplete/index.d.ts +4 -0
- package/{build → dist/components/src}/components/Button/button.d.ts +2 -2
- package/{build → dist/components/src}/components/Button/button.types.d.ts +1 -1
- package/dist/components/src/components/Button/index.d.ts +2 -0
- package/{build → dist/components/src}/components/Icon/icon.d.ts +2 -2
- package/dist/components/src/components/Icon/icon.types.d.ts +6 -0
- package/dist/components/src/components/Icon/index.d.ts +2 -0
- package/dist/components/src/components/Input/index.d.ts +4 -0
- package/dist/components/src/components/Input/input.d.ts +5 -0
- package/{build → dist/components/src}/components/Input/input.types.d.ts +4 -4
- package/{build → dist/components/src}/components/Menu/index.d.ts +4 -4
- package/{build → dist/components/src}/components/Menu/menu.d.ts +2 -2
- package/{build → dist/components/src}/components/Menu/menuContext.d.ts +1 -1
- package/{build → dist/components/src}/components/Menu/menuItem.d.ts +2 -2
- package/{build → dist/components/src}/components/Menu/subMenu.d.ts +1 -1
- package/dist/components/src/components/Progress/index.d.ts +2 -0
- package/dist/components/src/components/Progress/progress.d.ts +4 -0
- package/{build → dist/components/src}/components/Progress/progress.types.d.ts +2 -2
- package/dist/components/src/components/Transition/index.d.ts +3 -0
- package/dist/components/src/components/Transition/transition.d.ts +4 -0
- package/dist/components/src/components/Transition/transition.types.d.ts +9 -0
- package/{build → dist/components/src}/components/Upload/dragger.d.ts +1 -1
- package/dist/components/src/components/Upload/index.d.ts +2 -0
- package/{build → dist/components/src}/components/Upload/upload.d.ts +2 -2
- package/{build → dist/components/src}/components/Upload/upload.types.d.ts +1 -1
- package/{build → dist/components/src}/components/Upload/uploadList.d.ts +2 -2
- package/dist/components/src/index.d.ts +9 -0
- package/dist/components/src/main.d.ts +1 -0
- package/dist/components/src/setupIcons.d.ts +1 -0
- package/dist/components/src/setupTests.d.ts +1 -0
- package/dist/index.cjs +16272 -0
- package/dist/index.cjs.map +1 -0
- package/{build → dist}/index.css +24 -24
- package/dist/index.esm.js +709 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.umd.js +14381 -0
- package/dist/index.umd.js.map +1 -0
- package/dist/utils/src/dom/getScrollParent.d.ts +1 -0
- package/dist/utils/src/index.d.ts +5 -0
- package/dist/utils/src/number/clamp.d.ts +9 -0
- package/dist/utils/src/object/pickOmit.d.ts +2 -0
- package/dist/utils/src/react/composeEventHandlers.d.ts +7 -0
- package/dist/utils/src/react/mergeRefs.d.ts +2 -0
- package/package.json +52 -82
- package/README.md +0 -182
- package/build/App.d.ts +0 -4
- package/build/App.js +0 -137
- package/build/components/AutoComplete/autoComplete.js +0 -150
- package/build/components/AutoComplete/autoComplete.types.js +0 -1
- package/build/components/AutoComplete/autoCompleteDropdown.js +0 -17
- package/build/components/AutoComplete/index.d.ts +0 -4
- package/build/components/AutoComplete/index.js +0 -3
- package/build/components/Button/button.js +0 -43
- package/build/components/Button/button.types.js +0 -19
- package/build/components/Button/index.d.ts +0 -2
- package/build/components/Button/index.js +0 -2
- package/build/components/Icon/icon.js +0 -24
- package/build/components/Icon/icon.types.d.ts +0 -6
- package/build/components/Icon/icon.types.js +0 -2
- package/build/components/Icon/index.d.ts +0 -2
- package/build/components/Icon/index.js +0 -2
- package/build/components/Input/index.d.ts +0 -4
- package/build/components/Input/index.js +0 -3
- package/build/components/Input/input.d.ts +0 -5
- package/build/components/Input/input.js +0 -32
- package/build/components/Input/input.types.js +0 -1
- package/build/components/Menu/index.js +0 -9
- package/build/components/Menu/menu.js +0 -48
- package/build/components/Menu/menuContext.js +0 -2
- package/build/components/Menu/menuItem.js +0 -20
- package/build/components/Menu/subMenu.js +0 -57
- package/build/components/Progress/index.d.ts +0 -2
- package/build/components/Progress/index.js +0 -2
- package/build/components/Progress/progress.d.ts +0 -4
- package/build/components/Progress/progress.js +0 -6
- package/build/components/Progress/progress.types.js +0 -2
- package/build/components/Transition/index.d.ts +0 -3
- package/build/components/Transition/index.js +0 -2
- package/build/components/Transition/transition.d.ts +0 -4
- package/build/components/Transition/transition.js +0 -10
- package/build/components/Transition/transition.types.d.ts +0 -9
- package/build/components/Transition/transition.types.js +0 -1
- package/build/components/Upload/dragger.js +0 -42
- package/build/components/Upload/index.d.ts +0 -2
- package/build/components/Upload/index.js +0 -2
- package/build/components/Upload/native/axios-react.js +0 -99
- package/build/components/Upload/native/from-html.js +0 -5
- package/build/components/Upload/upload.js +0 -192
- package/build/components/Upload/upload.types.js +0 -3
- package/build/components/Upload/uploadList.js +0 -13
- package/build/hooks/useClickOutside.js +0 -38
- package/build/hooks/useDebounce.js +0 -28
- package/build/index.css.map +0 -1
- package/build/index.d.ts +0 -9
- package/build/index.js +0 -12
- package/build/main.d.ts +0 -1
- package/build/main.js +0 -7
- package/build/setupTests.d.ts +0 -1
- package/build/setupTests.js +0 -1
- /package/{build → dist/components/src}/components/AutoComplete/autoComplete.d.ts +0 -0
- /package/{build → dist/components/src}/components/AutoComplete/autoComplete.types.d.ts +0 -0
- /package/{build → dist/components/src}/components/Upload/native/axios-react.d.ts +0 -0
- /package/{build → dist/components/src}/components/Upload/native/from-html.d.ts +0 -0
- /package/{build → dist/components/src}/hooks/useClickOutside.d.ts +0 -0
- /package/{build → dist/components/src}/hooks/useDebounce.d.ts +0 -0
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import axios from 'axios';
|
|
3
|
-
const AxiosReact = () => {
|
|
4
|
-
/*
|
|
5
|
-
e: 这次变化事件的事件对象 -- “事件说明单”
|
|
6
|
-
e = {
|
|
7
|
-
谁触发的这次变化,
|
|
8
|
-
发生了什么,
|
|
9
|
-
当前 input 里有什么值
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
e.target: 触发这次事件的那个 DOM 元素(input 节点本身)
|
|
13
|
-
e: React.ChangeEvent<HTMLInputElement>: 给参数 e 标注类型
|
|
14
|
-
- React 里的 ChangeEvent
|
|
15
|
-
- 这个事件来自 <HTMLInputElement> 泛型参数
|
|
16
|
-
|
|
17
|
-
提前告诉大家:e 是“来自 input 元素的 change 事件对象” (贴标签)
|
|
18
|
-
- 放心大胆用:e.target.files
|
|
19
|
-
*/
|
|
20
|
-
const handleFileChange = (e) => {
|
|
21
|
-
// 1)取出 用户上传的 文件
|
|
22
|
-
/*
|
|
23
|
-
input type="file" 文件类型输入框:
|
|
24
|
-
- 有一个特殊属性 files: 用户当前选中的 文件列表 FileList
|
|
25
|
-
- 用户一次性可以选3个文件
|
|
26
|
-
FileList {
|
|
27
|
-
// File对象
|
|
28
|
-
0: File {
|
|
29
|
-
name: "a.png",
|
|
30
|
-
size: 12345,
|
|
31
|
-
type: "image/png"
|
|
32
|
-
|
|
33
|
-
// 内部隐藏
|
|
34
|
-
[[BinaryData]]: <文件二进制>0100110101...
|
|
35
|
-
},
|
|
36
|
-
|
|
37
|
-
1: File {
|
|
38
|
-
name: "b.jpg",
|
|
39
|
-
size: 23456,
|
|
40
|
-
type: "image/jpeg"
|
|
41
|
-
},
|
|
42
|
-
|
|
43
|
-
2: File {
|
|
44
|
-
name: "c.pdf",
|
|
45
|
-
size: 34567,
|
|
46
|
-
type: "application/pdf"
|
|
47
|
-
},
|
|
48
|
-
|
|
49
|
-
length: 3
|
|
50
|
-
}
|
|
51
|
-
*/
|
|
52
|
-
// 获取 文件列表
|
|
53
|
-
const files = e.target.files;
|
|
54
|
-
if (files) {
|
|
55
|
-
// 从文件列表中取出 第一个 File 对象 : 文件信息 + 文件内容(二进制)
|
|
56
|
-
const uploadedFile = files[0];
|
|
57
|
-
// 2)将 本次文件 放进 formData
|
|
58
|
-
const formData = new FormData();
|
|
59
|
-
// key-value 形式
|
|
60
|
-
formData.append("file", uploadedFile);
|
|
61
|
-
// 3)使用 Axios 发送请求
|
|
62
|
-
/*
|
|
63
|
-
常见参数: axios.post(url, data, config)
|
|
64
|
-
- url:地址
|
|
65
|
-
- data: 请求体body (这次 POST 请求要携带的数据)
|
|
66
|
-
- config配置项 对象:
|
|
67
|
-
*/
|
|
68
|
-
axios.post("https://jsonplaceholder.typicode.com/posts",
|
|
69
|
-
// Axios 发出去的不是 FormData 对象本身
|
|
70
|
-
/*
|
|
71
|
-
FormData 里装的是一个 File 对象引用
|
|
72
|
-
-> 当 Axios / fetch 看到: body: formData
|
|
73
|
-
-> 浏览器会开始做“编码
|
|
74
|
-
-> 先遍历 FormData 里的每一项
|
|
75
|
-
-> 变成 HTTP body 里的某一个 "part"
|
|
76
|
-
-> 每一个"part"包含:(文件相关的描述信息 + 二进制内容)
|
|
77
|
-
------WebKitBoundary123【包裹边界】
|
|
78
|
-
Content-Disposition: form-data; name="file"; filename="a.png"
|
|
79
|
-
Content-Type: image/png
|
|
80
|
-
|
|
81
|
-
<文件二进制内容>
|
|
82
|
-
------WebKitBoundary123--【结束边界】
|
|
83
|
-
*/
|
|
84
|
-
formData, {
|
|
85
|
-
// 设置 请求头信息
|
|
86
|
-
headers: {
|
|
87
|
-
// 表单文件数据
|
|
88
|
-
'Content-Type': 'multipart/form-data'
|
|
89
|
-
}
|
|
90
|
-
}).then(resp => {
|
|
91
|
-
console.log(resp);
|
|
92
|
-
});
|
|
93
|
-
}
|
|
94
|
-
};
|
|
95
|
-
return (_jsx("div", { className: "AxiosReact", style: { marginTop: '100px', marginLeft: '100px' }, children: _jsx("input", { type: "file",
|
|
96
|
-
// {/* 原生必须传,自定义不用传 name="myFile" */}
|
|
97
|
-
onChange: handleFileChange }) }));
|
|
98
|
-
};
|
|
99
|
-
export default AxiosReact;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
const FromHtml = () => {
|
|
3
|
-
return (_jsx("div", { className: "App", style: { marginTop: '100px', marginLeft: '100px' }, children: _jsxs("form", { method: "post", encType: "multipart/form-data", action: "https://jsonplaceholder.typicode.com/posts", children: [_jsx("input", { type: "file", name: "myFile" }), _jsx("button", { type: "submit", children: "Submit" })] }) }));
|
|
4
|
-
};
|
|
5
|
-
export default FromHtml;
|
|
@@ -1,192 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useRef, useState } from 'react';
|
|
3
|
-
import axios from 'axios';
|
|
4
|
-
import UploadList from './uploadList';
|
|
5
|
-
import Dragger from './dragger';
|
|
6
|
-
/**
|
|
7
|
-
* 通过点击或者拖拽上传文件
|
|
8
|
-
* ### 引用方法
|
|
9
|
-
*
|
|
10
|
-
* ~~~js
|
|
11
|
-
* import { Upload } from 'vikingship'
|
|
12
|
-
* ~~~
|
|
13
|
-
*/
|
|
14
|
-
export const Upload = (props) => {
|
|
15
|
-
const { action, defaultFileList, beforeUpload, onProgress, onSuccess, onError, onChange, onRemove, name = 'file', headers, data, withCredentials, accept, multiple, children, drag, } = props;
|
|
16
|
-
// 文件输入框 ref 引用
|
|
17
|
-
const fileInput = useRef(null);
|
|
18
|
-
// (子组件)页面上 正在显示 的 上传文件列表
|
|
19
|
-
const [fileList, setFileList] = useState(defaultFileList || []);
|
|
20
|
-
// **`UploadList`** 子组件: 从 上传文件列表fileList 渲染一堆 列表项 class
|
|
21
|
-
// 上传列表状态更新器
|
|
22
|
-
const updateFileList = (updateFile, updateObj) => {
|
|
23
|
-
setFileList(prevList => {
|
|
24
|
-
return prevList.map(file => {
|
|
25
|
-
// 在列表里找到同一个 uid 文件
|
|
26
|
-
if (file.uid === updateFile.uid) {
|
|
27
|
-
// 更新部分字段
|
|
28
|
-
return { ...file, ...updateObj };
|
|
29
|
-
}
|
|
30
|
-
else {
|
|
31
|
-
return file;
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
});
|
|
35
|
-
};
|
|
36
|
-
// 点击上传回调:用户点击 上传文件 输入框
|
|
37
|
-
const handleClick = () => {
|
|
38
|
-
// 用 ref 拿到“隐藏的” input元素
|
|
39
|
-
if (fileInput.current) {
|
|
40
|
-
// 调用浏览器的原生能力: 弹出 系统级文件选择框
|
|
41
|
-
fileInput.current.click();
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
// 文件上传回调:当有文件传来的时候触发
|
|
45
|
-
const handleFileChange = (e) => {
|
|
46
|
-
// 获取文件列表:类型为 FileList
|
|
47
|
-
const files = e.target.files;
|
|
48
|
-
if (!files) {
|
|
49
|
-
return;
|
|
50
|
-
}
|
|
51
|
-
// 调用 上传文件函数(含发送请求):决定 每个/不同文件 怎么处理
|
|
52
|
-
uploadFiles(files);
|
|
53
|
-
// 清空 文件输入框
|
|
54
|
-
if (fileInput.current) {
|
|
55
|
-
fileInput.current.value = '';
|
|
56
|
-
}
|
|
57
|
-
};
|
|
58
|
-
// 传递给 UploadList 子组件的 回调函数
|
|
59
|
-
const handleRemove = (file) => {
|
|
60
|
-
setFileList((prevList) => {
|
|
61
|
-
return prevList.filter(item => item.uid !== file.uid);
|
|
62
|
-
});
|
|
63
|
-
if (onRemove) {
|
|
64
|
-
onRemove(file);
|
|
65
|
-
}
|
|
66
|
-
};
|
|
67
|
-
// 函数: 上传文件: 决定 每个文件 上传
|
|
68
|
-
// (beforeUpload: “上传前钩子”)
|
|
69
|
-
const uploadFiles = (files, test) => {
|
|
70
|
-
// 传来的文件列表 FileList类型,不是数组 =》 转为数组
|
|
71
|
-
const postFiles = Array.from(files);
|
|
72
|
-
//
|
|
73
|
-
if (test) {
|
|
74
|
-
console.log('drag', postFiles[0]);
|
|
75
|
-
}
|
|
76
|
-
// 遍历 数组 每一项
|
|
77
|
-
postFiles.forEach(file => {
|
|
78
|
-
// 没有配置 beforeUpload,直接上传
|
|
79
|
-
if (!beforeUpload) {
|
|
80
|
-
post(file);
|
|
81
|
-
}
|
|
82
|
-
else {
|
|
83
|
-
// 用户使用了 beforeUpload => 需要等待 用户的异步处理结果(例如压缩图片)
|
|
84
|
-
// beforeUpload(file)用户在钩子里写的回调: 会返回 Promise<newFile>
|
|
85
|
-
// 获取 Promise<newFile> 用这个处理完的 File 对象发送
|
|
86
|
-
// 执行用户传进来的回调函数,并把它的返回值接住,放进 result
|
|
87
|
-
const result = beforeUpload(file);
|
|
88
|
-
//
|
|
89
|
-
if (result && result instanceof Promise) {
|
|
90
|
-
// 获取 异步回调 reslove(newFile)后的 newFile
|
|
91
|
-
result.then(processedFile => {
|
|
92
|
-
post(processedFile); // 发送用户异步处理完的 新File文件
|
|
93
|
-
});
|
|
94
|
-
}
|
|
95
|
-
else if (result !== false) {
|
|
96
|
-
// 用户使用了拦截:return false ==> 永远不会触发 post, 不上传
|
|
97
|
-
// 返回 true → 上传原文件
|
|
98
|
-
post(file);
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
});
|
|
102
|
-
};
|
|
103
|
-
// 函数: 发axios请求
|
|
104
|
-
const post = (file) => {
|
|
105
|
-
// 改造浏览器原生File,创建 内部文件对象 `_file` (文件本体 + 上传状态)
|
|
106
|
-
const _file = {
|
|
107
|
-
uid: Date.now() + 'upload-file',
|
|
108
|
-
status: 'ready',
|
|
109
|
-
name: file.name,
|
|
110
|
-
size: file.size,
|
|
111
|
-
percent: 0,
|
|
112
|
-
raw: file
|
|
113
|
-
};
|
|
114
|
-
// 请求发送之前放进 fileList,列表先显示出来
|
|
115
|
-
setFileList(prevList => {
|
|
116
|
-
return [_file, ...prevList];
|
|
117
|
-
});
|
|
118
|
-
// 2) 构建 `FormData`
|
|
119
|
-
const formData = new FormData();
|
|
120
|
-
formData.append(name || 'file', file);
|
|
121
|
-
// 如果传了 `data`, 额外字段也 append 进 FormData
|
|
122
|
-
// (例如 `userId`、`token`)
|
|
123
|
-
if (data) {
|
|
124
|
-
Object.keys(data).forEach(key => {
|
|
125
|
-
formData.append(key, data[key]);
|
|
126
|
-
});
|
|
127
|
-
}
|
|
128
|
-
// 使用 axios 发送 POST 请求
|
|
129
|
-
axios.post(action, formData, {
|
|
130
|
-
headers: {
|
|
131
|
-
...headers,
|
|
132
|
-
'Content-Type': 'multipart/form-data'
|
|
133
|
-
},
|
|
134
|
-
// 跨域请求 凭证信息(Cookie)
|
|
135
|
-
// 需要 后端 允许跨域携带凭证: Access-Control-Allow-Credentials: true
|
|
136
|
-
withCredentials,
|
|
137
|
-
// axios 提供的 请求配置回调(“系统回调”)
|
|
138
|
-
// (不需要手动调用)上传过程中,axios 内部自动不断触发 onUploadProgress
|
|
139
|
-
onUploadProgress: (e) => {
|
|
140
|
-
// 把字节进度算成百分比
|
|
141
|
-
const total = e.total ?? 0;
|
|
142
|
-
const percentage = total ? Math.round((e.loaded * 100) / total) : 0;
|
|
143
|
-
// 更新 fileList 中这条文件的 percent/status
|
|
144
|
-
if (percentage < 100) {
|
|
145
|
-
// 更新 React state(驱动UI):让 UploadList 子组件重新渲染
|
|
146
|
-
updateFileList(_file, { percent: percentage, status: 'uploading' });
|
|
147
|
-
// 更新当前 _file 对象,保证传给回调的值是新的
|
|
148
|
-
_file.status = 'uploading';
|
|
149
|
-
_file.percent = percentage;
|
|
150
|
-
// 将 axios 的 onUploadProgress 得到的上传进度结果,包装一层
|
|
151
|
-
// 提供给 Upload 组件的外部使用者 外部钩子onProgress:给组件外部使用
|
|
152
|
-
if (onProgress) {
|
|
153
|
-
onProgress(percentage, _file);
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
}).then(resp => {
|
|
158
|
-
// 成功时:更新React UI内部状态
|
|
159
|
-
updateFileList(_file, { status: 'success', response: resp.data });
|
|
160
|
-
// 更新当前 _file 对象,保证传给回调的值是新的
|
|
161
|
-
_file.status = 'success';
|
|
162
|
-
_file.response = resp.data;
|
|
163
|
-
// 通知外部 onSuccess / onChange 钩子
|
|
164
|
-
if (onSuccess) {
|
|
165
|
-
onSuccess(resp.data, _file);
|
|
166
|
-
}
|
|
167
|
-
if (onChange) {
|
|
168
|
-
onChange(_file);
|
|
169
|
-
}
|
|
170
|
-
}).catch(err => {
|
|
171
|
-
// 失败时:更新React UI内部状态
|
|
172
|
-
updateFileList(_file, { status: 'error', error: err });
|
|
173
|
-
// 更新当前 _file 对象,保证传给回调的值是新的
|
|
174
|
-
_file.status = 'error';
|
|
175
|
-
_file.error = err;
|
|
176
|
-
//
|
|
177
|
-
if (onError) {
|
|
178
|
-
onError(err, _file);
|
|
179
|
-
}
|
|
180
|
-
if (onChange) {
|
|
181
|
-
onChange(_file);
|
|
182
|
-
}
|
|
183
|
-
});
|
|
184
|
-
};
|
|
185
|
-
return (_jsxs("div", { className: "viking-upload-component", children: [_jsxs("div", { className: "viking-upload-input", style: { display: 'inline-block' }, onClick: handleClick, children: [children, drag ?
|
|
186
|
-
// 传给 Dragger子组件回调函数 onFile
|
|
187
|
-
// 当用户拖拽文件,Dragger 的onDrop状态触发 onFile(files)
|
|
188
|
-
_jsx(Dragger, { onFile: (files) => { uploadFiles(files, true); }, children: children }) :
|
|
189
|
-
// 如果 drag = false, 直接渲染 children(普通模式)
|
|
190
|
-
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 })] }));
|
|
191
|
-
};
|
|
192
|
-
export default Upload;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import Icon from '../Icon/icon';
|
|
3
|
-
import Progress from '../Progress/progress';
|
|
4
|
-
export const UploadList = (props) => {
|
|
5
|
-
// 从 Prop 中取出 fileList 文件列表 和 回调
|
|
6
|
-
const { fileList, onRemove, } = props;
|
|
7
|
-
console.log('firelist', fileList);
|
|
8
|
-
return (_jsx("ul", { className: "viking-upload-list", children: fileList.map(item => {
|
|
9
|
-
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' &&
|
|
10
|
-
_jsx(Progress, { percent: item.percent || 0 })] }, item.uid));
|
|
11
|
-
}) }));
|
|
12
|
-
};
|
|
13
|
-
export default UploadList;
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
// “点击某个区域外面时,执行一些事情。”
|
|
2
|
-
/*监听整个页面点击,
|
|
3
|
-
-如果点击目标不在 ref 指向的 DOM 里,就执行回调。
|
|
4
|
-
*/
|
|
5
|
-
import { useEffect, useRef } from "react";
|
|
6
|
-
function useClickOutside(ref, handler, eventType = "click") {
|
|
7
|
-
const handlerRef = useRef(handler);
|
|
8
|
-
useEffect(() => {
|
|
9
|
-
handlerRef.current = handler;
|
|
10
|
-
}, [handler]);
|
|
11
|
-
useEffect(() => {
|
|
12
|
-
// 监听 document 的 click 事件
|
|
13
|
-
// 点击回调:页面每次被点击时,要执行的函数
|
|
14
|
-
const listener = (event) => {
|
|
15
|
-
// 拿到真实 边界DOM
|
|
16
|
-
const el = ref?.current;
|
|
17
|
-
// 空值保护: 当前拿不到 DOM,直接return
|
|
18
|
-
if (!el)
|
|
19
|
-
return;
|
|
20
|
-
// 点击发生在组件内部, 直接return
|
|
21
|
-
/*
|
|
22
|
-
event.target: 实际点到的元素
|
|
23
|
-
el.contains:DOM 原生 API,判断 el元素是否包含某个节点
|
|
24
|
-
*/
|
|
25
|
-
// 复杂场景下如果下拉框通过 portal 渲染到 body 等其他 DOM 树中,单纯依赖 contains 判断可能不够,需要更通用的命中判断策略
|
|
26
|
-
if (el.contains(event.target))
|
|
27
|
-
return;
|
|
28
|
-
handlerRef.current(event); // 执行回调函数
|
|
29
|
-
};
|
|
30
|
-
// 监听挂在 document整个页面上
|
|
31
|
-
document.addEventListener(eventType, listener);
|
|
32
|
-
// 清理函数: 卸载组件时,移除监听(防止内存泄漏/重复监听)
|
|
33
|
-
return () => {
|
|
34
|
-
document.removeEventListener(eventType, listener);
|
|
35
|
-
};
|
|
36
|
-
}, [ref, eventType]);
|
|
37
|
-
}
|
|
38
|
-
export default useClickOutside;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
防抖(debounce)Hook:
|
|
3
|
-
-频繁触发的操作 → 只在最后一次停顿后执行
|
|
4
|
-
- 只要输入还在继续,就一直取消定时器;
|
|
5
|
-
- 只有用户停下来 delay 毫秒,才把值更新出去。
|
|
6
|
-
|
|
7
|
-
若后续常用于对象 / 数组:
|
|
8
|
-
可以配合 useMemo 或 useCallback 使用,减少下游无谓重渲
|
|
9
|
-
*/
|
|
10
|
-
import { useState, useEffect } from "react";
|
|
11
|
-
function useDebounce(value, delay = 300) {
|
|
12
|
-
// 初始值为 value
|
|
13
|
-
const [debouncedValue, setDebouncedValue] = useState(value);
|
|
14
|
-
// 当 value值与 delay改变时,执行
|
|
15
|
-
useEffect(() => {
|
|
16
|
-
// 启动一个定时器,300ms后执行
|
|
17
|
-
const handler = window.setTimeout(() => {
|
|
18
|
-
setDebouncedValue(value);
|
|
19
|
-
}, delay);
|
|
20
|
-
// 清理函数:value 又变了,就取消上一次定时器
|
|
21
|
-
// 只要一直触发,就一直取消;直到停下来,才执行最后一次。
|
|
22
|
-
return () => {
|
|
23
|
-
clearTimeout(handler);
|
|
24
|
-
};
|
|
25
|
-
}, [value, delay]);
|
|
26
|
-
return debouncedValue;
|
|
27
|
-
}
|
|
28
|
-
export default useDebounce;
|
package/build/index.css.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../src/styles/_variables.scss","../src/styles/_mixin.scss","../src/styles/_reboot.scss","../src/styles/_animation.scss","../src/components/Button/_style.scss","../src/components/Icon/_style.scss","../src/components/Upload/_style.scss","../src/components/Progress/_style.scss","../src/components/Input/_style.scss"],"names":[],"mappings":"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AAMZ;EHnCE;EACA,WDwD4B;ECvD5B,eDwK4B;;;AIpI9B;EHtCE;EACA,WDyD4B;ECxD5B,eDyK4B;;;AIhI9B;EH3BE,ODdS;ECeT,YDHQ;ECIR,cDJQ;;ACMR;EACE,ODnBO;ECoBP,YAXiB;EAYjB,cAXa;;AAcf;EAEE,OD1BO;EC2BP,YAlBiB;EAmBjB,cAlBa;;AAqBf;EAEE,ODjCO;ECkCP,YDtBM;ECuBN,cDvBM;;;AIgCV;EH9BE,ODdS;ECeT,YDCQ;ECAR;;AAEA;EACE,ODnBO;ECoBP,YAXiB;EAYjB,cAXa;;AAcf;EAEE,OD1BO;EC2BP,YAlBiB;EAmBjB,cAlBa;;AAqBf;EAEE,ODjCO;ECkCP,YDlBM;ECmBN,cDnBM;;;AIgCV;EHlCE,ODLS;ECMT,YDfS;ECgBT,cDZS;;ACcT;EACE,ODPM;ECQN,YDpBO;ECqBP,cDTM;;ACYR;EAEE,ODdM;ECeN,YD3BO;EC4BP,cDhBM;;ACmBR;EAEE,ODxBO;ECyBP,YDlCO;ECmCP,cD/BO;;;AIiDX;EACI,aJQ0B;EIP1B,OJ3CM;EI4CN,iBJ0BsC;EIxBtC;;AACA;EACI,OJuBkC;EItBlC,iBJuBkC;;AIrBtC;EAEI,iBJmBkC;EIlBlC;;AAEJ;EAEI,OJhEG;EIiEH;;;AC5EN;EACE,OLuCJ;;;AKxCE;EACE,OLuCJ;;;AKxCE;EACE,OLuCJ;;;AKxCE;EACE,OLuCJ;;;AKxCE;EACE,OLuCJ;;;AKxCE;EACE,OLuCJ;;;AKxCE;EACE,OLuCJ;;;AKxCE;EACE,OLuCJ;;;AMzCA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;;AACA;EACE;EACA,ON/BK;;AMkCT;EACE,ONxBM;;AMyBN;EACE,ON1BI;;AM6BR;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE,kBN3DO;;AM4DP;EACE;;AAEF;EACE;;;ACxEN;EACE;EACA;;AACA;EACE,ePyK0B;EOxK1B,kBPGO;EOFP;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,eP4J0B;EO3J1B;EACA,YPoRgC;;AOnRhC;EACE,OPfK;EOgBL,WP6Q8B;EO5Q9B;;AAIF;EACE,kBPaN;;AOdI;EACE,kBPaN;;AOdI;EACE,kBPaN;;AOdI;EACE,kBPaN;;AOdI;EACE,kBPaN;;AOdI;EACE,kBPaN;;AOdI;EACE,kBPaN;;AOdI;EACE,kBPaN;;;AQxCA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA,OREO;EQDP;EACA;EACA;EACA;;AACA;EACE,ORLK;;;AQSX;EACE;;;AAEF;EACE;EACA;EACA,aR2B4B;EQ1B5B,WRgC4B;EQ/B5B,aRuC4B;EQtC5B,aR4C4B;EQ3C5B,ORlBS;EQmBT,kBR1BS;EQ2BT;EACA;EAGA,eRwI4B;EQtI5B,YR8I4B;EQ7I5B,YRmPsC;;AQjPtC;EACE,OR9BO;EQ+BP,kBRtCO;EQuCP,cRgOoC;EQ/NpC;EACA,YRmOoC;;AQhOtC;EACE,ORvCO;EQyCP;;AAEF;EAEE,kBRjDO;EQoDP;;;AAGJ;AAAA;EAEE;EACA;EACA;EACA;EACA,WRT4B;EQU5B,aRF4B;EQG5B,aRG4B;EQF5B,OR3DS;EQ4DT;EACA;EACA,kBRnES;EQoET;EACA,eRgG4B;;;AQ9F9B;EACE;EACA;;;AAEF;AAAA;EPJE,yBOM6B;EPL7B,4BOK6B;;;AAG/B;AAAA;EPJE,wBOM4B;EPL5B,2BOK4B;;;AAG9B;EACE;EACA,WRjC4B;EQkC5B,eR+E4B;;;AQ5E9B;EACE;EACA,WRxC4B;EQyC5B,eRwE4B","file":"index.css"}
|
package/build/index.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import './index.css';
|
|
2
|
-
export { default as Button } from './components/Button';
|
|
3
|
-
export { default as Menu } from './components/Menu';
|
|
4
|
-
export { default as AutoComplete } from './components/AutoComplete';
|
|
5
|
-
export { default as Icon } from './components/Icon';
|
|
6
|
-
export { default as Input } from './components/Input';
|
|
7
|
-
export { default as Progress } from './components/Progress';
|
|
8
|
-
export { default as Transition } from './components/Transition';
|
|
9
|
-
export { default as Upload } from './components/Upload';
|
package/build/index.js
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { library } from '@fortawesome/fontawesome-svg-core';
|
|
2
|
-
import { fas } from '@fortawesome/free-solid-svg-icons';
|
|
3
|
-
import './index.css';
|
|
4
|
-
library.add(fas);
|
|
5
|
-
export { default as Button } from './components/Button';
|
|
6
|
-
export { default as Menu } from './components/Menu';
|
|
7
|
-
export { default as AutoComplete } from './components/AutoComplete';
|
|
8
|
-
export { default as Icon } from './components/Icon';
|
|
9
|
-
export { default as Input } from './components/Input';
|
|
10
|
-
export { default as Progress } from './components/Progress';
|
|
11
|
-
export { default as Transition } from './components/Transition';
|
|
12
|
-
export { default as Upload } from './components/Upload';
|
package/build/main.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import './styles/index.scss';
|
package/build/main.js
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { StrictMode } from 'react';
|
|
3
|
-
import { createRoot } from 'react-dom/client';
|
|
4
|
-
// @zhangAo_换入自己写的样式文件
|
|
5
|
-
import './styles/index.scss';
|
|
6
|
-
import App from './App';
|
|
7
|
-
createRoot(document.getElementById('root')).render(_jsx(StrictMode, { children: _jsx(App, {}) }));
|
package/build/setupTests.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import '@testing-library/jest-dom';
|
package/build/setupTests.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import '@testing-library/jest-dom';
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|