@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/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
- const UploadList = props => {
48
- const {
49
- listType = 'text',
50
- items = [],
51
- onRemove,
52
- showRemoveIcon = true,
53
- removeIcon,
54
- itemRender,
55
- readonly
56
- } = props;
57
- const [uploadList, setUploadList] = useState([]);
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
- const handleRemove = (file, evt) => {
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
- const renderActions = file => {
75
+ var renderActions = function renderActions(file) {
65
76
  return showRemoveIcon && !readonly && jsx("span", Object.assign({
66
77
  className: 'upload-list-actions',
67
- onClick: evt => handleRemove(file, evt)
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
- const renderFileListText = () => {
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
- const isImage = !!((_a = file.type) === null || _a === void 0 ? void 0 : _a.includes('image/'));
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
- const renderFileListPicture = () => {
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
- const handleFileFormat = () => __awaiter(void 0, void 0, void 0, function* () {
128
- if (!(items === null || items === void 0 ? void 0 : items.length)) return setUploadList([]);
129
- //读取file as DataUrl
130
- const readerFileAsDataUrl = file => __awaiter(void 0, void 0, void 0, function* () {
131
- return new Promise(resolve => {
132
- const fileReader = new FileReader();
133
- if (file.originFileObj) {
134
- fileReader.onload = () => {
135
- resolve(fileReader.result);
136
- };
137
- fileReader.readAsDataURL(file.originFileObj);
138
- } else resolve('');
139
- });
140
- });
141
- for (const file of items) {
142
- if (file.originFileObj) {
143
- const dataUrl = yield readerFileAsDataUrl(file);
144
- file.dataUrl = dataUrl;
145
- }
146
- }
147
- setUploadList([...items]);
148
- });
149
- useEffect(() => {
150
- if (listType === 'picture-card') handleFileFormat();else setUploadList(pre => {
151
- if (items) return [...items];
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
- const ErrorTip = props => {
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
- const ImageUpload = props => {
214
- const {
215
- className,
216
- style,
217
- onStart,
218
- onSuccess,
219
- onError,
220
- onProgress,
221
- onRemove,
222
- beforeUpload,
223
- onChange,
224
- defaultFileList = [],
225
- fileList,
226
- showUploadList = true,
227
- maxCount,
228
- children = null,
229
- itemRender,
230
- showUploadError = true,
231
- stash = false,
232
- uploading = true,
233
- loading = false,
234
- showLoading: showLoadingProp = false,
235
- defaultImage,
236
- readonly
237
- } = props,
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
- const intl = useFormatMessage('Upload', localeJson);
240
- const [uploadFileList, setUploadFileList] = useState(defaultFileList); //文件列表
241
- const [showLoading, setShowLoading] = useState(false); //upload loading
242
- const [errTip, setErrTip] = useState(false); //upload error tip
243
- const [avatar, setAvatar] = useState({
244
- imageUrl: ''
245
- }); //不显示列表时上传头像
246
- const {
247
- showRemoveIcon,
248
- removeIcon
249
- } = typeof showUploadList === 'boolean' ? {} : showUploadList; //显示上传列表
250
- const {
251
- uploadErrorMsg = intl({
252
- id: 'uploadError'
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
- leaveDelay = 2000
255
- } = typeof showUploadError === 'boolean' ? {} : showUploadError; //错误信息提示
256
- const cropFileRef = useRef(); //裁剪文件
257
- useEffect(() => {
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
- const overrideProps = Object.assign(Object.assign({
345
+ var overrideProps = Object.assign(Object.assign({
262
346
  accept: 'image/*'
263
347
  }, restProps), {
264
- beforeUpload: (file, fileList) => __awaiter(void 0, void 0, void 0, function* () {
265
- if (restProps.action && showLoadingProp && uploading) setShowLoading(true);
266
- const result = yield beforeUpload === null || beforeUpload === void 0 ? void 0 : beforeUpload(file, fileList);
267
- if (result === false) {
268
- setShowLoading(false);
269
- return false;
270
- } else if (typeof result === 'object' && result) {
271
- if (result instanceof File || result instanceof Blob) return result;
272
- cropFileRef.current = result.cropFile;
273
- return result.isUpload;
274
- } else return true;
275
- }),
276
- onStart(file) {
277
- onStart === null || onStart === void 0 ? void 0 : onStart(file);
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
- onSuccess(response, file, xhr) {
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
- const nextFileList = updateFileList(file);
393
+ var nextFileList = updateFileList(file);
283
394
  onInternalChange(nextFileList);
284
- onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(response, file, xhr);
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
- onError === null || onError === void 0 ? void 0 : onError(error, response, file);
400
+ _onError === null || _onError === void 0 ? void 0 : _onError(error, response, file);
290
401
  },
291
- onProgress(e, file) {
292
- onProgress === null || onProgress === void 0 ? void 0 : onProgress(e, file);
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
- const idx = fileList.findIndex(_ => {
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
- const arr = fileList.map(_ => _.parsedFile || _.file);
309
- const mList = mergedFileList(arr);
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
- const onInternalChange = changedFileList => __awaiter(void 0, void 0, void 0, function* () {
316
- let cloneList = [...changedFileList];
317
- if (!showUploadList) {
318
- //不显示上传列表
319
- const file = cloneList.slice(-1)[0];
320
- if (file) {
321
- const imageUrl = yield readerFileAsDataUrl(file);
322
- file.dataUrl = imageUrl;
323
- avatar.imageUrl = imageUrl;
324
- avatar.imageName = file.name;
325
- setAvatar(Object.assign({}, avatar));
326
- }
327
- onChange === null || onChange === void 0 ? void 0 : onChange([file]);
328
- return;
329
- }
330
- if (maxCount === 1) {
331
- cloneList = cloneList.slice(-1);
332
- } else if (maxCount) {
333
- cloneList = cloneList.slice(0, maxCount);
334
- }
335
- onChange === null || onChange === void 0 ? void 0 : onChange(cloneList);
336
- setUploadFileList(cloneList);
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
- const updateFileList = file => {
340
- const cloneList = [...uploadFileList];
341
- const fileObj = Object.assign(Object.assign({}, file), {
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
- const mergedFileList = fileList => {
354
- const cloneList = [...uploadFileList];
355
- const newFileList = fileList.map(file => {
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
- const handleRemove = file => {
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
- const idx = uploadFileList.findIndex(_ => _.uid === file.uid);
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
- const readerFileAsDataUrl = file => __awaiter(void 0, void 0, void 0, function* () {
380
- return new Promise(resolve => {
381
- const fileReader = new FileReader();
382
- if (file.originFileObj) {
383
- fileReader.onload = () => {
384
- resolve(fileReader.result);
385
- };
386
- fileReader.readAsDataURL(file.originFileObj);
387
- } else resolve('');
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
- const showErrTip = flag => {
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([...fileList]);
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
- const renderUploadList = () => showUploadList && jsx(UploadList, {
410
- listType: 'picture-card',
411
- readonly: readonly,
412
- items: uploadFileList,
413
- showRemoveIcon: showRemoveIcon,
414
- removeIcon: removeIcon,
415
- onRemove: handleRemove,
416
- itemRender: itemRender
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
- const renderUploadContent = () => {
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
- const renderUploadSelector = () => {
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
- const Dragger = props => {
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
- const ImgCrop = /*#__PURE__*/forwardRef((props, ref) => {
648
- const {
649
- aspect = 1,
650
- shape = 'rect',
651
- grid = false,
652
- quality = 0.4,
653
- fillColor = 'transparent',
654
- zoom = true,
655
- rotate = false,
656
- minZoom = 1,
657
- maxZoom = 3,
658
- modalTitle,
659
- modalWidth,
660
- modalOk,
661
- modalCancel,
662
- onModalOk,
663
- onModalCancel,
664
- beforeCrop,
665
- onUploadFail,
666
- cropperProps,
667
- children,
668
- fixedCropSize = {
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
- } = props;
673
- const intl = useFormatMessage('Upload', localeJson);
674
- const [image, setImage] = useState('');
675
- const fileRef = useRef();
676
- const beforeUploadRef = useRef();
677
- const resolveRef = useRef();
678
- const rejectRef = useRef();
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
- const cbRef = useRef({});
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
- const easyCropRef = useRef({});
843
+ var easyCropRef = useRef({});
686
844
  //上传组件
687
- const uploadComponent = useMemo(() => {
688
- const upload = Array.isArray(children) ? children[0] : children;
689
- const _a = upload.props,
690
- {
691
- beforeUpload,
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) => __awaiter(void 0, void 0, void 0, function* () {
701
- if (cbRef.current.beforeCrop && !(yield cbRef.current.beforeCrop(file, fileList))) {
702
- reject();
703
- return;
704
- }
705
- fileRef.current = file;
706
- resolveRef.current = function (newFile) {
707
- let flag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
708
- var _a, _b;
709
- (_b = (_a = cbRef.current).onModalOk) === null || _b === void 0 ? void 0 : _b.call(_a, newFile);
710
- if (!flag) return resolve({
711
- cropFile: newFile,
712
- isUpload: flag
713
- });
714
- resolve(newFile);
715
- };
716
- rejectRef.current = uploadErr => {
717
- var _a, _b;
718
- (_b = (_a = cbRef.current).onUploadFail) === null || _b === void 0 ? void 0 : _b.call(_a, uploadErr);
719
- reject(uploadErr);
720
- };
721
- const reader = new FileReader();
722
- reader.addEventListener('load', () => typeof reader.result === 'string' && setImage(reader.result));
723
- reader.readAsDataURL(file);
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
- const onClose = () => {
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
- const onCancel = useCallback(() => {
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
- const onOk = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
743
- onClose();
744
- const canvas = document.createElement('canvas');
745
- const ctx = canvas.getContext('2d');
746
- const imgSource = document.querySelector(".".concat(PREFIX, "-media"));
747
- const {
748
- width: cropWidth,
749
- height: cropHeight,
750
- x: cropX,
751
- y: cropY
752
- } = easyCropRef.current.cropPixelsRef.current;
753
- if (rotate && easyCropRef.current.rotateVal !== INIT_ROTATE) {
754
- const {
755
- naturalWidth: imgWidth,
756
- naturalHeight: imgHeight
757
- } = imgSource;
758
- const angle = easyCropRef.current.rotateVal * (Math.PI / 180);
759
- // get container for rotated image
760
- const sine = Math.abs(Math.sin(angle));
761
- const cosine = Math.abs(Math.cos(angle));
762
- const squareWidth = imgWidth * cosine + imgHeight * sine;
763
- const squareHeight = imgHeight * cosine + imgWidth * sine;
764
- canvas.width = squareWidth;
765
- canvas.height = squareHeight;
766
- ctx.fillStyle = fillColor;
767
- ctx.fillRect(0, 0, squareWidth, squareHeight);
768
- // rotate container
769
- const squareHalfWidth = squareWidth / 2;
770
- const squareHalfHeight = squareHeight / 2;
771
- ctx.translate(squareHalfWidth, squareHalfHeight);
772
- ctx.rotate(angle);
773
- ctx.translate(-squareHalfWidth, -squareHalfHeight);
774
- // draw rotated image
775
- const imgX = (squareWidth - imgWidth) / 2;
776
- const imgY = (squareHeight - imgHeight) / 2;
777
- ctx.drawImage(imgSource, 0, 0, imgWidth, imgHeight, imgX, imgY, imgWidth, imgHeight);
778
- // crop rotated image
779
- const imgData = ctx.getImageData(0, 0, squareWidth, squareHeight);
780
- canvas.width = cropWidth;
781
- canvas.height = cropHeight;
782
- ctx.putImageData(imgData, -cropX, -cropY);
783
- } else {
784
- canvas.width = cropWidth;
785
- canvas.height = cropHeight;
786
- ctx.fillStyle = fillColor;
787
- ctx.fillRect(0, 0, cropWidth, cropHeight);
788
- ctx.drawImage(imgSource, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
789
- }
790
- //裁剪之后改变图片大小
791
- const changeImageSizeAfterCrop = newFile => {
792
- return new Promise(resolve => {
793
- const {
794
- name,
795
- type,
796
- uid
797
- } = newFile;
798
- const {
799
- width,
800
- height
801
- } = fixedCropSize; //固定裁剪大小
802
- const changeCanvas = document.createElement('canvas');
803
- const changeCtx = changeCanvas.getContext('2d');
804
- const img = new Image();
805
- img.onload = () => {
806
- changeCanvas.width = width;
807
- changeCanvas.height = height;
808
- changeCtx.drawImage(img, 0, 0, width, height);
809
- changeCanvas.toBlob(cBlob => {
810
- const changeFile = Object.assign(new File([cBlob], name, {
811
- type
812
- }), {
813
- uid
814
- });
815
- resolve(changeFile);
816
- }, type, quality);
817
- };
818
- img.onerror = () => {
819
- resolve(newFile);
820
- };
821
- const fileReader = new FileReader();
822
- fileReader.onload = () => {
823
- img.src = fileReader.result;
824
- };
825
- fileReader.onerror = () => {
826
- resolve(newFile);
827
- };
828
- fileReader.readAsDataURL(newFile);
829
- });
830
- };
831
- // get the new image
832
- let {
833
- type,
834
- name,
835
- uid
836
- } = fileRef.current;
837
- if (/svg/gi.test(type)) {
838
- //svg 转为 png
839
- type = 'image/png';
840
- const idx = name.lastIndexOf('.');
841
- if (idx > -1) name = "".concat(name.substring(0, idx), ".png");
842
- }
843
- //转为blob
844
- const onBlob = blob => __awaiter(void 0, void 0, void 0, function* () {
845
- var _a, _b, _c, _d, _e, _f;
846
- const newFile = Object.assign(new File([blob], name, {
847
- type
848
- }), {
849
- uid
850
- });
851
- const changeFile = yield changeImageSizeAfterCrop(newFile);
852
- if (typeof beforeUploadRef.current !== 'function') {
853
- return (_a = resolveRef.current) === null || _a === void 0 ? void 0 : _a.call(resolveRef, changeFile);
854
- }
855
- const res = beforeUploadRef.current(changeFile, [changeFile]);
856
- if (typeof res !== 'boolean' && !res) {
857
- console.error('beforeUpload must return a boolean or Promise');
858
- return;
859
- }
860
- if (res === true) return (_b = resolveRef.current) === null || _b === void 0 ? void 0 : _b.call(resolveRef, changeFile);
861
- if (res === false) return (_c = resolveRef.current) === null || _c === void 0 ? void 0 : _c.call(resolveRef, changeFile, false);
862
- if (res && res instanceof Promise) {
863
- try {
864
- const passedFile = yield res;
865
- if (passedFile instanceof File || passedFile instanceof Blob) {
866
- return (_d = resolveRef.current) === null || _d === void 0 ? void 0 : _d.call(resolveRef, passedFile);
867
- }
868
- (_e = resolveRef.current) === null || _e === void 0 ? void 0 : _e.call(resolveRef, changeFile, passedFile);
869
- } catch (err) {
870
- (_f = rejectRef.current) === null || _f === void 0 ? void 0 : _f.call(rejectRef, err);
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
- canvas.toBlob(onBlob, type, quality);
875
- }), [fillColor, quality, rotate]);
1088
+ }, _callee3);
1089
+ }));
1090
+ }, [fillColor, quality, rotate]);
876
1091
  //img crop 组件
877
- const getComponent = titleOfModal => jsxs(Fragment, {
878
- children: [uploadComponent, image && jsx(Modal, Object.assign({
879
- open: true,
880
- className: "".concat(PREFIX, "-modal"),
881
- size: 'md',
882
- title: titleOfModal !== null && titleOfModal !== void 0 ? titleOfModal : intl({
883
- id: 'editImage'
884
- }),
885
- onOk: onOk,
886
- onCancel: onCancel,
887
- okText: modalOk,
888
- cancelText: modalCancel,
889
- contentWidth: modalWidth
890
- }, {
891
- children: jsx(EasyCrop$1, {
892
- ref: easyCropRef,
893
- cropperRef: ref,
894
- image: image,
895
- aspect: aspect,
896
- shape: shape,
897
- grid: grid,
898
- zoom: zoom,
899
- rotate: rotate,
900
- minZoom: minZoom,
901
- maxZoom: maxZoom,
902
- fixedCropSize: fixedCropSize,
903
- cropperProps: cropperProps
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
  });