@para-ui/core 4.0.0-rc.4 → 4.0.0-rc.5

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