tdesign-react 0.25.1 → 0.26.0

package/esm/upload/upload.js

@@ -1,34 +1,34 @@
 /**
- * tdesign v0.25.1
+ * tdesign v0.26.0
  * (c) 2022 tdesign
  * @license MIT
  */
 
-import { _ as _toConsumableArray } from '../_chunks/dep-46120f73.js';
-import { _ as _asyncToGenerator, r as regenerator } from '../_chunks/dep-2f489a35.js';
-import { _ as _defineProperty } from '../_chunks/dep-7b5ee09e.js';
-import { _ as _slicedToArray } from '../_chunks/dep-bce0ce39.js';
+import { _ as _asyncToGenerator, r as regenerator } from '../_chunks/dep-27f0aed6.js';
+import { _ as _defineProperty } from '../_chunks/dep-ada514b9.js';
+import { _ as _toConsumableArray } from '../_chunks/dep-d08c8845.js';
+import { _ as _slicedToArray } from '../_chunks/dep-e9eb270f.js';
 import React, { useRef, useState, useCallback, useMemo, forwardRef } from 'react';
-import { i as isEmpty_1 } from '../_chunks/dep-611402ed.js';
-import '../_chunks/dep-f9242fec.js';
-import { _ as _SetCache, a as _cacheHas, b as _baseFindIndex } from '../_chunks/dep-deeece0d.js';
-import { _ as _typeof } from '../_chunks/dep-c869a7bd.js';
-import { f as _Uint8Array, e as _Stack } from '../_chunks/dep-e3baf9a5.js';
-import { a as _Symbol$1 } from '../_chunks/dep-fd49ee45.js';
-import { e as eq_1 } from '../_chunks/dep-a7731315.js';
-import { _ as _getAllKeys, k as keys_1 } from '../_chunks/dep-bfd83090.js';
-import { _ as _getTag } from '../_chunks/dep-c5782559.js';
-import { i as isArray_1 } from '../_chunks/dep-3f70a0f5.js';
-import '../_chunks/dep-72e1bd13.js';
-import { i as isBuffer$1, a as isTypedArray_1 } from '../_chunks/dep-ff79fb39.js';
-import { i as isObjectLike_1 } from '../_chunks/dep-c50b5bb9.js';
-import { a as isObject_1 } from '../_chunks/dep-4979c2b8.js';
-import { g as get_1 } from '../_chunks/dep-896efa92.js';
-import { h as hasIn_1 } from '../_chunks/dep-8f43c3b0.js';
-import { c as _isKey, b as _toKey, _ as _baseGet } from '../_chunks/dep-09442174.js';
-import { i as identity_1 } from '../_chunks/dep-bb55dd2f.js';
-import { _ as _baseProperty } from '../_chunks/dep-f3331392.js';
-import { t as toInteger_1 } from '../_chunks/dep-2e56daa5.js';
+import { i as isEmpty_1 } from '../_chunks/dep-fad90f7c.js';
+import '../_chunks/dep-c5e6a539.js';
+import { _ as _baseGet, c as _isKey, b as _toKey } from '../_chunks/dep-8d8a59c5.js';
+import { _ as _baseSet, h as hasIn_1 } from '../_chunks/dep-17843c23.js';
+import { i as identity_1 } from '../_chunks/dep-4506ade7.js';
+import { _ as _SetCache, a as _cacheHas, b as _baseFindIndex } from '../_chunks/dep-f93431de.js';
+import { _ as _typeof } from '../_chunks/dep-87647568.js';
+import { f as _Uint8Array, e as _Stack } from '../_chunks/dep-8fea0649.js';
+import { a as _Symbol$1 } from '../_chunks/dep-76bc9a8e.js';
+import { e as eq_1 } from '../_chunks/dep-f81e5642.js';
+import { _ as _getAllKeys, k as keys_1 } from '../_chunks/dep-16ace5a1.js';
+import { _ as _getTag } from '../_chunks/dep-b0d60167.js';
+import { i as isArray_1 } from '../_chunks/dep-d945c24c.js';
+import '../_chunks/dep-43841bc9.js';
+import { i as isBuffer$1, a as isTypedArray_1 } from '../_chunks/dep-5e81ed02.js';
+import { i as isObjectLike_1 } from '../_chunks/dep-456d7444.js';
+import { a as isObject_1 } from '../_chunks/dep-08a538d7.js';
+import { g as get_1 } from '../_chunks/dep-4e3754ac.js';
+import { _ as _baseProperty } from '../_chunks/dep-e1cc480b.js';
+import { t as toInteger_1 } from '../_chunks/dep-3d0febec.js';
 import { Dialog } from '../dialog/index.js';
 import Dragger from './dragger.js';
 import UploadTrigger from './upload-trigger.js';
