acud 1.2.18 → 1.2.20

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 (7) hide show
  1. package/dist/acud.js +76 -54
  2. package/dist/acud.js.map +1 -1
  3. package/es/upload/Upload.js +9 -2
  4. package/es/upload/UploadList/ListItem.js +27 -14
  5. package/lib/upload/Upload.js +9 -2
  6. package/lib/upload/UploadList/ListItem.js +27 -14
  7. package/package.json +1 -1
package/es/upload/Upload.js CHANGED
@@ -36,6 +36,7 @@ var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, gene
36
36
  });
37
37
  };
38
38
  import * as React from 'react';
39
+ import { flushSync } from 'react-dom';
39
40
  import RcUpload from './BaseUpload';
40
41
  import useMergedState from "rc-util/es/hooks/useMergedState";
41
42
  import classNames from 'classnames';
@@ -102,7 +103,11 @@ var InternalUpload = function InternalUpload(props, ref) {
102
103
  var cloneList = _toConsumableArray(changedFileList);
103
104
  // Cut to match count
104
105
  cloneList = cloneList.slice(0, maxCount);
105
- setMergedFileList(cloneList);
106
+ // Prevent React18 auto batch since input[upload] trigger process at same time
107
+ // which makes fileList closure problem
108
+ flushSync(function () {
109
+ setMergedFileList(cloneList);
110
+ });
106
111
  var changeInfo = {
107
112
  file: file,
108
113
  fileList: cloneList
@@ -110,7 +115,9 @@ var InternalUpload = function InternalUpload(props, ref) {
110
115
  if (event) {
111
116
  changeInfo.event = event;
112
117
  }
113
- onChange === null || onChange === void 0 ? void 0 : onChange(changeInfo);
118
+ flushSync(function () {
119
+ onChange === null || onChange === void 0 ? void 0 : onChange(changeInfo);
120
+ });
114
121
  };
115
122
  var mergedBeforeUpload = function mergedBeforeUpload(file, fileListArgs) {
116
123
  return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
package/es/upload/UploadList/ListItem.js CHANGED
@@ -44,22 +44,31 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
44
44
  onClose = _ref.onClose,
45
45
  onUpload = _ref.onUpload;
46
46
  var _a, _b;
47
- // Delay to show the progress bar
48
- var _React$useState = React.useState(false),
47
+ var status = file.status;
48
+ var _React$useState = React.useState(status),
49
49
  _React$useState2 = _slicedToArray(_React$useState, 2),
50
- showProgress = _React$useState2[0],
51
- setShowProgress = _React$useState2[1];
52
- var progressRafRef = React.useRef();
50
+ mergedStatus = _React$useState2[0],
51
+ setMergedStatus = _React$useState2[1];
52
+ React.useEffect(function () {
53
+ if (status !== 'removed') {
54
+ setMergedStatus(status);
55
+ }
56
+ }, [status]);
57
+ // Delay to show the progress bar
58
+ var _React$useState3 = React.useState(false),
59
+ _React$useState4 = _slicedToArray(_React$useState3, 2),
60
+ showProgress = _React$useState4[0],
61
+ setShowProgress = _React$useState4[1];
53
62
  // 外部传入的file 无法重传，根据originFileObj来判断是本地选中的
54
63
  var showUploadIcon = React.useMemo(function () {
55
64
  return !!(file === null || file === void 0 ? void 0 : file.originFileObj) && internalShowUploadIcon;
56
65
  }, [file, internalShowUploadIcon]);
57
66
  React.useEffect(function () {
58
- progressRafRef.current = setTimeout(function () {
67
+ var timer = setTimeout(function () {
59
68
  setShowProgress(true);
60
69
  }, 300);
61
70
  return function () {
62
- window.clearTimeout(progressRafRef.current);
71
+ window.clearTimeout(timer);
63
72
  };
64
73
  }, []);
65
74
  // This is used for legacy span make scrollHeight the wrong value.
@@ -70,9 +79,9 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
70
79
  className: "".concat(prefixCls, "-text-icon")
71
80
  }, iconNode);
72
81
  if (listType === 'picture' || listType === 'picture-card') {
73
- if (file.status === 'uploading' || !file.thumbUrl && !file.url) {
82
+ if (mergedStatus === 'uploading' || !file.thumbUrl && !file.url) {
74
83
  var _classNames;
75
- var uploadingClassName = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-list-item-thumbnail"), true), _defineProperty(_classNames, "".concat(prefixCls, "-list-item-file"), file.status !== 'uploading'), _classNames));
84
+ var uploadingClassName = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-list-item-thumbnail"), true), _defineProperty(_classNames, "".concat(prefixCls, "-list-item-file"), mergedStatus !== 'uploading'), _classNames));
76
85
  icon = /*#__PURE__*/React.createElement("div", {
77
86
  className: uploadingClassName
78
87
  }, iconNode);
@@ -95,7 +104,7 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
95
104
  }, thumbnail);
96
105
  }
97
106
  }
98
- var infoUploadingClass = classNames((_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefixCls, "-list-item"), true), _defineProperty(_classNames3, "".concat(prefixCls, "-list-item-").concat(file.status), true), _defineProperty(_classNames3, "".concat(prefixCls, "-list-item-list-type-").concat(listType), true), _classNames3));
107
+ var infoUploadingClass = classNames((_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefixCls, "-list-item"), true), _defineProperty(_classNames3, "".concat(prefixCls, "-list-item-").concat(mergedStatus), true), _defineProperty(_classNames3, "".concat(prefixCls, "-list-item-list-type-").concat(listType), true), _classNames3));
99
108
  var linkProps = typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps;
