@cqsjjb/jjb-react-admin-component 3.1.4 → 3.2.0-beta.1
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/BMap/index.d.ts +40 -0
- package/BMap/index.js +185 -0
- package/BMap/index.less +36 -0
- package/ControlWrapper/index.d.ts +45 -59
- package/ControlWrapper/index.js +70 -245
- package/Editor/index.js +330 -0
- package/Editor/index.ts +59 -0
- package/ErrorBoundary/index.d.ts +3 -6
- package/ErrorBoundary/index.js +3 -9
- package/FileUploader/index.d.ts +56 -0
- package/FileUploader/index.js +385 -0
- package/FileUploader/index.less +198 -0
- package/FormilyDescriptions/index.d.ts +116 -59
- package/FormilyDescriptions/index.js +202 -215
- package/FormilyRenderer/index.d.ts +15 -32
- package/FormilyRenderer/index.js +45 -25
- package/ImageCropper/index.d.ts +55 -0
- package/ImageCropper/index.js +131 -0
- package/ImageUploader/index.d.ts +79 -0
- package/ImageUploader/index.js +362 -0
- package/ImageUploader/index.less +100 -0
- package/MediaQuery/index.d.ts +9 -6
- package/MediaQuery/index.js +32 -81
- package/PageLayout/index.d.ts +44 -0
- package/PageLayout/index.js +85 -0
- package/PageLayout/index.less +47 -0
- package/SearchForm/index.d.ts +26 -49
- package/SearchForm/index.js +93 -108
- package/Table/index.d.ts +2 -6
- package/Table/index.js +1 -1
- package/TableAction/index.d.ts +15 -10
- package/TableAction/index.js +23 -15
- package/package.json +3 -3
- package/tools/index.d.ts +10 -0
- package/tools/index.js +87 -0
- package/SearchForm/index.less +0 -0
- package/Upload/index.d.ts +0 -76
- package/Upload/index.js +0 -334
- package/types/index.ts +0 -7
package/Upload/index.js
DELETED
|
@@ -1,334 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import MD5 from 'spark-md5';
|
|
3
|
-
import axios from 'axios';
|
|
4
|
-
import ImgCrop from 'antd-img-crop';
|
|
5
|
-
import PropTypes from 'prop-types';
|
|
6
|
-
import { Upload, message, Image as ImageComponent } from 'antd';
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* @this UploadComponent
|
|
10
|
-
* @param fileList {{ url: string, status: string }[]}
|
|
11
|
-
*/
|
|
12
|
-
function setFileList(fileList) {
|
|
13
|
-
if (Array.isArray(fileList) && fileList.length) {
|
|
14
|
-
this.setState({
|
|
15
|
-
fileList
|
|
16
|
-
});
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* @description 图片文件
|
|
22
|
-
* @param url {string}
|
|
23
|
-
*/
|
|
24
|
-
function isImageType(url) {
|
|
25
|
-
return /\.(png|jpg|jpeg|svg)$/.test(url);
|
|
26
|
-
}
|
|
27
|
-
export default class UploadComponent extends React.Component {
|
|
28
|
-
state = {
|
|
29
|
-
preview: false,
|
|
30
|
-
fileList: [],
|
|
31
|
-
previewUrl: undefined
|
|
32
|
-
};
|
|
33
|
-
componentDidMount() {
|
|
34
|
-
const {
|
|
35
|
-
value: fileList
|
|
36
|
-
} = this.props;
|
|
37
|
-
setFileList.call(this, fileList);
|
|
38
|
-
}
|
|
39
|
-
componentDidUpdate(prevProps, prevState, snapshot) {
|
|
40
|
-
const {
|
|
41
|
-
value: prevFileList
|
|
42
|
-
} = prevProps;
|
|
43
|
-
const {
|
|
44
|
-
value: nextFileList
|
|
45
|
-
} = this.props;
|
|
46
|
-
try {
|
|
47
|
-
if (JSON.stringify(prevFileList) !== JSON.stringify(nextFileList)) {
|
|
48
|
-
setFileList.call(this, nextFileList);
|
|
49
|
-
}
|
|
50
|
-
} catch (e) {
|
|
51
|
-
console.log(e.message);
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
onChange({
|
|
55
|
-
fileList
|
|
56
|
-
}) {
|
|
57
|
-
this.setState({
|
|
58
|
-
fileList
|
|
59
|
-
}, () => {
|
|
60
|
-
const {
|
|
61
|
-
onChange
|
|
62
|
-
} = this.props;
|
|
63
|
-
onChange && onChange(fileList);
|
|
64
|
-
});
|
|
65
|
-
}
|
|
66
|
-
/**
|
|
67
|
-
* @description 预览
|
|
68
|
-
* @param file {{ url?: string, response?: { url?: string } }}
|
|
69
|
-
* @return {Promise<void>}
|
|
70
|
-
*/
|
|
71
|
-
async onPreview(file) {
|
|
72
|
-
let url;
|
|
73
|
-
if ('url' in file) {
|
|
74
|
-
url = file.url;
|
|
75
|
-
} else if ('response' in file) {
|
|
76
|
-
url = file.response.url;
|
|
77
|
-
}
|
|
78
|
-
if (url) {
|
|
79
|
-
if (isImageType(url)) {
|
|
80
|
-
this.setState({
|
|
81
|
-
preview: true,
|
|
82
|
-
previewUrl: url
|
|
83
|
-
});
|
|
84
|
-
} else {
|
|
85
|
-
window.open(url);
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
render() {
|
|
90
|
-
const {
|
|
91
|
-
preview,
|
|
92
|
-
fileList,
|
|
93
|
-
previewUrl
|
|
94
|
-
} = this.state;
|
|
95
|
-
const {
|
|
96
|
-
name,
|
|
97
|
-
crop,
|
|
98
|
-
method,
|
|
99
|
-
action,
|
|
100
|
-
maxCount,
|
|
101
|
-
listType,
|
|
102
|
-
multiple,
|
|
103
|
-
data,
|
|
104
|
-
size,
|
|
105
|
-
accept,
|
|
106
|
-
headers,
|
|
107
|
-
signature,
|
|
108
|
-
forceAccept,
|
|
109
|
-
withCredentials,
|
|
110
|
-
drag,
|
|
111
|
-
appKey,
|
|
112
|
-
children
|
|
113
|
-
} = this.props;
|
|
114
|
-
const props = {
|
|
115
|
-
data,
|
|
116
|
-
name,
|
|
117
|
-
method,
|
|
118
|
-
action,
|
|
119
|
-
multiple: maxCount === 1 || crop ? false : multiple,
|
|
120
|
-
listType,
|
|
121
|
-
maxCount,
|
|
122
|
-
fileList,
|
|
123
|
-
withCredentials,
|
|
124
|
-
headers: {
|
|
125
|
-
...headers,
|
|
126
|
-
appKey,
|
|
127
|
-
token: window.sessionStorage.getItem('token')
|
|
128
|
-
},
|
|
129
|
-
accept,
|
|
130
|
-
onChange: this.onChange.bind(this),
|
|
131
|
-
onPreview: this.onPreview.bind(this),
|
|
132
|
-
customRequest,
|
|
133
|
-
beforeUpload: file => {
|
|
134
|
-
if (accept !== '*' && forceAccept && !acceptInclude(accept, file.type)) {
|
|
135
|
-
message.error(`上传的文件类型不正确,仅支持上传${getAcceptDescription(accept)}`).then(() => null);
|
|
136
|
-
return Upload.LIST_IGNORE;
|
|
137
|
-
}
|
|
138
|
-
if (isFinite(size) && file.size > size) {
|
|
139
|
-
message.error(`上传的文件体积过大,仅支持上传${size}字节`).then(() => null);
|
|
140
|
-
return Upload.LIST_IGNORE;
|
|
141
|
-
}
|
|
142
|
-
if (signature) {
|
|
143
|
-
return new Promise(resolve => {
|
|
144
|
-
const md5 = new MD5();
|
|
145
|
-
const fileReader = new FileReader();
|
|
146
|
-
fileReader.onload = e => {
|
|
147
|
-
md5.appendBinary(e.target.result);
|
|
148
|
-
file.signature = md5.end();
|
|
149
|
-
resolve(file);
|
|
150
|
-
};
|
|
151
|
-
fileReader.readAsDataURL(file);
|
|
152
|
-
});
|
|
153
|
-
}
|
|
154
|
-
return true;
|
|
155
|
-
}
|
|
156
|
-
};
|
|
157
|
-
const UploadInside = /*#__PURE__*/React.createElement(drag ? Upload.Dragger : Upload, props, children);
|
|
158
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, listType === 'text' ? UploadInside : crop ? /*#__PURE__*/React.createElement(ImgCrop, {
|
|
159
|
-
rotationSlider: true,
|
|
160
|
-
modalTitle: "\u56FE\u7247\u88C1\u526A"
|
|
161
|
-
}, UploadInside) : UploadInside, preview && /*#__PURE__*/React.createElement(ImageComponent, {
|
|
162
|
-
width: 200,
|
|
163
|
-
style: {
|
|
164
|
-
display: 'none'
|
|
165
|
-
},
|
|
166
|
-
preview: {
|
|
167
|
-
src: previewUrl,
|
|
168
|
-
visible: preview,
|
|
169
|
-
onVisibleChange: value => this.setState({
|
|
170
|
-
preview: value
|
|
171
|
-
})
|
|
172
|
-
}
|
|
173
|
-
}));
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
;
|
|
177
|
-
|
|
178
|
-
/**
|
|
179
|
-
* @param types {string}
|
|
180
|
-
* @return {string}
|
|
181
|
-
*/
|
|
182
|
-
function getAcceptDescription(types) {
|
|
183
|
-
try {
|
|
184
|
-
return types.split(',').filter(i => i).join('、');
|
|
185
|
-
} catch (e) {
|
|
186
|
-
return '';
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
/**
|
|
191
|
-
* @param types {string}
|
|
192
|
-
* @param accept {string}
|
|
193
|
-
* @return {boolean}
|
|
194
|
-
*/
|
|
195
|
-
function acceptInclude(types, accept) {
|
|
196
|
-
try {
|
|
197
|
-
const acceptList = types.split(',').filter(i => i);
|
|
198
|
-
return acceptList.includes(accept);
|
|
199
|
-
} catch (e) {
|
|
200
|
-
return false;
|
|
201
|
-
}
|
|
202
|
-
}
|
|
203
|
-
UploadComponent.defaultProps = {
|
|
204
|
-
name: 'file',
|
|
205
|
-
drag: false,
|
|
206
|
-
data: {},
|
|
207
|
-
crop: false,
|
|
208
|
-
size: Infinity,
|
|
209
|
-
accept: '*',
|
|
210
|
-
headers: {},
|
|
211
|
-
action: `${process.env.app.API_HOST}/attachment/files/upload-speed-simple`,
|
|
212
|
-
method: 'post',
|
|
213
|
-
maxCount: 1,
|
|
214
|
-
listType: 'text',
|
|
215
|
-
multiple: false,
|
|
216
|
-
signature: false,
|
|
217
|
-
forceAccept: false,
|
|
218
|
-
withCredentials: false
|
|
219
|
-
};
|
|
220
|
-
UploadComponent.propTypes = {
|
|
221
|
-
/**
|
|
222
|
-
* @description 上传提交字段名,默认file
|
|
223
|
-
*/
|
|
224
|
-
name: PropTypes.string,
|
|
225
|
-
/**
|
|
226
|
-
* @description 上传文件大小限制,默认Infinity
|
|
227
|
-
*/
|
|
228
|
-
size: PropTypes.number,
|
|
229
|
-
/**
|
|
230
|
-
* @description 是否开启图片裁剪,需和listType配合使用,text模式下无效
|
|
231
|
-
*/
|
|
232
|
-
crop: PropTypes.bool,
|
|
233
|
-
/**
|
|
234
|
-
* @description 上传接口地址
|
|
235
|
-
*/
|
|
236
|
-
action: PropTypes.string,
|
|
237
|
-
/**
|
|
238
|
-
* @description 上传资源类型,参考HTML.Input,默认*
|
|
239
|
-
*/
|
|
240
|
-
accept: PropTypes.string,
|
|
241
|
-
/**
|
|
242
|
-
* @description 最大上传数,参考antd官方文档,默认1
|
|
243
|
-
*/
|
|
244
|
-
maxCount: PropTypes.number,
|
|
245
|
-
/**
|
|
246
|
-
* @description 展示效果,参考antd官方文档,默认text
|
|
247
|
-
*/
|
|
248
|
-
listType: PropTypes.string,
|
|
249
|
-
/**
|
|
250
|
-
* @description 开启后支持多选文件,默认false,注意:当maxCount为1时或开启crop时无效
|
|
251
|
-
*/
|
|
252
|
-
multiple: PropTypes.bool,
|
|
253
|
-
/**
|
|
254
|
-
* @description 上传类型,默认Post
|
|
255
|
-
*/
|
|
256
|
-
method: PropTypes.string,
|
|
257
|
-
/**
|
|
258
|
-
* @description 开启后将计算文件签名,默认false,注意:开启了多图上传时建议不开启,可能会导致内存占用过大
|
|
259
|
-
*/
|
|
260
|
-
signature: PropTypes.bool,
|
|
261
|
-
/**
|
|
262
|
-
* @description 开启后将强制类型验证,默认false
|
|
263
|
-
*/
|
|
264
|
-
forceAccept: PropTypes.bool,
|
|
265
|
-
/**
|
|
266
|
-
* @description 上传是否携带浏览器cookie,默认false
|
|
267
|
-
*/
|
|
268
|
-
withCredentials: PropTypes.bool,
|
|
269
|
-
/**
|
|
270
|
-
* @description 上传携带的其他字段属性,默认{}
|
|
271
|
-
*/
|
|
272
|
-
data: PropTypes.object,
|
|
273
|
-
/**
|
|
274
|
-
* @description 上传携带的请求头字段属性,默认{}
|
|
275
|
-
*/
|
|
276
|
-
headers: PropTypes.object,
|
|
277
|
-
/**
|
|
278
|
-
* @description 是否开启拖拽上传,默认false
|
|
279
|
-
*/
|
|
280
|
-
drag: PropTypes.bool,
|
|
281
|
-
/**
|
|
282
|
-
* @description 应用appKey
|
|
283
|
-
*/
|
|
284
|
-
appKey: PropTypes.string
|
|
285
|
-
};
|
|
286
|
-
function customRequest({
|
|
287
|
-
action,
|
|
288
|
-
data,
|
|
289
|
-
file,
|
|
290
|
-
filename,
|
|
291
|
-
headers,
|
|
292
|
-
onError,
|
|
293
|
-
onProgress,
|
|
294
|
-
onSuccess,
|
|
295
|
-
withCredentials
|
|
296
|
-
}) {
|
|
297
|
-
const formData = new FormData();
|
|
298
|
-
if (data) {
|
|
299
|
-
Object.keys(data).forEach(key => {
|
|
300
|
-
formData.append(key, data[key]);
|
|
301
|
-
});
|
|
302
|
-
}
|
|
303
|
-
formData.append(filename, file);
|
|
304
|
-
if ('signature' in file) {
|
|
305
|
-
formData.append('md5', file.signature);
|
|
306
|
-
}
|
|
307
|
-
axios.post(action, formData, {
|
|
308
|
-
withCredentials,
|
|
309
|
-
headers,
|
|
310
|
-
onUploadProgress: ({
|
|
311
|
-
total,
|
|
312
|
-
loaded
|
|
313
|
-
}) => {
|
|
314
|
-
onProgress({
|
|
315
|
-
percent: Math.round(loaded / total * 100).toFixed(2)
|
|
316
|
-
}, file);
|
|
317
|
-
}
|
|
318
|
-
}).then(({
|
|
319
|
-
data: response
|
|
320
|
-
}) => {
|
|
321
|
-
if (response.success) {
|
|
322
|
-
onSuccess({
|
|
323
|
-
url: response?.data?.downloadUrl
|
|
324
|
-
});
|
|
325
|
-
} else {
|
|
326
|
-
onError(new Error(response?.errMessage));
|
|
327
|
-
}
|
|
328
|
-
}).catch(onError);
|
|
329
|
-
return {
|
|
330
|
-
abort() {
|
|
331
|
-
console.log('upload progress is aborted.');
|
|
332
|
-
}
|
|
333
|
-
};
|
|
334
|
-
}
|