@sheinx/hooks 3.0.0-alpha.1

package/esm/components/use-upload/use-upload.js

@@ -0,0 +1,492 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.promise.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.array.from.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.array.splice.js");
+var _react = require("react");
+var _immer = require("immer");
+var _useLatestObj = _interopRequireDefault(require("../../common/use-latest-obj"));
+var _xhr = _interopRequireDefault(require("./xhr"));
+var _accept = require("../../utils/accept");
+var _utils = require("../../utils");
+var _ = require("../..");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var VALIDATORITEMS = [{
+  key: 'size',
+  param: function param(blob) {
+    return blob.size;
+  }
+}, {
+  key: 'ext',
+  param: function param(blob) {
+    var exts = blob.name.split('.');
+    return exts[exts.length - 1];
+  }
+}, {
+  key: 'customValidator',
+  param: function param(blob) {
+    return blob;
+  }
+}, {
+  key: 'imageSize',
+  param: function param(blob, image) {
+    return image;
+  }
+}];
+var promised = function promised(action) {
+  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    args[_key - 1] = arguments[_key];
+  }
+  var res = action.apply(void 0, args);
+  if (res && typeof res.then === 'function') return res;
+  return new Promise(function (resolve, reject) {
+    if (res instanceof Error) reject(res);
+    resolve(true);
+  });
+};
+var useUpload = function useUpload(props) {
+  var _props$limit = props.limit,
+    limit = _props$limit === void 0 ? 100 : _props$limit,
+    _props$value = props.value,
+    value = _props$value === void 0 ? [] : _props$value;
+  var accept = props.forceAccept || props.accept;
+  var forceAccept = !!props.forceAccept;
+  var _useState = (0, _react.useState)({}),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    filesState = _useState2[0],
+    setFiles = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    recycleValues = _useState4[0],
+    setRecycleValues = _useState4[1];
+  var restLength = limit - value.length - Object.keys(filesState).length;
+  var text = _objectSpread({
+    forceAcceptErrorMsg: 'invalidAccept',
+    invalidImage: 'invalidImage'
+  }, props.text);
+  var validateFile = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(blob, image) {
+      var validator, error, i, acceptRes, item;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            validator = props.validator;
+            error = null;
+            i = 0;
+            if (!forceAccept) {
+              _context.next = 7;
+              break;
+            }
+            acceptRes = (0, _accept.attrAccept)(blob, accept);
+            if (acceptRes) {
+              _context.next = 7;
+              break;
+            }
+            return _context.abrupt("return", new Error(text.forceAcceptErrorMsg));
+          case 7:
+            if (!VALIDATORITEMS[i]) {
+              _context.next = 23;
+              break;
+            }
+            item = VALIDATORITEMS[i];
+            if (!(validator && typeof validator[item.key] === 'function')) {
+              _context.next = 20;
+              break;
+            }
+            _context.prev = 10;
+            _context.next = 13;
+            return promised(validator[item.key], item.param(blob, image), filesState);
+          case 13:
+            _context.next = 18;
+            break;
+          case 15:
+            _context.prev = 15;
+            _context.t0 = _context["catch"](10);
+            error = _context.t0 instanceof Error ? _context.t0 : new Error(_context.t0);
+          case 18:
+            if (!(error instanceof Error)) {
+              _context.next = 20;
+              break;
+            }
+            return _context.abrupt("return", error);
+          case 20:
+            i += 1;
+            _context.next = 7;
+            break;
+          case 23:
+            return _context.abrupt("return", null);
+          case 24:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[10, 15]]);
+    }));
+    return function validateFile(_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var validatorHandle = function validatorHandle(error, file) {
+    var _props$validatorHandl = props.validatorHandle,
+      vth = _props$validatorHandl === void 0 ? true : _props$validatorHandl;
+    if (typeof vth === 'function') return vth(error, file);
+    return !!vth;
+  };
+  var getAction = function getAction(file) {
+    var action = props.action;
+    if (typeof action === 'string') return action;
+    if (typeof action === 'function') return action(file);
+    return '';
+  };
+  var handleError = function handleError(id, xhr, file) {
+    var onHttpError = props.onHttpError;
+    var message = xhr.statusText;
+    var onError = props.onError;
+    if (onError) message = onError(xhr, file) || message;
+    if (onHttpError) message = onHttpError(xhr, file) || message;
+    setFiles(function (files) {
+      return (0, _immer.produce)(files, function (draft) {
+        if (!draft[id]) return draft;
+        draft[id].status = 'error';
+        draft[id].message = message;
+      });
+    });
+  };
+  var getCurrent = (0, _.usePersistFn)(function () {
+    return {
+      filesState: filesState
+    };
+  });
+  var uploadFile = function uploadFile(id, file, data) {
+    var request = props.request || _xhr.default;
+    var throttle = false;
+    var options = {
+      url: getAction(file),
+      name: props.htmlName || 'file',
+      params: props.params,
+      withCredentials: !!props.withCredentials,
+      file: file,
+      headers: props.headers,
+      responseType: props.responseType,
+      onStart: props.onStart,
+      onProgress: function onProgress(e, msg) {
+        if (throttle) return;
+        throttle = true;
+        setTimeout(function () {
+          throttle = false;
+        }, 16);
+        var percent = typeof e.percent === 'number' ? e.percent : e.loaded / e.total * 100;
+        var _getCurrent = getCurrent(),
+          filesState = _getCurrent.filesState;
+        var newFiles = _objectSpread({}, filesState);
+        if (!newFiles[id]) return;
+        newFiles[id].process = percent;
+        if (msg) newFiles[id].message = msg;
+        setFiles(newFiles);
+        if (typeof props.onProgress === 'function') {
+          props.onProgress(newFiles[id]);
+        }
+      },
+      onLoad: function onLoad(xhr) {
+        if (!/^2|1223/.test("".concat(xhr.status))) {
+          handleError(id, xhr, file);
+          return;
+        }
+        var result;
+        if (xhr.responseType === 'text' || !xhr.responseType) result = xhr.responseText;
+        if (!result) result = xhr.response;
+        if (props.onSuccess) {
+          result = props.onSuccess(result, file, data, xhr);
+        }
+        if (result instanceof Error) {
+          setFiles(function (files) {
+            return (0, _immer.produce)(files, function (draft) {
+              if (!draft[id]) return draft;
+              draft[id].status = 'error';
+              draft[id].name = file.name;
+              draft[id].message = result.message;
+            });
+          });
+        } else {
+          setFiles(function (files) {
+            return (0, _immer.produce)(files, function (draft) {
+              delete draft[id];
+            });
+          });
+          // add value
+          var values = (0, _immer.produce)(value, function (draft) {
+            draft.push(result);
+          });
+          props.onChange(values);
+        }
+      },
+      onError: function onError(xhr) {
+        return handleError(id, xhr, file);
+      }
+    };
+    if (props.onProgress === false || props.onProgress === null) {
+      options.onProgress = function () {};
+    }
+    return request(options);
+  };
+
+  /**
+   *
+   * @param files
+   * @param fromDragger
+   *
+   *  1. 判断文件是否超出个数限制
+   *  2. 进行文件本地校验
+   *  3. 错误处理 validatorHandle 为 true 进行报错处理， 否则直接删除文件
+   *  3.1 错误结果也要 beforeUpload 处理 。。。？
+   *  4. beforeUpload  判断
+   *  4.1 then 判断status 上传
+   *  4.2 失败处理
+   *  5. 上传文件
+   */
+
+  var handleImage = function handleImage(blob) {
+    return new Promise(function (resolve, reject) {
+      var reader = new FileReader();
+      reader.onload = function (e) {
+        var _e$target;
+        var data = (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.result;
+        var image = new window.Image();
+        image.onerror = function () {
+          reject(new Error(text.invalidImage));
+        };
+        image.onload = function () {
+          resolve({
+            src: data,
+            width: image.width,
+            height: image.height
+          });
+        };
+        image.src = data;
+      };
+      reader.readAsDataURL(blob);
+    });
+  };
+  var addFiles = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(files) {
+      var fileList, newFiles, resetLength, list, _loop, i, _ret;
+      return _regenerator.default.wrap(function _callee2$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            if (!props.disabled) {
+              _context3.next = 2;
+              break;
+            }
+            return _context3.abrupt("return");
+          case 2:
+            fileList = files;
+            newFiles = _objectSpread({}, filesState);
+            if (props.filesFilter) fileList = props.filesFilter(files);
+            resetLength = limit - Object.keys(newFiles).length - value.length;
+            if (!(resetLength < 0)) {
+              _context3.next = 8;
+              break;
+            }
+            return _context3.abrupt("return");
+          case 8:
+            list = Array.from({
+              length: Math.min(fileList.length, resetLength)
+            });
+            _loop = /*#__PURE__*/_regenerator.default.mark(function _loop() {
+              var blob, id, fileRecord, error, imageResult, beforeUploadResult;
+              return _regenerator.default.wrap(function _loop$(_context2) {
+                while (1) switch (_context2.prev = _context2.next) {
+                  case 0:
+                    blob = fileList[i];
+                    id = (0, _utils.getUidStr)();
+                    fileRecord = {
+                      name: blob.name,
+                      process: -1,
+                      status: 'uploading',
+                      blob: blob
+                    };
+                    newFiles[id] = fileRecord;
+                    error = null;
+                    imageResult = undefined;
+                    if (!(props.isImage && !props.ignorePreview)) {
+                      _context2.next = 17;
+                      break;
+                    }
+                    _context2.prev = 7;
+                    _context2.next = 10;
+                    return handleImage(blob);
+                  case 10:
+                    imageResult = _context2.sent;
+                    fileRecord.src = imageResult.src;
+                    _context2.next = 17;
+                    break;
+                  case 14:
+                    _context2.prev = 14;
+                    _context2.t0 = _context2["catch"](7);
+                    if (_context2.t0 instanceof Error) error = _context2.t0;
+                  case 17:
+                    if (error) {
+                      _context2.next = 21;
+                      break;
+                    }
+                    _context2.next = 20;
+                    return validateFile(blob, imageResult);
+                  case 20:
+                    error = _context2.sent;
+                  case 21:
+                    if (!(error instanceof Error)) {
+                      _context2.next = 30;
+                      break;
+                    }
+                    if (validatorHandle(error, blob)) {
+                      _context2.next = 26;
+                      break;
+                    }
+                    delete newFiles[id];
+                    setFiles(_objectSpread({}, newFiles));
+                    return _context2.abrupt("return", "continue");
+                  case 26:
+                    fileRecord.message = error.message;
+                    fileRecord.status = 'error';
+                    setFiles(_objectSpread({}, newFiles));
+                    return _context2.abrupt("return", "continue");
+                  case 30:
+                    if (!props.beforeUpload) {
+                      _context2.next = 37;
+                      break;
+                    }
+                    beforeUploadResult = props.beforeUpload(blob); // @ts-ignoreq
+                    if (!(beforeUploadResult && beforeUploadResult.then)) {
+                      _context2.next = 35;
+                      break;
+                    }
+                    props.beforeUpload(blob).then(function (args) {
+                      if (args.status !== 'error') {
+                        newFiles[id].xhr = uploadFile(id, blob, fileRecord.src);
+                        setFiles(_objectSpread({}, newFiles));
+                      }
+                    }).catch(function () {
+                      delete newFiles[id];
+                      setFiles(_objectSpread({}, newFiles));
+                    });
+                    return _context2.abrupt("return", "continue");
+                  case 35:
+                    _context2.next = 39;
+                    break;
+                  case 37:
+                    fileRecord.xhr = uploadFile(id, blob, fileRecord.src);
+                    setFiles(_objectSpread({}, newFiles));
+                  case 39:
+                  case "end":
+                    return _context2.stop();
+                }
+              }, _loop, null, [[7, 14]]);
+            });
+            i = 0;
+          case 11:
+            if (!(i < list.length)) {
+              _context3.next = 19;
+              break;
+            }
+            return _context3.delegateYield(_loop(), "t0", 13);
+          case 13:
+            _ret = _context3.t0;
+            if (!(_ret === "continue")) {
+              _context3.next = 16;
+              break;
+            }
+            return _context3.abrupt("continue", 16);
+          case 16:
+            i++;
+            _context3.next = 11;
+            break;
+          case 19:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee2);
+    }));
+    return function addFiles(_x3) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var removeFile = function removeFile(id) {
+    var beforeCancel = props.beforeCancel,
+      onErrorRemove = props.onErrorRemove;
+    var file = filesState[id];
+    if (beforeCancel && _.util.isFunc(beforeCancel)) beforeCancel(file);
+    if (file) {
+      if (file.xhr && file.xhr.abort) file.xhr.abort();
+      setFiles(function (pre) {
+        return (0, _immer.produce)(pre, function (draft) {
+          var newFiles = _objectSpread({}, draft);
+          delete newFiles[id];
+          return newFiles;
+        });
+      });
+      if (file.status === 'error' && onErrorRemove) {
+        onErrorRemove(file.xhr, file.blob, file);
+      }
+    }
+  };
+  var removeValue = function removeValue(index) {
+    if (props.disabled) return;
+    var recoverAble = props.recoverAble,
+      beforeRemove = props.beforeRemove;
+    var current = props.value[index];
+    var startRemove = typeof beforeRemove === 'function' ? beforeRemove(current) : Promise.resolve();
+    startRemove.then(function () {
+      var newRecycle = (0, _toConsumableArray2.default)(recycleValues);
+      if (typeof recoverAble !== 'number' ? !!recoverAble : recycleValues.length < recoverAble) {
+        newRecycle.push(value[index]);
+      }
+      setRecycleValues(newRecycle);
+      var newValue = (0, _immer.produce)(props.value, function (draft) {
+        draft.splice(index, 1);
+      });
+      props.onChange(newValue);
+    }).catch(function () {});
+  };
+  var recoverValue = function recoverValue(index) {
+    if (props.disabled) return;
+    props.onChange((0, _immer.produce)(props.value, function (draft) {
+      draft.push(recycleValues[index]);
+    }));
+    setRecycleValues(function (pre) {
+      var newRecycle = (0, _toConsumableArray2.default)(pre);
+      newRecycle.splice(index, 1);
+      return newRecycle;
+    });
+  };
+  var func = (0, _useLatestObj.default)({
+    addFiles: addFiles,
+    removeFile: removeFile,
+    removeValue: removeValue,
+    recoverValue: recoverValue
+  });
+  return {
+    files: filesState,
+    recycleValues: recycleValues,
+    accept: accept,
+    restLength: restLength,
+    func: func
+  };
+};
+var _default = useUpload;
+exports.default = _default;