100
109
  var removeIcon = showRemoveIcon ? actionIconRender((typeof customRemoveIcon === 'function' ? customRemoveIcon(file) : customRemoveIcon) || (listType === 'text' ? /*#__PURE__*/React.createElement(OutlinedClose, {
101
110
  width: 16
@@ -153,9 +162,9 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
153
162
  var uploadIcon = showUploadIcon ? actionIconRender((typeof customUploadIcon === 'function' ? customUploadIcon(file) : customUploadIcon) || /*#__PURE__*/React.createElement(OutlinedButtonUpload, null), function () {
154
163
  return onUpload(file);
155
164
  }, prefixCls, locale.uploadFile) : null;
156
- var actions = listType === 'picture-card' && file.status !== 'uploading' && /*#__PURE__*/React.createElement("span", {
165
+ var actions = listType === 'picture-card' && mergedStatus !== 'uploading' && /*#__PURE__*/React.createElement("span", {
157
166
  className: "".concat(prefixCls, "-list-item-actions")
158
- }, file.status === 'done' && previewIcon, file.status === 'done' && downloadIcon, ['error', 'done'].includes(file.status) && uploadIcon, removeIcon);
167
+ }, mergedStatus === 'done' && previewIcon, mergedStatus === 'done' && downloadIcon, ['error', 'done'].includes(mergedStatus) && uploadIcon, removeIcon);
159
168
  var message;
160
169
  if (file.response && typeof file.response === 'string') {
161
170
  message = file.response;
@@ -174,7 +183,11 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
174
183
  className: "".concat(prefixCls, "-list-item-info")
175
184
  }, iconAndPreview), actions, showProgress && /*#__PURE__*/React.createElement(CSSMotion, {
176
185
  motionName: "".concat(rootPrefixCls, "-fade"),
177
- visible: file.status === 'uploading',
186
+ visible: mergedStatus === 'uploading'
187
+ // rc-motion 锁了版本2.4.3，但是新版本（2.7.3）已经fix，所以采用key
188
+ // https://github.com/react-component/motion/pull/24
189
+ ,
190
+ key: mergedStatus,
178
191
  motionDeadline: motionDeadline
179
192
  }, function (_ref2) {
180
193
  var motionClassName = _ref2.className;
@@ -192,7 +205,7 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
192
205
  }, loadingProgress);
193
206
  }));
194
207
  var listContainerNameClass = classNames("".concat(prefixCls, "-list-").concat(listType, "-container"), className);
