acud/lib/upload/Upload.js

acg react 组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof3 = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var React = _interopRequireWildcard(require("react"));
var _reactDom = require("react-dom");
var _BaseUpload = _interopRequireDefault(require("./BaseUpload"));
var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Dragger = _interopRequireDefault(require("./Dragger"));
var _UploadList = _interopRequireDefault(require("./UploadList"));
var _utils = require("./utils");
var _LocaleReceiver = _interopRequireDefault(require("../locale-provider/LocaleReceiver"));
var _default2 = _interopRequireDefault(require("../locale/default"));
var _configProvider = require("../config-provider");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/*
 * upload 上传
 * author zhousheng
 */
var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
  function adopt(value) {
    return value instanceof P ? value : new P(function (resolve) {
      resolve(value);
    });
  }
  return new (P || (P = Promise))(function (resolve, reject) {
    function fulfilled(value) {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    }
    function rejected(value) {
      try {
        step(generator["throw"](value));
      } catch (e) {
        reject(e);
      }
    }
    function step(result) {
      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
    }
    step((generator = generator.apply(thisArg, _arguments || [])).next());
  });
};
var LIST_IGNORE = "__LIST_IGNORE_".concat(Date.now(), "__");
var InternalUpload = function InternalUpload(props, ref) {
  var fileList = props.fileList,
    defaultFileList = props.defaultFileList,
    onRemove = props.onRemove,
    showUploadList = props.showUploadList,
    listType = props.listType,
    onPreview = props.onPreview,
    onDownload = props.onDownload,
    onUpload = props.onUpload,
    onChange = props.onChange,
    onDrop = props.onDrop,
    previewFile = props.previewFile,
    disabled = props.disabled,
    propLocale = props.locale,
    iconRender = props.iconRender,
    isImageUrl = props.isImageUrl,
    progress = props.progress,
    customizePrefixCls = props.prefixCls,
    className = props.className,
    type = props.type,
    children = props.children,
    style = props.style,
    motionDeadline = props.motionDeadline,
    itemRender = props.itemRender,
    maxCount = props.maxCount,
    description = props.description,
    _props$desPosition = props.desPosition,
    desPosition = _props$desPosition === void 0 ? 'bottom' : _props$desPosition;
  var _useMergedState = (0, _useMergedState3["default"])(defaultFileList || [], {
      value: fileList,
      postState: function postState(list) {
        return list !== null && list !== void 0 ? list : [];
      }
    }),
    _useMergedState2 = (0, _slicedToArray2["default"])(_useMergedState, 2),
    mergedFileList = _useMergedState2[0],
    setMergedFileList = _useMergedState2[1];
  var _React$useState = React.useState('drop'),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    dragState = _React$useState2[0],
    setDragState = _React$useState2[1];
  var upload = React.useRef();
  // Control mode will auto fill file uid if not provided
  React.useMemo(function () {
    var timestamp = Date.now();
    (fileList || []).forEach(function (file, index) {
      if (!file.uid && !Object.isFrozen(file)) {
        file.uid = "__AUTO__".concat(timestamp, "_").concat(index, "__");
      }
    });
  }, [fileList]);
  var onInternalChange = function onInternalChange(file, changedFileList, event) {
    var cloneList = (0, _toConsumableArray2["default"])(changedFileList);
    // Cut to match count
    cloneList = cloneList.slice(0, maxCount);
    // Prevent React18 auto batch since input[upload] trigger process at same time
    // which makes fileList closure problem
    (0, _reactDom.flushSync)(function () {
      setMergedFileList(cloneList);
    });
    var changeInfo = {
      file: file,
      fileList: cloneList
    };
    if (event) {
      changeInfo.event = event;
    }
    (0, _reactDom.flushSync)(function () {
      onChange === null || onChange === void 0 ? void 0 : onChange(changeInfo);
    });
  };
  var mergedBeforeUpload = function mergedBeforeUpload(file, fileListArgs) {
    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regenerator["default"].mark(function _callee() {
      var beforeUpload, transformFile, parsedFile, result;
      return _regenerator["default"].wrap(function (_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            beforeUpload = props.beforeUpload, transformFile = props.transformFile;
            parsedFile = file;
            if (!beforeUpload) {
              _context.next = 4;
              break;
            }
            _context.next = 1;
            return beforeUpload(file, fileListArgs);
          case 1:
            result = _context.sent;
            if (!(result === false)) {
              _context.next = 2;
              break;
            }
            return _context.abrupt("return", false);
          case 2:
            // Hack for LIST_IGNORE, we add additional info to remove from the list
            delete file[LIST_IGNORE];
            if (!(result === LIST_IGNORE)) {
              _context.next = 3;
              break;
            }
            Object.defineProperty(file, LIST_IGNORE, {
              value: true,
              configurable: true
            });
            return _context.abrupt("return", false);
          case 3:
            if ((0, _typeof2["default"])(result) === 'object' && result) {
              parsedFile = result;
            }
          case 4:
            if (!transformFile) {
              _context.next = 6;
              break;
            }
            _context.next = 5;
            return transformFile(parsedFile);
          case 5:
            parsedFile = _context.sent;
          case 6:
            return _context.abrupt("return", parsedFile);
          case 7:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
  };
  var onBatchStart = function onBatchStart(batchFileInfoList) {
    // Skip file which marked as `LIST_IGNORE`, these file will not add to file list
    var filteredFileInfoList = batchFileInfoList.filter(function (info) {
      return !info.file[LIST_IGNORE];
    });
    // Nothing to do since no file need upload
    if (!filteredFileInfoList.length) {
      return;
    }
    var objectFileList = filteredFileInfoList.map(function (info) {
      return (0, _utils.file2Obj)(info.file);
    });
    // Concat new files with prev files
    var newFileList = (0, _toConsumableArray2["default"])(mergedFileList);
    objectFileList.forEach(function (fileObj) {
      // Replace file if exist
      newFileList = (0, _utils.updateFileList)(fileObj, newFileList);
    });
    objectFileList.forEach(function (fileObj, index) {
      // Repeat trigger `onChange` event for compatible
      var triggerFileObj = fileObj;
      if (!filteredFileInfoList[index].parsedFile) {
        // `beforeUpload` return false
        var originFileObj = fileObj.originFileObj;
        var clone;
        try {
          clone = new File([originFileObj], originFileObj.name, {
            type: originFileObj.type
          });
        } catch (e) {
          clone = new Blob([originFileObj], {
            type: originFileObj.type
          });
          clone.name = originFileObj.name;
          clone.lastModifiedDate = new Date();
          clone.lastModified = new Date().getTime();
        }
        clone.uid = fileObj.uid;
        triggerFileObj = clone;
      } else {
        // Inject `uploading` status
        fileObj.status = 'uploading';
      }
      onInternalChange(triggerFileObj, newFileList);
    });
  };
  var onSuccess = function onSuccess(response, file, xhr) {
    try {
      if (typeof response === 'string') {
        response = JSON.parse(response);
      }
    } catch (e) {
      /* do nothing */
    }
    // removed
    if (!(0, _utils.getFileItem)(file, mergedFileList)) {
      return;
    }
    var targetItem = (0, _utils.file2Obj)(file);
    targetItem.status = 'done';
    targetItem.percent = 100;
    targetItem.response = response;
    targetItem.xhr = xhr;
    var nextFileList = (0, _utils.updateFileList)(targetItem, mergedFileList);
    onInternalChange(targetItem, nextFileList);
  };
  var onProgress = function onProgress(e, file) {
    // removed
    if (!(0, _utils.getFileItem)(file, mergedFileList)) {
      return;
    }
    var targetItem = (0, _utils.file2Obj)(file);
    targetItem.status = 'uploading';
    targetItem.percent = e.percent;
    var nextFileList = (0, _utils.updateFileList)(targetItem, mergedFileList);
    onInternalChange(targetItem, nextFileList, e);
  };
  var onError = function onError(error, response, file) {
    // removed
    if (!(0, _utils.getFileItem)(file, mergedFileList)) {
      return;
    }
    var targetItem = (0, _utils.file2Obj)(file);
    targetItem.error = error;
    targetItem.response = response;
    targetItem.status = 'error';
    var nextFileList = (0, _utils.updateFileList)(targetItem, mergedFileList);
    onInternalChange(targetItem, nextFileList);
  };
  var handleUpload = function handleUpload(file) {
    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
      var _a, _b;
      return _regenerator["default"].wrap(function (_context2) {
        while (1) switch (_context2.prev = _context2.next) {
          case 0:
            _context2.next = 1;
            return onUpload === null || onUpload === void 0 ? void 0 : onUpload(file);
          case 1:
            // 优先取originFileObj 兼容取file
            (_b = (_a = upload.current.uploader) === null || _a === void 0 ? void 0 : _a.uploadFiles) === null || _b === void 0 ? void 0 : _b.call(_a, [file.originFileObj || file]);
          case 2:
          case "end":
            return _context2.stop();
        }
      }, _callee2);
    }));
  };
  var handleRemove = function handleRemove(file) {
    var currentFile;
    Promise.resolve(typeof onRemove === 'function' ? onRemove(file) : onRemove).then(function (ret) {
      var _a;
      // Prevent removing file
      if (ret === false) {
        return;
      }
      var removedFileList = (0, _utils.removeFileItem)(file, mergedFileList);
      if (removedFileList) {
        currentFile = (0, _extends2["default"])((0, _extends2["default"])({}, file), {
          status: 'removed'
        });
        mergedFileList === null || mergedFileList === void 0 ? void 0 : mergedFileList.forEach(function (item) {
          var matchKey = currentFile.uid !== undefined ? 'uid' : 'name';
          if (item[matchKey] === currentFile[matchKey] && !Object.isFrozen(item)) {
            item.status = 'removed';
          }
        });
        (_a = upload.current) === null || _a === void 0 ? void 0 : _a.abort(currentFile);
        onInternalChange(currentFile, removedFileList);
      }
    });
  };
  var onFileDrop = function onFileDrop(e) {
    setDragState(e.type);
    if (e.type === 'drop') {
      onDrop === null || onDrop === void 0 ? void 0 : onDrop(e);
    }
  };
  // Test needs
  React.useImperativeHandle(ref, function () {
    return {
      onBatchStart: onBatchStart,
      onSuccess: onSuccess,
      onProgress: onProgress,
      onError: onError,
      fileList: mergedFileList,
      upload: upload.current
    };
  });
  var _React$useContext = React.useContext(_configProvider.ConfigContext),
    getPrefixCls = _React$useContext.getPrefixCls,
    direction = _React$useContext.direction;
  var prefixCls = getPrefixCls('upload', customizePrefixCls);
  var rcUploadProps = (0, _extends2["default"])((0, _extends2["default"])({
    onBatchStart: onBatchStart,
    onError: onError,
    onProgress: onProgress,
    onSuccess: onSuccess
  }, props), {
    prefixCls: prefixCls,
    beforeUpload: mergedBeforeUpload,
    onChange: undefined
  });
  delete rcUploadProps.className;
  delete rcUploadProps.style;
  if (!children || disabled) {
    delete rcUploadProps.id;
  }
  var renderUploadList = function renderUploadList(button) {
    return showUploadList ? /*#__PURE__*/React.createElement(_LocaleReceiver["default"], {
      componentName: "Upload",
      defaultLocale: _default2["default"].Upload
    }, function (locale) {
      var _ref = typeof showUploadList === 'boolean' ? {} : showUploadList,
        showRemoveIcon = _ref.showRemoveIcon,
        showPreviewIcon = _ref.showPreviewIcon,
        showDownloadIcon = _ref.showDownloadIcon,
        showUploadIcon = _ref.showUploadIcon,
        removeIcon = _ref.removeIcon,
        uploadIcon = _ref.uploadIcon,
        downloadIcon = _ref.downloadIcon;
      return /*#__PURE__*/React.createElement(_UploadList["default"], {
        listType: listType,
        items: mergedFileList,
        motionDeadline: motionDeadline,
        previewFile: previewFile,
        onPreview: onPreview,
        onDownload: onDownload,
        onUpload: handleUpload,
        onRemove: handleRemove,
        showRemoveIcon: !disabled && showRemoveIcon,
        showPreviewIcon: showPreviewIcon,
        showUploadIcon: showUploadIcon,
        showDownloadIcon: showDownloadIcon,
        removeIcon: removeIcon,
        downloadIcon: downloadIcon,
        uploadIcon: uploadIcon,
        iconRender: iconRender,
        locale: (0, _extends2["default"])((0, _extends2["default"])({}, locale), propLocale),
        isImageUrl: isImageUrl,
        progress: progress,
        appendAction: button,
        itemRender: itemRender
      });
    }) : button;
  };
  if (type === 'drag') {
    var dragCls = (0, _classnames["default"])(prefixCls, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-drag"), true), "".concat(prefixCls, "-drag-uploading"), mergedFileList.some(function (file) {
      return file.status === 'uploading';
    })), "".concat(prefixCls, "-drag-hover"), dragState === 'dragover'), "".concat(prefixCls, "-drag-click"), dragState === 'mousedown'), "".concat(prefixCls, "-disabled"), disabled), "".concat(prefixCls, "-rtl"), direction === 'rtl'), className);
    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", {
      className: dragCls,
      onDrop: onFileDrop,
      onDragOver: onFileDrop,
      onDragLeave: onFileDrop,
      onMouseDown: onFileDrop,
      onMouseUp: onFileDrop,
      onMouseLeave: onFileDrop,
      style: style
    }, /*#__PURE__*/React.createElement(_BaseUpload["default"], (0, _extends2["default"])({}, rcUploadProps, {
      ref: upload,
      className: "".concat(prefixCls, "-btn")
    }), /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-drag-container")
    }, children))), renderUploadList());
  }
  var uploadButtonCls = (0, _classnames["default"])(prefixCls, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-select"), true), "".concat(prefixCls, "-select-").concat(listType), true), "".concat(prefixCls, "-disabled"), disabled), "".concat(prefixCls, "-rtl"), direction === 'rtl'));
  var uploadButton = /*#__PURE__*/React.createElement("div", {
    className: uploadButtonCls,
    "aria-disabled": disabled,
    style: children ? undefined : {
      display: 'none'
    }
  }, /*#__PURE__*/React.createElement(_BaseUpload["default"], (0, _extends2["default"])({}, rcUploadProps, {
    ref: upload
  })));
  if (listType === 'picture-card') {
    return /*#__PURE__*/React.createElement("span", {
      className: (0, _classnames["default"])("".concat(prefixCls, "-picture-card-wrapper"), className)
    }, renderUploadList(uploadButton));
  }
  var desPositionCls = (0, _classnames["default"])(prefixCls, (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-des-bottom"), desPosition === 'bottom'), "".concat(prefixCls, "-des-right"), desPosition === 'right'));
  return /*#__PURE__*/React.createElement("span", {
    className: className
  }, uploadButton, description !== undefined ? /*#__PURE__*/React.createElement("div", {
    className: desPositionCls
  }, description) : null, renderUploadList());
};
var Upload = /*#__PURE__*/React.forwardRef(InternalUpload);
Upload.Dragger = _Dragger["default"];
Upload.LIST_IGNORE = LIST_IGNORE;
Upload.displayName = 'Upload';
Upload.defaultProps = {
  type: 'select',
  multiple: false,
  action: '',
  data: {},
  accept: '',
  showUploadList: true,
  listType: 'text',
  className: '',
  disabled: false,
  supportServerRender: true
};
var _default = exports["default"] = Upload;