@para-ui/core 4.0.16 → 4.0.18
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/Cascader/index.js +4 -3
- package/ComboSelect/index.js +4 -7
- package/CycleSelector/index.js +3 -1
- package/DatePicker/index.js +2 -1
- package/DynamicMultiBox/index.js +5 -7
- package/Form/index.js +3 -6
- package/FormItem/index.js +3 -6
- package/FunctionModal/index.js +2 -2
- package/Modal/index.js +1 -1
- package/README.md +8 -0
- package/TimePicker/index.js +2 -1
- package/Tree/index.js +5 -8
- package/Upload/index.js +625 -408
- package/_verture/{defineProperty-51493dbe.js → defineProperty-1d116156.js} +2 -10
- package/_verture/{index-0ad6af26.js → index-02b7a0b7.js} +313 -394
- package/_verture/{index-782e05bf.js → index-cc76d8d5.js} +2 -1
- package/_verture/typeof-adeedc13.js +11 -0
- package/index.js +6 -5
- package/package.json +1 -1
- package/umd/CycleSelector.js +1 -1
- package/umd/FunctionModal.js +1 -1
- package/umd/Modal.js +1 -1
- package/umd/Upload.js +1 -1
- /package/_verture/{index-06069532.js → index-10792f39.js} +0 -0
- /package/_verture/{modalContext-b101ffaa.js → modalContext-3ba6ca8f.js} +0 -0
package/Upload/index.js
CHANGED
|
@@ -4,6 +4,10 @@ import { useState, useEffect, useRef, memo, forwardRef, useCallback, useImperati
|
|
|
4
4
|
import RcUpload from 'rc-upload';
|
|
5
5
|
import UploadIcon from '@para-ui/icons/UploadFile';
|
|
6
6
|
import LoadingIcon from '@para-ui/icons/Loading';
|
|
7
|
+
import { _ as _toConsumableArray } from '../_verture/toConsumableArray-8f4c9589.js';
|
|
8
|
+
import { _ as _typeof } from '../_verture/typeof-adeedc13.js';
|
|
9
|
+
import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.js';
|
|
10
|
+
import { r as regenerator } from '../_verture/index-287ae1b3.js';
|
|
7
11
|
import Delete from '@para-ui/icons/Delete';
|
|
8
12
|
import TextIcon from '@para-ui/icons/Text';
|
|
9
13
|
import PhotoIcon from '@para-ui/icons/Photo';
|
|
@@ -14,10 +18,11 @@ import Forbid from '@para-ui/icons/Forbid';
|
|
|
14
18
|
import { u as useFormatMessage } from '../_verture/useFormatMessage-eb13cf56.js';
|
|
15
19
|
import EditOutline from '@para-ui/icons/EditOutline';
|
|
16
20
|
import { Button } from '../Button/index.js';
|
|
17
|
-
import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.js';
|
|
18
21
|
import { Slider } from '../Slider/index.js';
|
|
19
22
|
import Cropper from 'react-easy-crop';
|
|
20
23
|
import { Modal } from '../Modal/index.js';
|
|
24
|
+
import '../_verture/unsupportedIterableToArray-cb478f24.js';
|
|
25
|
+
import '../_verture/typeof-6ec38efd.js';
|
|
21
26
|
import '@para-ui/core/GlobalContext';
|
|
22
27
|
import '@para-ui/icons/LoadingF';
|
|
23
28
|
import '../Tooltip/index.js';
|
|
@@ -30,7 +35,6 @@ import '../_verture/usePopupContainer-635f66f4.js';
|
|
|
30
35
|
import 'dayjs';
|
|
31
36
|
import '@paraview/lib';
|
|
32
37
|
import '../AutoTips/index.js';
|
|
33
|
-
import '../_verture/unsupportedIterableToArray-cb478f24.js';
|
|
34
38
|
import 'rc-slider';
|
|
35
39
|
import 'rc-dialog';
|
|
36
40
|
import '@para-ui/icons/Close';
|
|
@@ -43,41 +47,50 @@ import '@para-ui/icons/CloseCircleF';
|
|
|
43
47
|
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 left: 0;\n top: 50%;\n transform: translateY(-50%);\n z-index: -1;\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 z-index: 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}";
|
|
44
48
|
styleInject(css_248z$4);
|
|
45
49
|
|
|
50
|
+
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; } } }; }
|
|
51
|
+
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); }
|
|
52
|
+
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; }
|
|
46
53
|
//UploadList
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
listType = 'text',
|
|
50
|
-
items =
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
54
|
+
var UploadList = function UploadList(props) {
|
|
55
|
+
var _props$listType = props.listType,
|
|
56
|
+
listType = _props$listType === void 0 ? 'text' : _props$listType,
|
|
57
|
+
_props$items = props.items,
|
|
58
|
+
items = _props$items === void 0 ? [] : _props$items,
|
|
59
|
+
onRemove = props.onRemove,
|
|
60
|
+
_props$showRemoveIcon = props.showRemoveIcon,
|
|
61
|
+
showRemoveIcon = _props$showRemoveIcon === void 0 ? true : _props$showRemoveIcon,
|
|
62
|
+
removeIcon = props.removeIcon,
|
|
63
|
+
itemRender = props.itemRender,
|
|
64
|
+
readonly = props.readonly;
|
|
65
|
+
var _useState = useState([]),
|
|
66
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
67
|
+
uploadList = _useState2[0],
|
|
68
|
+
setUploadList = _useState2[1];
|
|
58
69
|
//处理删除
|
|
59
|
-
|
|
70
|
+
var handleRemove = function handleRemove(file, evt) {
|
|
60
71
|
evt.stopPropagation();
|
|
61
72
|
onRemove === null || onRemove === void 0 ? void 0 : onRemove(file);
|
|
62
73
|
};
|
|
63
74
|
//渲染列表actions
|
|
64
|
-
|
|
75
|
+
var renderActions = function renderActions(file) {
|
|
65
76
|
return showRemoveIcon && !readonly && jsx("span", Object.assign({
|
|
66
77
|
className: 'upload-list-actions',
|
|
67
|
-
onClick:
|
|
78
|
+
onClick: function onClick(evt) {
|
|
79
|
+
return handleRemove(file, evt);
|
|
80
|
+
}
|
|
68
81
|
}, {
|
|
69
82
|
children: removeIcon || jsx(Delete, {})
|
|
70
83
|
}));
|
|
71
84
|
};
|
|
72
85
|
//文件列表 text
|
|
73
|
-
|
|
86
|
+
var renderFileListText = function renderFileListText() {
|
|
74
87
|
if (!(uploadList === null || uploadList === void 0 ? void 0 : uploadList.length)) return null;
|
|
75
|
-
return uploadList.map((file, idx)
|
|
88
|
+
return uploadList.map(function (file, idx) {
|
|
76
89
|
var _a;
|
|
77
90
|
if (itemRender)
|
|
78
91
|
//自定义渲染
|
|
79
92
|
return itemRender(file, uploadList);
|
|
80
|
-
|
|
93
|
+
var isImage = !!((_a = file.type) === null || _a === void 0 ? void 0 : _a.includes('image/'));
|
|
81
94
|
return jsx("div", Object.assign({
|
|
82
95
|
className: 'upload-list-item'
|
|
83
96
|
}, {
|
|
@@ -102,9 +115,9 @@ const UploadList = props => {
|
|
|
102
115
|
});
|
|
103
116
|
};
|
|
104
117
|
//文件列表 picture-card
|
|
105
|
-
|
|
118
|
+
var renderFileListPicture = function renderFileListPicture() {
|
|
106
119
|
if (!(uploadList === null || uploadList === void 0 ? void 0 : uploadList.length)) return null;
|
|
107
|
-
return uploadList.map((file, idx)
|
|
120
|
+
return uploadList.map(function (file, idx) {
|
|
108
121
|
if (itemRender)
|
|
109
122
|
//自定义渲染
|
|
110
123
|
return itemRender(file, uploadList);
|
|
@@ -124,31 +137,84 @@ const UploadList = props => {
|
|
|
124
137
|
});
|
|
125
138
|
};
|
|
126
139
|
//处理文件
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
140
|
+
var handleFileFormat = function handleFileFormat() {
|
|
141
|
+
return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee2() {
|
|
142
|
+
var readerFileAsDataUrl, _iterator, _step, file, dataUrl;
|
|
143
|
+
return regenerator.wrap(function _callee2$(_context2) {
|
|
144
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
145
|
+
case 0:
|
|
146
|
+
if (items === null || items === void 0 ? void 0 : items.length) {
|
|
147
|
+
_context2.next = 2;
|
|
148
|
+
break;
|
|
149
|
+
}
|
|
150
|
+
return _context2.abrupt("return", setUploadList([]));
|
|
151
|
+
case 2:
|
|
152
|
+
//读取file as DataUrl
|
|
153
|
+
readerFileAsDataUrl = function readerFileAsDataUrl(file) {
|
|
154
|
+
return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee() {
|
|
155
|
+
return regenerator.wrap(function _callee$(_context) {
|
|
156
|
+
while (1) switch (_context.prev = _context.next) {
|
|
157
|
+
case 0:
|
|
158
|
+
return _context.abrupt("return", new Promise(function (resolve) {
|
|
159
|
+
var fileReader = new FileReader();
|
|
160
|
+
if (file.originFileObj) {
|
|
161
|
+
fileReader.onload = function () {
|
|
162
|
+
resolve(fileReader.result);
|
|
163
|
+
};
|
|
164
|
+
fileReader.readAsDataURL(file.originFileObj);
|
|
165
|
+
} else resolve('');
|
|
166
|
+
}));
|
|
167
|
+
case 1:
|
|
168
|
+
case "end":
|
|
169
|
+
return _context.stop();
|
|
170
|
+
}
|
|
171
|
+
}, _callee);
|
|
172
|
+
}));
|
|
173
|
+
};
|
|
174
|
+
_iterator = _createForOfIteratorHelper(items);
|
|
175
|
+
_context2.prev = 4;
|
|
176
|
+
_iterator.s();
|
|
177
|
+
case 6:
|
|
178
|
+
if ((_step = _iterator.n()).done) {
|
|
179
|
+
_context2.next = 15;
|
|
180
|
+
break;
|
|
181
|
+
}
|
|
182
|
+
file = _step.value;
|
|
183
|
+
if (!file.originFileObj) {
|
|
184
|
+
_context2.next = 13;
|
|
185
|
+
break;
|
|
186
|
+
}
|
|
187
|
+
_context2.next = 11;
|
|
188
|
+
return readerFileAsDataUrl(file);
|
|
189
|
+
case 11:
|
|
190
|
+
dataUrl = _context2.sent;
|
|
191
|
+
file.dataUrl = dataUrl;
|
|
192
|
+
case 13:
|
|
193
|
+
_context2.next = 6;
|
|
194
|
+
break;
|
|
195
|
+
case 15:
|
|
196
|
+
_context2.next = 20;
|
|
197
|
+
break;
|
|
198
|
+
case 17:
|
|
199
|
+
_context2.prev = 17;
|
|
200
|
+
_context2.t0 = _context2["catch"](4);
|
|
201
|
+
_iterator.e(_context2.t0);
|
|
202
|
+
case 20:
|
|
203
|
+
_context2.prev = 20;
|
|
204
|
+
_iterator.f();
|
|
205
|
+
return _context2.finish(20);
|
|
206
|
+
case 23:
|
|
207
|
+
setUploadList(_toConsumableArray(items));
|
|
208
|
+
case 24:
|
|
209
|
+
case "end":
|
|
210
|
+
return _context2.stop();
|
|
211
|
+
}
|
|
212
|
+
}, _callee2, null, [[4, 17, 20, 23]]);
|
|
213
|
+
}));
|
|
214
|
+
};
|
|
215
|
+
useEffect(function () {
|
|
216
|
+
if (listType === 'picture-card') handleFileFormat();else setUploadList(function (pre) {
|
|
217
|
+
if (items) return _toConsumableArray(items);
|
|
152
218
|
return pre;
|
|
153
219
|
});
|
|
154
220
|
}, [items]);
|
|
@@ -169,7 +235,7 @@ var css_248z$3 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/15
|
|
|
169
235
|
styleInject(css_248z$3);
|
|
170
236
|
|
|
171
237
|
//error tip
|
|
172
|
-
|
|
238
|
+
var ErrorTip = function ErrorTip(props) {
|
|
173
239
|
return jsxs("div", Object.assign({
|
|
174
240
|
className: clsx("".concat($prefixCls, "-upload-error"), props.className)
|
|
175
241
|
}, {
|
|
@@ -202,99 +268,144 @@ var zh = {
|
|
|
202
268
|
};
|
|
203
269
|
|
|
204
270
|
var localeJson = {
|
|
205
|
-
zh,
|
|
206
|
-
en
|
|
271
|
+
zh: zh,
|
|
272
|
+
en: en
|
|
207
273
|
};
|
|
208
274
|
|
|
209
275
|
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}";
|
|
210
276
|
styleInject(css_248z$2);
|
|
211
277
|
|
|
212
278
|
//ImageUpload
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
279
|
+
var ImageUpload = function ImageUpload(props) {
|
|
280
|
+
var className = props.className,
|
|
281
|
+
style = props.style,
|
|
282
|
+
_onStart = props.onStart,
|
|
283
|
+
_onSuccess = props.onSuccess,
|
|
284
|
+
_onError = props.onError,
|
|
285
|
+
_onProgress = props.onProgress,
|
|
286
|
+
onRemove = props.onRemove,
|
|
287
|
+
_beforeUpload = props.beforeUpload,
|
|
288
|
+
onChange = props.onChange,
|
|
289
|
+
_props$defaultFileLis = props.defaultFileList,
|
|
290
|
+
defaultFileList = _props$defaultFileLis === void 0 ? [] : _props$defaultFileLis,
|
|
291
|
+
fileList = props.fileList,
|
|
292
|
+
_props$showUploadList = props.showUploadList,
|
|
293
|
+
showUploadList = _props$showUploadList === void 0 ? true : _props$showUploadList,
|
|
294
|
+
maxCount = props.maxCount,
|
|
295
|
+
_props$children = props.children,
|
|
296
|
+
children = _props$children === void 0 ? null : _props$children,
|
|
297
|
+
itemRender = props.itemRender,
|
|
298
|
+
_props$showUploadErro = props.showUploadError,
|
|
299
|
+
showUploadError = _props$showUploadErro === void 0 ? true : _props$showUploadErro,
|
|
300
|
+
_props$stash = props.stash,
|
|
301
|
+
stash = _props$stash === void 0 ? false : _props$stash,
|
|
302
|
+
_props$uploading = props.uploading,
|
|
303
|
+
uploading = _props$uploading === void 0 ? true : _props$uploading,
|
|
304
|
+
_props$loading = props.loading,
|
|
305
|
+
loading = _props$loading === void 0 ? false : _props$loading,
|
|
306
|
+
_props$showLoading = props.showLoading,
|
|
307
|
+
showLoadingProp = _props$showLoading === void 0 ? false : _props$showLoading,
|
|
308
|
+
defaultImage = props.defaultImage,
|
|
309
|
+
readonly = props.readonly,
|
|
238
310
|
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"]);
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
311
|
+
var intl = useFormatMessage('Upload', localeJson);
|
|
312
|
+
var _useState = useState(defaultFileList),
|
|
313
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
314
|
+
uploadFileList = _useState2[0],
|
|
315
|
+
setUploadFileList = _useState2[1]; //文件列表
|
|
316
|
+
var _useState3 = useState(false),
|
|
317
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
318
|
+
showLoading = _useState4[0],
|
|
319
|
+
setShowLoading = _useState4[1]; //upload loading
|
|
320
|
+
var _useState5 = useState(false),
|
|
321
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
322
|
+
errTip = _useState6[0],
|
|
323
|
+
setErrTip = _useState6[1]; //upload error tip
|
|
324
|
+
var _useState7 = useState({
|
|
325
|
+
imageUrl: ''
|
|
253
326
|
}),
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
327
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
328
|
+
avatar = _useState8[0],
|
|
329
|
+
setAvatar = _useState8[1]; //不显示列表时上传头像
|
|
330
|
+
var _ref = typeof showUploadList === 'boolean' ? {} : showUploadList,
|
|
331
|
+
showRemoveIcon = _ref.showRemoveIcon,
|
|
332
|
+
removeIcon = _ref.removeIcon; //显示上传列表
|
|
333
|
+
var _ref2 = typeof showUploadError === 'boolean' ? {} : showUploadError,
|
|
334
|
+
_ref2$uploadErrorMsg = _ref2.uploadErrorMsg,
|
|
335
|
+
uploadErrorMsg = _ref2$uploadErrorMsg === void 0 ? intl({
|
|
336
|
+
id: 'uploadError'
|
|
337
|
+
}) : _ref2$uploadErrorMsg,
|
|
338
|
+
_ref2$leaveDelay = _ref2.leaveDelay,
|
|
339
|
+
leaveDelay = _ref2$leaveDelay === void 0 ? 2000 : _ref2$leaveDelay; //错误信息提示
|
|
340
|
+
var cropFileRef = useRef(); //裁剪文件
|
|
341
|
+
useEffect(function () {
|
|
258
342
|
setShowLoading(loading);
|
|
259
343
|
}, [loading]);
|
|
260
344
|
//复写属性
|
|
261
|
-
|
|
345
|
+
var overrideProps = Object.assign(Object.assign({
|
|
262
346
|
accept: 'image/*'
|
|
263
347
|
}, restProps), {
|
|
264
|
-
beforeUpload: (file, fileList)
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
348
|
+
beforeUpload: function beforeUpload(file, fileList) {
|
|
349
|
+
return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee() {
|
|
350
|
+
var result;
|
|
351
|
+
return regenerator.wrap(function _callee$(_context) {
|
|
352
|
+
while (1) switch (_context.prev = _context.next) {
|
|
353
|
+
case 0:
|
|
354
|
+
if (restProps.action && showLoadingProp && uploading) setShowLoading(true);
|
|
355
|
+
_context.next = 3;
|
|
356
|
+
return _beforeUpload === null || _beforeUpload === void 0 ? void 0 : _beforeUpload(file, fileList);
|
|
357
|
+
case 3:
|
|
358
|
+
result = _context.sent;
|
|
359
|
+
if (!(result === false)) {
|
|
360
|
+
_context.next = 9;
|
|
361
|
+
break;
|
|
362
|
+
}
|
|
363
|
+
setShowLoading(false);
|
|
364
|
+
return _context.abrupt("return", false);
|
|
365
|
+
case 9:
|
|
366
|
+
if (!(_typeof(result) === 'object' && result)) {
|
|
367
|
+
_context.next = 16;
|
|
368
|
+
break;
|
|
369
|
+
}
|
|
370
|
+
if (!(result instanceof File || result instanceof Blob)) {
|
|
371
|
+
_context.next = 12;
|
|
372
|
+
break;
|
|
373
|
+
}
|
|
374
|
+
return _context.abrupt("return", result);
|
|
375
|
+
case 12:
|
|
376
|
+
cropFileRef.current = result.cropFile;
|
|
377
|
+
return _context.abrupt("return", result.isUpload);
|
|
378
|
+
case 16:
|
|
379
|
+
return _context.abrupt("return", true);
|
|
380
|
+
case 17:
|
|
381
|
+
case "end":
|
|
382
|
+
return _context.stop();
|
|
383
|
+
}
|
|
384
|
+
}, _callee);
|
|
385
|
+
}));
|
|
278
386
|
},
|
|
279
|
-
|
|
387
|
+
onStart: function onStart(file) {
|
|
388
|
+
_onStart === null || _onStart === void 0 ? void 0 : _onStart(file);
|
|
389
|
+
},
|
|
390
|
+
onSuccess: function onSuccess(response, file, xhr) {
|
|
280
391
|
setShowLoading(false);
|
|
281
392
|
errTip && showErrTip(false);
|
|
282
|
-
|
|
393
|
+
var nextFileList = updateFileList(file);
|
|
283
394
|
onInternalChange(nextFileList);
|
|
284
|
-
|
|
395
|
+
_onSuccess === null || _onSuccess === void 0 ? void 0 : _onSuccess(response, file, xhr);
|
|
285
396
|
},
|
|
286
|
-
onError(error, response, file) {
|
|
397
|
+
onError: function onError(error, response, file) {
|
|
287
398
|
setShowLoading(false);
|
|
288
399
|
showErrTip(!!showUploadError);
|
|
289
|
-
|
|
400
|
+
_onError === null || _onError === void 0 ? void 0 : _onError(error, response, file);
|
|
290
401
|
},
|
|
291
|
-
onProgress(e, file) {
|
|
292
|
-
|
|
402
|
+
onProgress: function onProgress(e, file) {
|
|
403
|
+
_onProgress === null || _onProgress === void 0 ? void 0 : _onProgress(e, file);
|
|
293
404
|
},
|
|
294
|
-
onBatchStart(fileList) {
|
|
405
|
+
onBatchStart: function onBatchStart(fileList) {
|
|
295
406
|
if (stash) {
|
|
296
407
|
if (cropFileRef.current) {
|
|
297
|
-
|
|
408
|
+
var idx = fileList.findIndex(function (_) {
|
|
298
409
|
var _a;
|
|
299
410
|
return _.file.uid === ((_a = cropFileRef.current) === null || _a === void 0 ? void 0 : _a.uid);
|
|
300
411
|
});
|
|
@@ -305,40 +416,62 @@ const ImageUpload = props => {
|
|
|
305
416
|
});
|
|
306
417
|
}
|
|
307
418
|
}
|
|
308
|
-
|
|
309
|
-
|
|
419
|
+
var arr = fileList.map(function (_) {
|
|
420
|
+
return _.parsedFile || _.file;
|
|
421
|
+
});
|
|
422
|
+
var mList = mergedFileList(arr);
|
|
310
423
|
onInternalChange(mList);
|
|
311
424
|
}
|
|
312
425
|
}
|
|
313
426
|
});
|
|
314
427
|
//内部变化
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
428
|
+
var onInternalChange = function onInternalChange(changedFileList) {
|
|
429
|
+
return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee2() {
|
|
430
|
+
var cloneList, file, imageUrl;
|
|
431
|
+
return regenerator.wrap(function _callee2$(_context2) {
|
|
432
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
433
|
+
case 0:
|
|
434
|
+
cloneList = _toConsumableArray(changedFileList);
|
|
435
|
+
if (showUploadList) {
|
|
436
|
+
_context2.next = 13;
|
|
437
|
+
break;
|
|
438
|
+
}
|
|
439
|
+
//不显示上传列表
|
|
440
|
+
file = cloneList.slice(-1)[0];
|
|
441
|
+
if (!file) {
|
|
442
|
+
_context2.next = 11;
|
|
443
|
+
break;
|
|
444
|
+
}
|
|
445
|
+
_context2.next = 6;
|
|
446
|
+
return readerFileAsDataUrl(file);
|
|
447
|
+
case 6:
|
|
448
|
+
imageUrl = _context2.sent;
|
|
449
|
+
file.dataUrl = imageUrl;
|
|
450
|
+
avatar.imageUrl = imageUrl;
|
|
451
|
+
avatar.imageName = file.name;
|
|
452
|
+
setAvatar(Object.assign({}, avatar));
|
|
453
|
+
case 11:
|
|
454
|
+
onChange === null || onChange === void 0 ? void 0 : onChange([file]);
|
|
455
|
+
return _context2.abrupt("return");
|
|
456
|
+
case 13:
|
|
457
|
+
if (maxCount === 1) {
|
|
458
|
+
cloneList = cloneList.slice(-1);
|
|
459
|
+
} else if (maxCount) {
|
|
460
|
+
cloneList = cloneList.slice(0, maxCount);
|
|
461
|
+
}
|
|
462
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(cloneList);
|
|
463
|
+
setUploadFileList(cloneList);
|
|
464
|
+
case 16:
|
|
465
|
+
case "end":
|
|
466
|
+
return _context2.stop();
|
|
467
|
+
}
|
|
468
|
+
}, _callee2);
|
|
469
|
+
}));
|
|
470
|
+
};
|
|
338
471
|
//更新文件列表
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
472
|
+
var updateFileList = function updateFileList(file) {
|
|
473
|
+
var cloneList = _toConsumableArray(uploadFileList);
|
|
474
|
+
var fileObj = Object.assign(Object.assign({}, file), {
|
|
342
475
|
lastModified: file.lastModified,
|
|
343
476
|
lastModifiedDate: file.lastModifiedDate,
|
|
344
477
|
name: file.name,
|
|
@@ -350,9 +483,9 @@ const ImageUpload = props => {
|
|
|
350
483
|
return cloneList.concat(fileObj);
|
|
351
484
|
};
|
|
352
485
|
//合并文件列表
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
486
|
+
var mergedFileList = function mergedFileList(fileList) {
|
|
487
|
+
var cloneList = _toConsumableArray(uploadFileList);
|
|
488
|
+
var newFileList = fileList.map(function (file) {
|
|
356
489
|
return Object.assign(Object.assign({}, file), {
|
|
357
490
|
lastModified: file.lastModified,
|
|
358
491
|
lastModifiedDate: file.lastModifiedDate,
|
|
@@ -366,57 +499,71 @@ const ImageUpload = props => {
|
|
|
366
499
|
return cloneList.concat(newFileList);
|
|
367
500
|
};
|
|
368
501
|
//删除文件
|
|
369
|
-
|
|
370
|
-
Promise.resolve(typeof onRemove === 'function' ? onRemove(file) : onRemove).then(ret
|
|
502
|
+
var handleRemove = function handleRemove(file) {
|
|
503
|
+
Promise.resolve(typeof onRemove === 'function' ? onRemove(file) : onRemove).then(function (ret) {
|
|
371
504
|
// Prevent removing file
|
|
372
505
|
if (ret === false) return;
|
|
373
|
-
|
|
506
|
+
var idx = uploadFileList.findIndex(function (_) {
|
|
507
|
+
return _.uid === file.uid;
|
|
508
|
+
});
|
|
374
509
|
if (idx > -1) uploadFileList.splice(idx, 1);
|
|
375
510
|
onInternalChange(uploadFileList);
|
|
376
511
|
});
|
|
377
512
|
};
|
|
378
513
|
//读取dataUrl
|
|
379
|
-
|
|
380
|
-
return
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
514
|
+
var readerFileAsDataUrl = function readerFileAsDataUrl(file) {
|
|
515
|
+
return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee3() {
|
|
516
|
+
return regenerator.wrap(function _callee3$(_context3) {
|
|
517
|
+
while (1) switch (_context3.prev = _context3.next) {
|
|
518
|
+
case 0:
|
|
519
|
+
return _context3.abrupt("return", new Promise(function (resolve) {
|
|
520
|
+
var fileReader = new FileReader();
|
|
521
|
+
if (file.originFileObj) {
|
|
522
|
+
fileReader.onload = function () {
|
|
523
|
+
resolve(fileReader.result);
|
|
524
|
+
};
|
|
525
|
+
fileReader.readAsDataURL(file.originFileObj);
|
|
526
|
+
} else resolve('');
|
|
527
|
+
}));
|
|
528
|
+
case 1:
|
|
529
|
+
case "end":
|
|
530
|
+
return _context3.stop();
|
|
531
|
+
}
|
|
532
|
+
}, _callee3);
|
|
533
|
+
}));
|
|
534
|
+
};
|
|
390
535
|
//显示错误提示
|
|
391
|
-
|
|
536
|
+
var showErrTip = function showErrTip(flag) {
|
|
392
537
|
setErrTip(flag);
|
|
393
538
|
if (leaveDelay < 0) return;
|
|
394
|
-
setTimeout(()
|
|
539
|
+
setTimeout(function () {
|
|
395
540
|
setErrTip(false);
|
|
396
541
|
}, leaveDelay);
|
|
397
542
|
};
|
|
398
|
-
useEffect(()
|
|
543
|
+
useEffect(function () {
|
|
399
544
|
if (fileList) {
|
|
400
|
-
setUploadFileList(
|
|
545
|
+
setUploadFileList(_toConsumableArray(fileList));
|
|
401
546
|
}
|
|
402
547
|
}, [fileList]);
|
|
403
|
-
useEffect(()
|
|
548
|
+
useEffect(function () {
|
|
404
549
|
if (defaultImage) {
|
|
405
550
|
setAvatar(Object.assign({}, defaultImage));
|
|
406
551
|
}
|
|
407
552
|
}, [defaultImage]);
|
|
408
553
|
//渲染上传列表
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
554
|
+
var renderUploadList = function renderUploadList() {
|
|
555
|
+
return showUploadList && jsx(UploadList, {
|
|
556
|
+
listType: 'picture-card',
|
|
557
|
+
readonly: readonly,
|
|
558
|
+
items: uploadFileList,
|
|
559
|
+
showRemoveIcon: showRemoveIcon,
|
|
560
|
+
removeIcon: removeIcon,
|
|
561
|
+
onRemove: handleRemove,
|
|
562
|
+
itemRender: itemRender
|
|
563
|
+
});
|
|
564
|
+
};
|
|
418
565
|
//渲染内容
|
|
419
|
-
|
|
566
|
+
var renderUploadContent = function renderUploadContent() {
|
|
420
567
|
var _a;
|
|
421
568
|
if (!showUploadList && avatar.imageUrl && !showLoading) {
|
|
422
569
|
return jsxs("div", Object.assign({
|
|
@@ -451,7 +598,7 @@ const ImageUpload = props => {
|
|
|
451
598
|
});
|
|
452
599
|
};
|
|
453
600
|
//渲染上传控件
|
|
454
|
-
|
|
601
|
+
var renderUploadSelector = function renderUploadSelector() {
|
|
455
602
|
if (readonly) return null;
|
|
456
603
|
return jsxs("div", Object.assign({
|
|
457
604
|
className: clsx('upload-image-select', showLoading && 'upload-image-select-loading')
|
|
@@ -479,7 +626,7 @@ const ImageUpload = props => {
|
|
|
479
626
|
};
|
|
480
627
|
|
|
481
628
|
//Dragger upload
|
|
482
|
-
|
|
629
|
+
var Dragger = function Dragger(props) {
|
|
483
630
|
return jsx(Upload, Object.assign({}, props, {
|
|
484
631
|
type: 'drag'
|
|
485
632
|
}));
|
|
@@ -644,266 +791,336 @@ var css_248z$1 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/4/20
|
|
|
644
791
|
styleInject(css_248z$1);
|
|
645
792
|
|
|
646
793
|
//图片裁剪组件
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
aspect = 1,
|
|
650
|
-
shape =
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
794
|
+
var ImgCrop = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
795
|
+
var _props$aspect = props.aspect,
|
|
796
|
+
aspect = _props$aspect === void 0 ? 1 : _props$aspect,
|
|
797
|
+
_props$shape = props.shape,
|
|
798
|
+
shape = _props$shape === void 0 ? 'rect' : _props$shape,
|
|
799
|
+
_props$grid = props.grid,
|
|
800
|
+
grid = _props$grid === void 0 ? false : _props$grid,
|
|
801
|
+
_props$quality = props.quality,
|
|
802
|
+
quality = _props$quality === void 0 ? 0.4 : _props$quality,
|
|
803
|
+
_props$fillColor = props.fillColor,
|
|
804
|
+
fillColor = _props$fillColor === void 0 ? 'transparent' : _props$fillColor,
|
|
805
|
+
_props$zoom = props.zoom,
|
|
806
|
+
zoom = _props$zoom === void 0 ? true : _props$zoom,
|
|
807
|
+
_props$rotate = props.rotate,
|
|
808
|
+
rotate = _props$rotate === void 0 ? false : _props$rotate,
|
|
809
|
+
_props$minZoom = props.minZoom,
|
|
810
|
+
minZoom = _props$minZoom === void 0 ? 1 : _props$minZoom,
|
|
811
|
+
_props$maxZoom = props.maxZoom,
|
|
812
|
+
maxZoom = _props$maxZoom === void 0 ? 3 : _props$maxZoom,
|
|
813
|
+
modalTitle = props.modalTitle,
|
|
814
|
+
modalWidth = props.modalWidth,
|
|
815
|
+
modalOk = props.modalOk,
|
|
816
|
+
modalCancel = props.modalCancel,
|
|
817
|
+
onModalOk = props.onModalOk,
|
|
818
|
+
onModalCancel = props.onModalCancel,
|
|
819
|
+
beforeCrop = props.beforeCrop,
|
|
820
|
+
onUploadFail = props.onUploadFail,
|
|
821
|
+
cropperProps = props.cropperProps,
|
|
822
|
+
children = props.children,
|
|
823
|
+
_props$fixedCropSize = props.fixedCropSize,
|
|
824
|
+
fixedCropSize = _props$fixedCropSize === void 0 ? {
|
|
669
825
|
width: 120,
|
|
670
826
|
height: 120
|
|
671
|
-
}
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
827
|
+
} : _props$fixedCropSize;
|
|
828
|
+
var intl = useFormatMessage('Upload', localeJson);
|
|
829
|
+
var _useState = useState(''),
|
|
830
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
831
|
+
image = _useState2[0],
|
|
832
|
+
setImage = _useState2[1];
|
|
833
|
+
var fileRef = useRef();
|
|
834
|
+
var beforeUploadRef = useRef();
|
|
835
|
+
var resolveRef = useRef();
|
|
836
|
+
var rejectRef = useRef();
|
|
679
837
|
//存储回调
|
|
680
|
-
|
|
838
|
+
var cbRef = useRef({});
|
|
681
839
|
cbRef.current.onModalOk = onModalOk;
|
|
682
840
|
cbRef.current.onModalCancel = onModalCancel;
|
|
683
841
|
cbRef.current.beforeCrop = beforeCrop;
|
|
684
842
|
cbRef.current.onUploadFail = onUploadFail;
|
|
685
|
-
|
|
843
|
+
var easyCropRef = useRef({});
|
|
686
844
|
//上传组件
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
accept
|
|
693
|
-
} = _a,
|
|
845
|
+
var uploadComponent = useMemo(function () {
|
|
846
|
+
var upload = Array.isArray(children) ? children[0] : children;
|
|
847
|
+
var _a = upload.props,
|
|
848
|
+
beforeUpload = _a.beforeUpload,
|
|
849
|
+
accept = _a.accept,
|
|
694
850
|
restUploadProps = __rest(_a, ["beforeUpload", "accept"]);
|
|
695
851
|
beforeUploadRef.current = beforeUpload;
|
|
696
852
|
return Object.assign(Object.assign({}, upload), {
|
|
697
853
|
props: Object.assign(Object.assign({}, restUploadProps), {
|
|
698
854
|
accept: accept || 'image/*',
|
|
699
|
-
beforeUpload: (file, fileList)
|
|
700
|
-
return new Promise((resolve, reject)
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
return
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
855
|
+
beforeUpload: function beforeUpload(file, fileList) {
|
|
856
|
+
return new Promise(function (resolve, reject) {
|
|
857
|
+
return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee() {
|
|
858
|
+
var reader;
|
|
859
|
+
return regenerator.wrap(function _callee$(_context) {
|
|
860
|
+
while (1) switch (_context.prev = _context.next) {
|
|
861
|
+
case 0:
|
|
862
|
+
_context.t0 = cbRef.current.beforeCrop;
|
|
863
|
+
if (!_context.t0) {
|
|
864
|
+
_context.next = 5;
|
|
865
|
+
break;
|
|
866
|
+
}
|
|
867
|
+
_context.next = 4;
|
|
868
|
+
return cbRef.current.beforeCrop(file, fileList);
|
|
869
|
+
case 4:
|
|
870
|
+
_context.t0 = !_context.sent;
|
|
871
|
+
case 5:
|
|
872
|
+
if (!_context.t0) {
|
|
873
|
+
_context.next = 8;
|
|
874
|
+
break;
|
|
875
|
+
}
|
|
876
|
+
reject();
|
|
877
|
+
return _context.abrupt("return");
|
|
878
|
+
case 8:
|
|
879
|
+
fileRef.current = file;
|
|
880
|
+
resolveRef.current = function (newFile) {
|
|
881
|
+
var flag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
882
|
+
var _a, _b;
|
|
883
|
+
(_b = (_a = cbRef.current).onModalOk) === null || _b === void 0 ? void 0 : _b.call(_a, newFile);
|
|
884
|
+
if (!flag) return resolve({
|
|
885
|
+
cropFile: newFile,
|
|
886
|
+
isUpload: flag
|
|
887
|
+
});
|
|
888
|
+
resolve(newFile);
|
|
889
|
+
};
|
|
890
|
+
rejectRef.current = function (uploadErr) {
|
|
891
|
+
var _a, _b;
|
|
892
|
+
(_b = (_a = cbRef.current).onUploadFail) === null || _b === void 0 ? void 0 : _b.call(_a, uploadErr);
|
|
893
|
+
reject(uploadErr);
|
|
894
|
+
};
|
|
895
|
+
reader = new FileReader();
|
|
896
|
+
reader.addEventListener('load', function () {
|
|
897
|
+
return typeof reader.result === 'string' && setImage(reader.result);
|
|
898
|
+
});
|
|
899
|
+
reader.readAsDataURL(file);
|
|
900
|
+
case 14:
|
|
901
|
+
case "end":
|
|
902
|
+
return _context.stop();
|
|
903
|
+
}
|
|
904
|
+
}, _callee);
|
|
905
|
+
}));
|
|
906
|
+
});
|
|
725
907
|
}
|
|
726
908
|
})
|
|
727
909
|
});
|
|
728
910
|
}, [children]);
|
|
729
911
|
//modal 关闭后操作
|
|
730
|
-
|
|
912
|
+
var onClose = function onClose() {
|
|
731
913
|
setImage('');
|
|
732
914
|
easyCropRef.current.setZoomVal(INIT_ZOOM);
|
|
733
915
|
easyCropRef.current.setRotateVal(INIT_ROTATE);
|
|
734
916
|
};
|
|
735
917
|
//modal cancel
|
|
736
|
-
|
|
918
|
+
var onCancel = useCallback(function () {
|
|
737
919
|
var _a, _b;
|
|
738
920
|
(_b = (_a = cbRef.current).onModalCancel) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
739
921
|
onClose();
|
|
740
922
|
}, []);
|
|
741
923
|
//modal ok
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
924
|
+
var onOk = useCallback(function () {
|
|
925
|
+
return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee3() {
|
|
926
|
+
var canvas, ctx, imgSource, _easyCropRef$current$, cropWidth, cropHeight, cropX, cropY, imgWidth, imgHeight, angle, sine, cosine, squareWidth, squareHeight, squareHalfWidth, squareHalfHeight, imgX, imgY, imgData, changeImageSizeAfterCrop, _fileRef$current, type, name, uid, idx, onBlob;
|
|
927
|
+
return regenerator.wrap(function _callee3$(_context3) {
|
|
928
|
+
while (1) switch (_context3.prev = _context3.next) {
|
|
929
|
+
case 0:
|
|
930
|
+
onClose();
|
|
931
|
+
canvas = document.createElement('canvas');
|
|
932
|
+
ctx = canvas.getContext('2d');
|
|
933
|
+
imgSource = document.querySelector(".".concat(PREFIX, "-media"));
|
|
934
|
+
_easyCropRef$current$ = easyCropRef.current.cropPixelsRef.current, cropWidth = _easyCropRef$current$.width, cropHeight = _easyCropRef$current$.height, cropX = _easyCropRef$current$.x, cropY = _easyCropRef$current$.y;
|
|
935
|
+
if (rotate && easyCropRef.current.rotateVal !== INIT_ROTATE) {
|
|
936
|
+
imgWidth = imgSource.naturalWidth, imgHeight = imgSource.naturalHeight;
|
|
937
|
+
angle = easyCropRef.current.rotateVal * (Math.PI / 180); // get container for rotated image
|
|
938
|
+
sine = Math.abs(Math.sin(angle));
|
|
939
|
+
cosine = Math.abs(Math.cos(angle));
|
|
940
|
+
squareWidth = imgWidth * cosine + imgHeight * sine;
|
|
941
|
+
squareHeight = imgHeight * cosine + imgWidth * sine;
|
|
942
|
+
canvas.width = squareWidth;
|
|
943
|
+
canvas.height = squareHeight;
|
|
944
|
+
ctx.fillStyle = fillColor;
|
|
945
|
+
ctx.fillRect(0, 0, squareWidth, squareHeight);
|
|
946
|
+
// rotate container
|
|
947
|
+
squareHalfWidth = squareWidth / 2;
|
|
948
|
+
squareHalfHeight = squareHeight / 2;
|
|
949
|
+
ctx.translate(squareHalfWidth, squareHalfHeight);
|
|
950
|
+
ctx.rotate(angle);
|
|
951
|
+
ctx.translate(-squareHalfWidth, -squareHalfHeight);
|
|
952
|
+
// draw rotated image
|
|
953
|
+
imgX = (squareWidth - imgWidth) / 2;
|
|
954
|
+
imgY = (squareHeight - imgHeight) / 2;
|
|
955
|
+
ctx.drawImage(imgSource, 0, 0, imgWidth, imgHeight, imgX, imgY, imgWidth, imgHeight);
|
|
956
|
+
// crop rotated image
|
|
957
|
+
imgData = ctx.getImageData(0, 0, squareWidth, squareHeight);
|
|
958
|
+
canvas.width = cropWidth;
|
|
959
|
+
canvas.height = cropHeight;
|
|
960
|
+
ctx.putImageData(imgData, -cropX, -cropY);
|
|
961
|
+
} else {
|
|
962
|
+
canvas.width = cropWidth;
|
|
963
|
+
canvas.height = cropHeight;
|
|
964
|
+
ctx.fillStyle = fillColor;
|
|
965
|
+
ctx.fillRect(0, 0, cropWidth, cropHeight);
|
|
966
|
+
ctx.drawImage(imgSource, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
|
|
967
|
+
}
|
|
968
|
+
//裁剪之后改变图片大小
|
|
969
|
+
changeImageSizeAfterCrop = function changeImageSizeAfterCrop(newFile) {
|
|
970
|
+
return new Promise(function (resolve) {
|
|
971
|
+
var name = newFile.name,
|
|
972
|
+
type = newFile.type,
|
|
973
|
+
uid = newFile.uid;
|
|
974
|
+
var width = fixedCropSize.width,
|
|
975
|
+
height = fixedCropSize.height; //固定裁剪大小
|
|
976
|
+
var changeCanvas = document.createElement('canvas');
|
|
977
|
+
var changeCtx = changeCanvas.getContext('2d');
|
|
978
|
+
var img = new Image();
|
|
979
|
+
img.onload = function () {
|
|
980
|
+
changeCanvas.width = width;
|
|
981
|
+
changeCanvas.height = height;
|
|
982
|
+
changeCtx.drawImage(img, 0, 0, width, height);
|
|
983
|
+
changeCanvas.toBlob(function (cBlob) {
|
|
984
|
+
var changeFile = Object.assign(new File([cBlob], name, {
|
|
985
|
+
type: type
|
|
986
|
+
}), {
|
|
987
|
+
uid: uid
|
|
988
|
+
});
|
|
989
|
+
resolve(changeFile);
|
|
990
|
+
}, type, quality);
|
|
991
|
+
};
|
|
992
|
+
img.onerror = function () {
|
|
993
|
+
resolve(newFile);
|
|
994
|
+
};
|
|
995
|
+
var fileReader = new FileReader();
|
|
996
|
+
fileReader.onload = function () {
|
|
997
|
+
img.src = fileReader.result;
|
|
998
|
+
};
|
|
999
|
+
fileReader.onerror = function () {
|
|
1000
|
+
resolve(newFile);
|
|
1001
|
+
};
|
|
1002
|
+
fileReader.readAsDataURL(newFile);
|
|
1003
|
+
});
|
|
1004
|
+
}; // get the new image
|
|
1005
|
+
_fileRef$current = fileRef.current, type = _fileRef$current.type, name = _fileRef$current.name, uid = _fileRef$current.uid;
|
|
1006
|
+
if (/svg/gi.test(type)) {
|
|
1007
|
+
//svg 转为 png
|
|
1008
|
+
type = 'image/png';
|
|
1009
|
+
idx = name.lastIndexOf('.');
|
|
1010
|
+
if (idx > -1) name = "".concat(name.substring(0, idx), ".png");
|
|
1011
|
+
}
|
|
1012
|
+
//转为blob
|
|
1013
|
+
onBlob = function onBlob(blob) {
|
|
1014
|
+
return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee2() {
|
|
1015
|
+
var _a, _b, _c, _d, _e, _f, newFile, changeFile, res, passedFile;
|
|
1016
|
+
return regenerator.wrap(function _callee2$(_context2) {
|
|
1017
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
1018
|
+
case 0:
|
|
1019
|
+
newFile = Object.assign(new File([blob], name, {
|
|
1020
|
+
type: type
|
|
1021
|
+
}), {
|
|
1022
|
+
uid: uid
|
|
1023
|
+
});
|
|
1024
|
+
_context2.next = 3;
|
|
1025
|
+
return changeImageSizeAfterCrop(newFile);
|
|
1026
|
+
case 3:
|
|
1027
|
+
changeFile = _context2.sent;
|
|
1028
|
+
if (!(typeof beforeUploadRef.current !== 'function')) {
|
|
1029
|
+
_context2.next = 6;
|
|
1030
|
+
break;
|
|
1031
|
+
}
|
|
1032
|
+
return _context2.abrupt("return", (_a = resolveRef.current) === null || _a === void 0 ? void 0 : _a.call(resolveRef, changeFile));
|
|
1033
|
+
case 6:
|
|
1034
|
+
res = beforeUploadRef.current(changeFile, [changeFile]);
|
|
1035
|
+
if (!(typeof res !== 'boolean' && !res)) {
|
|
1036
|
+
_context2.next = 10;
|
|
1037
|
+
break;
|
|
1038
|
+
}
|
|
1039
|
+
console.error('beforeUpload must return a boolean or Promise');
|
|
1040
|
+
return _context2.abrupt("return");
|
|
1041
|
+
case 10:
|
|
1042
|
+
if (!(res === true)) {
|
|
1043
|
+
_context2.next = 12;
|
|
1044
|
+
break;
|
|
1045
|
+
}
|
|
1046
|
+
return _context2.abrupt("return", (_b = resolveRef.current) === null || _b === void 0 ? void 0 : _b.call(resolveRef, changeFile));
|
|
1047
|
+
case 12:
|
|
1048
|
+
if (!(res === false)) {
|
|
1049
|
+
_context2.next = 14;
|
|
1050
|
+
break;
|
|
1051
|
+
}
|
|
1052
|
+
return _context2.abrupt("return", (_c = resolveRef.current) === null || _c === void 0 ? void 0 : _c.call(resolveRef, changeFile, false));
|
|
1053
|
+
case 14:
|
|
1054
|
+
if (!(res && res instanceof Promise)) {
|
|
1055
|
+
_context2.next = 27;
|
|
1056
|
+
break;
|
|
1057
|
+
}
|
|
1058
|
+
_context2.prev = 15;
|
|
1059
|
+
_context2.next = 18;
|
|
1060
|
+
return res;
|
|
1061
|
+
case 18:
|
|
1062
|
+
passedFile = _context2.sent;
|
|
1063
|
+
if (!(passedFile instanceof File || passedFile instanceof Blob)) {
|
|
1064
|
+
_context2.next = 21;
|
|
1065
|
+
break;
|
|
1066
|
+
}
|
|
1067
|
+
return _context2.abrupt("return", (_d = resolveRef.current) === null || _d === void 0 ? void 0 : _d.call(resolveRef, passedFile));
|
|
1068
|
+
case 21:
|
|
1069
|
+
(_e = resolveRef.current) === null || _e === void 0 ? void 0 : _e.call(resolveRef, changeFile, passedFile);
|
|
1070
|
+
_context2.next = 27;
|
|
1071
|
+
break;
|
|
1072
|
+
case 24:
|
|
1073
|
+
_context2.prev = 24;
|
|
1074
|
+
_context2.t0 = _context2["catch"](15);
|
|
1075
|
+
(_f = rejectRef.current) === null || _f === void 0 ? void 0 : _f.call(rejectRef, _context2.t0);
|
|
1076
|
+
case 27:
|
|
1077
|
+
case "end":
|
|
1078
|
+
return _context2.stop();
|
|
1079
|
+
}
|
|
1080
|
+
}, _callee2, null, [[15, 24]]);
|
|
1081
|
+
}));
|
|
1082
|
+
};
|
|
1083
|
+
canvas.toBlob(onBlob, type, quality);
|
|
1084
|
+
case 11:
|
|
1085
|
+
case "end":
|
|
1086
|
+
return _context3.stop();
|
|
871
1087
|
}
|
|
872
|
-
}
|
|
873
|
-
});
|
|
874
|
-
|
|
875
|
-
}), [fillColor, quality, rotate]);
|
|
1088
|
+
}, _callee3);
|
|
1089
|
+
}));
|
|
1090
|
+
}, [fillColor, quality, rotate]);
|
|
876
1091
|
//img crop 组件
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
1092
|
+
var getComponent = function getComponent(titleOfModal) {
|
|
1093
|
+
return jsxs(Fragment, {
|
|
1094
|
+
children: [uploadComponent, image && jsx(Modal, Object.assign({
|
|
1095
|
+
open: true,
|
|
1096
|
+
className: "".concat(PREFIX, "-modal"),
|
|
1097
|
+
size: 'md',
|
|
1098
|
+
title: titleOfModal !== null && titleOfModal !== void 0 ? titleOfModal : intl({
|
|
1099
|
+
id: 'editImage'
|
|
1100
|
+
}),
|
|
1101
|
+
onOk: onOk,
|
|
1102
|
+
onCancel: onCancel,
|
|
1103
|
+
okText: modalOk,
|
|
1104
|
+
cancelText: modalCancel,
|
|
1105
|
+
contentWidth: modalWidth
|
|
1106
|
+
}, {
|
|
1107
|
+
children: jsx(EasyCrop$1, {
|
|
1108
|
+
ref: easyCropRef,
|
|
1109
|
+
cropperRef: ref,
|
|
1110
|
+
image: image,
|
|
1111
|
+
aspect: aspect,
|
|
1112
|
+
shape: shape,
|
|
1113
|
+
grid: grid,
|
|
1114
|
+
zoom: zoom,
|
|
1115
|
+
rotate: rotate,
|
|
1116
|
+
minZoom: minZoom,
|
|
1117
|
+
maxZoom: maxZoom,
|
|
1118
|
+
fixedCropSize: fixedCropSize,
|
|
1119
|
+
cropperProps: cropperProps
|
|
1120
|
+
})
|
|
1121
|
+
}))]
|
|
1122
|
+
});
|
|
1123
|
+
};
|
|
907
1124
|
return jsx(Fragment, {
|
|
908
1125
|
children: getComponent(modalTitle)
|
|
909
1126
|
});
|