@para-ui/core 4.0.0-rc.4 → 4.0.0-rc.5
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/AutoBox/index.js +72 -85
- package/AutoTips/index.js +72 -95
- package/Badge/index.js +17 -16
- package/Breadcrumbs/index.js +57 -73
- package/Button/index.js +89 -117
- package/ButtonGroup/index.js +30 -33
- package/Carousel/index.js +29 -33
- package/Cascader/index.js +7 -9
- package/Checkbox/index.js +28 -35
- package/CheckboxGroup/index.js +43 -58
- package/Collapse/index.js +52 -49
- package/CollapseBox/index.js +65 -70
- package/CollapseLayout/index.js +106 -101
- package/ColorPicker/index.js +3 -3
- package/ComboSelect/index.js +242 -330
- package/Container/index.js +17 -21
- package/CopyText/index.js +50 -83
- package/DatePicker/index.js +22 -27
- package/Descriptions/index.js +50 -59
- package/Desktop/index.js +161 -180
- package/DragVerify/index.js +77 -113
- package/Drawer/index.js +80 -95
- package/Dropdown/index.js +3 -3
- package/DynamicMultiBox/index.js +219 -224
- package/DynamicMultiBox/interface.d.ts +7 -0
- package/Empty/index.js +26 -28
- package/Form/index.js +66 -74
- package/FormItem/index.js +14 -15
- package/FunctionModal/index.js +7 -14
- package/GlobalContext/index.js +17 -20
- package/Help/index.js +9 -12
- package/HelperText/index.js +11 -11
- package/InputLang/index.js +104 -124
- package/InputNumber/index.js +62 -81
- package/Label/index.js +19 -21
- package/Loading/index.js +11 -10
- package/Menu/index.js +302 -371
- package/Message/index.js +104 -113
- package/Modal/index.js +122 -148
- package/MultiBox/index.d.ts +5 -0
- package/MultiBox/index.js +111 -115
- package/Notification/index.js +105 -103
- package/OperateBtn/index.d.ts +3 -0
- package/OperateBtn/index.js +77 -107
- package/PageHeader/index.js +327 -406
- package/Pagination/index.js +107 -137
- package/ParauiProvider/index.js +20 -22
- package/PasswordRules/index.js +36 -40
- package/PopConfirm/index.js +60 -77
- package/Popover/index.js +12 -12
- package/Progress/index.js +72 -74
- package/Querying/index.js +22 -23
- package/README.md +2 -0
- package/Radio/index.js +27 -34
- package/RadioGroup/index.js +38 -52
- package/Search/index.js +34 -43
- package/Select/index.js +281 -345
- package/SelectInput/index.js +8 -13
- package/Selector/index.js +905 -796
- package/SelectorPicker/index.js +111 -133
- package/SingleBox/index.d.ts +5 -0
- package/SingleBox/index.js +92 -88
- package/Slider/index.js +46 -57
- package/Status/index.js +14 -13
- package/Stepper/index.js +25 -26
- package/Styles/theme.scss +9 -9
- package/Switch/index.js +32 -35
- package/Table/index.js +767 -963
- package/Tabs/index.js +102 -102
- package/Tag/index.js +115 -162
- package/TextEditor/index.js +81 -103
- package/TextField/index.js +142 -183
- package/TimePicker/index.js +27 -28
- package/Timeline/index.js +67 -58
- package/Title/index.js +32 -34
- package/ToggleButton/index.js +53 -52
- package/Tooltip/index.js +79 -82
- package/Transfer/index.js +159 -201
- package/Tree/index.js +7 -12
- package/Upload/index.js +523 -758
- package/Upload/interface.d.ts +2 -0
- package/_verture/{constant-0d9802f7.js → constant-5317fc89.js} +2 -2
- package/_verture/{index-5a7e2438.js → index-0ced30f7.js} +1127 -1079
- package/_verture/{index-024bbc9b.js → index-775ad32d.js} +29 -25
- package/_verture/{index-05f7bf11.js → index-c568f272.js} +2 -2
- package/_verture/index-da9097d3.js +239 -0
- package/_verture/{index-9331b116.js → index-ef1235fb.js} +125 -134
- package/_verture/{index-b1f80962.js → index-f186b5e8.js} +314 -398
- package/_verture/intl-f2f27722.js +69 -0
- package/_verture/{modalContext-736ff215.js → modalContext-5df08980.js} +36 -64
- package/_verture/{slicedToArray-a8206399.js → slicedToArray-8223a2ef.js} +15 -2
- package/_verture/{useFormatMessage-703f8b20.js → useFormatMessage-eb13cf56.js} +5 -4
- package/_verture/{useGlobalProps-1b846a65.js → useGlobalProps-1e416658.js} +4 -3
- package/_verture/{usePopupContainer-87febeb9.js → usePopupContainer-635f66f4.js} +16 -15
- package/_verture/{util-7e1fb1e2.js → util-82646c4f.js} +5 -4
- package/_verture/{utils-418da0a4.js → utils-46e99c9a.js} +34 -25
- package/index.js +21 -22
- package/locale/index.js +6 -6
- package/package.json +1 -1
- package/umd/AutoBox.js +9 -8
- package/umd/AutoTips.js +9 -8
- package/umd/Badge.js +1 -1
- package/umd/Breadcrumbs.js +9 -8
- package/umd/Button.js +9 -8
- package/umd/ButtonGroup.js +9 -8
- package/umd/Carousel.js +5 -5
- package/umd/Cascader.js +9 -8
- package/umd/Checkbox.js +9 -8
- package/umd/CheckboxGroup.js +9 -8
- package/umd/Collapse.js +8 -7
- package/umd/CollapseBox.js +1 -1
- package/umd/CollapseLayout.js +4 -4
- package/umd/ColorPicker.js +1 -1
- package/umd/ComboSelect.js +9 -8
- package/umd/Container.js +1 -1
- package/umd/CopyText.js +9 -8
- package/umd/DatePicker.js +9 -8
- package/umd/Descriptions.js +9 -8
- package/umd/Desktop.js +9 -8
- package/umd/DragVerify.js +4 -4
- package/umd/Drawer.js +9 -8
- package/umd/Dropdown.js +6 -5
- package/umd/DynamicMultiBox.js +11 -10
- package/umd/Empty.js +1 -1
- package/umd/Form.js +9 -8
- package/umd/FormItem.js +9 -8
- package/umd/FunctionModal.js +9 -8
- package/umd/GlobalContext.js +1 -1
- package/umd/Help.js +9 -8
- package/umd/HelperText.js +1 -1
- package/umd/InputLang.js +9 -8
- package/umd/InputNumber.js +9 -8
- package/umd/Label.js +9 -8
- package/umd/Loading.js +4 -4
- package/umd/Menu.js +4 -4
- package/umd/Message.js +4 -4
- package/umd/Modal.js +9 -8
- package/umd/MultiBox.js +9 -8
- package/umd/Notification.js +8 -7
- package/umd/OperateBtn.js +9 -8
- package/umd/PageHeader.js +9 -8
- package/umd/Pagination.js +9 -8
- package/umd/ParauiProvider.js +1 -1
- package/umd/PasswordRules.js +4 -4
- package/umd/PopConfirm.js +9 -8
- package/umd/Popover.js +9 -8
- package/umd/Progress.js +5 -5
- package/umd/Querying.js +1 -1
- package/umd/Radio.js +9 -8
- package/umd/RadioGroup.js +9 -8
- package/umd/Search.js +9 -8
- package/umd/Select.js +9 -8
- package/umd/SelectInput.js +9 -8
- package/umd/Selector.js +9 -8
- package/umd/SelectorPicker.js +9 -8
- package/umd/SingleBox.js +9 -8
- package/umd/Slider.js +6 -5
- package/umd/Status.js +4 -4
- package/umd/Stepper.js +9 -8
- package/umd/Switch.js +9 -8
- package/umd/Table.js +9 -8
- package/umd/Tabs.js +9 -8
- package/umd/Tag.js +9 -8
- package/umd/TextEditor.js +22 -21
- package/umd/TextField.js +9 -8
- package/umd/TimePicker.js +9 -8
- package/umd/Timeline.js +1 -1
- package/umd/Title.js +9 -8
- package/umd/ToggleButton.js +9 -8
- package/umd/Tooltip.js +9 -8
- package/umd/Transfer.js +10 -9
- package/umd/Tree.js +9 -8
- package/umd/Upload.js +10 -9
- package/umd/locale.js +1 -1
- package/_verture/index-232d890b.js +0 -327
- package/_verture/index-e9007d6a.js +0 -236
- package/_verture/intl-5c1ec055.js +0 -81
- package/_verture/toConsumableArray-8f4c9589.js +0 -19
- package/_verture/unsupportedIterableToArray-cb478f24.js +0 -16
package/Upload/index.js
CHANGED
|
@@ -1,45 +1,39 @@
|
|
|
1
|
-
import { _ as _defineProperty } from '../_verture/defineProperty-1d116156.js';
|
|
2
|
-
import { _ as _toConsumableArray } from '../_verture/toConsumableArray-8f4c9589.js';
|
|
3
|
-
import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.js';
|
|
4
1
|
import { a as __awaiter, _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
|
|
5
2
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
6
3
|
import { useState, useEffect, useRef, memo, forwardRef, useCallback, useImperativeHandle, useMemo } from 'react';
|
|
7
4
|
import RcUpload from 'rc-upload';
|
|
8
5
|
import UploadIcon from '@para-ui/icons/UploadFile';
|
|
9
6
|
import LoadingIcon from '@para-ui/icons/Loading';
|
|
10
|
-
import { _ as _typeof } from '../_verture/typeof-adeedc13.js';
|
|
11
|
-
import { r as regenerator } from '../_verture/index-232d890b.js';
|
|
12
7
|
import Delete from '@para-ui/icons/Delete';
|
|
13
8
|
import TextIcon from '@para-ui/icons/Text';
|
|
14
9
|
import PhotoIcon from '@para-ui/icons/Photo';
|
|
15
10
|
import clsx from 'clsx';
|
|
16
|
-
import { $ as $prefixCls, a as $rcPrefixCls } from '../_verture/constant-
|
|
11
|
+
import { $ as $prefixCls, a as $rcPrefixCls } from '../_verture/constant-5317fc89.js';
|
|
17
12
|
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
|
|
18
13
|
import Forbid from '@para-ui/icons/Forbid';
|
|
19
|
-
import { u as useFormatMessage } from '../_verture/useFormatMessage-
|
|
14
|
+
import { u as useFormatMessage } from '../_verture/useFormatMessage-eb13cf56.js';
|
|
20
15
|
import EditIcon from '@para-ui/icons/EditOutline';
|
|
21
16
|
import { Button } from '../Button/index.js';
|
|
17
|
+
import { b as _slicedToArray } from '../_verture/slicedToArray-8223a2ef.js';
|
|
22
18
|
import { Slider } from '../Slider/index.js';
|
|
23
19
|
import Cropper from 'react-easy-crop';
|
|
24
20
|
import { Modal } from '../Modal/index.js';
|
|
25
|
-
import '../_verture/unsupportedIterableToArray-cb478f24.js';
|
|
26
|
-
import '../_verture/typeof-c310ee4a.js';
|
|
27
21
|
import '@para-ui/core/GlobalContext';
|
|
28
22
|
import '@para-ui/icons/LoadingF';
|
|
29
23
|
import '../Tooltip/index.js';
|
|
30
24
|
import 'rc-tooltip';
|
|
31
25
|
import 'rc-tooltip/lib/placements';
|
|
32
26
|
import '@para-ui/icons/Down';
|
|
33
|
-
import '../_verture/index-
|
|
27
|
+
import '../_verture/index-da9097d3.js';
|
|
34
28
|
import 'rc-dropdown';
|
|
35
|
-
import '../_verture/usePopupContainer-
|
|
29
|
+
import '../_verture/usePopupContainer-635f66f4.js';
|
|
36
30
|
import 'dayjs';
|
|
37
31
|
import '@paraview/lib';
|
|
38
32
|
import '../AutoTips/index.js';
|
|
39
33
|
import 'rc-slider';
|
|
40
34
|
import 'rc-dialog';
|
|
41
35
|
import '@para-ui/icons/Close';
|
|
42
|
-
import '../_verture/index-
|
|
36
|
+
import '../_verture/index-c568f272.js';
|
|
43
37
|
import 'react-dom';
|
|
44
38
|
import '@para-ui/icons/CheckCircleF';
|
|
45
39
|
import '@para-ui/icons/WarningCircleF';
|
|
@@ -48,50 +42,41 @@ import '@para-ui/icons/CloseCircleF';
|
|
|
48
42
|
var css_248z$4 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/11 下午3:08\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-upload-list-text .upload-list-item {\n margin-top: 8px;\n}\n.paraui-v4-upload-list-text .upload-list-item-info {\n display: flex;\n align-items: center;\n padding: 0 8px;\n line-height: 28px;\n font-size: 14px;\n color: rgb(29, 33, 38);\n border-radius: 4px;\n transition: background-color 0.3s;\n}\n.paraui-v4-upload-list-text .upload-list-item-info .upload-list-text {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n.paraui-v4-upload-list-text .upload-list-item-info .upload-list-text .upload-list-fileicon {\n line-height: 0;\n opacity: 1;\n transition: opacity 0.3s;\n}\n.paraui-v4-upload-list-text .upload-list-item-info .upload-list-text .upload-list-fileicon svg {\n color: inherit;\n font-size: inherit;\n}\n.paraui-v4-upload-list-text .upload-list-item-info .upload-list-text-name {\n margin-left: 10px;\n}\n.paraui-v4-upload-list-text .upload-list-item-info .upload-list-text .upload-list-actions {\n position: absolute;\n opacity: 0;\n visibility: hidden;\n line-height: 0;\n transition: opacity 0.3s;\n cursor: pointer;\n}\n.paraui-v4-upload-list-text .upload-list-item-info .upload-list-text .upload-list-actions svg {\n color: rgb(244, 66, 66);\n font-size: inherit;\n}\n.paraui-v4-upload-list-text .upload-list-item-info:hover {\n background-color: rgb(247, 248, 250);\n}\n.paraui-v4-upload-list-text .upload-list-item-info:hover .upload-list-text .upload-list-actions {\n visibility: visible;\n opacity: 1;\n}\n.paraui-v4-upload-list-text .upload-list-item-info:hover .upload-list-text .upload-list-fileicon-active {\n opacity: 0;\n}\n.paraui-v4-upload-list-picture {\n display: inline-flex;\n align-items: center;\n}\n.paraui-v4-upload-list-picture .upload-list-picture-item {\n position: relative;\n display: inline-block;\n width: 100px;\n height: 100px;\n margin-right: 16px;\n border-radius: 4px;\n cursor: default;\n}\n.paraui-v4-upload-list-picture .upload-list-picture-item::before {\n content: \" \";\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n background-color: rgb(29, 33, 38);\n border-radius: 4px;\n opacity: 0;\n transition: 0.3s;\n}\n.paraui-v4-upload-list-picture .upload-list-picture-item img {\n width: 100%;\n height: 100%;\n border-radius: 4px;\n}\n.paraui-v4-upload-list-picture .upload-list-picture-item .upload-list-picture-name {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n padding: 0 10px;\n font-size: 12px;\n line-height: 24px;\n text-align: center;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n background-color: rgb(29, 33, 38);\n border-radius: 0 0 4px 4px;\n color: rgb(255, 255, 255);\n transition: 0.3s;\n}\n.paraui-v4-upload-list-picture .upload-list-picture-item .upload-list-actions {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n line-height: 0;\n cursor: pointer;\n transition: 0.3s;\n}\n.paraui-v4-upload-list-picture .upload-list-picture-item .upload-list-actions svg {\n color: rgb(255, 255, 255);\n}\n.paraui-v4-upload-list-picture .upload-list-picture-item:hover:not(.upload-list-picture-item-readonly)::before {\n opacity: 1;\n}\n.paraui-v4-upload-list-picture .upload-list-picture-item:hover:not(.upload-list-picture-item-readonly) .upload-list-actions {\n opacity: 1;\n}\n.paraui-v4-upload-list-picture .upload-list-picture-item:hover:not(.upload-list-picture-item-readonly) .upload-list-picture-name {\n opacity: 0;\n}";
|
|
49
43
|
styleInject(css_248z$4);
|
|
50
44
|
|
|
51
|
-
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
|
|
52
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
53
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
54
45
|
//UploadList
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
listType =
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
var _useState = useState([]),
|
|
67
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
68
|
-
uploadList = _useState2[0],
|
|
69
|
-
setUploadList = _useState2[1];
|
|
46
|
+
const UploadList = props => {
|
|
47
|
+
const {
|
|
48
|
+
listType = 'text',
|
|
49
|
+
items = [],
|
|
50
|
+
onRemove,
|
|
51
|
+
showRemoveIcon = true,
|
|
52
|
+
removeIcon,
|
|
53
|
+
itemRender,
|
|
54
|
+
readonly
|
|
55
|
+
} = props;
|
|
56
|
+
const [uploadList, setUploadList] = useState([]);
|
|
70
57
|
//处理删除
|
|
71
|
-
|
|
58
|
+
const handleRemove = (file, evt) => {
|
|
72
59
|
evt.stopPropagation();
|
|
73
60
|
onRemove === null || onRemove === void 0 ? void 0 : onRemove(file);
|
|
74
61
|
};
|
|
75
62
|
//渲染列表actions
|
|
76
|
-
|
|
63
|
+
const renderActions = file => {
|
|
77
64
|
return showRemoveIcon && !readonly && jsx("span", Object.assign({
|
|
78
65
|
className: 'upload-list-actions',
|
|
79
|
-
onClick:
|
|
80
|
-
return handleRemove(file, evt);
|
|
81
|
-
}
|
|
66
|
+
onClick: evt => handleRemove(file, evt)
|
|
82
67
|
}, {
|
|
83
68
|
children: removeIcon || jsx(Delete, {})
|
|
84
69
|
}));
|
|
85
70
|
};
|
|
86
71
|
//文件列表 text
|
|
87
|
-
|
|
72
|
+
const renderFileListText = () => {
|
|
88
73
|
if (!(uploadList === null || uploadList === void 0 ? void 0 : uploadList.length)) return null;
|
|
89
|
-
return uploadList.map(
|
|
74
|
+
return uploadList.map((file, idx) => {
|
|
90
75
|
var _a;
|
|
91
76
|
if (itemRender)
|
|
92
77
|
//自定义渲染
|
|
93
78
|
return itemRender(file, uploadList);
|
|
94
|
-
|
|
79
|
+
const isImage = !!((_a = file.type) === null || _a === void 0 ? void 0 : _a.includes('image/'));
|
|
95
80
|
return jsx("div", Object.assign({
|
|
96
81
|
className: 'upload-list-item'
|
|
97
82
|
}, {
|
|
@@ -116,9 +101,9 @@ var UploadList = function UploadList(props) {
|
|
|
116
101
|
});
|
|
117
102
|
};
|
|
118
103
|
//文件列表 picture-card
|
|
119
|
-
|
|
104
|
+
const renderFileListPicture = () => {
|
|
120
105
|
if (!(uploadList === null || uploadList === void 0 ? void 0 : uploadList.length)) return null;
|
|
121
|
-
return uploadList.map(
|
|
106
|
+
return uploadList.map((file, idx) => {
|
|
122
107
|
if (itemRender)
|
|
123
108
|
//自定义渲染
|
|
124
109
|
return itemRender(file, uploadList);
|
|
@@ -138,84 +123,31 @@ var UploadList = function UploadList(props) {
|
|
|
138
123
|
});
|
|
139
124
|
};
|
|
140
125
|
//处理文件
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
} else resolve('');
|
|
167
|
-
}));
|
|
168
|
-
case 1:
|
|
169
|
-
case "end":
|
|
170
|
-
return _context.stop();
|
|
171
|
-
}
|
|
172
|
-
}, _callee);
|
|
173
|
-
}));
|
|
174
|
-
};
|
|
175
|
-
_iterator = _createForOfIteratorHelper(items);
|
|
176
|
-
_context2.prev = 4;
|
|
177
|
-
_iterator.s();
|
|
178
|
-
case 6:
|
|
179
|
-
if ((_step = _iterator.n()).done) {
|
|
180
|
-
_context2.next = 15;
|
|
181
|
-
break;
|
|
182
|
-
}
|
|
183
|
-
file = _step.value;
|
|
184
|
-
if (!file.originFileObj) {
|
|
185
|
-
_context2.next = 13;
|
|
186
|
-
break;
|
|
187
|
-
}
|
|
188
|
-
_context2.next = 11;
|
|
189
|
-
return readerFileAsDataUrl(file);
|
|
190
|
-
case 11:
|
|
191
|
-
dataUrl = _context2.sent;
|
|
192
|
-
file.dataUrl = dataUrl;
|
|
193
|
-
case 13:
|
|
194
|
-
_context2.next = 6;
|
|
195
|
-
break;
|
|
196
|
-
case 15:
|
|
197
|
-
_context2.next = 20;
|
|
198
|
-
break;
|
|
199
|
-
case 17:
|
|
200
|
-
_context2.prev = 17;
|
|
201
|
-
_context2.t0 = _context2["catch"](4);
|
|
202
|
-
_iterator.e(_context2.t0);
|
|
203
|
-
case 20:
|
|
204
|
-
_context2.prev = 20;
|
|
205
|
-
_iterator.f();
|
|
206
|
-
return _context2.finish(20);
|
|
207
|
-
case 23:
|
|
208
|
-
setUploadList(_toConsumableArray(items));
|
|
209
|
-
case 24:
|
|
210
|
-
case "end":
|
|
211
|
-
return _context2.stop();
|
|
212
|
-
}
|
|
213
|
-
}, _callee2, null, [[4, 17, 20, 23]]);
|
|
214
|
-
}));
|
|
215
|
-
};
|
|
216
|
-
useEffect(function () {
|
|
217
|
-
if (listType === 'picture-card') handleFileFormat();else setUploadList(function (pre) {
|
|
218
|
-
if (items) return _toConsumableArray(items);
|
|
126
|
+
const handleFileFormat = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
127
|
+
if (!(items === null || items === void 0 ? void 0 : items.length)) return setUploadList([]);
|
|
128
|
+
//读取file as DataUrl
|
|
129
|
+
const readerFileAsDataUrl = file => __awaiter(void 0, void 0, void 0, function* () {
|
|
130
|
+
return new Promise(resolve => {
|
|
131
|
+
const fileReader = new FileReader();
|
|
132
|
+
if (file.originFileObj) {
|
|
133
|
+
fileReader.onload = () => {
|
|
134
|
+
resolve(fileReader.result);
|
|
135
|
+
};
|
|
136
|
+
fileReader.readAsDataURL(file.originFileObj);
|
|
137
|
+
} else resolve('');
|
|
138
|
+
});
|
|
139
|
+
});
|
|
140
|
+
for (const file of items) {
|
|
141
|
+
if (file.originFileObj) {
|
|
142
|
+
const dataUrl = yield readerFileAsDataUrl(file);
|
|
143
|
+
file.dataUrl = dataUrl;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
setUploadList([...items]);
|
|
147
|
+
});
|
|
148
|
+
useEffect(() => {
|
|
149
|
+
if (listType === 'picture-card') handleFileFormat();else setUploadList(pre => {
|
|
150
|
+
if (items) return [...items];
|
|
219
151
|
return pre;
|
|
220
152
|
});
|
|
221
153
|
}, [items]);
|
|
@@ -236,7 +168,7 @@ var css_248z$3 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/15
|
|
|
236
168
|
styleInject(css_248z$3);
|
|
237
169
|
|
|
238
170
|
//error tip
|
|
239
|
-
|
|
171
|
+
const ErrorTip = props => {
|
|
240
172
|
return jsxs("div", Object.assign({
|
|
241
173
|
className: clsx("".concat($prefixCls, "-upload-error"), props.className)
|
|
242
174
|
}, {
|
|
@@ -269,139 +201,99 @@ var zh = {
|
|
|
269
201
|
};
|
|
270
202
|
|
|
271
203
|
var localeJson = {
|
|
272
|
-
zh
|
|
273
|
-
en
|
|
204
|
+
zh,
|
|
205
|
+
en
|
|
274
206
|
};
|
|
275
207
|
|
|
276
208
|
var css_248z$2 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/11 下午7:31\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-upload-image {\n display: inline-flex;\n align-items: center;\n /* &-border {\n .upload-image-select{\n border: 2px dashed $NA1;\n\n &:hover {\n border: 2px dashed $NPT8;\n }\n }\n } */\n}\n.paraui-v4-upload-image .upload-image-select {\n position: relative;\n width: 100px;\n height: 100px;\n cursor: pointer;\n background-color: rgb(247, 248, 250);\n border-radius: 4px;\n transition: 0.3s;\n}\n.paraui-v4-upload-image .upload-image-select-loading {\n pointer-events: none;\n}\n.paraui-v4-upload-image .upload-image-select .component-upload {\n display: inline-block;\n width: 100%;\n height: 100%;\n}\n.paraui-v4-upload-image .upload-image-select:hover .upload-image-picture-card {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-upload-image .upload-image-picture-card {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n font-size: 14px;\n color: rgb(29, 33, 38);\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper {\n position: relative;\n width: 100%;\n height: 100%;\n cursor: default;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper img {\n width: 100%;\n height: 100%;\n border-radius: 4px;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper::before {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n content: \" \";\n background-color: rgb(29, 33, 38);\n border-radius: 4px;\n opacity: 0;\n transition: 0.3s;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper-name {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n padding: 0 10px;\n overflow: hidden;\n font-size: 12px;\n line-height: 24px;\n color: rgb(255, 255, 255);\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n background-color: rgb(29, 33, 38);\n border-radius: 0 0 4px 4px;\n transition: 0.3s;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper-action {\n position: absolute;\n top: 50%;\n left: 50%;\n line-height: 0;\n cursor: pointer;\n opacity: 0;\n transition: 0.3s;\n transform: translate(-50%, -50%);\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper-action svg {\n color: rgb(255, 255, 255);\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper:hover::before {\n opacity: 1;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper:hover .upload-img-wrapper-name {\n opacity: 0;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper:hover .upload-img-wrapper-action {\n opacity: 1;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-image-icon {\n font-size: 30px;\n color: rgb(46, 101, 230);\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-image-loading {\n font-size: 30px;\n color: rgb(46, 101, 230);\n animation: imageLoadingCircle 1s infinite linear;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-image-text {\n margin-top: 6px;\n color: inherit;\n text-align: center;\n transition: 0.3s;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-image-text-loading {\n color: rgb(46, 101, 230);\n}\n@keyframes imageLoadingCircle {\n 100% {\n transform: rotate(360deg);\n }\n}";
|
|
277
209
|
styleInject(css_248z$2);
|
|
278
210
|
|
|
279
211
|
//ImageUpload
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
var _useState5 = useState(false),
|
|
320
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
321
|
-
errTip = _useState6[0],
|
|
322
|
-
setErrTip = _useState6[1]; //upload error tip
|
|
323
|
-
var _useState7 = useState({
|
|
324
|
-
imageUrl: ''
|
|
325
|
-
}),
|
|
326
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
327
|
-
avatar = _useState8[0],
|
|
328
|
-
setAvatar = _useState8[1]; //不显示列表时上传头像
|
|
329
|
-
var _ref = typeof showUploadList === 'boolean' ? {} : showUploadList,
|
|
330
|
-
showRemoveIcon = _ref.showRemoveIcon,
|
|
331
|
-
removeIcon = _ref.removeIcon; //显示上传列表
|
|
332
|
-
var _ref2 = typeof showUploadError === 'boolean' ? {} : showUploadError,
|
|
333
|
-
_ref2$uploadErrorMsg = _ref2.uploadErrorMsg,
|
|
334
|
-
uploadErrorMsg = _ref2$uploadErrorMsg === void 0 ? intl({
|
|
212
|
+
const ImageUpload = props => {
|
|
213
|
+
const {
|
|
214
|
+
className,
|
|
215
|
+
style,
|
|
216
|
+
onStart,
|
|
217
|
+
onSuccess,
|
|
218
|
+
onError,
|
|
219
|
+
onProgress,
|
|
220
|
+
onRemove,
|
|
221
|
+
beforeUpload,
|
|
222
|
+
onChange,
|
|
223
|
+
defaultFileList = [],
|
|
224
|
+
fileList,
|
|
225
|
+
showUploadList = true,
|
|
226
|
+
maxCount,
|
|
227
|
+
children = null,
|
|
228
|
+
itemRender,
|
|
229
|
+
showUploadError = true,
|
|
230
|
+
stash = false,
|
|
231
|
+
uploading = true,
|
|
232
|
+
loading = false,
|
|
233
|
+
showLoading: showLoadingProp = false,
|
|
234
|
+
defaultImage,
|
|
235
|
+
readonly
|
|
236
|
+
} = props,
|
|
237
|
+
restProps = __rest(props, ["className", "style", "onStart", "onSuccess", "onError", "onProgress", "onRemove", "beforeUpload", "onChange", "defaultFileList", "fileList", "showUploadList", "maxCount", "children", "itemRender", "showUploadError", "stash", "uploading", "loading", "showLoading", "defaultImage", "readonly"]);
|
|
238
|
+
const intl = useFormatMessage('Upload', localeJson);
|
|
239
|
+
const [uploadFileList, setUploadFileList] = useState(defaultFileList); //文件列表
|
|
240
|
+
const [showLoading, setShowLoading] = useState(false); //upload loading
|
|
241
|
+
const [errTip, setErrTip] = useState(false); //upload error tip
|
|
242
|
+
const [avatar, setAvatar] = useState({
|
|
243
|
+
imageUrl: ''
|
|
244
|
+
}); //不显示列表时上传头像
|
|
245
|
+
const {
|
|
246
|
+
showRemoveIcon,
|
|
247
|
+
removeIcon
|
|
248
|
+
} = typeof showUploadList === 'boolean' ? {} : showUploadList; //显示上传列表
|
|
249
|
+
const {
|
|
250
|
+
uploadErrorMsg = intl({
|
|
335
251
|
id: 'uploadError'
|
|
336
|
-
})
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
252
|
+
}),
|
|
253
|
+
leaveDelay = 2000
|
|
254
|
+
} = typeof showUploadError === 'boolean' ? {} : showUploadError; //错误信息提示
|
|
255
|
+
const cropFileRef = useRef(); //裁剪文件
|
|
256
|
+
useEffect(() => {
|
|
257
|
+
setShowLoading(loading);
|
|
258
|
+
}, [loading]);
|
|
340
259
|
//复写属性
|
|
341
|
-
|
|
260
|
+
const overrideProps = Object.assign(Object.assign({
|
|
342
261
|
accept: 'image/*'
|
|
343
262
|
}, restProps), {
|
|
344
|
-
beforeUpload:
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
}
|
|
359
|
-
setShowLoading(false);
|
|
360
|
-
return _context.abrupt("return", false);
|
|
361
|
-
case 9:
|
|
362
|
-
if (!(_typeof(result) === 'object' && result)) {
|
|
363
|
-
_context.next = 16;
|
|
364
|
-
break;
|
|
365
|
-
}
|
|
366
|
-
if (!(result instanceof File || result instanceof Blob)) {
|
|
367
|
-
_context.next = 12;
|
|
368
|
-
break;
|
|
369
|
-
}
|
|
370
|
-
return _context.abrupt("return", result);
|
|
371
|
-
case 12:
|
|
372
|
-
cropFileRef.current = result.cropFile;
|
|
373
|
-
return _context.abrupt("return", result.isUpload);
|
|
374
|
-
case 16:
|
|
375
|
-
return _context.abrupt("return", true);
|
|
376
|
-
case 17:
|
|
377
|
-
case "end":
|
|
378
|
-
return _context.stop();
|
|
379
|
-
}
|
|
380
|
-
}, _callee);
|
|
381
|
-
}));
|
|
382
|
-
},
|
|
383
|
-
onStart: function onStart(file) {
|
|
384
|
-
_onStart === null || _onStart === void 0 ? void 0 : _onStart(file);
|
|
263
|
+
beforeUpload: (file, fileList) => __awaiter(void 0, void 0, void 0, function* () {
|
|
264
|
+
if (restProps.action && showLoadingProp && uploading) setShowLoading(true);
|
|
265
|
+
const result = yield beforeUpload === null || beforeUpload === void 0 ? void 0 : beforeUpload(file, fileList);
|
|
266
|
+
if (result === false) {
|
|
267
|
+
setShowLoading(false);
|
|
268
|
+
return false;
|
|
269
|
+
} else if (typeof result === 'object' && result) {
|
|
270
|
+
if (result instanceof File || result instanceof Blob) return result;
|
|
271
|
+
cropFileRef.current = result.cropFile;
|
|
272
|
+
return result.isUpload;
|
|
273
|
+
} else return true;
|
|
274
|
+
}),
|
|
275
|
+
onStart(file) {
|
|
276
|
+
onStart === null || onStart === void 0 ? void 0 : onStart(file);
|
|
385
277
|
},
|
|
386
|
-
onSuccess
|
|
278
|
+
onSuccess(response, file, xhr) {
|
|
387
279
|
setShowLoading(false);
|
|
388
280
|
errTip && showErrTip(false);
|
|
389
|
-
|
|
281
|
+
const nextFileList = updateFileList(file);
|
|
390
282
|
onInternalChange(nextFileList);
|
|
391
|
-
|
|
283
|
+
onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(response, file, xhr);
|
|
392
284
|
},
|
|
393
|
-
onError
|
|
285
|
+
onError(error, response, file) {
|
|
394
286
|
setShowLoading(false);
|
|
395
287
|
showErrTip(!!showUploadError);
|
|
396
|
-
|
|
288
|
+
onError === null || onError === void 0 ? void 0 : onError(error, response, file);
|
|
397
289
|
},
|
|
398
|
-
onProgress
|
|
399
|
-
|
|
290
|
+
onProgress(e, file) {
|
|
291
|
+
onProgress === null || onProgress === void 0 ? void 0 : onProgress(e, file);
|
|
400
292
|
},
|
|
401
|
-
onBatchStart
|
|
293
|
+
onBatchStart(fileList) {
|
|
402
294
|
if (stash) {
|
|
403
295
|
if (cropFileRef.current) {
|
|
404
|
-
|
|
296
|
+
const idx = fileList.findIndex(_ => {
|
|
405
297
|
var _a;
|
|
406
298
|
return _.file.uid === ((_a = cropFileRef.current) === null || _a === void 0 ? void 0 : _a.uid);
|
|
407
299
|
});
|
|
@@ -412,62 +304,40 @@ var ImageUpload = function ImageUpload(props) {
|
|
|
412
304
|
});
|
|
413
305
|
}
|
|
414
306
|
}
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
});
|
|
418
|
-
var mList = mergedFileList(arr);
|
|
307
|
+
const arr = fileList.map(_ => _.parsedFile || _.file);
|
|
308
|
+
const mList = mergedFileList(arr);
|
|
419
309
|
onInternalChange(mList);
|
|
420
310
|
}
|
|
421
311
|
}
|
|
422
312
|
});
|
|
423
313
|
//内部变化
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
avatar.imageName = file.name;
|
|
448
|
-
setAvatar(Object.assign({}, avatar));
|
|
449
|
-
case 11:
|
|
450
|
-
onChange === null || onChange === void 0 ? void 0 : onChange([file]);
|
|
451
|
-
return _context2.abrupt("return");
|
|
452
|
-
case 13:
|
|
453
|
-
if (maxCount === 1) {
|
|
454
|
-
cloneList = cloneList.slice(-1);
|
|
455
|
-
} else if (maxCount) {
|
|
456
|
-
cloneList = cloneList.slice(0, maxCount);
|
|
457
|
-
}
|
|
458
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(cloneList);
|
|
459
|
-
setUploadFileList(cloneList);
|
|
460
|
-
case 16:
|
|
461
|
-
case "end":
|
|
462
|
-
return _context2.stop();
|
|
463
|
-
}
|
|
464
|
-
}, _callee2);
|
|
465
|
-
}));
|
|
466
|
-
};
|
|
314
|
+
const onInternalChange = changedFileList => __awaiter(void 0, void 0, void 0, function* () {
|
|
315
|
+
let cloneList = [...changedFileList];
|
|
316
|
+
if (!showUploadList) {
|
|
317
|
+
//不显示上传列表
|
|
318
|
+
const file = cloneList.slice(-1)[0];
|
|
319
|
+
if (file) {
|
|
320
|
+
const imageUrl = yield readerFileAsDataUrl(file);
|
|
321
|
+
file.dataUrl = imageUrl;
|
|
322
|
+
avatar.imageUrl = imageUrl;
|
|
323
|
+
avatar.imageName = file.name;
|
|
324
|
+
setAvatar(Object.assign({}, avatar));
|
|
325
|
+
}
|
|
326
|
+
onChange === null || onChange === void 0 ? void 0 : onChange([file]);
|
|
327
|
+
return;
|
|
328
|
+
}
|
|
329
|
+
if (maxCount === 1) {
|
|
330
|
+
cloneList = cloneList.slice(-1);
|
|
331
|
+
} else if (maxCount) {
|
|
332
|
+
cloneList = cloneList.slice(0, maxCount);
|
|
333
|
+
}
|
|
334
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(cloneList);
|
|
335
|
+
setUploadFileList(cloneList);
|
|
336
|
+
});
|
|
467
337
|
//更新文件列表
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
338
|
+
const updateFileList = file => {
|
|
339
|
+
const cloneList = [...uploadFileList];
|
|
340
|
+
const fileObj = Object.assign(Object.assign({}, file), {
|
|
471
341
|
lastModified: file.lastModified,
|
|
472
342
|
lastModifiedDate: file.lastModifiedDate,
|
|
473
343
|
name: file.name,
|
|
@@ -479,9 +349,9 @@ var ImageUpload = function ImageUpload(props) {
|
|
|
479
349
|
return cloneList.concat(fileObj);
|
|
480
350
|
};
|
|
481
351
|
//合并文件列表
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
352
|
+
const mergedFileList = fileList => {
|
|
353
|
+
const cloneList = [...uploadFileList];
|
|
354
|
+
const newFileList = fileList.map(file => {
|
|
485
355
|
return Object.assign(Object.assign({}, file), {
|
|
486
356
|
lastModified: file.lastModified,
|
|
487
357
|
lastModifiedDate: file.lastModifiedDate,
|
|
@@ -495,71 +365,57 @@ var ImageUpload = function ImageUpload(props) {
|
|
|
495
365
|
return cloneList.concat(newFileList);
|
|
496
366
|
};
|
|
497
367
|
//删除文件
|
|
498
|
-
|
|
499
|
-
Promise.resolve(typeof onRemove === 'function' ? onRemove(file) : onRemove).then(
|
|
368
|
+
const handleRemove = file => {
|
|
369
|
+
Promise.resolve(typeof onRemove === 'function' ? onRemove(file) : onRemove).then(ret => {
|
|
500
370
|
// Prevent removing file
|
|
501
371
|
if (ret === false) return;
|
|
502
|
-
|
|
503
|
-
return _.uid === file.uid;
|
|
504
|
-
});
|
|
372
|
+
const idx = uploadFileList.findIndex(_ => _.uid === file.uid);
|
|
505
373
|
if (idx > -1) uploadFileList.splice(idx, 1);
|
|
506
374
|
onInternalChange(uploadFileList);
|
|
507
375
|
});
|
|
508
376
|
};
|
|
509
377
|
//读取dataUrl
|
|
510
|
-
|
|
511
|
-
return
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
fileReader.readAsDataURL(file.originFileObj);
|
|
522
|
-
} else resolve('');
|
|
523
|
-
}));
|
|
524
|
-
case 1:
|
|
525
|
-
case "end":
|
|
526
|
-
return _context3.stop();
|
|
527
|
-
}
|
|
528
|
-
}, _callee3);
|
|
529
|
-
}));
|
|
530
|
-
};
|
|
378
|
+
const readerFileAsDataUrl = file => __awaiter(void 0, void 0, void 0, function* () {
|
|
379
|
+
return new Promise(resolve => {
|
|
380
|
+
const fileReader = new FileReader();
|
|
381
|
+
if (file.originFileObj) {
|
|
382
|
+
fileReader.onload = () => {
|
|
383
|
+
resolve(fileReader.result);
|
|
384
|
+
};
|
|
385
|
+
fileReader.readAsDataURL(file.originFileObj);
|
|
386
|
+
} else resolve('');
|
|
387
|
+
});
|
|
388
|
+
});
|
|
531
389
|
//显示错误提示
|
|
532
|
-
|
|
390
|
+
const showErrTip = flag => {
|
|
533
391
|
setErrTip(flag);
|
|
534
392
|
if (leaveDelay < 0) return;
|
|
535
|
-
setTimeout(
|
|
393
|
+
setTimeout(() => {
|
|
536
394
|
setErrTip(false);
|
|
537
395
|
}, leaveDelay);
|
|
538
396
|
};
|
|
539
|
-
useEffect(
|
|
397
|
+
useEffect(() => {
|
|
540
398
|
if (fileList) {
|
|
541
|
-
setUploadFileList(
|
|
399
|
+
setUploadFileList([...fileList]);
|
|
542
400
|
}
|
|
543
401
|
}, [fileList]);
|
|
544
|
-
useEffect(
|
|
402
|
+
useEffect(() => {
|
|
545
403
|
if (defaultImage) {
|
|
546
404
|
setAvatar(Object.assign({}, defaultImage));
|
|
547
405
|
}
|
|
548
406
|
}, [defaultImage]);
|
|
549
407
|
//渲染上传列表
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
});
|
|
560
|
-
};
|
|
408
|
+
const renderUploadList = () => showUploadList && jsx(UploadList, {
|
|
409
|
+
listType: 'picture-card',
|
|
410
|
+
readonly: readonly,
|
|
411
|
+
items: uploadFileList,
|
|
412
|
+
showRemoveIcon: showRemoveIcon,
|
|
413
|
+
removeIcon: removeIcon,
|
|
414
|
+
onRemove: handleRemove,
|
|
415
|
+
itemRender: itemRender
|
|
416
|
+
});
|
|
561
417
|
//渲染内容
|
|
562
|
-
|
|
418
|
+
const renderUploadContent = () => {
|
|
563
419
|
var _a;
|
|
564
420
|
if (!showUploadList && avatar.imageUrl && !showLoading) {
|
|
565
421
|
return jsxs("div", Object.assign({
|
|
@@ -594,7 +450,7 @@ var ImageUpload = function ImageUpload(props) {
|
|
|
594
450
|
});
|
|
595
451
|
};
|
|
596
452
|
//渲染上传控件
|
|
597
|
-
|
|
453
|
+
const renderUploadSelector = () => {
|
|
598
454
|
if (readonly) return null;
|
|
599
455
|
return jsxs("div", Object.assign({
|
|
600
456
|
className: clsx('upload-image-select', showLoading && 'upload-image-select-loading')
|
|
@@ -622,7 +478,7 @@ var ImageUpload = function ImageUpload(props) {
|
|
|
622
478
|
};
|
|
623
479
|
|
|
624
480
|
//Dragger upload
|
|
625
|
-
|
|
481
|
+
const Dragger = props => {
|
|
626
482
|
return jsx(Upload, Object.assign({}, props, {
|
|
627
483
|
type: 'drag'
|
|
628
484
|
}));
|
|
@@ -787,336 +643,266 @@ var css_248z$1 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/4/20
|
|
|
787
643
|
styleInject(css_248z$1);
|
|
788
644
|
|
|
789
645
|
//图片裁剪组件
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
aspect =
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
modalCancel = props.modalCancel,
|
|
813
|
-
onModalOk = props.onModalOk,
|
|
814
|
-
onModalCancel = props.onModalCancel,
|
|
815
|
-
beforeCrop = props.beforeCrop,
|
|
816
|
-
onUploadFail = props.onUploadFail,
|
|
817
|
-
cropperProps = props.cropperProps,
|
|
818
|
-
children = props.children,
|
|
819
|
-
_props$fixedCropSize = props.fixedCropSize,
|
|
820
|
-
fixedCropSize = _props$fixedCropSize === void 0 ? {
|
|
646
|
+
const ImgCrop = /*#__PURE__*/forwardRef((props, ref) => {
|
|
647
|
+
const {
|
|
648
|
+
aspect = 1,
|
|
649
|
+
shape = 'rect',
|
|
650
|
+
grid = false,
|
|
651
|
+
quality = 0.4,
|
|
652
|
+
fillColor = 'transparent',
|
|
653
|
+
zoom = true,
|
|
654
|
+
rotate = false,
|
|
655
|
+
minZoom = 1,
|
|
656
|
+
maxZoom = 3,
|
|
657
|
+
modalTitle,
|
|
658
|
+
modalWidth,
|
|
659
|
+
modalOk,
|
|
660
|
+
modalCancel,
|
|
661
|
+
onModalOk,
|
|
662
|
+
onModalCancel,
|
|
663
|
+
beforeCrop,
|
|
664
|
+
onUploadFail,
|
|
665
|
+
cropperProps,
|
|
666
|
+
children,
|
|
667
|
+
fixedCropSize = {
|
|
821
668
|
width: 120,
|
|
822
669
|
height: 120
|
|
823
|
-
}
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
var resolveRef = useRef();
|
|
832
|
-
var rejectRef = useRef();
|
|
670
|
+
}
|
|
671
|
+
} = props;
|
|
672
|
+
const intl = useFormatMessage('Upload', localeJson);
|
|
673
|
+
const [image, setImage] = useState('');
|
|
674
|
+
const fileRef = useRef();
|
|
675
|
+
const beforeUploadRef = useRef();
|
|
676
|
+
const resolveRef = useRef();
|
|
677
|
+
const rejectRef = useRef();
|
|
833
678
|
//存储回调
|
|
834
|
-
|
|
679
|
+
const cbRef = useRef({});
|
|
835
680
|
cbRef.current.onModalOk = onModalOk;
|
|
836
681
|
cbRef.current.onModalCancel = onModalCancel;
|
|
837
682
|
cbRef.current.beforeCrop = beforeCrop;
|
|
838
683
|
cbRef.current.onUploadFail = onUploadFail;
|
|
839
|
-
|
|
684
|
+
const easyCropRef = useRef({});
|
|
840
685
|
//上传组件
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
686
|
+
const uploadComponent = useMemo(() => {
|
|
687
|
+
const upload = Array.isArray(children) ? children[0] : children;
|
|
688
|
+
const _a = upload.props,
|
|
689
|
+
{
|
|
690
|
+
beforeUpload,
|
|
691
|
+
accept
|
|
692
|
+
} = _a,
|
|
846
693
|
restUploadProps = __rest(_a, ["beforeUpload", "accept"]);
|
|
847
694
|
beforeUploadRef.current = beforeUpload;
|
|
848
695
|
return Object.assign(Object.assign({}, upload), {
|
|
849
696
|
props: Object.assign(Object.assign({}, restUploadProps), {
|
|
850
697
|
accept: accept || 'image/*',
|
|
851
|
-
beforeUpload:
|
|
852
|
-
return new Promise(
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
return
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
var flag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
878
|
-
var _a, _b;
|
|
879
|
-
(_b = (_a = cbRef.current).onModalOk) === null || _b === void 0 ? void 0 : _b.call(_a, newFile);
|
|
880
|
-
if (!flag) return resolve({
|
|
881
|
-
cropFile: newFile,
|
|
882
|
-
isUpload: flag
|
|
883
|
-
});
|
|
884
|
-
resolve(newFile);
|
|
885
|
-
};
|
|
886
|
-
rejectRef.current = function (uploadErr) {
|
|
887
|
-
var _a, _b;
|
|
888
|
-
(_b = (_a = cbRef.current).onUploadFail) === null || _b === void 0 ? void 0 : _b.call(_a, uploadErr);
|
|
889
|
-
reject(uploadErr);
|
|
890
|
-
};
|
|
891
|
-
reader = new FileReader();
|
|
892
|
-
reader.addEventListener('load', function () {
|
|
893
|
-
return typeof reader.result === 'string' && setImage(reader.result);
|
|
894
|
-
});
|
|
895
|
-
reader.readAsDataURL(file);
|
|
896
|
-
case 14:
|
|
897
|
-
case "end":
|
|
898
|
-
return _context.stop();
|
|
899
|
-
}
|
|
900
|
-
}, _callee);
|
|
901
|
-
}));
|
|
902
|
-
});
|
|
698
|
+
beforeUpload: (file, fileList) => {
|
|
699
|
+
return new Promise((resolve, reject) => __awaiter(void 0, void 0, void 0, function* () {
|
|
700
|
+
if (cbRef.current.beforeCrop && !(yield cbRef.current.beforeCrop(file, fileList))) {
|
|
701
|
+
reject();
|
|
702
|
+
return;
|
|
703
|
+
}
|
|
704
|
+
fileRef.current = file;
|
|
705
|
+
resolveRef.current = function (newFile) {
|
|
706
|
+
let flag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
707
|
+
var _a, _b;
|
|
708
|
+
(_b = (_a = cbRef.current).onModalOk) === null || _b === void 0 ? void 0 : _b.call(_a, newFile);
|
|
709
|
+
if (!flag) return resolve({
|
|
710
|
+
cropFile: newFile,
|
|
711
|
+
isUpload: flag
|
|
712
|
+
});
|
|
713
|
+
resolve(newFile);
|
|
714
|
+
};
|
|
715
|
+
rejectRef.current = uploadErr => {
|
|
716
|
+
var _a, _b;
|
|
717
|
+
(_b = (_a = cbRef.current).onUploadFail) === null || _b === void 0 ? void 0 : _b.call(_a, uploadErr);
|
|
718
|
+
reject(uploadErr);
|
|
719
|
+
};
|
|
720
|
+
const reader = new FileReader();
|
|
721
|
+
reader.addEventListener('load', () => typeof reader.result === 'string' && setImage(reader.result));
|
|
722
|
+
reader.readAsDataURL(file);
|
|
723
|
+
}));
|
|
903
724
|
}
|
|
904
725
|
})
|
|
905
726
|
});
|
|
906
727
|
}, [children]);
|
|
907
728
|
//modal 关闭后操作
|
|
908
|
-
|
|
729
|
+
const onClose = () => {
|
|
909
730
|
setImage('');
|
|
910
731
|
easyCropRef.current.setZoomVal(INIT_ZOOM);
|
|
911
732
|
easyCropRef.current.setRotateVal(INIT_ROTATE);
|
|
912
733
|
};
|
|
913
734
|
//modal cancel
|
|
914
|
-
|
|
735
|
+
const onCancel = useCallback(() => {
|
|
915
736
|
var _a, _b;
|
|
916
737
|
(_b = (_a = cbRef.current).onModalCancel) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
917
738
|
onClose();
|
|
918
739
|
}, []);
|
|
919
740
|
//modal ok
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
case 14:
|
|
1050
|
-
if (!(res && res instanceof Promise)) {
|
|
1051
|
-
_context2.next = 27;
|
|
1052
|
-
break;
|
|
1053
|
-
}
|
|
1054
|
-
_context2.prev = 15;
|
|
1055
|
-
_context2.next = 18;
|
|
1056
|
-
return res;
|
|
1057
|
-
case 18:
|
|
1058
|
-
passedFile = _context2.sent;
|
|
1059
|
-
if (!(passedFile instanceof File || passedFile instanceof Blob)) {
|
|
1060
|
-
_context2.next = 21;
|
|
1061
|
-
break;
|
|
1062
|
-
}
|
|
1063
|
-
return _context2.abrupt("return", (_d = resolveRef.current) === null || _d === void 0 ? void 0 : _d.call(resolveRef, passedFile));
|
|
1064
|
-
case 21:
|
|
1065
|
-
(_e = resolveRef.current) === null || _e === void 0 ? void 0 : _e.call(resolveRef, changeFile, passedFile);
|
|
1066
|
-
_context2.next = 27;
|
|
1067
|
-
break;
|
|
1068
|
-
case 24:
|
|
1069
|
-
_context2.prev = 24;
|
|
1070
|
-
_context2.t0 = _context2["catch"](15);
|
|
1071
|
-
(_f = rejectRef.current) === null || _f === void 0 ? void 0 : _f.call(rejectRef, _context2.t0);
|
|
1072
|
-
case 27:
|
|
1073
|
-
case "end":
|
|
1074
|
-
return _context2.stop();
|
|
1075
|
-
}
|
|
1076
|
-
}, _callee2, null, [[15, 24]]);
|
|
1077
|
-
}));
|
|
1078
|
-
};
|
|
1079
|
-
canvas.toBlob(onBlob, type, quality);
|
|
1080
|
-
case 11:
|
|
1081
|
-
case "end":
|
|
1082
|
-
return _context3.stop();
|
|
741
|
+
const onOk = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
|
742
|
+
onClose();
|
|
743
|
+
const canvas = document.createElement('canvas');
|
|
744
|
+
const ctx = canvas.getContext('2d');
|
|
745
|
+
const imgSource = document.querySelector(".".concat(PREFIX, "-media"));
|
|
746
|
+
const {
|
|
747
|
+
width: cropWidth,
|
|
748
|
+
height: cropHeight,
|
|
749
|
+
x: cropX,
|
|
750
|
+
y: cropY
|
|
751
|
+
} = easyCropRef.current.cropPixelsRef.current;
|
|
752
|
+
if (rotate && easyCropRef.current.rotateVal !== INIT_ROTATE) {
|
|
753
|
+
const {
|
|
754
|
+
naturalWidth: imgWidth,
|
|
755
|
+
naturalHeight: imgHeight
|
|
756
|
+
} = imgSource;
|
|
757
|
+
const angle = easyCropRef.current.rotateVal * (Math.PI / 180);
|
|
758
|
+
// get container for rotated image
|
|
759
|
+
const sine = Math.abs(Math.sin(angle));
|
|
760
|
+
const cosine = Math.abs(Math.cos(angle));
|
|
761
|
+
const squareWidth = imgWidth * cosine + imgHeight * sine;
|
|
762
|
+
const squareHeight = imgHeight * cosine + imgWidth * sine;
|
|
763
|
+
canvas.width = squareWidth;
|
|
764
|
+
canvas.height = squareHeight;
|
|
765
|
+
ctx.fillStyle = fillColor;
|
|
766
|
+
ctx.fillRect(0, 0, squareWidth, squareHeight);
|
|
767
|
+
// rotate container
|
|
768
|
+
const squareHalfWidth = squareWidth / 2;
|
|
769
|
+
const squareHalfHeight = squareHeight / 2;
|
|
770
|
+
ctx.translate(squareHalfWidth, squareHalfHeight);
|
|
771
|
+
ctx.rotate(angle);
|
|
772
|
+
ctx.translate(-squareHalfWidth, -squareHalfHeight);
|
|
773
|
+
// draw rotated image
|
|
774
|
+
const imgX = (squareWidth - imgWidth) / 2;
|
|
775
|
+
const imgY = (squareHeight - imgHeight) / 2;
|
|
776
|
+
ctx.drawImage(imgSource, 0, 0, imgWidth, imgHeight, imgX, imgY, imgWidth, imgHeight);
|
|
777
|
+
// crop rotated image
|
|
778
|
+
const imgData = ctx.getImageData(0, 0, squareWidth, squareHeight);
|
|
779
|
+
canvas.width = cropWidth;
|
|
780
|
+
canvas.height = cropHeight;
|
|
781
|
+
ctx.putImageData(imgData, -cropX, -cropY);
|
|
782
|
+
} else {
|
|
783
|
+
canvas.width = cropWidth;
|
|
784
|
+
canvas.height = cropHeight;
|
|
785
|
+
ctx.fillStyle = fillColor;
|
|
786
|
+
ctx.fillRect(0, 0, cropWidth, cropHeight);
|
|
787
|
+
ctx.drawImage(imgSource, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
|
|
788
|
+
}
|
|
789
|
+
//裁剪之后改变图片大小
|
|
790
|
+
const changeImageSizeAfterCrop = newFile => {
|
|
791
|
+
return new Promise(resolve => {
|
|
792
|
+
const {
|
|
793
|
+
name,
|
|
794
|
+
type,
|
|
795
|
+
uid
|
|
796
|
+
} = newFile;
|
|
797
|
+
const {
|
|
798
|
+
width,
|
|
799
|
+
height
|
|
800
|
+
} = fixedCropSize; //固定裁剪大小
|
|
801
|
+
const changeCanvas = document.createElement('canvas');
|
|
802
|
+
const changeCtx = changeCanvas.getContext('2d');
|
|
803
|
+
const img = new Image();
|
|
804
|
+
img.onload = () => {
|
|
805
|
+
changeCanvas.width = width;
|
|
806
|
+
changeCanvas.height = height;
|
|
807
|
+
changeCtx.drawImage(img, 0, 0, width, height);
|
|
808
|
+
changeCanvas.toBlob(cBlob => {
|
|
809
|
+
const changeFile = Object.assign(new File([cBlob], name, {
|
|
810
|
+
type
|
|
811
|
+
}), {
|
|
812
|
+
uid
|
|
813
|
+
});
|
|
814
|
+
resolve(changeFile);
|
|
815
|
+
}, type, quality);
|
|
816
|
+
};
|
|
817
|
+
img.onerror = () => {
|
|
818
|
+
resolve(newFile);
|
|
819
|
+
};
|
|
820
|
+
const fileReader = new FileReader();
|
|
821
|
+
fileReader.onload = () => {
|
|
822
|
+
img.src = fileReader.result;
|
|
823
|
+
};
|
|
824
|
+
fileReader.onerror = () => {
|
|
825
|
+
resolve(newFile);
|
|
826
|
+
};
|
|
827
|
+
fileReader.readAsDataURL(newFile);
|
|
828
|
+
});
|
|
829
|
+
};
|
|
830
|
+
// get the new image
|
|
831
|
+
let {
|
|
832
|
+
type,
|
|
833
|
+
name,
|
|
834
|
+
uid
|
|
835
|
+
} = fileRef.current;
|
|
836
|
+
if (/svg/gi.test(type)) {
|
|
837
|
+
//svg 转为 png
|
|
838
|
+
type = 'image/png';
|
|
839
|
+
const idx = name.lastIndexOf('.');
|
|
840
|
+
if (idx > -1) name = "".concat(name.substring(0, idx), ".png");
|
|
841
|
+
}
|
|
842
|
+
//转为blob
|
|
843
|
+
const onBlob = blob => __awaiter(void 0, void 0, void 0, function* () {
|
|
844
|
+
var _a, _b, _c, _d, _e, _f;
|
|
845
|
+
const newFile = Object.assign(new File([blob], name, {
|
|
846
|
+
type
|
|
847
|
+
}), {
|
|
848
|
+
uid
|
|
849
|
+
});
|
|
850
|
+
const changeFile = yield changeImageSizeAfterCrop(newFile);
|
|
851
|
+
if (typeof beforeUploadRef.current !== 'function') {
|
|
852
|
+
return (_a = resolveRef.current) === null || _a === void 0 ? void 0 : _a.call(resolveRef, changeFile);
|
|
853
|
+
}
|
|
854
|
+
const res = beforeUploadRef.current(changeFile, [changeFile]);
|
|
855
|
+
if (typeof res !== 'boolean' && !res) {
|
|
856
|
+
console.error('beforeUpload must return a boolean or Promise');
|
|
857
|
+
return;
|
|
858
|
+
}
|
|
859
|
+
if (res === true) return (_b = resolveRef.current) === null || _b === void 0 ? void 0 : _b.call(resolveRef, changeFile);
|
|
860
|
+
if (res === false) return (_c = resolveRef.current) === null || _c === void 0 ? void 0 : _c.call(resolveRef, changeFile, false);
|
|
861
|
+
if (res && res instanceof Promise) {
|
|
862
|
+
try {
|
|
863
|
+
const passedFile = yield res;
|
|
864
|
+
if (passedFile instanceof File || passedFile instanceof Blob) {
|
|
865
|
+
return (_d = resolveRef.current) === null || _d === void 0 ? void 0 : _d.call(resolveRef, passedFile);
|
|
866
|
+
}
|
|
867
|
+
(_e = resolveRef.current) === null || _e === void 0 ? void 0 : _e.call(resolveRef, changeFile, passedFile);
|
|
868
|
+
} catch (err) {
|
|
869
|
+
(_f = rejectRef.current) === null || _f === void 0 ? void 0 : _f.call(rejectRef, err);
|
|
1083
870
|
}
|
|
1084
|
-
}
|
|
1085
|
-
}));
|
|
1086
|
-
}, [fillColor, quality, rotate]);
|
|
1087
|
-
//img crop 组件
|
|
1088
|
-
var getComponent = function getComponent(titleOfModal) {
|
|
1089
|
-
return jsxs(Fragment, {
|
|
1090
|
-
children: [uploadComponent, image && jsx(Modal, Object.assign({
|
|
1091
|
-
open: true,
|
|
1092
|
-
className: "".concat(PREFIX, "-modal"),
|
|
1093
|
-
size: 'md',
|
|
1094
|
-
title: titleOfModal !== null && titleOfModal !== void 0 ? titleOfModal : intl({
|
|
1095
|
-
id: 'editImage'
|
|
1096
|
-
}),
|
|
1097
|
-
onOk: onOk,
|
|
1098
|
-
onCancel: onCancel,
|
|
1099
|
-
okText: modalOk,
|
|
1100
|
-
cancelText: modalCancel,
|
|
1101
|
-
contentWidth: modalWidth
|
|
1102
|
-
}, {
|
|
1103
|
-
children: jsx(EasyCrop$1, {
|
|
1104
|
-
ref: easyCropRef,
|
|
1105
|
-
cropperRef: ref,
|
|
1106
|
-
image: image,
|
|
1107
|
-
aspect: aspect,
|
|
1108
|
-
shape: shape,
|
|
1109
|
-
grid: grid,
|
|
1110
|
-
zoom: zoom,
|
|
1111
|
-
rotate: rotate,
|
|
1112
|
-
minZoom: minZoom,
|
|
1113
|
-
maxZoom: maxZoom,
|
|
1114
|
-
fixedCropSize: fixedCropSize,
|
|
1115
|
-
cropperProps: cropperProps
|
|
1116
|
-
})
|
|
1117
|
-
}))]
|
|
871
|
+
}
|
|
1118
872
|
});
|
|
1119
|
-
|
|
873
|
+
canvas.toBlob(onBlob, type, quality);
|
|
874
|
+
}), [fillColor, quality, rotate]);
|
|
875
|
+
//img crop 组件
|
|
876
|
+
const getComponent = titleOfModal => jsxs(Fragment, {
|
|
877
|
+
children: [uploadComponent, image && jsx(Modal, Object.assign({
|
|
878
|
+
open: true,
|
|
879
|
+
className: "".concat(PREFIX, "-modal"),
|
|
880
|
+
size: 'md',
|
|
881
|
+
title: titleOfModal !== null && titleOfModal !== void 0 ? titleOfModal : intl({
|
|
882
|
+
id: 'editImage'
|
|
883
|
+
}),
|
|
884
|
+
onOk: onOk,
|
|
885
|
+
onCancel: onCancel,
|
|
886
|
+
okText: modalOk,
|
|
887
|
+
cancelText: modalCancel,
|
|
888
|
+
contentWidth: modalWidth
|
|
889
|
+
}, {
|
|
890
|
+
children: jsx(EasyCrop$1, {
|
|
891
|
+
ref: easyCropRef,
|
|
892
|
+
cropperRef: ref,
|
|
893
|
+
image: image,
|
|
894
|
+
aspect: aspect,
|
|
895
|
+
shape: shape,
|
|
896
|
+
grid: grid,
|
|
897
|
+
zoom: zoom,
|
|
898
|
+
rotate: rotate,
|
|
899
|
+
minZoom: minZoom,
|
|
900
|
+
maxZoom: maxZoom,
|
|
901
|
+
fixedCropSize: fixedCropSize,
|
|
902
|
+
cropperProps: cropperProps
|
|
903
|
+
})
|
|
904
|
+
}))]
|
|
905
|
+
});
|
|
1120
906
|
return jsx(Fragment, {
|
|
1121
907
|
children: getComponent(modalTitle)
|
|
1122
908
|
});
|
|
@@ -1126,121 +912,101 @@ var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/11 下
|
|
|
1126
912
|
styleInject(css_248z);
|
|
1127
913
|
|
|
1128
914
|
//upload
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
setUploadFileList = _useState2[1]; //文件列表
|
|
1169
|
-
var _useState3 = useState(false),
|
|
1170
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
1171
|
-
showLoading = _useState4[0],
|
|
1172
|
-
setShowLoading = _useState4[1]; //upload loading
|
|
1173
|
-
var _useState5 = useState(false),
|
|
1174
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
1175
|
-
errTip = _useState6[0],
|
|
1176
|
-
setErrTip = _useState6[1]; //upload error tip
|
|
1177
|
-
var _ref = typeof showUploadList === 'boolean' ? {} : showUploadList,
|
|
1178
|
-
showRemoveIcon = _ref.showRemoveIcon,
|
|
1179
|
-
removeIcon = _ref.removeIcon; //显示上传列表
|
|
1180
|
-
var _ref2 = typeof showUploadError === 'boolean' ? {} : showUploadError,
|
|
1181
|
-
_ref2$uploadErrorMsg = _ref2.uploadErrorMsg,
|
|
1182
|
-
uploadErrorMsg = _ref2$uploadErrorMsg === void 0 ? intl({
|
|
915
|
+
const InternalUpload = props => {
|
|
916
|
+
const {
|
|
917
|
+
type = 'select',
|
|
918
|
+
className,
|
|
919
|
+
style,
|
|
920
|
+
onStart,
|
|
921
|
+
onSuccess,
|
|
922
|
+
onError,
|
|
923
|
+
onProgress,
|
|
924
|
+
onRemove,
|
|
925
|
+
beforeUpload,
|
|
926
|
+
onChange,
|
|
927
|
+
onDrop,
|
|
928
|
+
defaultFileList = [],
|
|
929
|
+
fileList,
|
|
930
|
+
showUploadList = true,
|
|
931
|
+
maxCount,
|
|
932
|
+
children = null,
|
|
933
|
+
itemRender,
|
|
934
|
+
showUploadError = true,
|
|
935
|
+
size = 'large',
|
|
936
|
+
stash = false,
|
|
937
|
+
uploading = true,
|
|
938
|
+
showLoading: showLoadingProp = true,
|
|
939
|
+
loading = false,
|
|
940
|
+
dragArea,
|
|
941
|
+
disabledTooltip
|
|
942
|
+
} = props,
|
|
943
|
+
restProps = __rest(props, ["type", "className", "style", "onStart", "onSuccess", "onError", "onProgress", "onRemove", "beforeUpload", "onChange", "onDrop", "defaultFileList", "fileList", "showUploadList", "maxCount", "children", "itemRender", "showUploadError", "size", "stash", "uploading", "showLoading", "loading", "dragArea", "disabledTooltip"]);
|
|
944
|
+
const intl = useFormatMessage('Upload', localeJson);
|
|
945
|
+
const [uploadFileList, setUploadFileList] = useState(defaultFileList); //文件列表
|
|
946
|
+
const [showLoading, setShowLoading] = useState(false); //upload loading
|
|
947
|
+
const [errTip, setErrTip] = useState(false); //upload error tip
|
|
948
|
+
const {
|
|
949
|
+
showRemoveIcon,
|
|
950
|
+
removeIcon
|
|
951
|
+
} = typeof showUploadList === 'boolean' ? {} : showUploadList; //显示上传列表
|
|
952
|
+
const {
|
|
953
|
+
uploadErrorMsg = intl({
|
|
1183
954
|
id: 'uploadError'
|
|
1184
|
-
})
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
setDragState = _useState8[1]; //拖拽状态
|
|
1191
|
-
var curFileRef = useRef(); //正上传文件
|
|
1192
|
-
var recordNonAcceptFileRef = useRef(); //记录非accept推荐文件
|
|
955
|
+
}),
|
|
956
|
+
leaveDelay = 3000
|
|
957
|
+
} = typeof showUploadError === 'boolean' ? {} : showUploadError; //错误信息提示
|
|
958
|
+
const [dragState, setDragState] = useState('drop'); //拖拽状态
|
|
959
|
+
const curFileRef = useRef(); //正上传文件
|
|
960
|
+
const recordNonAcceptFileRef = useRef(); //记录非accept推荐文件
|
|
1193
961
|
//复写属性
|
|
1194
|
-
|
|
1195
|
-
beforeUpload
|
|
1196
|
-
if (restProps.action &&
|
|
962
|
+
const overrideProps = Object.assign(Object.assign({}, restProps), {
|
|
963
|
+
beforeUpload(file, fileList) {
|
|
964
|
+
if (restProps.action && showLoadingProp && uploading) {
|
|
1197
965
|
setShowLoading(true);
|
|
1198
966
|
curFileRef.current = file;
|
|
1199
967
|
}
|
|
1200
|
-
|
|
968
|
+
const val = beforeUpload === null || beforeUpload === void 0 ? void 0 : beforeUpload(file, fileList);
|
|
1201
969
|
if (val === false) {
|
|
1202
970
|
setShowLoading(false);
|
|
1203
971
|
curFileRef.current = null;
|
|
1204
972
|
return false;
|
|
1205
973
|
} else if (val instanceof Promise) return val;else return true;
|
|
1206
974
|
},
|
|
1207
|
-
onStart
|
|
1208
|
-
|
|
975
|
+
onStart(file) {
|
|
976
|
+
onStart === null || onStart === void 0 ? void 0 : onStart(file);
|
|
1209
977
|
},
|
|
1210
|
-
onSuccess
|
|
978
|
+
onSuccess(response, file, xhr) {
|
|
1211
979
|
setShowLoading(false);
|
|
1212
980
|
curFileRef.current = null;
|
|
1213
981
|
errTip && showErrTip(false);
|
|
1214
|
-
|
|
982
|
+
const nextFileList = updateFileList(file);
|
|
1215
983
|
onInternalChange(nextFileList);
|
|
1216
|
-
|
|
984
|
+
onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(response, file, xhr);
|
|
1217
985
|
},
|
|
1218
|
-
onError
|
|
986
|
+
onError(error, response, file) {
|
|
1219
987
|
setShowLoading(false);
|
|
1220
988
|
curFileRef.current = null;
|
|
1221
989
|
showErrTip(!!showUploadError);
|
|
1222
|
-
|
|
990
|
+
onError === null || onError === void 0 ? void 0 : onError(error, response, file);
|
|
1223
991
|
},
|
|
1224
|
-
onProgress
|
|
1225
|
-
|
|
992
|
+
onProgress(e, file) {
|
|
993
|
+
onProgress === null || onProgress === void 0 ? void 0 : onProgress(e, file);
|
|
1226
994
|
},
|
|
1227
|
-
onBatchStart
|
|
995
|
+
onBatchStart(fileList) {
|
|
1228
996
|
if (stash) {
|
|
1229
|
-
|
|
1230
|
-
return _.file;
|
|
1231
|
-
});
|
|
997
|
+
const arr = fileList.map(_ => _.file);
|
|
1232
998
|
if (type === 'drag' && restProps.accept && recordNonAcceptFileRef.current) {
|
|
1233
999
|
arr.push(recordNonAcceptFileRef.current);
|
|
1234
1000
|
recordNonAcceptFileRef.current = null;
|
|
1235
1001
|
}
|
|
1236
|
-
|
|
1002
|
+
const mList = mergedFileList(arr);
|
|
1237
1003
|
onInternalChange(mList);
|
|
1238
1004
|
}
|
|
1239
1005
|
}
|
|
1240
1006
|
});
|
|
1241
1007
|
//内部变化
|
|
1242
|
-
|
|
1243
|
-
|
|
1008
|
+
const onInternalChange = changedFileList => {
|
|
1009
|
+
let cloneList = [...changedFileList];
|
|
1244
1010
|
// Cut to match count
|
|
1245
1011
|
if (maxCount === 1) {
|
|
1246
1012
|
cloneList = cloneList.slice(-1);
|
|
@@ -1251,9 +1017,9 @@ var InternalUpload = function InternalUpload(props) {
|
|
|
1251
1017
|
setUploadFileList(cloneList);
|
|
1252
1018
|
};
|
|
1253
1019
|
//更新文件列表
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1020
|
+
const updateFileList = file => {
|
|
1021
|
+
const cloneList = [...uploadFileList];
|
|
1022
|
+
const fileObj = Object.assign(Object.assign({}, file), {
|
|
1257
1023
|
lastModified: file.lastModified,
|
|
1258
1024
|
lastModifiedDate: file.lastModifiedDate,
|
|
1259
1025
|
name: file.name,
|
|
@@ -1265,9 +1031,9 @@ var InternalUpload = function InternalUpload(props) {
|
|
|
1265
1031
|
return cloneList.concat(fileObj);
|
|
1266
1032
|
};
|
|
1267
1033
|
//合并文件列表
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1034
|
+
const mergedFileList = fileList => {
|
|
1035
|
+
const cloneList = [...uploadFileList];
|
|
1036
|
+
const newFileList = fileList.map(file => {
|
|
1271
1037
|
return Object.assign(Object.assign({}, file), {
|
|
1272
1038
|
lastModified: file.lastModified,
|
|
1273
1039
|
lastModifiedDate: file.lastModifiedDate,
|
|
@@ -1281,19 +1047,17 @@ var InternalUpload = function InternalUpload(props) {
|
|
|
1281
1047
|
return cloneList.concat(newFileList);
|
|
1282
1048
|
};
|
|
1283
1049
|
//删除文件
|
|
1284
|
-
|
|
1285
|
-
Promise.resolve(typeof onRemove === 'function' ? onRemove(file) : onRemove).then(
|
|
1050
|
+
const handleRemove = file => {
|
|
1051
|
+
Promise.resolve(typeof onRemove === 'function' ? onRemove(file) : onRemove).then(ret => {
|
|
1286
1052
|
// Prevent removing file
|
|
1287
1053
|
if (ret === false) return;
|
|
1288
|
-
|
|
1289
|
-
return _.uid === file.uid;
|
|
1290
|
-
});
|
|
1054
|
+
const idx = uploadFileList.findIndex(_ => _.uid === file.uid);
|
|
1291
1055
|
if (idx > -1) uploadFileList.splice(idx, 1);
|
|
1292
1056
|
onInternalChange(uploadFileList);
|
|
1293
1057
|
});
|
|
1294
1058
|
};
|
|
1295
1059
|
//拖拽区域
|
|
1296
|
-
|
|
1060
|
+
const onFileDrop = e => {
|
|
1297
1061
|
var _a, _b;
|
|
1298
1062
|
e.preventDefault();
|
|
1299
1063
|
e.stopPropagation();
|
|
@@ -1302,9 +1066,9 @@ var InternalUpload = function InternalUpload(props) {
|
|
|
1302
1066
|
onDrop === null || onDrop === void 0 ? void 0 : onDrop(e);
|
|
1303
1067
|
//拖拽且设置accept
|
|
1304
1068
|
if (type === 'drag' && restProps.accept) {
|
|
1305
|
-
|
|
1069
|
+
const dropFile = (_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0];
|
|
1306
1070
|
if (dropFile) {
|
|
1307
|
-
|
|
1071
|
+
const reg = new RegExp(restProps.accept, 'ig');
|
|
1308
1072
|
if (!reg.test(dropFile.type)) {
|
|
1309
1073
|
recordNonAcceptFileRef.current = dropFile;
|
|
1310
1074
|
}
|
|
@@ -1313,33 +1077,34 @@ var InternalUpload = function InternalUpload(props) {
|
|
|
1313
1077
|
}
|
|
1314
1078
|
};
|
|
1315
1079
|
//显示错误提示
|
|
1316
|
-
|
|
1080
|
+
const showErrTip = flag => {
|
|
1317
1081
|
setErrTip(flag);
|
|
1318
1082
|
if (leaveDelay < 0) return;
|
|
1319
|
-
setTimeout(
|
|
1083
|
+
setTimeout(() => {
|
|
1320
1084
|
setErrTip(false);
|
|
1321
1085
|
}, leaveDelay);
|
|
1322
1086
|
};
|
|
1323
|
-
useEffect(
|
|
1087
|
+
useEffect(() => {
|
|
1324
1088
|
if (fileList) {
|
|
1325
|
-
setUploadFileList(
|
|
1089
|
+
setUploadFileList([...fileList]);
|
|
1326
1090
|
}
|
|
1327
1091
|
}, [fileList]);
|
|
1092
|
+
useEffect(() => {
|
|
1093
|
+
setShowLoading(loading);
|
|
1094
|
+
}, [loading]);
|
|
1328
1095
|
//渲染上传列表
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
});
|
|
1338
|
-
};
|
|
1096
|
+
const renderUploadList = () => showUploadList && jsx(UploadList, {
|
|
1097
|
+
listType: 'text',
|
|
1098
|
+
items: uploadFileList,
|
|
1099
|
+
showRemoveIcon: showRemoveIcon,
|
|
1100
|
+
removeIcon: removeIcon,
|
|
1101
|
+
onRemove: handleRemove,
|
|
1102
|
+
itemRender: itemRender
|
|
1103
|
+
});
|
|
1339
1104
|
//渲染上传按钮
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1105
|
+
const renderButton = () => {
|
|
1106
|
+
let icon = jsx(UploadIcon, {});
|
|
1107
|
+
let text = children;
|
|
1343
1108
|
if (showLoading) {
|
|
1344
1109
|
text = intl({
|
|
1345
1110
|
id: 'uploading'
|
|
@@ -1358,22 +1123,20 @@ var InternalUpload = function InternalUpload(props) {
|
|
|
1358
1123
|
}));
|
|
1359
1124
|
};
|
|
1360
1125
|
//渲染拖拽区域
|
|
1361
|
-
|
|
1126
|
+
const renderDragArea = () => {
|
|
1362
1127
|
var _a;
|
|
1363
|
-
|
|
1364
|
-
|
|
1128
|
+
const icon = jsx(UploadIcon, {});
|
|
1129
|
+
const text = intl({
|
|
1365
1130
|
id: 'clickUploadFile'
|
|
1366
1131
|
});
|
|
1367
|
-
|
|
1132
|
+
const hint = intl({
|
|
1368
1133
|
id: 'dragFileUpload'
|
|
1369
1134
|
});
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
_ref3$areaDesc = _ref3.areaDesc,
|
|
1376
|
-
areaDesc = _ref3$areaDesc === void 0 ? hint : _ref3$areaDesc;
|
|
1135
|
+
let {
|
|
1136
|
+
areaIcon = icon,
|
|
1137
|
+
areaText = text,
|
|
1138
|
+
areaDesc = hint
|
|
1139
|
+
} = dragArea !== null && dragArea !== void 0 ? dragArea : {};
|
|
1377
1140
|
if (showLoading) {
|
|
1378
1141
|
areaIcon = jsx(LoadingIcon, {
|
|
1379
1142
|
className: 'upload-drag-loading'
|
|
@@ -1412,8 +1175,10 @@ var InternalUpload = function InternalUpload(props) {
|
|
|
1412
1175
|
};
|
|
1413
1176
|
//拖拽上传
|
|
1414
1177
|
if (type === 'drag') {
|
|
1415
|
-
|
|
1416
|
-
|
|
1178
|
+
const dragCls = clsx("".concat($prefixCls, "-upload-drag"), className, {
|
|
1179
|
+
["".concat($prefixCls, "-upload-drag-loading")]: showLoading,
|
|
1180
|
+
["".concat($prefixCls, "-upload-drag-hover")]: dragState === 'dragover'
|
|
1181
|
+
});
|
|
1417
1182
|
return jsxs("div", Object.assign({
|
|
1418
1183
|
className: dragCls,
|
|
1419
1184
|
onDrop: onFileDrop,
|
|
@@ -1430,7 +1195,7 @@ var InternalUpload = function InternalUpload(props) {
|
|
|
1430
1195
|
})]
|
|
1431
1196
|
}));
|
|
1432
1197
|
}
|
|
1433
|
-
|
|
1198
|
+
const makeCls = clsx("".concat($prefixCls, "-upload"), className, showLoading && "".concat($prefixCls, "-upload-loading"));
|
|
1434
1199
|
return jsxs("div", Object.assign({
|
|
1435
1200
|
className: makeCls,
|
|
1436
1201
|
style: style
|
|
@@ -1444,7 +1209,7 @@ var InternalUpload = function InternalUpload(props) {
|
|
|
1444
1209
|
})), renderUploadList()]
|
|
1445
1210
|
}));
|
|
1446
1211
|
};
|
|
1447
|
-
|
|
1212
|
+
const Upload = InternalUpload;
|
|
1448
1213
|
Upload.ImageUpload = ImageUpload;
|
|
1449
1214
|
Upload.Dragger = Dragger;
|
|
1450
1215
|
Upload.ImgCrop = ImgCrop;
|