choerodon-ui/lib/upload/Upload.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var _tslib = require("tslib");

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _uniqBy = _interopRequireDefault(require("lodash/uniqBy"));

var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));

var _autobind = _interopRequireDefault(require("../../pro/lib/_util/autobind"));

var _LocaleReceiver = _interopRequireDefault(require("../locale-provider/LocaleReceiver"));

var _default = _interopRequireDefault(require("../locale-provider/default"));

var _UploadList = _interopRequireDefault(require("./UploadList"));

var _utils = require("./utils");

var _upload = _interopRequireDefault(require("../rc-components/upload"));

var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));

var Upload = /*#__PURE__*/function (_Component) {
  (0, _inherits2["default"])(Upload, _Component);

  var _super = (0, _createSuper2["default"])(Upload);

  function Upload(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, Upload);
    _this = _super.call(this, props);

    _this.onStart = function (file) {
      var fileList = _this.state.fileList;
      var nextFileList = (0, _toConsumableArray2["default"])(fileList);
      var targetItem = (0, _utils.fileToObject)(file);
      targetItem.status = 'uploading';
      var filterItem = (0, _utils.getFileItem)(file, nextFileList);

      if (!filterItem) {
        nextFileList.push(targetItem);
      } else {
        filterItem.status = 'uploading';
      }

      _this.onChange({
        file: targetItem,
        fileList: nextFileList
      }); // fix ie progress


      if (!window.FormData) {
        _this.autoUpdateProgress(0, targetItem);
      }

      var onStart = _this.props.onStart;

      if (onStart) {
        onStart(file);
      }
    };

    _this.onSuccess = function (response, file) {
      _this.clearProgressTimer();

      try {
        if (typeof response === 'string') {
          response = JSON.parse(response);
        }
      } catch (e) {
        /* do nothing */
      }

      var fileList = _this.state.fileList;
      var targetItem = (0, _utils.getFileItem)(file, fileList); // removed

      if (targetItem) {
        targetItem.status = 'done';
        targetItem.response = response;

        _this.onChange({
          file: (0, _objectSpread2["default"])({}, targetItem),
          fileList: fileList.slice()
        });
      }

      var onSuccess = _this.props.onSuccess;

      if (onSuccess) {
        onSuccess(response, file);
      }
    };

    _this.onProgress = function (e, file) {
      var fileList = _this.state.fileList;
      var targetItem = (0, _utils.getFileItem)(file, fileList); // removed

      if (targetItem) {
        targetItem.percent = e.percent;

        _this.onChange({
          event: e,
          file: (0, _objectSpread2["default"])({}, targetItem),
          fileList: fileList
        });
      }

      var onProgress = _this.props.onProgress;

      if (onProgress) {
        onProgress(e, file);
      }
    };

    _this.onError = function (error, response, file) {
      _this.clearProgressTimer();

      var fileList = _this.state.fileList;
      var targetItem = (0, _utils.getFileItem)(file, fileList); // removed

      if (!targetItem) {
        return;
      }

      targetItem.error = error;
      targetItem.response = response;
      targetItem.status = 'error';

      _this.onChange({
        file: (0, _objectSpread2["default"])({}, targetItem),
        fileList: fileList
      });

      var onError = _this.props.onError;

      if (onError) {
        onError(error, response, file);
      }
    };

    _this.handleManualRemove = function (file) {
      _this.upload.abort(file);

      file.status = 'removed'; // eslint-disable-line

      _this.handleRemove(file);
    };
    /**
     * 拖拽触发回调
     * @param uploadFiles 拖拽后文件列表
     */


    _this.onDragEnd = function (uploadFiles) {
      var onDragEnd = _this.props.onDragEnd;

      if (onDragEnd) {
        var result = onDragEnd(uploadFiles);

        if (result !== false) {
          _this.setState({
            fileList: uploadFiles
          });
        } else {
          return false;
        }
      }

      _this.setState({
        fileList: uploadFiles
      });
    };

    _this.onChange = function (info) {
      var onChange = _this.props.onChange;

      if (!('fileList' in _this.props) || !onChange) {
        _this.setState({
          fileList: info.fileList
        });
      }

      if (onChange) {
        onChange(info);
      }
    };

    _this.onFileDrop = function (e) {
      _this.setState({
        dragState: e.type
      });
    };

    _this.beforeUpload = function (file, uploadFiles) {
      var _this$props = _this.props,
          multiple = _this$props.multiple,
          beforeUpload = _this$props.beforeUpload;

      if (!multiple) {
        var nowFileList = _this.state.fileList;

        if (nowFileList.length !== 1) {
          nowFileList.forEach(function (eachFile) {
            // 错误态的重新上传，不用执行删除操作，此时 uid 相同
            if (eachFile.uid !== file.uid) {
              _this.handleManualRemove(eachFile);
            }
          });
        }

        _this.onChange({
          file: file,
          fileList: uploadFiles
        });
      }

      if (beforeUpload) {
        var result = beforeUpload(file, uploadFiles);

        var rejectCall = function rejectCall() {
          var fileList = _this.state.fileList;

          _this.onChange({
            file: file,
            fileList: (0, _uniqBy["default"])(fileList.concat(uploadFiles.map(_utils.fileToObject)), function (item) {
              return item.uid;
            })
          });
        };

        if (result === false) {
          rejectCall();
          return false;
        }

        if (result && result.then) {
          return result.then(function (re) {
            if (re === false) {
              rejectCall();
            }

            return re;
          });
        }
      }

      return true;
    };

    _this.saveUpload = function (node) {
      _this.upload = node;
    };

    _this.getUpload = function () {
      return _this.upload;
    };

    _this.setReplaceReuploadItem = function (file) {
      _this.setState({
        originReuploadItem: file
      });
    };

    _this.renderUploadList = function (uploadLocale) {
      var getConfig = _this.context.getConfig;
      var _this$props2 = _this.props,
          showUploadList = _this$props2.showUploadList,
          listType = _this$props2.listType,
          onPreview = _this$props2.onPreview,
          _this$props2$onReUplo = _this$props2.onReUpload,
          onReUpload = _this$props2$onReUplo === void 0 ? _this.defaultReUpload : _this$props2$onReUplo,
          downloadPropsIntercept = _this$props2.downloadPropsIntercept,
          locale = _this$props2.locale,
          previewFile = _this$props2.previewFile,
          dragUploadList = _this$props2.dragUploadList,
          showFileSize = _this$props2.showFileSize,
          renderIcon = _this$props2.renderIcon,
          tooltipPrefixCls = _this$props2.tooltipPrefixCls,
          popconfirmProps = _this$props2.popconfirmProps;

      var prefixCls = _this.getPrefixCls();

      var fileList = _this.state.fileList;
      var showRemoveIcon = showUploadList.showRemoveIcon,
          removePopConfirmTitle = showUploadList.removePopConfirmTitle,
          showPreviewIcon = showUploadList.showPreviewIcon,
          showDownloadIcon = showUploadList.showDownloadIcon,
          _showUploadList$showR = showUploadList.showReUploadIcon,
          showReUploadIcon = _showUploadList$showR === void 0 ? getConfig('uploadShowReUploadIcon') : _showUploadList$showR,
          reUploadText = showUploadList.reUploadText,
          reUploadPopConfirmTitle = showUploadList.reUploadPopConfirmTitle,
          getCustomFilenameTitle = showUploadList.getCustomFilenameTitle;
      var defaultShowPreviewIcon;
      var defaultShowDownloadIcon;

      if (['text', 'picture'].includes(listType)) {
        defaultShowPreviewIcon = (0, _isUndefined["default"])(showPreviewIcon) ? false : showPreviewIcon;
        defaultShowDownloadIcon = (0, _isUndefined["default"])(showDownloadIcon) ? false : showDownloadIcon;
      } else if (listType === 'picture-card') {
        defaultShowPreviewIcon = (0, _isUndefined["default"])(showPreviewIcon) ? true : showPreviewIcon;
        defaultShowDownloadIcon = (0, _isUndefined["default"])(showDownloadIcon) ? true : showDownloadIcon;
      }

      return /*#__PURE__*/_react["default"].createElement(_UploadList["default"], {
        prefixCls: prefixCls,
        listType: listType,
        items: fileList,
        onPreview: onPreview,
        dragUploadList: dragUploadList,
        onDragEnd: _this.onDragEnd,
        previewFile: previewFile,
        onRemove: _this.handleManualRemove,
        showRemoveIcon: showRemoveIcon,
        showPreviewIcon: defaultShowPreviewIcon,
        showDownloadIcon: defaultShowDownloadIcon,
        removePopConfirmTitle: removePopConfirmTitle,
        showReUploadIcon: showReUploadIcon,
        reUploadText: reUploadText,
        reUploadPopConfirmTitle: reUploadPopConfirmTitle,
        onReUpload: onReUpload,
        getCustomFilenameTitle: getCustomFilenameTitle,
        locale: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, uploadLocale), locale),
        downloadPropsIntercept: downloadPropsIntercept,
        showFileSize: showFileSize,
        renderIcon: renderIcon,
        tooltipPrefixCls: tooltipPrefixCls,
        popconfirmProps: popconfirmProps,
        getUploadRef: _this.getUpload,
        setReplaceReuploadItem: _this.setReplaceReuploadItem
      });
    };

    _this.state = {
      fileList: props.fileList || props.defaultFileList || [],
      dragState: 'drop',
      originReuploadItem: null
    };
    return _this;
  }

  (0, _createClass2["default"])(Upload, [{
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.clearProgressTimer();
    }
  }, {
    key: "autoUpdateProgress",
    value: function autoUpdateProgress(_, file) {
      var _this2 = this;

      var getPercent = (0, _utils.genPercentAdd)();
      var curPercent = 0;
      this.clearProgressTimer();
      this.progressTimer = setInterval(function () {
        curPercent = getPercent(curPercent);

        _this2.onProgress({
          percent: curPercent * 100
        }, file);
      }, 200);
    }
  }, {
    key: "handleRemove",
    value: function handleRemove(file) {
      var _this3 = this;

      var onRemove = this.props.onRemove;
      Promise.resolve(typeof onRemove === 'function' ? onRemove(file) : onRemove).then(function (ret) {
        // Prevent removing file
        if (ret === false) {
          return;
        }

        var fileList = _this3.state.fileList;
        var removedFileList = (0, _utils.removeFileItem)(file, fileList);

        if (removedFileList) {
          _this3.onChange({
            file: file,
            fileList: removedFileList
          });
        }
      });
    }
  }, {
    key: "defaultReUpload",
    value: function defaultReUpload(file) {
      if (this.upload && this.upload.uploader) {
        this.upload.uploader.upload(file, [file]);
      }
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      if ('fileList' in nextProps) {
        this.setState({
          fileList: nextProps.fileList || []
        });
      }
    }
  }, {
    key: "clearProgressTimer",
    value: function clearProgressTimer() {
      clearInterval(this.progressTimer);
    }
  }, {
    key: "getPrefixCls",
    value: function getPrefixCls() {
      var customizePrefixCls = this.props.prefixCls;
      var getPrefixCls = this.context.getPrefixCls;
      return getPrefixCls('upload', customizePrefixCls);
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames2;

      var _this$props3 = this.props,
          className = _this$props3.className,
          showUploadList = _this$props3.showUploadList,
          listType = _this$props3.listType,
          type = _this$props3.type,
          disabled = _this$props3.disabled,
          children = _this$props3.children,
          dragUploadList = _this$props3.dragUploadList,
          overwriteDefaultEvent = _this$props3.overwriteDefaultEvent,
          beforeUploadFiles = _this$props3.beforeUploadFiles,
          _this$props3$onReUplo = _this$props3.onReUpload,
          onReUpload = _this$props3$onReUplo === void 0 ? this.defaultReUpload : _this$props3$onReUplo;
      var _this$state = this.state,
          fileList = _this$state.fileList,
          dragState = _this$state.dragState,
          originReuploadItem = _this$state.originReuploadItem;
      var prefixCls = this.getPrefixCls();
      var rcUploadProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, overwriteDefaultEvent ? undefined : this.props), {}, {
        onStart: this.onStart,
        onError: this.onError,
        onProgress: this.onProgress,
        onSuccess: this.onSuccess,
        onReUpload: onReUpload
      }, overwriteDefaultEvent ? this.props : undefined), {}, {
        beforeUpload: this.beforeUpload,
        beforeUploadFiles: beforeUploadFiles,
        prefixCls: prefixCls,
        fileList: fileList,
        originReuploadItem: originReuploadItem,
        setReplaceReuploadItem: this.setReplaceReuploadItem
      });
      delete rcUploadProps.className;
      var uploadList = showUploadList ? /*#__PURE__*/_react["default"].createElement(_LocaleReceiver["default"], {
        componentName: "Upload",
        defaultLocale: _default["default"].Upload
      }, this.renderUploadList) : null;

      if (type === 'drag') {
        var _classNames;

        var dragCls = (0, _classnames["default"])(prefixCls, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-drag"), true), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-drag-uploading"), fileList.some(function (file) {
          return file.status === 'uploading';
        })), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-drag-hover"), dragState === 'dragover'), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-disabled"), disabled), _classNames));
        return /*#__PURE__*/_react["default"].createElement("span", {
          className: className
        }, /*#__PURE__*/_react["default"].createElement("div", {
          className: dragCls,
          onDrop: this.onFileDrop,
          onDragOver: this.onFileDrop,
          onDragLeave: this.onFileDrop
        }, /*#__PURE__*/_react["default"].createElement(_upload["default"], (0, _extends2["default"])({}, rcUploadProps, {
          ref: this.saveUpload,
          className: "".concat(prefixCls, "-btn")
        }), /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(prefixCls, "-drag-container")
        }, children))), uploadList);
      }

      var uploadButtonCls = (0, _classnames["default"])(prefixCls, (_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-select"), true), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-select-").concat(listType), true), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-drag-btn"), dragUploadList), _classNames2));

      var uploadButton = /*#__PURE__*/_react["default"].createElement("div", {
        className: uploadButtonCls,
        style: {
          display: children ? '' : 'none'
        }
      }, /*#__PURE__*/_react["default"].createElement(_upload["default"], (0, _extends2["default"])({}, rcUploadProps, {
        ref: this.saveUpload
      })));

      if (listType === 'picture-card') {
        return /*#__PURE__*/_react["default"].createElement("span", {
          className: className
        }, uploadList, uploadButton);
      }

      return /*#__PURE__*/_react["default"].createElement("span", {
        className: className
      }, uploadButton, uploadList);
    }
  }], [{
    key: "contextType",
    get: function get() {
      return _ConfigContext["default"];
    }
  }]);
  return Upload;
}(_react.Component);

exports["default"] = Upload;
Upload.displayName = 'Upload';
Upload.defaultProps = {
  type: 'select',
  multiple: true,
  action: '',
  data: {},
  accept: '',
  beforeUpload: _utils.T,
  showUploadList: true,
  listType: 'text',
  className: '',
  disabled: false,
  supportServerRender: true,
  showFileSize: false
};
(0, _tslib.__decorate)([_autobind["default"]], Upload.prototype, "defaultReUpload", null);
//# sourceMappingURL=Upload.js.map