@@ -40,28 +40,34 @@ import SingleFile from './themes/single-file.js';
 import ImageCard from './themes/image-card.js';
 import Index from './themes/flow-list/index.js';
 import BooleanRender from './boolean-render.js';
-import { isSingleFile, updateFileList, urlCreator, finishUpload } from './util.js';
+import { isSingleFile, urlCreator, finishUpload } from './util.js';
 import useDefaultValue from './hooks/useDefaultValue.js';
 import useHandleLimit from './hooks/useSizeLimit.js';
-import '../_chunks/dep-f7f44030.js';
-import '../_chunks/dep-8823a92e.js';
-import '../_chunks/dep-c008b410.js';
-import '../_chunks/dep-90eb9c48.js';
-import '../_chunks/dep-a180486a.js';
-import '../_chunks/dep-65c1d541.js';
-import '../_chunks/dep-1d476548.js';
-import '../_chunks/dep-6d5c2511.js';
-import '../_chunks/dep-360d6135.js';
-import '../_chunks/dep-91fd8fa6.js';
+import '../_chunks/dep-722fe6eb.js';
+import '../_chunks/dep-96268fc3.js';
+import '../_chunks/dep-cfa4c989.js';
+import '../_chunks/dep-a3b25bd0.js';
+import '../_chunks/dep-6a9e2ff5.js';
+import '../_chunks/dep-9c495ff4.js';
+import '../_chunks/dep-6ef661cb.js';
+import '../_chunks/dep-b52934ba.js';
+import '../_chunks/dep-a3e8ed28.js';
+import '../_chunks/dep-a1b98045.js';
 import '../dialog/Dialog.js';
-import '../_chunks/dep-c0b93c23.js';
-import '../_chunks/dep-35ecd49c.js';
+import '../_chunks/dep-9f6be541.js';
+import '../_chunks/dep-f5031153.js';
 import 'tdesign-icons-react';
 import '../button/index.js';
 import '../button/Button.js';
 import 'classnames';
 import '../_util/noop.js';
 import '../_util/useRipple.js';
+import '../_util/useAnimation.js';
+import '../_chunks/dep-a8619fd7.js';
+import '../_chunks/dep-2f1a6244.js';
+import '../locale/zh_CN.js';
+import '../_common/js/locale/zh_CN.js';
+import '../config-provider/zh_CN_config.js';
 import '../_util/setStyle.js';
 import '../_util/dom.js';
 import 'raf';
@@ -74,30 +80,96 @@ import '../loading/gradient.js';
 import '../_common/js/loading/circle-adapter.js';
 import '../_common/js/utils/set-style.js';
 import '../_common/js/utils/helper.js';
-import '../_chunks/dep-b327e031.js';
-import '../_chunks/dep-491ab1c7.js';
-import '../locale/zh_CN.js';
-import '../_common/js/locale/zh_CN.js';
-import '../config-provider/defaultConfig.js';
+import '../loading/plugin.js';
 import '../loading/style/index.js';
 import '../loading/type.js';
-import '../loading/plugin.js';
 import '../button/style/index.js';
 import '../button/type.js';
 import '../dialog/RenderDialog.js';
 import 'react-transition-group';
 import '../_util/useLayoutEffect.js';
+import '../_util/useDialogEsc.js';
 import '../_util/useSetState.js';
 import '../config-provider/index.js';
 import '../config-provider/ConfigProvider.js';
+import '../dialog/plugin.js';
 import '../dialog/style/index.js';
 import '../dialog/type.js';
-import '../dialog/plugin.js';
 import './themes/dragger-progress.js';
 import './themes/flow-list/img-list.js';
 import './themes/flow-list/file-list.js';
 import '../_util/useDefault.js';
 
