@pointcloud/pcloud-components 0.1.2 → 0.1.4
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/README.md +7 -1
- package/dist/esm/DCascader/index.d.ts +4 -8
- package/dist/esm/DCascader/index.js +53 -36
- package/dist/esm/DForm/DItem.d.ts +28 -0
- package/dist/esm/DForm/DItem.js +31 -0
- package/dist/esm/DForm/DItemsMap.d.ts +33 -0
- package/dist/esm/DForm/DItemsMap.js +148 -0
- package/dist/esm/DForm/helper.d.ts +6 -0
- package/dist/esm/DForm/helper.js +56 -0
- package/dist/esm/DForm/index.d.ts +20 -0
- package/dist/esm/DForm/index.js +60 -0
- package/dist/esm/DForm/index.less +31 -0
- package/dist/esm/DSelect/index.d.ts +1 -1
- package/dist/esm/DTreeSelect/index.d.ts +1 -1
- package/dist/esm/DTreeSelect/index.js +64 -43
- package/dist/esm/DUpload/helper.d.ts +105 -0
- package/dist/esm/DUpload/helper.js +265 -0
- package/dist/esm/DUpload/index.d.ts +55 -0
- package/dist/esm/DUpload/index.js +380 -0
- package/dist/esm/DUpload/index.less +18 -0
- package/dist/esm/LModal/index.d.ts +5 -0
- package/dist/esm/LModal/index.js +54 -0
- package/dist/esm/LModal/interface.d.ts +8 -0
- package/dist/esm/LModal/interface.js +1 -0
- package/dist/esm/LModal/styles/index.less +25 -0
- package/dist/esm/Loading/index.d.ts +2 -2
- package/dist/esm/Loading/index.js +4 -6
- package/dist/esm/Loading/interface.d.ts +3 -2
- package/dist/esm/Loading/loading.d.ts +1 -1
- package/dist/esm/Loading/loading.js +27 -5
- package/dist/esm/index.d.ts +6 -0
- package/dist/esm/index.js +4 -1
- package/dist/umd/pcloud-components.min.css +1 -1
- package/dist/umd/pcloud-components.min.js +1 -1
- package/package.json +4 -3
|
@@ -12,7 +12,7 @@ export declare type DSelectProps = Omit<SelectProps, 'options' | 'onSearch' | 'l
|
|
|
12
12
|
/** 是否开启防抖: true表示800毫秒,true表示默认值,false或0表示不开启 */
|
|
13
13
|
debounce?: boolean | number;
|
|
14
14
|
};
|
|
15
|
-
declare const DSelect: React.ForwardRefExoticComponent<Omit<SelectProps<any, DefaultOptionType>, "
|
|
15
|
+
declare const DSelect: React.ForwardRefExoticComponent<Omit<SelectProps<any, DefaultOptionType>, "options" | "onSearch" | "loading"> & {
|
|
16
16
|
/** antd的onSearch属性,onSearch有效时showSearch自动为true */
|
|
17
17
|
onSearch?: ((params?: any) => Promise<DefaultOptionType[] | any[]>) | undefined;
|
|
18
18
|
/** antd的options属性,可以是一个options数组,或一个返回等价options数组的promise */
|
|
@@ -13,7 +13,7 @@ export declare type DTreeSelectProps = Omit<TreeSelectProps, 'treeData' | 'loadD
|
|
|
13
13
|
/** antd的loading属性,是否显示加载中:传入数字表示延迟加载,单位毫秒,0等同于false */
|
|
14
14
|
loading?: boolean | number;
|
|
15
15
|
};
|
|
16
|
-
declare const DTreeSelect: React.ForwardRefExoticComponent<Omit<TreeSelectProps<any, import("rc-tree-select/lib/TreeSelect").DefaultOptionType>, "loading" | "
|
|
16
|
+
declare const DTreeSelect: React.ForwardRefExoticComponent<Omit<TreeSelectProps<any, import("rc-tree-select/lib/TreeSelect").DefaultOptionType>, "loading" | "loadData" | "treeData"> & {
|
|
17
17
|
/** antd的treeData属性,可以是一个treeData数组,或一个返回等价treeData数组的promise */
|
|
18
18
|
treeData?: import("rc-tree-select/lib/TreeSelect").DefaultOptionType[] | ((node?: DefaultOptionType) => Promise<TreeSelectProps['treeData']>) | undefined;
|
|
19
19
|
/** antd的loadData属性,动态加载子级列表数据,默认使用treeData所提供的方法,如果传入null,则表示不进行动态加载,该方法要求返回一个treeData数组或与其等价的Promise */
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
2
|
-
var _excluded = ["className", "popupClassName", "treeData", "fieldNames", "
|
|
2
|
+
var _excluded = ["className", "popupClassName", "treeData", "fieldNames", "loadData", "onLoadData", "loading"];
|
|
3
3
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
4
4
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
5
5
|
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
@@ -22,7 +22,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
22
22
|
* @Author : wangfeihu
|
|
23
23
|
* @Date : 2023-05-22 10:38:17
|
|
24
24
|
* @LastEditors : wangfeihu
|
|
25
|
-
* @LastEditTime : 2023-
|
|
25
|
+
* @LastEditTime : 2023-06-30 16:24:47
|
|
26
26
|
* @Description : 基于antd的TreeSelect组件
|
|
27
27
|
*/
|
|
28
28
|
|
|
@@ -30,18 +30,41 @@ import React, { useRef, forwardRef, useState, useEffect, useMemo, useContext } f
|
|
|
30
30
|
import { TreeSelect } from 'antd';
|
|
31
31
|
import { ConfigContext } from "../ConfigProvider";
|
|
32
32
|
import "./index.less";
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
// eslint-disable-next-line no-unused-vars
|
|
34
|
+
function deepFind(node, fn) {
|
|
35
|
+
var childrenName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'children';
|
|
36
|
+
if (fn instanceof Function) {
|
|
37
|
+
var treelist = node instanceof Array ? node : [node];
|
|
38
|
+
for (var i = 0; i < treelist.length; i++) {
|
|
39
|
+
if (fn(treelist[i], i)) {
|
|
40
|
+
return treelist[i];
|
|
41
|
+
} else {
|
|
42
|
+
var target = deepFind(treelist[i][childrenName] || [], fn, childrenName);
|
|
43
|
+
if (target) return target;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
} else {
|
|
47
|
+
return undefined;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
37
50
|
|
|
51
|
+
// 获取延时时间,默认800ms,true代表默认时间,false代表0
|
|
52
|
+
function getDelayTime(value) {
|
|
53
|
+
var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 800;
|
|
54
|
+
if (value === true) {
|
|
55
|
+
return defaultValue;
|
|
56
|
+
} else if (value === false) {
|
|
57
|
+
return 0;
|
|
58
|
+
} else {
|
|
59
|
+
return typeof value === 'number' ? Number(value) || 0 : defaultValue;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
38
62
|
function InternalTreeSelect(props, ref) {
|
|
39
63
|
var _props$className = props.className,
|
|
40
64
|
className = _props$className === void 0 ? '' : _props$className,
|
|
41
65
|
popupClassName = props.popupClassName,
|
|
42
66
|
initOptions = props.treeData,
|
|
43
67
|
fieldNames = props.fieldNames,
|
|
44
|
-
treeNodeFilterProp = props.treeNodeFilterProp,
|
|
45
68
|
loadData = props.loadData,
|
|
46
69
|
onLoadData = props.onLoadData,
|
|
47
70
|
initLoading = props.loading,
|
|
@@ -70,27 +93,31 @@ function InternalTreeSelect(props, ref) {
|
|
|
70
93
|
children: 'children'
|
|
71
94
|
}, fieldNames);
|
|
72
95
|
var _treeNodeFilterProp = _fieldNames.label;
|
|
73
|
-
var _loadingState = getDelayTime(
|
|
96
|
+
var _loadingState = getDelayTime(initLoading, 600); // loading: 默认600ms,false或0表示不开启
|
|
74
97
|
|
|
75
98
|
var _loading = typeof initLoading === 'boolean' ? initLoading : loading;
|
|
76
99
|
|
|
77
100
|
// 将外部传入的options转化为统一的异步请求方法
|
|
78
|
-
var getOptionsFun = useMemo(
|
|
101
|
+
var getOptionsFun = useMemo(
|
|
102
|
+
// eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
|
|
103
|
+
function () {
|
|
79
104
|
return typeof initOptions === 'function' ? initOptions : function (params) {
|
|
80
105
|
return Promise.resolve(initOptions || []);
|
|
81
106
|
};
|
|
82
107
|
}, [initOptions]);
|
|
108
|
+
|
|
109
|
+
// eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
|
|
83
110
|
var updateOptions = function updateOptions(fun, value) {
|
|
84
111
|
// 设置加载中状态
|
|
85
112
|
if (_loadingState > 0) {
|
|
86
113
|
loadingRef.current.status = 'loading';
|
|
114
|
+
loadingParamsRef.current = value;
|
|
87
115
|
clearTimeout(loadingRef.current.timer);
|
|
88
116
|
loadingRef.current.timer = setTimeout(function () {
|
|
89
|
-
loadingRef.current.status === 'loading'
|
|
117
|
+
if (loadingRef.current.status === 'loading') setLoading(true);
|
|
90
118
|
}, _loadingState);
|
|
91
119
|
}
|
|
92
120
|
// 发起请求
|
|
93
|
-
loadingParamsRef.current = value;
|
|
94
121
|
fun === null || fun === void 0 ? void 0 : fun(value).then(function (response) {
|
|
95
122
|
if (loadingParamsRef.current === value) {
|
|
96
123
|
setTreeData(response);
|
|
@@ -105,19 +132,41 @@ function InternalTreeSelect(props, ref) {
|
|
|
105
132
|
});
|
|
106
133
|
};
|
|
107
134
|
var _loadData = function _loadData(selectedOption) {
|
|
108
|
-
onLoadData
|
|
135
|
+
if (onLoadData) onLoadData(selectedOption);
|
|
109
136
|
var _getOptions = typeof initOptions === 'function' ? initOptions : null;
|
|
110
137
|
var loadFn = loadData === null ? loadData : loadData || _getOptions;
|
|
111
138
|
if (typeof loadFn === 'function') {
|
|
112
|
-
|
|
139
|
+
// 设置加载中状态
|
|
140
|
+
if (_loadingState > 0) {
|
|
141
|
+
loadingRef.current.status = 'loading';
|
|
142
|
+
loadingParamsRef.current = loadingParamsRef.current ? loadingParamsRef.current + 1 : 1;
|
|
143
|
+
clearTimeout(loadingRef.current.timer);
|
|
144
|
+
loadingRef.current.timer = setTimeout(function () {
|
|
145
|
+
if (loadingRef.current.status === 'loading') {
|
|
146
|
+
setLoading(true);
|
|
147
|
+
}
|
|
148
|
+
}, _loadingState);
|
|
149
|
+
}
|
|
150
|
+
var loadFnPromise = loadFn(selectedOption);
|
|
113
151
|
if (typeof loadFnPromise['then'] === 'function') {
|
|
114
152
|
loadFnPromise.then(function (response) {
|
|
153
|
+
loadingParamsRef.current = loadingParamsRef.current ? loadingParamsRef.current - 1 : null;
|
|
154
|
+
if (!loadingParamsRef.current) {
|
|
155
|
+
setLoading(false);
|
|
156
|
+
loadingRef.current.status = 'done';
|
|
157
|
+
}
|
|
115
158
|
var list = treeData || [];
|
|
116
159
|
var node = deepFind(list, function (item) {
|
|
117
160
|
return item[_fieldNames.value] === selectedOption[_fieldNames.value];
|
|
118
161
|
}, _fieldNames.children);
|
|
119
|
-
|
|
162
|
+
if (node) node[_fieldNames.children] = response;
|
|
120
163
|
setTreeData(_toConsumableArray(list));
|
|
164
|
+
}).catch(function () {
|
|
165
|
+
loadingParamsRef.current = loadingParamsRef.current ? loadingParamsRef.current - 1 : null;
|
|
166
|
+
if (!loadingParamsRef.current) {
|
|
167
|
+
setLoading(false);
|
|
168
|
+
loadingRef.current.status = 'done';
|
|
169
|
+
}
|
|
121
170
|
});
|
|
122
171
|
}
|
|
123
172
|
return loadFnPromise;
|
|
@@ -135,40 +184,12 @@ function InternalTreeSelect(props, ref) {
|
|
|
135
184
|
ref: ref,
|
|
136
185
|
className: _className,
|
|
137
186
|
popupClassName: _popupClassName,
|
|
138
|
-
fieldNames:
|
|
187
|
+
fieldNames: fieldNames,
|
|
139
188
|
treeNodeFilterProp: _treeNodeFilterProp,
|
|
140
189
|
treeData: treeData,
|
|
141
190
|
loadData: _loadData,
|
|
142
191
|
loading: _loading
|
|
143
192
|
}));
|
|
144
193
|
}
|
|
145
|
-
|
|
146
|
-
// 获取延时时间,默认800ms,true代表默认时间,false代表0
|
|
147
|
-
function getDelayTime(value) {
|
|
148
|
-
var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 800;
|
|
149
|
-
if (value === true) {
|
|
150
|
-
return defaultValue;
|
|
151
|
-
} else if (value === false) {
|
|
152
|
-
return 0;
|
|
153
|
-
} else {
|
|
154
|
-
return typeof value === 'number' ? Number(value) || 0 : defaultValue;
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
function deepFind(node, fn) {
|
|
158
|
-
var childrenName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'children';
|
|
159
|
-
if (fn instanceof Function) {
|
|
160
|
-
var treelist = node instanceof Array ? node : [node];
|
|
161
|
-
for (var i = 0; i < treelist.length; i++) {
|
|
162
|
-
if (fn(treelist[i], i)) {
|
|
163
|
-
return treelist[i];
|
|
164
|
-
} else {
|
|
165
|
-
var target = deepFind(treelist[i][childrenName] || [], fn, childrenName);
|
|
166
|
-
if (target) return target;
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
} else {
|
|
170
|
-
return undefined;
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
194
|
var DTreeSelect = /*#__PURE__*/forwardRef(InternalTreeSelect);
|
|
174
195
|
export default DTreeSelect;
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import { UploadFile } from 'antd';
|
|
2
|
+
declare type DUploadFile = Omit<UploadFile, 'uid'> & {
|
|
3
|
+
/** 文件id */
|
|
4
|
+
id?: string | number;
|
|
5
|
+
/** 文件uid,系统自动生成 */
|
|
6
|
+
uid?: string | number;
|
|
7
|
+
/** 文件来源 upload:文件对话框,remote:已上传的文件对象 */
|
|
8
|
+
source?: 'upload' | 'remote';
|
|
9
|
+
};
|
|
10
|
+
/** 转换base64时的参数 */
|
|
11
|
+
declare type CompressProps = {
|
|
12
|
+
width?: number;
|
|
13
|
+
/** 图像高度 */
|
|
14
|
+
height?: number;
|
|
15
|
+
/** 图像质量 */
|
|
16
|
+
quality?: number;
|
|
17
|
+
};
|
|
18
|
+
declare type ThumbOptionProps = {
|
|
19
|
+
/** 对目标文件进行过滤,默认只对图片格式生成缩略图 */
|
|
20
|
+
filter?: ((file: DUploadFile) => boolean) | Array<string>;
|
|
21
|
+
/** 文件大小,当上传文件大于指定值时会对缩略图进行压缩,单位为字节,默认2MB */
|
|
22
|
+
size?: number;
|
|
23
|
+
/** 缩略图压缩参数,默认为 {width:300,height:200,quality:0.7} */
|
|
24
|
+
compress?: CompressProps | null;
|
|
25
|
+
/** 缩略图生成失败时的回调函数 */
|
|
26
|
+
onError?: (err: Error) => void;
|
|
27
|
+
/** 自定义生成base64缩略图的方法 */
|
|
28
|
+
getThumbUrl?: (file: DUploadFile, option: ThumbOptionProps) => Promise<string>;
|
|
29
|
+
};
|
|
30
|
+
/**
|
|
31
|
+
* @description : 将图像文件转换为Base64格式
|
|
32
|
+
* @param {Blob} blob 图像文件
|
|
33
|
+
* @param {CompressProps} options 指定图像压缩参数,其格式为: {width:300,height:200,quality:0.7}
|
|
34
|
+
* @return {Promise<string>} 包含Base64字符串的Promise对象
|
|
35
|
+
* @example : imageToBase64(file,{ width: 300, height: 200, quality: 0.7 }).then( url => console.log( url ) )
|
|
36
|
+
*/
|
|
37
|
+
declare function imageToBase64(blob: Blob, options?: CompressProps | null): Promise<string>;
|
|
38
|
+
/**
|
|
39
|
+
* @description : 将传入的文件转换为UploadFile数组
|
|
40
|
+
* @param {any} files 目标文件对象
|
|
41
|
+
* @return {UploadFile[]} UploadFile数组
|
|
42
|
+
* @example :
|
|
43
|
+
*/
|
|
44
|
+
declare function getUploadFile(files: any, maxCount?: number): any[];
|
|
45
|
+
/**
|
|
46
|
+
* @description : 根据传入的option对象获取缩略图参数
|
|
47
|
+
* @param {ThumbOptionProps} option 缩略图参数对象
|
|
48
|
+
* @return {ThumbOptionProps} ThumbOption对象
|
|
49
|
+
* @example :
|
|
50
|
+
*/
|
|
51
|
+
declare function getThumbOption(option?: ThumbOptionProps | null): {
|
|
52
|
+
size: number;
|
|
53
|
+
filter: (file: DUploadFile) => boolean;
|
|
54
|
+
compress: {
|
|
55
|
+
width: number;
|
|
56
|
+
height: number;
|
|
57
|
+
quality: number;
|
|
58
|
+
} | null;
|
|
59
|
+
onError: ((err: Error) => void) | undefined;
|
|
60
|
+
getThumbUrl: ((file: DUploadFile, option: ThumbOptionProps) => Promise<string>) | undefined;
|
|
61
|
+
};
|
|
62
|
+
/**
|
|
63
|
+
* @description : a标签下载文件
|
|
64
|
+
* @param {Blob | string} url a标签的下载url或文件流
|
|
65
|
+
* @param {string} fileName 下载文件的名称,如果缺省则尝试从url中获取,默认为: "新建文件"
|
|
66
|
+
* @return {*}
|
|
67
|
+
* @example :
|
|
68
|
+
*/
|
|
69
|
+
declare function downloadFile(url: Blob | string, fileName?: string): void;
|
|
70
|
+
/**
|
|
71
|
+
* @description : a标签预览文件
|
|
72
|
+
* @param {Blob | string} url a标签的预览url或文件流
|
|
73
|
+
* @return {*}
|
|
74
|
+
* @example :
|
|
75
|
+
*/
|
|
76
|
+
declare function previewFile(url: Blob | string): void;
|
|
77
|
+
/**
|
|
78
|
+
* @description : 以递归方式深度查找一个对象
|
|
79
|
+
* @param {Record} object 待查找的对象
|
|
80
|
+
* @param {function} fn 查找函数,每次递归时执行,如果执行结果为true,则递归过程并返回当前对象
|
|
81
|
+
* @param {number} maxDepth 递归的最大深度,默认10
|
|
82
|
+
* @return {*} 查找到的对象,未查找到则返回undefined
|
|
83
|
+
* @example :
|
|
84
|
+
*/
|
|
85
|
+
declare function deepFindObject(object: Record<string, any>, fn: (item: any, parent: any, fieldMap: any) => boolean, maxDepth?: number): any;
|
|
86
|
+
/**
|
|
87
|
+
* @description : 以递归方式深度查找一个Jsx对象
|
|
88
|
+
* @param {Record} object 待查找的Jsx对象
|
|
89
|
+
* @param {function} fn 查找函数,每次递归时执行,如果执行结果为true,则停止递归过程并返回当前对象
|
|
90
|
+
* @param {number} maxDepth 递归的最大深度,默认10
|
|
91
|
+
* @return {*} 查找到的对象,未查找到则返回undefined
|
|
92
|
+
* @example :
|
|
93
|
+
*/
|
|
94
|
+
declare function deepFindJsx(object: Record<string, any>, fn: (item: any, parent: any) => boolean, maxDepth?: number): any;
|
|
95
|
+
declare const _default: {
|
|
96
|
+
imageToBase64: typeof imageToBase64;
|
|
97
|
+
getUploadFile: typeof getUploadFile;
|
|
98
|
+
getThumbOption: typeof getThumbOption;
|
|
99
|
+
downloadFile: typeof downloadFile;
|
|
100
|
+
previewFile: typeof previewFile;
|
|
101
|
+
deepFindObject: typeof deepFindObject;
|
|
102
|
+
deepFindJsx: typeof deepFindJsx;
|
|
103
|
+
};
|
|
104
|
+
export default _default;
|
|
105
|
+
export type { DUploadFile, ThumbOptionProps };
|
|
@@ -0,0 +1,265 @@
|
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
3
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
5
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
6
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
7
|
+
/*
|
|
8
|
+
* @Author : wangfeihu
|
|
9
|
+
* @Date : 2023-06-16 11:25:57
|
|
10
|
+
* @LastEditors : wangfeihu
|
|
11
|
+
* @LastEditTime : 2023-06-29 18:10:04
|
|
12
|
+
* @Description : 辅助方法集合
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
/** 转换base64时的参数 */
|
|
16
|
+
|
|
17
|
+
var TYPES = {
|
|
18
|
+
OPTION_TYPE_PRIMARY: 'primary',
|
|
19
|
+
OPTION_TYPE_OBJECT: 'object',
|
|
20
|
+
OPTION_TYPE_ARRAY: 'array'
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
// 获取某个字段的类型
|
|
24
|
+
function getType(value) {
|
|
25
|
+
if (typeof value === 'string') {
|
|
26
|
+
return TYPES.OPTION_TYPE_PRIMARY;
|
|
27
|
+
} else if (typeof value === 'number') {
|
|
28
|
+
return TYPES.OPTION_TYPE_PRIMARY;
|
|
29
|
+
} else if (typeof value === 'boolean') {
|
|
30
|
+
return TYPES.OPTION_TYPE_PRIMARY;
|
|
31
|
+
} else if (typeof value === 'undefined') {
|
|
32
|
+
return TYPES.OPTION_TYPE_PRIMARY;
|
|
33
|
+
} else if (_typeof(value) === 'symbol') {
|
|
34
|
+
return TYPES.OPTION_TYPE_PRIMARY;
|
|
35
|
+
} else if (value === null) {
|
|
36
|
+
return TYPES.OPTION_TYPE_PRIMARY;
|
|
37
|
+
} else if (typeof value === 'function') {
|
|
38
|
+
return TYPES.OPTION_TYPE_PRIMARY;
|
|
39
|
+
} else if (value instanceof Array) {
|
|
40
|
+
return TYPES.OPTION_TYPE_ARRAY;
|
|
41
|
+
} else if (Object.keys(value).length > 0) {
|
|
42
|
+
return TYPES.OPTION_TYPE_OBJECT;
|
|
43
|
+
} else {
|
|
44
|
+
return TYPES.OPTION_TYPE_PRIMARY;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* @description : 将图像文件转换为Base64格式
|
|
50
|
+
* @param {Blob} blob 图像文件
|
|
51
|
+
* @param {CompressProps} options 指定图像压缩参数,其格式为: {width:300,height:200,quality:0.7}
|
|
52
|
+
* @return {Promise<string>} 包含Base64字符串的Promise对象
|
|
53
|
+
* @example : imageToBase64(file,{ width: 300, height: 200, quality: 0.7 }).then( url => console.log( url ) )
|
|
54
|
+
*/
|
|
55
|
+
function imageToBase64(blob, options) {
|
|
56
|
+
return new Promise(function (resolve, reject) {
|
|
57
|
+
var reader = new FileReader();
|
|
58
|
+
try {
|
|
59
|
+
reader.readAsDataURL(blob);
|
|
60
|
+
} catch (err) {
|
|
61
|
+
reject(err);
|
|
62
|
+
}
|
|
63
|
+
reader.onload = function () {
|
|
64
|
+
if (typeof reader.result === 'string') {
|
|
65
|
+
if (options === null) {
|
|
66
|
+
resolve(reader.result);
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
var img = new Image();
|
|
70
|
+
img.src = reader.result;
|
|
71
|
+
img.onload = function () {
|
|
72
|
+
var _ref = options || {},
|
|
73
|
+
_ref$width = _ref.width,
|
|
74
|
+
width = _ref$width === void 0 ? img.naturalWidth : _ref$width,
|
|
75
|
+
_ref$height = _ref.height,
|
|
76
|
+
height = _ref$height === void 0 ? img.naturalHeight : _ref$height,
|
|
77
|
+
_ref$quality = _ref.quality,
|
|
78
|
+
quality = _ref$quality === void 0 ? 0.7 : _ref$quality;
|
|
79
|
+
var canvas = document.createElement('canvas');
|
|
80
|
+
var ctx = canvas.getContext('2d');
|
|
81
|
+
canvas.width = width;
|
|
82
|
+
canvas.height = height;
|
|
83
|
+
if (ctx) {
|
|
84
|
+
ctx.drawImage(img, 0, 0, width, height);
|
|
85
|
+
var base64 = canvas.toDataURL(undefined, quality);
|
|
86
|
+
resolve(base64);
|
|
87
|
+
} else {
|
|
88
|
+
reject(new Error("\u8F6C\u6362\u7F29\u7565\u56FE\u5931\u8D25: ".concat(reader.result)));
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
img.onerror = function (err) {
|
|
92
|
+
return reject(err);
|
|
93
|
+
};
|
|
94
|
+
} else {
|
|
95
|
+
reject(new Error("\u8F6C\u6362\u7F29\u7565\u56FE\u5931\u8D25: ".concat(reader.result)));
|
|
96
|
+
}
|
|
97
|
+
};
|
|
98
|
+
reader.onerror = function () {
|
|
99
|
+
return reject(reader.error);
|
|
100
|
+
};
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* @description : 将传入的文件转换为UploadFile数组
|
|
106
|
+
* @param {any} files 目标文件对象
|
|
107
|
+
* @return {UploadFile[]} UploadFile数组
|
|
108
|
+
* @example :
|
|
109
|
+
*/
|
|
110
|
+
function getUploadFile(files, maxCount) {
|
|
111
|
+
if (files) {
|
|
112
|
+
var list = files instanceof Array ? files : [files];
|
|
113
|
+
return maxCount && maxCount > 0 ? list.slice(0, maxCount) : list;
|
|
114
|
+
}
|
|
115
|
+
return [];
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/**
|
|
119
|
+
* @description : 根据传入的option对象获取缩略图参数
|
|
120
|
+
* @param {ThumbOptionProps} option 缩略图参数对象
|
|
121
|
+
* @return {ThumbOptionProps} ThumbOption对象
|
|
122
|
+
* @example :
|
|
123
|
+
*/
|
|
124
|
+
function getThumbOption(option) {
|
|
125
|
+
var _ref2 = option || {},
|
|
126
|
+
_ref2$size = _ref2.size,
|
|
127
|
+
size = _ref2$size === void 0 ? 2097152 : _ref2$size,
|
|
128
|
+
_ref2$filter = _ref2.filter,
|
|
129
|
+
filter = _ref2$filter === void 0 ? ['image/gif', 'image/jpeg', 'image/png', 'image/svg+xml'] : _ref2$filter,
|
|
130
|
+
compress = _ref2.compress,
|
|
131
|
+
onError = _ref2.onError,
|
|
132
|
+
getThumbUrl = _ref2.getThumbUrl;
|
|
133
|
+
var _filter = filter instanceof Array ? function (file) {
|
|
134
|
+
return filter.includes(file.type || '');
|
|
135
|
+
} : filter;
|
|
136
|
+
var _compress = compress === null ? compress : _objectSpread({
|
|
137
|
+
width: 300,
|
|
138
|
+
height: 200,
|
|
139
|
+
quality: 0.7
|
|
140
|
+
}, compress);
|
|
141
|
+
var defaultOption = {
|
|
142
|
+
size: size,
|
|
143
|
+
filter: _filter,
|
|
144
|
+
compress: _compress,
|
|
145
|
+
onError: onError,
|
|
146
|
+
getThumbUrl: getThumbUrl
|
|
147
|
+
};
|
|
148
|
+
var _option = option === null ? _objectSpread(_objectSpread({}, defaultOption), {}, {
|
|
149
|
+
filter: function filter() {
|
|
150
|
+
return false;
|
|
151
|
+
}
|
|
152
|
+
}) : defaultOption;
|
|
153
|
+
return _option;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
/**
|
|
157
|
+
* @description : a标签下载文件
|
|
158
|
+
* @param {Blob | string} url a标签的下载url或文件流
|
|
159
|
+
* @param {string} fileName 下载文件的名称,如果缺省则尝试从url中获取,默认为: "新建文件"
|
|
160
|
+
* @return {*}
|
|
161
|
+
* @example :
|
|
162
|
+
*/
|
|
163
|
+
function downloadFile(url, fileName) {
|
|
164
|
+
var eLink = document.createElement('a');
|
|
165
|
+
eLink.download = fileName || (typeof url === 'string' ? '新建文件' : (url === null || url === void 0 ? void 0 : url.name) || '新建文件');
|
|
166
|
+
eLink.style.display = 'none';
|
|
167
|
+
eLink.href = typeof url === 'string' ? url : URL.createObjectURL(url);
|
|
168
|
+
document.body.appendChild(eLink);
|
|
169
|
+
eLink.click();
|
|
170
|
+
URL.revokeObjectURL(eLink.href);
|
|
171
|
+
document.body.removeChild(eLink);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/**
|
|
175
|
+
* @description : a标签预览文件
|
|
176
|
+
* @param {Blob | string} url a标签的预览url或文件流
|
|
177
|
+
* @return {*}
|
|
178
|
+
* @example :
|
|
179
|
+
*/
|
|
180
|
+
function previewFile(url) {
|
|
181
|
+
var eLink = document.createElement('a');
|
|
182
|
+
eLink.target = '_blank';
|
|
183
|
+
eLink.style.display = 'none';
|
|
184
|
+
eLink.href = typeof url === 'string' ? url : URL.createObjectURL(url);
|
|
185
|
+
document.body.appendChild(eLink);
|
|
186
|
+
eLink.click();
|
|
187
|
+
URL.revokeObjectURL(eLink.href);
|
|
188
|
+
document.body.removeChild(eLink);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
/**
|
|
192
|
+
* @description : 以递归方式深度查找一个对象
|
|
193
|
+
* @param {Record} object 待查找的对象
|
|
194
|
+
* @param {function} fn 查找函数,每次递归时执行,如果执行结果为true,则递归过程并返回当前对象
|
|
195
|
+
* @param {number} maxDepth 递归的最大深度,默认10
|
|
196
|
+
* @return {*} 查找到的对象,未查找到则返回undefined
|
|
197
|
+
* @example :
|
|
198
|
+
*/
|
|
199
|
+
// eslint-disable-next-line no-unused-vars
|
|
200
|
+
function deepFindObject(object, fn) {
|
|
201
|
+
var maxDepth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 10;
|
|
202
|
+
function recursive(obj, parent, parentPath, fn, result) {
|
|
203
|
+
if (fn(obj, parent, result)) return obj;
|
|
204
|
+
if (parentPath.split(/\[|\./).length >= maxDepth) return;
|
|
205
|
+
var type = getType(obj);
|
|
206
|
+
if (type === 'object') {
|
|
207
|
+
for (var key in obj) {
|
|
208
|
+
if (key) {
|
|
209
|
+
var pathString = parentPath ? "".concat(parentPath, ".").concat(key) : key;
|
|
210
|
+
var target = recursive(obj[key], obj, pathString, fn, result);
|
|
211
|
+
if (target) return target;
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
} else if (type === 'array') {
|
|
215
|
+
for (var index = 0; index < obj.length; index++) {
|
|
216
|
+
var _pathString = parentPath ? "".concat(parentPath, "[").concat(index, "]") : index;
|
|
217
|
+
var _target = recursive(obj[index], obj, _pathString, fn, result);
|
|
218
|
+
if (_target) return _target;
|
|
219
|
+
}
|
|
220
|
+
} else {
|
|
221
|
+
result[parentPath] = obj;
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
return recursive(object, undefined, '', fn, {});
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
/**
|
|
228
|
+
* @description : 以递归方式深度查找一个Jsx对象
|
|
229
|
+
* @param {Record} object 待查找的Jsx对象
|
|
230
|
+
* @param {function} fn 查找函数,每次递归时执行,如果执行结果为true,则停止递归过程并返回当前对象
|
|
231
|
+
* @param {number} maxDepth 递归的最大深度,默认10
|
|
232
|
+
* @return {*} 查找到的对象,未查找到则返回undefined
|
|
233
|
+
* @example :
|
|
234
|
+
*/
|
|
235
|
+
// eslint-disable-next-line no-unused-vars
|
|
236
|
+
function deepFindJsx(object, fn) {
|
|
237
|
+
var maxDepth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 10;
|
|
238
|
+
function recursive(obj, parent, parentPath, fn) {
|
|
239
|
+
var _obj$props;
|
|
240
|
+
if (fn(obj, parent)) return obj;
|
|
241
|
+
if (parentPath.split(/\./).length >= maxDepth) return;
|
|
242
|
+
var children = obj === null || obj === void 0 ? void 0 : (_obj$props = obj.props) === null || _obj$props === void 0 ? void 0 : _obj$props.children;
|
|
243
|
+
if (children instanceof Array) {
|
|
244
|
+
for (var index = 0; index < children.length; index++) {
|
|
245
|
+
var pathString = parentPath ? "".concat(parentPath, ".children[").concat(index, "]") : ".children[".concat(index, "]");
|
|
246
|
+
var target = recursive(children[index], obj, pathString, fn);
|
|
247
|
+
if (target) return target;
|
|
248
|
+
}
|
|
249
|
+
} else if (children) {
|
|
250
|
+
var _pathString2 = parentPath ? "".concat(parentPath, ".children") : 'children';
|
|
251
|
+
var _target2 = recursive(children, obj, _pathString2, fn);
|
|
252
|
+
if (_target2) return _target2;
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
return recursive(object, undefined, '', fn);
|
|
256
|
+
}
|
|
257
|
+
export default {
|
|
258
|
+
imageToBase64: imageToBase64,
|
|
259
|
+
getUploadFile: getUploadFile,
|
|
260
|
+
getThumbOption: getThumbOption,
|
|
261
|
+
downloadFile: downloadFile,
|
|
262
|
+
previewFile: previewFile,
|
|
263
|
+
deepFindObject: deepFindObject,
|
|
264
|
+
deepFindJsx: deepFindJsx
|
|
265
|
+
};
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
import { UploadProps } from 'antd';
|
|
3
|
+
import { UploadChangeParam } from 'antd/lib/upload';
|
|
4
|
+
import helper, { DUploadFile, ThumbOptionProps } from './helper';
|
|
5
|
+
import './index.less';
|
|
6
|
+
declare type DUploadProps = Omit<UploadProps, 'fileList' | 'onChange' | 'customRequest' | 'onRemove' | 'onDownload' | 'onPreview'> & {
|
|
7
|
+
/** 初始文件列表(相当于defaultFileList,但优先级高于defaultFileList) */
|
|
8
|
+
value?: DUploadFile | DUploadFile[];
|
|
9
|
+
/** 文件列表(在Form组件中表现为受控列表,在一般情况下相当于初始文件列表,其优先级高于value属性) */
|
|
10
|
+
fileList?: DUploadFile | DUploadFile[];
|
|
11
|
+
/** 文件列表变化时的回调函数 */
|
|
12
|
+
onChange?: (list: DUploadFile[], info: UploadChangeParam<DUploadFile>) => void;
|
|
13
|
+
/** 文件上传时的回调函数,支持Promise */
|
|
14
|
+
customRequest?: (file: DUploadFile, list: DUploadFile[], requestOption: any) => DUploadFile[] | Promise<DUploadFile[] | void> | void;
|
|
15
|
+
/** 点击删除按钮时的回调,支持Promise */
|
|
16
|
+
onRemove?: (file: DUploadFile, list: DUploadFile[]) => DUploadFile[] | Promise<DUploadFile[] | void> | void;
|
|
17
|
+
/** 点击下载按钮时的回调,支持Promise */
|
|
18
|
+
onDownload?: (file: DUploadFile) => DUploadFile | Blob | Promise<DUploadFile | Blob> | void;
|
|
19
|
+
/** 点击预览按钮时的回调,支持Promise */
|
|
20
|
+
onPreview?: (file: DUploadFile) => DUploadFile | Blob | Promise<DUploadFile | Blob> | void;
|
|
21
|
+
/** 上传按钮,等同于children但优先于children */
|
|
22
|
+
uploadButton?: ReactNode;
|
|
23
|
+
/** 上传文件时的缩略图选项,null表示不生成缩略图 */
|
|
24
|
+
thumbOption?: ThumbOptionProps | null;
|
|
25
|
+
/** 列表项样式类名 */
|
|
26
|
+
itemClassName?: string;
|
|
27
|
+
enablePreview?: boolean | ((file: DUploadFile) => boolean);
|
|
28
|
+
};
|
|
29
|
+
declare const DUpload: React.ForwardRefExoticComponent<Omit<UploadProps<any>, "onChange" | "fileList" | "customRequest" | "onRemove" | "onDownload" | "onPreview"> & {
|
|
30
|
+
/** 初始文件列表(相当于defaultFileList,但优先级高于defaultFileList) */
|
|
31
|
+
value?: DUploadFile | DUploadFile[] | undefined;
|
|
32
|
+
/** 文件列表(在Form组件中表现为受控列表,在一般情况下相当于初始文件列表,其优先级高于value属性) */
|
|
33
|
+
fileList?: DUploadFile | DUploadFile[] | undefined;
|
|
34
|
+
/** 文件列表变化时的回调函数 */
|
|
35
|
+
onChange?: ((list: DUploadFile[], info: UploadChangeParam<DUploadFile>) => void) | undefined;
|
|
36
|
+
/** 文件上传时的回调函数,支持Promise */
|
|
37
|
+
customRequest?: ((file: DUploadFile, list: DUploadFile[], requestOption: any) => DUploadFile[] | Promise<DUploadFile[] | void> | void) | undefined;
|
|
38
|
+
/** 点击删除按钮时的回调,支持Promise */
|
|
39
|
+
onRemove?: ((file: DUploadFile, list: DUploadFile[]) => DUploadFile[] | Promise<DUploadFile[] | void> | void) | undefined;
|
|
40
|
+
/** 点击下载按钮时的回调,支持Promise */
|
|
41
|
+
onDownload?: ((file: DUploadFile) => DUploadFile | Blob | Promise<DUploadFile | Blob> | void) | undefined;
|
|
42
|
+
/** 点击预览按钮时的回调,支持Promise */
|
|
43
|
+
onPreview?: ((file: DUploadFile) => DUploadFile | Blob | Promise<DUploadFile | Blob> | void) | undefined;
|
|
44
|
+
/** 上传按钮,等同于children但优先于children */
|
|
45
|
+
uploadButton?: ReactNode;
|
|
46
|
+
/** 上传文件时的缩略图选项,null表示不生成缩略图 */
|
|
47
|
+
thumbOption?: ThumbOptionProps | null | undefined;
|
|
48
|
+
/** 列表项样式类名 */
|
|
49
|
+
itemClassName?: string | undefined;
|
|
50
|
+
enablePreview?: boolean | ((file: DUploadFile) => boolean) | undefined;
|
|
51
|
+
} & React.RefAttributes<unknown>> & {
|
|
52
|
+
imageToBase64: typeof helper.imageToBase64;
|
|
53
|
+
};
|
|
54
|
+
export type { DUploadProps, DUploadFile };
|
|
55
|
+
export default DUpload;
|