1 | "use strict";
|
2 |
|
3 | var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
4 |
|
5 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
6 |
|
7 | Object.defineProperty(exports, "__esModule", {
|
8 | value: true
|
9 | });
|
10 | exports["default"] = void 0;
|
11 |
|
12 | var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
13 |
|
14 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
15 |
|
16 | var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
17 |
|
18 | var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
19 |
|
20 | var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
21 |
|
22 | var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
23 |
|
24 | var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
25 |
|
26 | var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
27 |
|
28 | var _react = _interopRequireWildcard(require("react"));
|
29 |
|
30 | var _classnames = _interopRequireDefault(require("classnames"));
|
31 |
|
32 | var _reactBeautifulDnd = require("react-beautiful-dnd");
|
33 |
|
34 | var _icon = _interopRequireDefault(require("../icon"));
|
35 |
|
36 | var _tooltip = _interopRequireDefault(require("../tooltip"));
|
37 |
|
38 | var _progress = _interopRequireDefault(require("../progress"));
|
39 |
|
40 | var _animate = _interopRequireDefault(require("../animate"));
|
41 |
|
42 | var _enum = require("../progress/enum");
|
43 |
|
44 | var _configure = require("../configure");
|
45 |
|
46 | var _utils = require("./utils");
|
47 |
|
48 | function _createSuper(Derived) {
|
49 | function isNativeReflectConstruct() {
|
50 | if (typeof Reflect === "undefined" || !Reflect.construct) return false;
|
51 | if (Reflect.construct.sham) return false;
|
52 | if (typeof Proxy === "function") return true;
|
53 |
|
54 | try {
|
55 | Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
|
56 | return true;
|
57 | } catch (e) {
|
58 | return false;
|
59 | }
|
60 | }
|
61 |
|
62 | return function () {
|
63 | var Super = (0, _getPrototypeOf2["default"])(Derived),
|
64 | result;
|
65 |
|
66 | if (isNativeReflectConstruct()) {
|
67 | var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
|
68 | result = Reflect.construct(Super, arguments, NewTarget);
|
69 | } else {
|
70 | result = Super.apply(this, arguments);
|
71 | }
|
72 |
|
73 | return (0, _possibleConstructorReturn2["default"])(this, result);
|
74 | };
|
75 | }
|
76 |
|
77 | var isImageUrl = function isImageUrl(url) {
|
78 | return /^data:image\//.test(url) || /\.(webp|svg|png|gif|jpg|jpeg)$/.test(url);
|
79 | };
|
80 |
|
81 |
|
82 | var reorder = function reorder(list, startIndex, endIndex) {
|
83 | var result = Array.from(list);
|
84 |
|
85 | var _result$splice = result.splice(startIndex, 1),
|
86 | _result$splice2 = (0, _slicedToArray2["default"])(_result$splice, 1),
|
87 | removed = _result$splice2[0];
|
88 |
|
89 | result.splice(endIndex, 0, removed);
|
90 | return result;
|
91 | };
|
92 |
|
93 | var UploadList =
|
94 |
|
95 | function (_Component) {
|
96 | (0, _inherits2["default"])(UploadList, _Component);
|
97 |
|
98 | var _super = _createSuper(UploadList);
|
99 |
|
100 | function UploadList() {
|
101 | var _this;
|
102 |
|
103 | (0, _classCallCheck2["default"])(this, UploadList);
|
104 | _this = _super.apply(this, arguments);
|
105 |
|
106 | _this.handleClose = function (file) {
|
107 | var onRemove = _this.props.onRemove;
|
108 |
|
109 | if (onRemove) {
|
110 | onRemove(file);
|
111 | }
|
112 | };
|
113 |
|
114 | _this.handlePreview = function (file, e) {
|
115 | var onPreview = _this.props.onPreview;
|
116 |
|
117 | if (!onPreview) {
|
118 | return;
|
119 | }
|
120 |
|
121 | e.preventDefault();
|
122 | return onPreview(file);
|
123 | };
|
124 | |
125 |
|
126 |
|
127 |
|
128 |
|
129 |
|
130 | _this.onDragEnd = function (result) {
|
131 | var _this$props = _this.props,
|
132 | items = _this$props.items,
|
133 | onDragEnd = _this$props.onDragEnd;
|
134 |
|
135 | if (!result.destination) {
|
136 | return;
|
137 | }
|
138 |
|
139 | var dragItems = reorder(items, result.source.index, result.destination.index);
|
140 | onDragEnd(dragItems);
|
141 | };
|
142 |
|
143 | return _this;
|
144 | }
|
145 |
|
146 | (0, _createClass2["default"])(UploadList, [{
|
147 | key: "componentDidUpdate",
|
148 | value: function componentDidUpdate() {
|
149 | var _this2 = this;
|
150 |
|
151 | var _this$props2 = this.props,
|
152 | listType = _this$props2.listType,
|
153 | items = _this$props2.items,
|
154 | previewFile = _this$props2.previewFile;
|
155 |
|
156 | if (listType !== 'picture' && listType !== 'picture-card') {
|
157 | return;
|
158 | }
|
159 |
|
160 | (items || []).forEach(function (file) {
|
161 | if (typeof document === 'undefined' || typeof window === 'undefined' || !window.FileReader || !window.File || !(file.originFileObj instanceof File || file.originFileObj instanceof Blob) || file.thumbUrl !== undefined) {
|
162 | return;
|
163 | }
|
164 |
|
165 | file.thumbUrl = '';
|
166 |
|
167 | if (previewFile) {
|
168 | previewFile(file.originFileObj).then(function (previewDataUrl) {
|
169 |
|
170 | file.thumbUrl = previewDataUrl || '';
|
171 |
|
172 | _this2.forceUpdate();
|
173 | });
|
174 | }
|
175 | });
|
176 | }
|
177 | }, {
|
178 | key: "render",
|
179 | value: function render() {
|
180 | var _this3 = this,
|
181 | _classNames2;
|
182 |
|
183 | var _this$props3 = this.props,
|
184 | customizePrefixCls = _this$props3.prefixCls,
|
185 | _this$props3$items = _this$props3.items,
|
186 | items = _this$props3$items === void 0 ? [] : _this$props3$items,
|
187 | listType = _this$props3.listType,
|
188 | showPreviewIcon = _this$props3.showPreviewIcon,
|
189 | showRemoveIcon = _this$props3.showRemoveIcon,
|
190 | locale = _this$props3.locale,
|
191 | dragUploadList = _this$props3.dragUploadList;
|
192 | var prefixCls = (0, _configure.getPrefixCls)('upload', customizePrefixCls);
|
193 | var list = items.map(function (file, index) {
|
194 | var _classNames;
|
195 |
|
196 | var progress;
|
197 |
|
198 | var icon = _react["default"].createElement(_icon["default"], {
|
199 | type: file.status === 'uploading' ? 'loading' : 'attach_file'
|
200 | });
|
201 |
|
202 | if (listType === 'picture' || listType === 'picture-card') {
|
203 | if (listType === 'picture-card' && file.status === 'uploading') {
|
204 | icon = _react["default"].createElement("div", {
|
205 | className: "".concat(prefixCls, "-list-item-uploading-text")
|
206 | }, locale.uploading);
|
207 | } else if (!file.thumbUrl && !file.url) {
|
208 | icon = _react["default"].createElement(_icon["default"], {
|
209 | className: "".concat(prefixCls, "-list-item-thumbnail"),
|
210 | type: "picture"
|
211 | });
|
212 | } else {
|
213 | var thumbnail = isImageUrl(file.thumbUrl || file.url) ? _react["default"].createElement("img", {
|
214 | src: file.thumbUrl || file.url,
|
215 | alt: file.name
|
216 | }) : _react["default"].createElement(_icon["default"], {
|
217 | type: "file",
|
218 | style: {
|
219 | fontSize: 48,
|
220 | color: 'rgba(0,0,0,0.5)'
|
221 | }
|
222 | });
|
223 | icon = _react["default"].createElement("a", {
|
224 | className: "".concat(prefixCls, "-list-item-thumbnail"),
|
225 | onClick: function onClick(e) {
|
226 | return _this3.handlePreview(file, e);
|
227 | },
|
228 | href: file.url || file.thumbUrl,
|
229 | target: "_blank",
|
230 | rel: "noopener noreferrer"
|
231 | }, thumbnail);
|
232 | }
|
233 | }
|
234 |
|
235 | if (file.status === 'uploading') {
|
236 | var progressAttr = _this3.props.progressAttr;
|
237 |
|
238 | var loadingProgress = 'percent' in file ? _react["default"].createElement(_progress["default"], (0, _extends2["default"])({
|
239 | type: _enum.ProgressType.line
|
240 | }, progressAttr, {
|
241 | percent: file.percent
|
242 | })) : null;
|
243 | progress = _react["default"].createElement("div", {
|
244 | className: "".concat(prefixCls, "-list-item-progress"),
|
245 | key: "progress"
|
246 | }, loadingProgress);
|
247 | }
|
248 |
|
249 | var infoUploadingClass = (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-list-item"), true), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-list-item-").concat(file.status), true), _classNames));
|
250 | var preview = file.url ? _react["default"].createElement("a", (0, _extends2["default"])({}, file.linkProps, {
|
251 | href: file.url,
|
252 | target: "_blank",
|
253 | rel: "noopener noreferrer",
|
254 | className: "".concat(prefixCls, "-list-item-name"),
|
255 | onClick: function onClick(e) {
|
256 | return _this3.handlePreview(file, e);
|
257 | },
|
258 | title: file.name
|
259 | }), file.name) : _react["default"].createElement("span", {
|
260 | className: "".concat(prefixCls, "-list-item-name"),
|
261 | onClick: function onClick(e) {
|
262 | return _this3.handlePreview(file, e);
|
263 | },
|
264 | title: file.name
|
265 | }, file.name);
|
266 | var style = file.url || file.thumbUrl ? undefined : {
|
267 | pointerEvents: 'none',
|
268 | opacity: 0.5
|
269 | };
|
270 | var previewIcon = showPreviewIcon ? _react["default"].createElement("a", {
|
271 | href: file.url || file.thumbUrl,
|
272 | target: "_blank",
|
273 | rel: "noopener noreferrer",
|
274 | style: style,
|
275 | onClick: function onClick(e) {
|
276 | return _this3.handlePreview(file, e);
|
277 | },
|
278 | title: locale.previewFile
|
279 | }, _react["default"].createElement(_icon["default"], {
|
280 | type: "visibility"
|
281 | })) : null;
|
282 | var removeIcon = showRemoveIcon ? _react["default"].createElement(_icon["default"], {
|
283 | type: "delete",
|
284 | title: locale.removeFile,
|
285 | onClick: function onClick() {
|
286 | return _this3.handleClose(file);
|
287 | }
|
288 | }) : null;
|
289 | var removeIconCross = showRemoveIcon ? _react["default"].createElement(_icon["default"], {
|
290 | type: "close",
|
291 | title: locale.removeFile,
|
292 | onClick: function onClick() {
|
293 | return _this3.handleClose(file);
|
294 | }
|
295 | }) : null;
|
296 | var actions = listType === 'picture-card' && file.status !== 'uploading' ? _react["default"].createElement("span", {
|
297 | className: "".concat(prefixCls, "-list-item-actions")
|
298 | }, previewIcon, removeIcon) : removeIconCross;
|
299 | var message;
|
300 |
|
301 | if (file.response && typeof file.response === 'string') {
|
302 | message = file.response;
|
303 | } else {
|
304 | message = file.error && file.error.statusText || locale.uploadError;
|
305 | }
|
306 |
|
307 | var iconAndPreview = file.status === 'error' ? _react["default"].createElement(_tooltip["default"], {
|
308 | title: message
|
309 | }, icon, preview) : _react["default"].createElement("span", null, icon, preview);
|
310 |
|
311 | if (dragUploadList) {
|
312 | return _react["default"].createElement(_reactBeautifulDnd.Draggable, {
|
313 | key: file.uid,
|
314 | draggableId: String(file.uid),
|
315 | index: index
|
316 | }, function (provided) {
|
317 | return _react["default"].createElement("div", (0, _extends2["default"])({
|
318 | className: infoUploadingClass,
|
319 | key: file.uid,
|
320 | ref: provided.innerRef
|
321 | }, provided.draggableProps, provided.dragHandleProps), _react["default"].createElement("div", {
|
322 | className: "".concat(prefixCls, "-list-item-info")
|
323 | }, iconAndPreview), actions, _react["default"].createElement(_animate["default"], {
|
324 | transitionName: "fade",
|
325 | component: ""
|
326 | }, progress));
|
327 | });
|
328 | }
|
329 |
|
330 | return _react["default"].createElement("div", {
|
331 | className: infoUploadingClass,
|
332 | key: file.uid
|
333 | }, _react["default"].createElement("div", {
|
334 | className: "".concat(prefixCls, "-list-item-info")
|
335 | }, iconAndPreview), actions, _react["default"].createElement(_animate["default"], {
|
336 | transitionName: "fade",
|
337 | component: ""
|
338 | }, progress));
|
339 | });
|
340 | var listClassNames = (0, _classnames["default"])((_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-list"), true), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-list-").concat(listType), true), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-list-drag"), dragUploadList), _classNames2));
|
341 | var animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate';
|
342 |
|
343 | if (dragUploadList) {
|
344 | return _react["default"].createElement(_reactBeautifulDnd.DragDropContext, {
|
345 | onDragEnd: this.onDragEnd
|
346 | }, _react["default"].createElement(_reactBeautifulDnd.Droppable, {
|
347 | droppableId: "droppable",
|
348 | direction: "horizontal"
|
349 | }, function (provided, snapshot) {
|
350 | return _react["default"].createElement("div", (0, _extends2["default"])({
|
351 | ref: provided.innerRef,
|
352 | style: {
|
353 | background: snapshot.isDraggingOver ? '#f2f9f4' : '',
|
354 | border: snapshot.isDraggingOver ? '2px dashed #1ab16f' : '',
|
355 | display: 'inline-flex',
|
356 | maxWidth: '100%',
|
357 | flexWrap: 'wrap',
|
358 | overflow: 'auto'
|
359 | }
|
360 | }, provided.droppableProps, {
|
361 | className: listClassNames
|
362 | }), list, provided.placeholder);
|
363 | }));
|
364 | }
|
365 |
|
366 | return _react["default"].createElement(_animate["default"], {
|
367 | transitionName: "".concat(prefixCls, "-").concat(animationDirection),
|
368 | component: "div",
|
369 | className: listClassNames
|
370 | }, list);
|
371 | }
|
372 | }]);
|
373 | return UploadList;
|
374 | }(_react.Component);
|
375 |
|
376 | exports["default"] = UploadList;
|
377 | UploadList.displayName = 'UploadList';
|
378 | UploadList.defaultProps = {
|
379 | listType: 'text',
|
380 | progressAttr: {
|
381 | strokeWidth: 2,
|
382 | showInfo: false
|
383 | },
|
384 | previewFile: _utils.previewImage,
|
385 | showRemoveIcon: true,
|
386 | showPreviewIcon: true,
|
387 | dragUploadList: false
|
388 | };
|
389 |
|