+var baseGet$1 = _baseGet,
+    baseSet = _baseSet;
+/**
+ * The base implementation of `_.update`.
+ *
+ * @private
+ * @param {Object} object The object to modify.
+ * @param {Array|string} path The path of the property to update.
+ * @param {Function} updater The function to produce the updated value.
+ * @param {Function} [customizer] The function to customize path creation.
+ * @returns {Object} Returns `object`.
+ */
+
+function baseUpdate$1(object, path, updater, customizer) {
+  return baseSet(object, path, updater(baseGet$1(object, path)), customizer);
+}
+
+var _baseUpdate = baseUpdate$1;
+
+var identity$1 = identity_1;
+/**
+ * Casts `value` to `identity` if it's not a function.
+ *
+ * @private
+ * @param {*} value The value to inspect.
+ * @returns {Function} Returns cast function.
+ */
+
+function castFunction$1(value) {
+  return typeof value == 'function' ? value : identity$1;
+}
+
+var _castFunction = castFunction$1;
+
+var baseUpdate = _baseUpdate,
+    castFunction = _castFunction;
+/**
+ * This method is like `_.set` except that accepts `updater` to produce the
+ * value to set. Use `_.updateWith` to customize `path` creation. The `updater`
+ * is invoked with one argument: (value).
+ *
+ * **Note:** This method mutates `object`.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.6.0
+ * @category Object
+ * @param {Object} object The object to modify.
+ * @param {Array|string} path The path of the property to set.
+ * @param {Function} updater The function to produce the updated value.
+ * @returns {Object} Returns `object`.
+ * @example
+ *
+ * var object = { 'a': [{ 'b': { 'c': 3 } }] };
+ *
+ * _.update(object, 'a[0].b.c', function(n) { return n * n; });
+ * console.log(object.a[0].b.c);
+ * // => 9
+ *
+ * _.update(object, 'x[0].y.z', function(n) { return n ? n + 1 : 0; });
+ * console.log(object.x[0].y.z);
+ * // => 0
+ */
+
+function update(object, path, updater) {
+  return object == null ? object : baseUpdate(object, path, castFunction(updater));
+}
+
+var update_1 = update;
+
 /**
  * A specialized version of `_.some` for arrays without support for iteratee
  * shorthands.
@@ -943,6 +1015,8 @@ var Upload = function Upload(props, ref) {
       onDragenter = _useDefaultValue.onDragenter,
       onDragleave = _useDefaultValue.onDragleave,
       onPreview = _useDefaultValue.onPreview,
+      onSelectChange = _useDefaultValue.onSelectChange,
+      onCancelUpload = _useDefaultValue.onCancelUpload,
       requestMethod = _useDefaultValue.requestMethod,
       customDraggerRender = _useDefaultValue.customDraggerRender,
       children = _useDefaultValue.children;
@@ -956,6 +1030,7 @@ var Upload = function Upload(props, ref) {
       t = _useLocaleReceiver2[1];
 
   var uploadRef = useRef();
+  var filesRef = useRef(fileList);
 
   var _useState = useState(""),
       _useState2 = _slicedToArray(_useState, 2),
@@ -1005,6 +1080,30 @@ var Upload = function Upload(props, ref) {
     uploadRef === null || uploadRef === void 0 ? void 0 : uploadRef.current.click();
   };
 
+  var multiUpdateFileList = function multiUpdateFileList(file) {
+    var deleteFile = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+    var nextFileList = _toConsumableArray(filesRef.current);
+
+    var fileIndex = nextFileList.findIndex(function (_ref) {
+      var uid = _ref.uid;
+      return uid === file.uid;
+    });
+
+    if (deleteFile) {
+      fileIndex !== -1 && nextFileList.splice(fileIndex, 1);
+      return nextFileList;
+    }
+
+    if (fileIndex === -1) {
+      nextFileList.push(file);
+    } else {
+      nextFileList[fileIndex] = file;
+    }
+
+    return nextFileList;
+  };
+
   var getLimitedFiles = function getLimitedFiles() {
     var files = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     var isSingleMode = isSingleFile(multiple, theme);
@@ -1042,12 +1141,12 @@ var Upload = function Upload(props, ref) {
       e: event,
       file: file
     };
-    var nextFileList = updateFileList(file, fileList, true);
+    var nextFileList = multiUpdateFileList(file, true);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextFileList, {
       trigger: "upload fail"
     });
     onFail === null || onFail === void 0 ? void 0 : onFail(context);
-  }, [fileList, formatResponse, errorText, onChange, onFail]);
+  }, [formatResponse, errorText, onChange, onFail]);
   var singleDraggable = useMemo(function () {
     return !multiple && draggable && ["file", "file-input", "image", "custom"].includes(theme);
   }, [draggable, multiple, theme]);
@@ -1063,10 +1162,10 @@ var Upload = function Upload(props, ref) {
     });
   };
 
-  var handleSuccess = useCallback(function (_ref) {
-    var e = _ref.e,
-        tmpFile = _ref.file,
-        response = _ref.response;
+  var handleSuccess = useCallback(function (_ref2) {
+    var e = _ref2.e,
+        tmpFile = _ref2.file,
+        response = _ref2.response;
     var file = tmpFile;
     file.status = "success";
     file.url = response.url || file.url;
@@ -1075,7 +1174,7 @@ var Upload = function Upload(props, ref) {
       response: response,
       trigger: "upload-success"
     };
-    var nextFileList = updateFileList(file, fileList);
+    var nextFileList = multiUpdateFileList(file);
     var sContext = {
       file: file,
       fileList: nextFileList,
@@ -1089,13 +1188,13 @@ var Upload = function Upload(props, ref) {
     });
     onChange === null || onChange === void 0 ? void 0 : onChange(nextFileList, context);
     onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(sContext);
-  }, [fileList, onChange, onSuccess]);
-  var handleProgress = useCallback(function (_ref2) {
-    var e = _ref2.e,
-        file = _ref2.file,
-        percent = _ref2.percent,
-        _ref2$type = _ref2.type,
-        type = _ref2$type === void 0 ? "mock" : _ref2$type;
+  }, [onChange, onSuccess]);
+  var handleProgress = useCallback(function (_ref3) {
+    var e = _ref3.e,
+        file = _ref3.file,
+        percent = _ref3.percent,
+        _ref3$type = _ref3.type,
+        type = _ref3$type === void 0 ? "mock" : _ref3$type;
 
     var tmpFile = _objectSpread({}, file);
 
@@ -1106,12 +1205,12 @@ var Upload = function Upload(props, ref) {
       file: tmpFile,
       type: type
     };
-    var nextFileList = updateFileList(tmpFile, fileList);
+    var nextFileList = multiUpdateFileList(tmpFile);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextFileList, {
       trigger: "progress"
     });
     onProgress === null || onProgress === void 0 ? void 0 : onProgress(progressCtx);
-  }, [fileList, onChange, onProgress]);
+  }, [onChange, onProgress]);
   var handleRequestMethod = useCallback(function (file) {
     if (typeof requestMethod !== "function") {
       console.warn("TDesign Upload Warn: `requestMethod` must be a function.");
@@ -1140,7 +1239,7 @@ var Upload = function Upload(props, ref) {
     });
   }, [handleSuccess, onError, requestMethod]);
   var upload = useCallback( /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(uploadFile) {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(uploadFile) {
       var file;
       return regenerator.wrap(function _callee$(_context) {
         while (1) {
@@ -1176,7 +1275,7 @@ var Upload = function Upload(props, ref) {
               return _context.abrupt("return", handleRequestMethod(file));
 
             case 10:
-              xhr({
+              file.xhr = xhr({
                 action: action,
                 data: data,
                 file: file,
@@ -1197,7 +1296,7 @@ var Upload = function Upload(props, ref) {
     }));
 
     return function (_x) {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }(), [action, data, handleProgress, handleRequestMethod, handleSuccess, headers, name, onError, requestMethod, withCredentials]);
 
@@ -1304,20 +1403,22 @@ var Upload = function Upload(props, ref) {
     if (disabled) return;
     var files = event.target.files;
     var uploadFiles2 = generateUploadFiles(files);
-    setUploading(true);
+    onSelectChange === null || onSelectChange === void 0 ? void 0 : onSelectChange(uploadFiles2);
     uploadRef.current.value = "";
     onChange === null || onChange === void 0 ? void 0 : onChange(uploadFiles2, {
       trigger: "upload"
     });
+    setUploading(true);
   };
 
   var handleDragChange = function handleDragChange(files) {
     if (disabled) return;
     var uploadFiles2 = generateUploadFiles(files);
-    setUploading(true);
+    onSelectChange === null || onSelectChange === void 0 ? void 0 : onSelectChange(uploadFiles2);
     onChange === null || onChange === void 0 ? void 0 : onChange(uploadFiles2, {
       trigger: "drag"
     });
+    setUploading(true);
   };
 
   var handleDragenter = useCallback(function (e) {
@@ -1333,14 +1434,26 @@ var Upload = function Upload(props, ref) {
     });
   }, [disabled, onDragleave]);
   var cancelUpload = useCallback(function () {
-    if (!fileList[0]) {
-      var _urlCreator2;
-
-      (_urlCreator2 = urlCreator()) === null || _urlCreator2 === void 0 ? void 0 : _urlCreator2.revokeObjectURL(fileList[0].url);
-    }
-
+    var files = _toConsumableArray(filesRef.current);
+
+    setUploading(false);
+    files.forEach(function (file) {
+      if (file.xhr && file.status === "progress") {
+        file.xhr.abort();
+        update_1(file, "status", function () {
+          return "waiting";
+        });
+        update_1(file, "xhr", function () {
+          return void 0;
+        });
+      }
+    });
+    onCancelUpload === null || onCancelUpload === void 0 ? void 0 : onCancelUpload();
+    onChange === null || onChange === void 0 ? void 0 : onChange(files, {
+      trigger: "cancelUpload"
+    });
     uploadRef.current.value = "";
-  }, [fileList]);
+  }, [onCancelUpload, onChange]);
   var showUploadList = useMemo(function () {
     return multiple && ["file-flow", "image-flow"].includes(theme);
   }, [theme, multiple]);
@@ -1414,6 +1527,7 @@ var Upload = function Upload(props, ref) {
       return finishUpload(file.status);
     });
     setUploading(!finish);
+    filesRef.current = fileList;
   }, [fileList]);
   React.useImperativeHandle(ref, function () {
     return {