195
- var item = file.status === 'error' ? /*#__PURE__*/React.createElement(Tooltip, {
208
+ var item = mergedStatus === 'error' ? /*#__PURE__*/React.createElement(Tooltip, {
196
209
  title: message,
197
210
  overlayClassName: "error-tooltip",
198
211
  getPopupContainer: function getPopupContainer(node) {
package/lib/upload/Upload.js CHANGED
@@ -13,6 +13,7 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
13
13
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
14
14
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
15
  var React = _interopRequireWildcard(require("react"));
16
+ var _reactDom = require("react-dom");
16
17
  var _BaseUpload = _interopRequireDefault(require("./BaseUpload"));
17
18
  var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
18
19
  var _classnames = _interopRequireDefault(require("classnames"));
@@ -112,7 +113,11 @@ var InternalUpload = function InternalUpload(props, ref) {
112
113
  var cloneList = (0, _toConsumableArray2["default"])(changedFileList);
113
114
  // Cut to match count
114
115
  cloneList = cloneList.slice(0, maxCount);
115
- setMergedFileList(cloneList);
116
+ // Prevent React18 auto batch since input[upload] trigger process at same time
117
+ // which makes fileList closure problem
118
+ (0, _reactDom.flushSync)(function () {
119
+ setMergedFileList(cloneList);
120
+ });
116
121
  var changeInfo = {
117
122
  file: file,
118
123
  fileList: cloneList
@@ -120,7 +125,9 @@ var InternalUpload = function InternalUpload(props, ref) {
120
125
  if (event) {
121
126
  changeInfo.event = event;
122
127
  }
123
- onChange === null || onChange === void 0 ? void 0 : onChange(changeInfo);
128
+ (0, _reactDom.flushSync)(function () {
129
+ onChange === null || onChange === void 0 ? void 0 : onChange(changeInfo);
130
+ });
124
131
  };
125
132
  var mergedBeforeUpload = function mergedBeforeUpload(file, fileListArgs) {
126
133
  return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regenerator["default"].mark(function _callee() {
package/lib/upload/UploadList/ListItem.js CHANGED
@@ -55,22 +55,31 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
55
55
  onClose = _ref.onClose,
56
56
  onUpload = _ref.onUpload;
57
57
  var _a, _b;
58
- // Delay to show the progress bar
59
- var _React$useState = React.useState(false),
58
+ var status = file.status;
59
+ var _React$useState = React.useState(status),
60
60
  _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
61
- showProgress = _React$useState2[0],
62
- setShowProgress = _React$useState2[1];
63
- var progressRafRef = React.useRef();
61
+ mergedStatus = _React$useState2[0],
62
+ setMergedStatus = _React$useState2[1];
63
+ React.useEffect(function () {
64
+ if (status !== 'removed') {
65
+ setMergedStatus(status);
66
+ }
67
+ }, [status]);
68
+ // Delay to show the progress bar
69
+ var _React$useState3 = React.useState(false),
70
+ _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
71
+ showProgress = _React$useState4[0],
72
+ setShowProgress = _React$useState4[1];
64
73
  // 外部传入的file 无法重传，根据originFileObj来判断是本地选中的
65
74
  var showUploadIcon = React.useMemo(function () {
66
75
  return !!(file === null || file === void 0 ? void 0 : file.originFileObj) && internalShowUploadIcon;
67
76
  }, [file, internalShowUploadIcon]);
68
77
  React.useEffect(function () {
69
- progressRafRef.current = setTimeout(function () {
78
+ var timer = setTimeout(function () {
70
79
  setShowProgress(true);
71
80
  }, 300);
72
81
  return function () {
73
- window.clearTimeout(progressRafRef.current);
82
+ window.clearTimeout(timer);
74
83
  };
75
84
  }, []);
76
85
  // This is used for legacy span make scrollHeight the wrong value.
@@ -81,9 +90,9 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
81
90
  className: "".concat(prefixCls, "-text-icon")
82
91
  }, iconNode);
83
92
  if (listType === 'picture' || listType === 'picture-card') {
84
- if (file.status === 'uploading' || !file.thumbUrl && !file.url) {
93
+ if (mergedStatus === 'uploading' || !file.thumbUrl && !file.url) {
85
94
  var _classNames;
86
- var uploadingClassName = (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-list-item-thumbnail"), true), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-list-item-file"), file.status !== 'uploading'), _classNames));
95
+ var uploadingClassName = (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-list-item-thumbnail"), true), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-list-item-file"), mergedStatus !== 'uploading'), _classNames));
87
96
  icon = /*#__PURE__*/React.createElement("div", {
88
97
  className: uploadingClassName
89
98
  }, iconNode);
@@ -106,7 +115,7 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
106
115
  }, thumbnail);
107
116
  }
108
117
  }
109
- var infoUploadingClass = (0, _classnames["default"])((_classNames3 = {}, (0, _defineProperty2["default"])(_classNames3, "".concat(prefixCls, "-list-item"), true), (0, _defineProperty2["default"])(_classNames3, "".concat(prefixCls, "-list-item-").concat(file.status), true), (0, _defineProperty2["default"])(_classNames3, "".concat(prefixCls, "-list-item-list-type-").concat(listType), true), _classNames3));
118
+ var infoUploadingClass = (0, _classnames["default"])((_classNames3 = {}, (0, _defineProperty2["default"])(_classNames3, "".concat(prefixCls, "-list-item"), true), (0, _defineProperty2["default"])(_classNames3, "".concat(prefixCls, "-list-item-").concat(mergedStatus), true), (0, _defineProperty2["default"])(_classNames3, "".concat(prefixCls, "-list-item-list-type-").concat(listType), true), _classNames3));
110
119
  var linkProps = typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps;
111
120
  var removeIcon = showRemoveIcon ? actionIconRender((typeof customRemoveIcon === 'function' ? customRemoveIcon(file) : customRemoveIcon) || (listType === 'text' ? /*#__PURE__*/React.createElement(_OutlinedClose["default"], {
112
121
  width: 16
@@ -164,9 +173,9 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
164
173
  var uploadIcon = showUploadIcon ? actionIconRender((typeof customUploadIcon === 'function' ? customUploadIcon(file) : customUploadIcon) || /*#__PURE__*/React.createElement(_OutlinedButtonUpload["default"], null), function () {
165
174
  return onUpload(file);
166
175
  }, prefixCls, locale.uploadFile) : null;
167
- var actions = listType === 'picture-card' && file.status !== 'uploading' && /*#__PURE__*/React.createElement("span", {
176
+ var actions = listType === 'picture-card' && mergedStatus !== 'uploading' && /*#__PURE__*/React.createElement("span", {
168
177
  className: "".concat(prefixCls, "-list-item-actions")
169
- }, file.status === 'done' && previewIcon, file.status === 'done' && downloadIcon, ['error', 'done'].includes(file.status) && uploadIcon, removeIcon);
178
+ }, mergedStatus === 'done' && previewIcon, mergedStatus === 'done' && downloadIcon, ['error', 'done'].includes(mergedStatus) && uploadIcon, removeIcon);
170
179
  var message;
171
180
  if (file.response && typeof file.response === 'string') {
172
181
  message = file.response;
@@ -185,7 +194,11 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
185
194
  className: "".concat(prefixCls, "-list-item-info")
186
195
  }, iconAndPreview), actions, showProgress && /*#__PURE__*/React.createElement(_rcMotion["default"], {
187
196
  motionName: "".concat(rootPrefixCls, "-fade"),
188
- visible: file.status === 'uploading',
197
+ visible: mergedStatus === 'uploading'
198
+ // rc-motion 锁了版本2.4.3，但是新版本（2.7.3）已经fix，所以采用key
199
+ // https://github.com/react-component/motion/pull/24
200
+ ,
201
+ key: mergedStatus,
189
202
  motionDeadline: motionDeadline
190
203
  }, function (_ref2) {
191
204
  var motionClassName = _ref2.className;
@@ -203,7 +216,7 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
203
216
  }, loadingProgress);
204
217
  }));
205
218
  var listContainerNameClass = (0, _classnames["default"])("".concat(prefixCls, "-list-").concat(listType, "-container"), className);
206
- var item = file.status === 'error' ? /*#__PURE__*/React.createElement(_tooltip["default"], {
219
+ var item = mergedStatus === 'error' ? /*#__PURE__*/React.createElement(_tooltip["default"], {
207
220
  title: message,
208
221
  overlayClassName: "error-tooltip",
209
222
  getPopupContainer: function getPopupContainer(node) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "acud",
3
- "version": "1.2.18",
3
+ "version": "1.2.20",
4
4
  "description": "acg react 组件库",
5
5
  "license": "ISC",
6
6
  "author": "acg",