@pisell/materials 6.0.2 → 6.0.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/build/lowcode/assets-daily.json +11 -11
- package/build/lowcode/assets-dev.json +2 -2
- package/build/lowcode/assets-prod.json +11 -11
- package/build/lowcode/meta.js +1 -1
- package/build/lowcode/render/default/view.js +2 -2
- package/build/lowcode/view.js +2 -2
- package/es/components/dataSourceComponents/fields/Upload/BaseUpload.js +129 -60
- package/es/components/dataSourceComponents/fields/Upload/utils.d.ts +1 -0
- package/es/components/dataSourceComponents/fields/Upload/utils.js +24 -0
- package/lib/components/dataSourceComponents/fields/Upload/BaseUpload.js +160 -78
- package/lib/components/dataSourceComponents/fields/Upload/utils.d.ts +1 -0
- package/lib/components/dataSourceComponents/fields/Upload/utils.js +24 -2
- package/package.json +2 -2
|
@@ -22,10 +22,10 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
|
|
|
22
22
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
23
23
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
24
24
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
25
|
-
import React, { useState, useMemo, useCallback, useEffect } from 'react';
|
|
25
|
+
import React, { useState, useMemo, useCallback, useEffect, useRef } from 'react';
|
|
26
26
|
import { PlusOutlined } from '@ant-design/icons';
|
|
27
27
|
import { Upload, Image } from 'antd';
|
|
28
|
-
import { useDebounceFn } from 'ahooks';
|
|
28
|
+
import { useDebounceFn, useMemoizedFn } from 'ahooks';
|
|
29
29
|
import { isBoolean } from '@pisell/utils';
|
|
30
30
|
import IconFont from "../../../iconfont";
|
|
31
31
|
import PisellModal from "../../../pisellModal";
|
|
@@ -34,7 +34,7 @@ import PisellUpload from "../../../pisellUpload";
|
|
|
34
34
|
import useEngineContext from "../../../../hooks/useEngineContext";
|
|
35
35
|
import { getText } from "../../../../locales";
|
|
36
36
|
import { DEFAULT_MAX_COUNT, SUPPORTED_LANGUAGES } from "./constants";
|
|
37
|
-
import { getPointSuffix, checkFileCount, getFileType, getMediaMetadata, getFileMetadataParams, getDefaultFileList, createMultilingualData, createMultilingualFileList } from "./utils";
|
|
37
|
+
import { getPointSuffix, checkFileCount, getFileType, getMediaMetadata, getFileMetadataParams, getDefaultFileList, createMultilingualData, createMultilingualFileList, isValueEqual } from "./utils";
|
|
38
38
|
import fallback from "./fallback.png";
|
|
39
39
|
import "./index.less";
|
|
40
40
|
var BaseUpload = function BaseUpload(props) {
|
|
@@ -77,6 +77,10 @@ var BaseUpload = function BaseUpload(props) {
|
|
|
77
77
|
_useState12 = _slicedToArray(_useState11, 2),
|
|
78
78
|
errorImageMap = _useState12[0],
|
|
79
79
|
setErrorImageMap = _useState12[1];
|
|
80
|
+
var fileListRef = useRef([]);
|
|
81
|
+
useEffect(function () {
|
|
82
|
+
fileListRef.current = fileList;
|
|
83
|
+
}, [fileList]);
|
|
80
84
|
var _useEngineContext = useEngineContext(),
|
|
81
85
|
appHelper = _useEngineContext.appHelper;
|
|
82
86
|
var _appHelper$constants = appHelper === null || appHelper === void 0 ? void 0 : appHelper.constants,
|
|
@@ -117,7 +121,7 @@ var BaseUpload = function BaseUpload(props) {
|
|
|
117
121
|
_context.next = 5;
|
|
118
122
|
break;
|
|
119
123
|
}
|
|
120
|
-
return _context.abrupt("return",
|
|
124
|
+
return _context.abrupt("return", '');
|
|
121
125
|
case 5:
|
|
122
126
|
_context.prev = 5;
|
|
123
127
|
_context.next = 8;
|
|
@@ -149,13 +153,36 @@ var BaseUpload = function BaseUpload(props) {
|
|
|
149
153
|
};
|
|
150
154
|
}(), [errorImageMap]);
|
|
151
155
|
useEffect(function () {
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
156
|
+
// 只在 value 变化且不是由内部 onChange 触发时才更新 fileList
|
|
157
|
+
var currentValue = getValueFromFileList(fileListRef.current);
|
|
158
|
+
if (!fileListRef.current.length || !isValueEqual(value, currentValue)) {
|
|
159
|
+
var newFileList = getDefaultFileList(value, {
|
|
160
|
+
enableMultilingual: !!enableMultilingual,
|
|
161
|
+
multiple: !!multiple
|
|
162
|
+
});
|
|
163
|
+
setFileList(newFileList);
|
|
164
|
+
setErrorImageMap({});
|
|
165
|
+
}
|
|
158
166
|
}, [value, enableMultilingual, multiple]);
|
|
167
|
+
var getValueFromFileList = function getValueFromFileList(fileList) {
|
|
168
|
+
if (!fileList.length) return multiple ? [] : '';
|
|
169
|
+
if (enableMultilingual) {
|
|
170
|
+
var multilingualValues = fileList.filter(function (file) {
|
|
171
|
+
return file.status === 'done';
|
|
172
|
+
}).map(function (file) {
|
|
173
|
+
var _file$response2, _file$response2$data;
|
|
174
|
+
return file.multilingual || createMultilingualData(((_file$response2 = file.response) === null || _file$response2 === void 0 ? void 0 : (_file$response2$data = _file$response2.data) === null || _file$response2$data === void 0 ? void 0 : _file$response2$data.url) || file.url || '');
|
|
175
|
+
});
|
|
176
|
+
return multiple ? multilingualValues : multilingualValues[0];
|
|
177
|
+
}
|
|
178
|
+
var urls = fileList.filter(function (file) {
|
|
179
|
+
return file.status === 'done';
|
|
180
|
+
}).map(function (file) {
|
|
181
|
+
var _file$response3, _file$response3$data;
|
|
182
|
+
return ((_file$response3 = file.response) === null || _file$response3 === void 0 ? void 0 : (_file$response3$data = _file$response3.data) === null || _file$response3$data === void 0 ? void 0 : _file$response3$data.url) || file.url || '';
|
|
183
|
+
});
|
|
184
|
+
return multiple ? urls : urls[0] || '';
|
|
185
|
+
};
|
|
159
186
|
var calcMaxCount = useMemo(function () {
|
|
160
187
|
return multiple ? maxCount || DEFAULT_MAX_COUNT : 1;
|
|
161
188
|
}, [maxCount, multiple]);
|
|
@@ -184,55 +211,68 @@ var BaseUpload = function BaseUpload(props) {
|
|
|
184
211
|
}, {
|
|
185
212
|
wait: 500
|
|
186
213
|
});
|
|
214
|
+
var fileDoneSetMultilingualFileList = useMemoizedFn(function () {
|
|
215
|
+
setFileList(function (prev) {
|
|
216
|
+
return prev.map(function (item) {
|
|
217
|
+
var _item$response, _item$response$data, _item$response2, _item$response2$data;
|
|
218
|
+
return _objectSpread(_objectSpread({}, item), {}, {
|
|
219
|
+
multilingualFileList: item.multilingualFileList || createMultilingualFileList(((_item$response = item.response) === null || _item$response === void 0 ? void 0 : (_item$response$data = _item$response.data) === null || _item$response$data === void 0 ? void 0 : _item$response$data.url) || item.url || ''),
|
|
220
|
+
multilingual: item.multilingual || createMultilingualData(((_item$response2 = item.response) === null || _item$response2 === void 0 ? void 0 : (_item$response2$data = _item$response2.data) === null || _item$response2$data === void 0 ? void 0 : _item$response2$data.url) || item.url || '')
|
|
221
|
+
});
|
|
222
|
+
});
|
|
223
|
+
});
|
|
224
|
+
});
|
|
187
225
|
var handleChange = useCallback(function (_ref2) {
|
|
188
|
-
var _file$
|
|
226
|
+
var _file$response4, _file$response7, _file$response8;
|
|
189
227
|
var file = _ref2.file,
|
|
190
228
|
newFileList = _ref2.fileList;
|
|
191
229
|
var updatedFileList = newFileList.map(function (item) {
|
|
192
|
-
var _item$
|
|
230
|
+
var _item$response3;
|
|
193
231
|
return _objectSpread(_objectSpread({}, item), {}, {
|
|
194
|
-
status: item.status === 'done' && item.response && !((_item$
|
|
232
|
+
status: item.status === 'done' && item.response && !((_item$response3 = item.response) !== null && _item$response3 !== void 0 && _item$response3.status) ? 'error' : item.status
|
|
195
233
|
});
|
|
196
234
|
});
|
|
197
235
|
setFileList(updatedFileList);
|
|
198
|
-
if (file.status === 'done' && (_file$
|
|
236
|
+
if (file.status === 'done' && (_file$response4 = file.response) !== null && _file$response4 !== void 0 && _file$response4.status) {
|
|
199
237
|
if (multiple) {
|
|
200
238
|
if (enableMultilingual) {
|
|
201
239
|
var multilingualUrls = updatedFileList.filter(function (item) {
|
|
202
240
|
return item.status === 'done';
|
|
203
241
|
}).map(function (item) {
|
|
204
|
-
var _item$
|
|
205
|
-
return item.multilingual || createMultilingualData(((_item$
|
|
242
|
+
var _item$response4, _item$response4$data;
|
|
243
|
+
return item.multilingual || createMultilingualData(((_item$response4 = item.response) === null || _item$response4 === void 0 ? void 0 : (_item$response4$data = _item$response4.data) === null || _item$response4$data === void 0 ? void 0 : _item$response4$data.url) || item.url || '');
|
|
206
244
|
});
|
|
245
|
+
fileDoneSetMultilingualFileList();
|
|
207
246
|
onChange === null || onChange === void 0 ? void 0 : onChange(multilingualUrls);
|
|
208
247
|
} else {
|
|
209
248
|
var urls = updatedFileList.filter(function (item) {
|
|
210
249
|
return item.status === 'done';
|
|
211
250
|
}).map(function (item) {
|
|
212
|
-
var _item$
|
|
213
|
-
return ((_item$
|
|
251
|
+
var _item$response5, _item$response5$data;
|
|
252
|
+
return ((_item$response5 = item.response) === null || _item$response5 === void 0 ? void 0 : (_item$response5$data = _item$response5.data) === null || _item$response5$data === void 0 ? void 0 : _item$response5$data.url) || item.url || '';
|
|
214
253
|
});
|
|
215
254
|
onChange === null || onChange === void 0 ? void 0 : onChange(urls);
|
|
216
255
|
}
|
|
217
256
|
} else {
|
|
218
257
|
if (enableMultilingual) {
|
|
219
|
-
var _file$
|
|
220
|
-
var multilingualData = createMultilingualData(((_file$
|
|
258
|
+
var _file$response5, _file$response5$data;
|
|
259
|
+
var multilingualData = createMultilingualData(((_file$response5 = file.response) === null || _file$response5 === void 0 ? void 0 : (_file$response5$data = _file$response5.data) === null || _file$response5$data === void 0 ? void 0 : _file$response5$data.url) || '');
|
|
260
|
+
fileDoneSetMultilingualFileList();
|
|
221
261
|
onChange === null || onChange === void 0 ? void 0 : onChange(multilingualData);
|
|
222
262
|
} else {
|
|
223
|
-
var _file$
|
|
224
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(((_file$
|
|
263
|
+
var _file$response6, _file$response6$data;
|
|
264
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(((_file$response6 = file.response) === null || _file$response6 === void 0 ? void 0 : (_file$response6$data = _file$response6.data) === null || _file$response6$data === void 0 ? void 0 : _file$response6$data.url) || '');
|
|
225
265
|
}
|
|
226
266
|
}
|
|
227
|
-
} else if (file.status === 'error' || isBoolean((_file$
|
|
267
|
+
} else if (file.status === 'error' || isBoolean((_file$response7 = file.response) === null || _file$response7 === void 0 ? void 0 : _file$response7.status) && ((_file$response8 = file.response) === null || _file$response8 === void 0 ? void 0 : _file$response8.status) === false) {
|
|
228
268
|
PisellToast({
|
|
229
269
|
content: getText('pisell-upload-error')(file.name)
|
|
230
270
|
});
|
|
231
271
|
}
|
|
232
272
|
}, [multiple, enableMultilingual, onChange]);
|
|
233
273
|
var handlePreview = useCallback(function (file) {
|
|
234
|
-
var _file$
|
|
235
|
-
setPreviewImage(file.url || ((_file$
|
|
274
|
+
var _file$response9, _file$response9$data;
|
|
275
|
+
setPreviewImage(file.url || ((_file$response9 = file.response) === null || _file$response9 === void 0 ? void 0 : (_file$response9$data = _file$response9.data) === null || _file$response9$data === void 0 ? void 0 : _file$response9$data.url) || '');
|
|
236
276
|
setPreviewOpen(true);
|
|
237
277
|
}, []);
|
|
238
278
|
var handleEditMultilingual = useCallback(function (file) {
|
|
@@ -254,8 +294,8 @@ var BaseUpload = function BaseUpload(props) {
|
|
|
254
294
|
onChange === null || onChange === void 0 ? void 0 : onChange(multilingualUrls);
|
|
255
295
|
} else {
|
|
256
296
|
var urls = val.map(function (item) {
|
|
257
|
-
var _item$
|
|
258
|
-
return ((_item$
|
|
297
|
+
var _item$response6, _item$response6$data;
|
|
298
|
+
return ((_item$response6 = item.response) === null || _item$response6 === void 0 ? void 0 : (_item$response6$data = _item$response6.data) === null || _item$response6$data === void 0 ? void 0 : _item$response6$data.url) || item.url || '';
|
|
259
299
|
});
|
|
260
300
|
onChange === null || onChange === void 0 ? void 0 : onChange(urls);
|
|
261
301
|
}
|
|
@@ -287,9 +327,9 @@ var BaseUpload = function BaseUpload(props) {
|
|
|
287
327
|
if (!prev) return null;
|
|
288
328
|
var newFile = _objectSpread({}, prev);
|
|
289
329
|
newFile.multilingualFileList[lang] = info.fileList.map(function (item) {
|
|
290
|
-
var _item$
|
|
330
|
+
var _item$response7;
|
|
291
331
|
return _objectSpread(_objectSpread({}, item), {}, {
|
|
292
|
-
status: item.status === 'done' && !((_item$
|
|
332
|
+
status: item.status === 'done' && !((_item$response7 = item.response) !== null && _item$response7 !== void 0 && _item$response7.status) ? 'error' : item.status
|
|
293
333
|
});
|
|
294
334
|
});
|
|
295
335
|
if (info.file.status === 'done') {
|
|
@@ -419,6 +459,36 @@ var BaseUpload = function BaseUpload(props) {
|
|
|
419
459
|
onClick: handleGlobeIconClick
|
|
420
460
|
}));
|
|
421
461
|
}, [restProps.disabled, handleGlobeIconClick]);
|
|
462
|
+
var itemRender = useMemoizedFn(function (originNode, file) {
|
|
463
|
+
var _useState13 = useState(''),
|
|
464
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
|
465
|
+
itemUrl = _useState14[0],
|
|
466
|
+
setItemUrl = _useState14[1];
|
|
467
|
+
useEffect(function () {
|
|
468
|
+
getItemUrl(file).then(setItemUrl);
|
|
469
|
+
}, [file]);
|
|
470
|
+
var newNode = /*#__PURE__*/React.cloneElement(originNode, {
|
|
471
|
+
children: React.Children.map(originNode.props.children, function (child) {
|
|
472
|
+
if ((child === null || child === void 0 ? void 0 : child.type) === 'a') {
|
|
473
|
+
return /*#__PURE__*/React.cloneElement(child, {
|
|
474
|
+
children: React.Children.map(child.props.children, function (grandChild) {
|
|
475
|
+
if ((grandChild === null || grandChild === void 0 ? void 0 : grandChild.type) === 'img') {
|
|
476
|
+
return /*#__PURE__*/React.cloneElement(grandChild, {
|
|
477
|
+
src: itemUrl,
|
|
478
|
+
onError: function onError() {
|
|
479
|
+
return handleImageError(file);
|
|
480
|
+
}
|
|
481
|
+
});
|
|
482
|
+
}
|
|
483
|
+
return grandChild;
|
|
484
|
+
})
|
|
485
|
+
});
|
|
486
|
+
}
|
|
487
|
+
return child;
|
|
488
|
+
})
|
|
489
|
+
});
|
|
490
|
+
return newNode;
|
|
491
|
+
});
|
|
422
492
|
var uploadProps = _objectSpread(_objectSpread({}, restProps), {}, {
|
|
423
493
|
multiple: multiple,
|
|
424
494
|
showUploadList: {
|
|
@@ -457,38 +527,37 @@ var BaseUpload = function BaseUpload(props) {
|
|
|
457
527
|
},
|
|
458
528
|
headers: getHeaders === null || getHeaders === void 0 ? void 0 : getHeaders(),
|
|
459
529
|
beforeUpload: beforeUpload,
|
|
460
|
-
className: 'pisell-data-source-upload'
|
|
461
|
-
itemRender:
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
return newNode;
|
|
490
|
-
}
|
|
530
|
+
className: 'pisell-data-source-upload'
|
|
531
|
+
// itemRender: (originNode: React.ReactElement, file: UploadFile) => {
|
|
532
|
+
// const [itemUrl, setItemUrl] = useState<string>('');
|
|
533
|
+
|
|
534
|
+
// useEffect(() => {
|
|
535
|
+
// getItemUrl(file).then(setItemUrl);
|
|
536
|
+
// }, [file]);
|
|
537
|
+
|
|
538
|
+
// const newNode = React.cloneElement(originNode, {
|
|
539
|
+
// children: React.Children.map(originNode.props.children, child => {
|
|
540
|
+
// if (child?.type === 'a') {
|
|
541
|
+
// return React.cloneElement(child, {
|
|
542
|
+
// children: React.Children.map(child.props.children, grandChild => {
|
|
543
|
+
// if (grandChild?.type === 'img') {
|
|
544
|
+
// return React.cloneElement(grandChild, {
|
|
545
|
+
// src: itemUrl,
|
|
546
|
+
// onError: () => handleImageError(file)
|
|
547
|
+
// });
|
|
548
|
+
// }
|
|
549
|
+
// return grandChild;
|
|
550
|
+
// })
|
|
551
|
+
// });
|
|
552
|
+
// }
|
|
553
|
+
// return child;
|
|
554
|
+
// })
|
|
555
|
+
// });
|
|
556
|
+
|
|
557
|
+
// return newNode;
|
|
558
|
+
// }
|
|
491
559
|
});
|
|
560
|
+
|
|
492
561
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PisellUpload, _extends({}, uploadProps, {
|
|
493
562
|
fileList: fileList
|
|
494
563
|
}), fileList.length >= calcMaxCount ? null : renderUploadButton(!!enableMultilingual)), /*#__PURE__*/React.createElement(PisellModal, {
|
|
@@ -14,3 +14,4 @@ export declare const getDefaultFileList: (value: UploadValue | undefined, option
|
|
|
14
14
|
export declare const getFileMetadataParams: (file: RcFile & {
|
|
15
15
|
metadata?: MediaMetadata;
|
|
16
16
|
}) => Record<string, any>;
|
|
17
|
+
export declare const isValueEqual: (value: any, fileListValue: any) => boolean;
|
|
@@ -259,4 +259,28 @@ export var getFileMetadataParams = function getFileMetadataParams(file) {
|
|
|
259
259
|
}
|
|
260
260
|
});
|
|
261
261
|
return metadataParams;
|
|
262
|
+
};
|
|
263
|
+
export var isValueEqual = function isValueEqual(value, fileListValue) {
|
|
264
|
+
// 处理空值情况
|
|
265
|
+
if (!value && !fileListValue) return true;
|
|
266
|
+
if (!value || !fileListValue) return false;
|
|
267
|
+
|
|
268
|
+
// 数组情况
|
|
269
|
+
if (Array.isArray(value) && Array.isArray(fileListValue)) {
|
|
270
|
+
if (value.length !== fileListValue.length) return false;
|
|
271
|
+
return value.every(function (v, i) {
|
|
272
|
+
if (_typeof(v) === 'object') {
|
|
273
|
+
return JSON.stringify(v) === JSON.stringify(fileListValue[i]);
|
|
274
|
+
}
|
|
275
|
+
return v === fileListValue[i];
|
|
276
|
+
});
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
// 对象情况(多语言单文件)
|
|
280
|
+
if (_typeof(value) === 'object' && _typeof(fileListValue) === 'object') {
|
|
281
|
+
return JSON.stringify(value) === JSON.stringify(fileListValue);
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
// 字符串情况(单文件)
|
|
285
|
+
return value === fileListValue;
|
|
262
286
|
};
|
|
@@ -70,7 +70,13 @@ var BaseUpload = (props) => {
|
|
|
70
70
|
const [previewOpen, setPreviewOpen] = (0, import_react.useState)(false);
|
|
71
71
|
const [open, setOpen] = (0, import_react.useState)(false);
|
|
72
72
|
const [editMultilingualFile, setEditMultilingualFile] = (0, import_react.useState)(null);
|
|
73
|
-
const [errorImageMap, setErrorImageMap] = (0, import_react.useState)(
|
|
73
|
+
const [errorImageMap, setErrorImageMap] = (0, import_react.useState)(
|
|
74
|
+
{}
|
|
75
|
+
);
|
|
76
|
+
const fileListRef = (0, import_react.useRef)([]);
|
|
77
|
+
(0, import_react.useEffect)(() => {
|
|
78
|
+
fileListRef.current = fileList;
|
|
79
|
+
}, [fileList]);
|
|
74
80
|
const { appHelper } = (0, import_useEngineContext.default)();
|
|
75
81
|
const { mediaUploadUrl, getHeaders } = appHelper == null ? void 0 : appHelper.constants;
|
|
76
82
|
const handleImageError = (0, import_react.useCallback)((file) => {
|
|
@@ -87,36 +93,60 @@ var BaseUpload = (props) => {
|
|
|
87
93
|
img.src = url;
|
|
88
94
|
});
|
|
89
95
|
}, []);
|
|
90
|
-
const getItemUrl = (0, import_react.useCallback)(
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
}
|
|
95
|
-
const url = file.url || ((_b = (_a = file.response) == null ? void 0 : _a.data) == null ? void 0 : _b.url) || "";
|
|
96
|
-
if (!url)
|
|
97
|
-
return "";
|
|
98
|
-
try {
|
|
99
|
-
const isValid = await checkImageUrl(url);
|
|
100
|
-
if (!isValid) {
|
|
101
|
-
setErrorImageMap((prev) => ({
|
|
102
|
-
...prev,
|
|
103
|
-
[file.uid]: true
|
|
104
|
-
}));
|
|
96
|
+
const getItemUrl = (0, import_react.useCallback)(
|
|
97
|
+
async (file) => {
|
|
98
|
+
var _a, _b;
|
|
99
|
+
if (errorImageMap[file.uid]) {
|
|
105
100
|
return import_fallback.default;
|
|
106
101
|
}
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
102
|
+
const url = file.url || ((_b = (_a = file.response) == null ? void 0 : _a.data) == null ? void 0 : _b.url) || "";
|
|
103
|
+
if (!url)
|
|
104
|
+
return "";
|
|
105
|
+
try {
|
|
106
|
+
const isValid = await checkImageUrl(url);
|
|
107
|
+
if (!isValid) {
|
|
108
|
+
setErrorImageMap((prev) => ({
|
|
109
|
+
...prev,
|
|
110
|
+
[file.uid]: true
|
|
111
|
+
}));
|
|
112
|
+
return import_fallback.default;
|
|
113
|
+
}
|
|
114
|
+
return url;
|
|
115
|
+
} catch (error) {
|
|
116
|
+
return import_fallback.default;
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
[errorImageMap]
|
|
120
|
+
);
|
|
112
121
|
(0, import_react.useEffect)(() => {
|
|
113
|
-
const
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
122
|
+
const currentValue = getValueFromFileList(fileListRef.current);
|
|
123
|
+
if (!fileListRef.current.length || !(0, import_utils2.isValueEqual)(value, currentValue)) {
|
|
124
|
+
const newFileList = (0, import_utils2.getDefaultFileList)(value, {
|
|
125
|
+
enableMultilingual: !!enableMultilingual,
|
|
126
|
+
multiple: !!multiple
|
|
127
|
+
});
|
|
128
|
+
setFileList(newFileList);
|
|
129
|
+
setErrorImageMap({});
|
|
130
|
+
}
|
|
119
131
|
}, [value, enableMultilingual, multiple]);
|
|
132
|
+
const getValueFromFileList = (fileList2) => {
|
|
133
|
+
if (!fileList2.length)
|
|
134
|
+
return multiple ? [] : "";
|
|
135
|
+
if (enableMultilingual) {
|
|
136
|
+
const multilingualValues = fileList2.filter((file) => file.status === "done").map(
|
|
137
|
+
(file) => {
|
|
138
|
+
var _a, _b;
|
|
139
|
+
return file.multilingual || (0, import_utils2.createMultilingualData)(((_b = (_a = file.response) == null ? void 0 : _a.data) == null ? void 0 : _b.url) || file.url || "");
|
|
140
|
+
}
|
|
141
|
+
);
|
|
142
|
+
return multiple ? multilingualValues : multilingualValues[0];
|
|
143
|
+
}
|
|
144
|
+
const urls = fileList2.filter((file) => file.status === "done").map((file) => {
|
|
145
|
+
var _a, _b;
|
|
146
|
+
return ((_b = (_a = file.response) == null ? void 0 : _a.data) == null ? void 0 : _b.url) || file.url || "";
|
|
147
|
+
});
|
|
148
|
+
return multiple ? urls : urls[0] || "";
|
|
149
|
+
};
|
|
120
150
|
const calcMaxCount = (0, import_react.useMemo)(
|
|
121
151
|
() => multiple ? maxCount || import_constants.DEFAULT_MAX_COUNT : 1,
|
|
122
152
|
[maxCount, multiple]
|
|
@@ -140,6 +170,22 @@ var BaseUpload = (props) => {
|
|
|
140
170
|
(msg) => (0, import_pisellToast.default)({ content: msg }),
|
|
141
171
|
{ wait: 500 }
|
|
142
172
|
);
|
|
173
|
+
const fileDoneSetMultilingualFileList = (0, import_ahooks.useMemoizedFn)(() => {
|
|
174
|
+
setFileList((prev) => {
|
|
175
|
+
return prev.map((item) => {
|
|
176
|
+
var _a, _b, _c, _d;
|
|
177
|
+
return {
|
|
178
|
+
...item,
|
|
179
|
+
multilingualFileList: item.multilingualFileList || (0, import_utils2.createMultilingualFileList)(
|
|
180
|
+
((_b = (_a = item.response) == null ? void 0 : _a.data) == null ? void 0 : _b.url) || item.url || ""
|
|
181
|
+
),
|
|
182
|
+
multilingual: item.multilingual || (0, import_utils2.createMultilingualData)(
|
|
183
|
+
((_d = (_c = item.response) == null ? void 0 : _c.data) == null ? void 0 : _d.url) || item.url || ""
|
|
184
|
+
)
|
|
185
|
+
};
|
|
186
|
+
});
|
|
187
|
+
});
|
|
188
|
+
});
|
|
143
189
|
const handleChange = (0, import_react.useCallback)(
|
|
144
190
|
({ file, fileList: newFileList }) => {
|
|
145
191
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
@@ -156,10 +202,15 @@ var BaseUpload = (props) => {
|
|
|
156
202
|
if (enableMultilingual) {
|
|
157
203
|
const multilingualUrls = updatedFileList.filter(
|
|
158
204
|
(item) => item.status === "done"
|
|
159
|
-
).map(
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
205
|
+
).map(
|
|
206
|
+
(item) => {
|
|
207
|
+
var _a2, _b2;
|
|
208
|
+
return item.multilingual || (0, import_utils2.createMultilingualData)(
|
|
209
|
+
((_b2 = (_a2 = item.response) == null ? void 0 : _a2.data) == null ? void 0 : _b2.url) || item.url || ""
|
|
210
|
+
);
|
|
211
|
+
}
|
|
212
|
+
);
|
|
213
|
+
fileDoneSetMultilingualFileList();
|
|
163
214
|
onChange == null ? void 0 : onChange(multilingualUrls);
|
|
164
215
|
} else {
|
|
165
216
|
const urls = updatedFileList.filter((item) => item.status === "done").map((item) => {
|
|
@@ -170,7 +221,10 @@ var BaseUpload = (props) => {
|
|
|
170
221
|
}
|
|
171
222
|
} else {
|
|
172
223
|
if (enableMultilingual) {
|
|
173
|
-
const multilingualData = (0, import_utils2.createMultilingualData)(
|
|
224
|
+
const multilingualData = (0, import_utils2.createMultilingualData)(
|
|
225
|
+
((_c = (_b = file.response) == null ? void 0 : _b.data) == null ? void 0 : _c.url) || ""
|
|
226
|
+
);
|
|
227
|
+
fileDoneSetMultilingualFileList();
|
|
174
228
|
onChange == null ? void 0 : onChange(multilingualData);
|
|
175
229
|
} else {
|
|
176
230
|
onChange == null ? void 0 : onChange(((_e = (_d = file.response) == null ? void 0 : _d.data) == null ? void 0 : _e.url) || "");
|
|
@@ -378,6 +432,36 @@ var BaseUpload = (props) => {
|
|
|
378
432
|
),
|
|
379
433
|
[restProps.disabled, handleGlobeIconClick]
|
|
380
434
|
);
|
|
435
|
+
const itemRender = (0, import_ahooks.useMemoizedFn)(
|
|
436
|
+
(originNode, file) => {
|
|
437
|
+
const [itemUrl, setItemUrl] = (0, import_react.useState)("");
|
|
438
|
+
(0, import_react.useEffect)(() => {
|
|
439
|
+
getItemUrl(file).then(setItemUrl);
|
|
440
|
+
}, [file]);
|
|
441
|
+
const newNode = import_react.default.cloneElement(originNode, {
|
|
442
|
+
children: import_react.default.Children.map(originNode.props.children, (child) => {
|
|
443
|
+
if ((child == null ? void 0 : child.type) === "a") {
|
|
444
|
+
return import_react.default.cloneElement(child, {
|
|
445
|
+
children: import_react.default.Children.map(
|
|
446
|
+
child.props.children,
|
|
447
|
+
(grandChild) => {
|
|
448
|
+
if ((grandChild == null ? void 0 : grandChild.type) === "img") {
|
|
449
|
+
return import_react.default.cloneElement(grandChild, {
|
|
450
|
+
src: itemUrl,
|
|
451
|
+
onError: () => handleImageError(file)
|
|
452
|
+
});
|
|
453
|
+
}
|
|
454
|
+
return grandChild;
|
|
455
|
+
}
|
|
456
|
+
)
|
|
457
|
+
});
|
|
458
|
+
}
|
|
459
|
+
return child;
|
|
460
|
+
})
|
|
461
|
+
});
|
|
462
|
+
return newNode;
|
|
463
|
+
}
|
|
464
|
+
);
|
|
381
465
|
const uploadProps = {
|
|
382
466
|
...restProps,
|
|
383
467
|
multiple,
|
|
@@ -412,32 +496,32 @@ var BaseUpload = (props) => {
|
|
|
412
496
|
}),
|
|
413
497
|
headers: getHeaders == null ? void 0 : getHeaders(),
|
|
414
498
|
beforeUpload,
|
|
415
|
-
className: "pisell-data-source-upload"
|
|
416
|
-
itemRender: (originNode, file) => {
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
}
|
|
499
|
+
className: "pisell-data-source-upload"
|
|
500
|
+
// itemRender: (originNode: React.ReactElement, file: UploadFile) => {
|
|
501
|
+
// const [itemUrl, setItemUrl] = useState<string>('');
|
|
502
|
+
// useEffect(() => {
|
|
503
|
+
// getItemUrl(file).then(setItemUrl);
|
|
504
|
+
// }, [file]);
|
|
505
|
+
// const newNode = React.cloneElement(originNode, {
|
|
506
|
+
// children: React.Children.map(originNode.props.children, child => {
|
|
507
|
+
// if (child?.type === 'a') {
|
|
508
|
+
// return React.cloneElement(child, {
|
|
509
|
+
// children: React.Children.map(child.props.children, grandChild => {
|
|
510
|
+
// if (grandChild?.type === 'img') {
|
|
511
|
+
// return React.cloneElement(grandChild, {
|
|
512
|
+
// src: itemUrl,
|
|
513
|
+
// onError: () => handleImageError(file)
|
|
514
|
+
// });
|
|
515
|
+
// }
|
|
516
|
+
// return grandChild;
|
|
517
|
+
// })
|
|
518
|
+
// });
|
|
519
|
+
// }
|
|
520
|
+
// return child;
|
|
521
|
+
// })
|
|
522
|
+
// });
|
|
523
|
+
// return newNode;
|
|
524
|
+
// }
|
|
441
525
|
};
|
|
442
526
|
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_pisellUpload.default, { ...uploadProps, fileList }, fileList.length >= calcMaxCount ? null : renderUploadButton(!!enableMultilingual)), /* @__PURE__ */ import_react.default.createElement(
|
|
443
527
|
import_pisellModal.default,
|
|
@@ -447,27 +531,25 @@ var BaseUpload = (props) => {
|
|
|
447
531
|
onCancel: handleEditMultilingualCancel,
|
|
448
532
|
onOk: handleEditMultilingualOk
|
|
449
533
|
},
|
|
450
|
-
/* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-upload-multilingual-container" }, import_constants.SUPPORTED_LANGUAGES.map(
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
showDownloadIcon: false
|
|
461
|
-
},
|
|
462
|
-
fileList: ((_a = editMultilingualFile == null ? void 0 : editMultilingualFile.multilingualFileList) == null ? void 0 : _a[lang]) || [],
|
|
463
|
-
onRemove: (file) => handleEditMultilingualRemove(file, lang),
|
|
464
|
-
onChange: (info) => handleEditMultilingualChange(info, lang),
|
|
465
|
-
multiple: false
|
|
534
|
+
/* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-upload-multilingual-container" }, import_constants.SUPPORTED_LANGUAGES.map((lang) => {
|
|
535
|
+
var _a, _b, _c;
|
|
536
|
+
return /* @__PURE__ */ import_react.default.createElement("div", { key: lang, className: "pisell-upload-multilingual-item" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-upload-multilingual-item-title" }, (0, import_locales.getText)(`pisell-upload-multilingual-item-title-${lang}`)), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-upload-multilingual-item-content" }, /* @__PURE__ */ import_react.default.createElement(
|
|
537
|
+
import_pisellUpload.default,
|
|
538
|
+
{
|
|
539
|
+
...uploadProps,
|
|
540
|
+
showUploadList: {
|
|
541
|
+
showRemoveIcon: true,
|
|
542
|
+
showPreviewIcon: true,
|
|
543
|
+
showDownloadIcon: false
|
|
466
544
|
},
|
|
467
|
-
((
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
545
|
+
fileList: ((_a = editMultilingualFile == null ? void 0 : editMultilingualFile.multilingualFileList) == null ? void 0 : _a[lang]) || [],
|
|
546
|
+
onRemove: (file) => handleEditMultilingualRemove(file, lang),
|
|
547
|
+
onChange: (info) => handleEditMultilingualChange(info, lang),
|
|
548
|
+
multiple: false
|
|
549
|
+
},
|
|
550
|
+
((_c = (_b = editMultilingualFile == null ? void 0 : editMultilingualFile.multilingualFileList) == null ? void 0 : _b[lang]) == null ? void 0 : _c.length) ? null : renderUploadButton(false)
|
|
551
|
+
)));
|
|
552
|
+
}))
|
|
471
553
|
), previewImage && /* @__PURE__ */ import_react.default.createElement(
|
|
472
554
|
import_antd.Image,
|
|
473
555
|
{
|
|
@@ -14,3 +14,4 @@ export declare const getDefaultFileList: (value: UploadValue | undefined, option
|
|
|
14
14
|
export declare const getFileMetadataParams: (file: RcFile & {
|
|
15
15
|
metadata?: MediaMetadata;
|
|
16
16
|
}) => Record<string, any>;
|
|
17
|
+
export declare const isValueEqual: (value: any, fileListValue: any) => boolean;
|