choerodon-ui/pro/lib/attachment/Attachment.js

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

"use strict";

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

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

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

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

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

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

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

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

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

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

var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

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

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

var _tslib = require("tslib");

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

var _mobx = require("mobx");

var _mobxReact = require("mobx-react");

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

var _omit = _interopRequireDefault(require("lodash/omit"));

var _noop = _interopRequireDefault(require("lodash/noop"));

var _isNil = _interopRequireDefault(require("lodash/isNil"));

var _isString = _interopRequireDefault(require("lodash/isString"));

var _isFunction = _interopRequireDefault(require("lodash/isFunction"));

var _dataset = require("choerodon-ui/dataset");

var _enum = require("choerodon-ui/dataset/data-set/enum");

var _enum2 = require("../../../lib/_util/enum");

var _Trigger = _interopRequireDefault(require("../../../lib/trigger/Trigger"));

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

var _enum3 = require("../../../lib/trigger/enum");

var _UnitConvertor = require("../../../lib/_util/UnitConvertor");

var _Button = _interopRequireDefault(require("../button/Button"));

var _localeContext = require("../locale-context");

var _enum4 = require("../button/enum");

var _AttachmentList = _interopRequireDefault(require("./AttachmentList"));

var _AttachmentGroup = _interopRequireDefault(require("./AttachmentGroup"));

var _FormField2 = require("../field/FormField");

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

var _modal = _interopRequireDefault(require("../modal"));

var _AttachmentFile = _interopRequireDefault(require("../data-set/AttachmentFile"));

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

var _Select = _interopRequireDefault(require("../select/Select"));

var _placements = _interopRequireDefault(require("../trigger-field/placements"));

var _AttachmentStore = _interopRequireDefault(require("../stores/AttachmentStore"));

var _enum5 = require("../data-set/enum");

var _ModalContainer = require("../modal-container/ModalContainer");

var _icon = _interopRequireDefault(require("../icon"));

var _enum6 = require("../field/enum");

var _utils2 = require("../form/utils");

var _utils3 = require("../field/utils");

var _enum7 = require("../form/enum");

var _utils4 = require("../data-set/utils");

var _Item = require("./Item");

var _TemplateDownloadButton = _interopRequireDefault(require("./TemplateDownloadButton"));

var _singleton = require("../tooltip/singleton");

var _excluded = ["ref", "style", "name", "onChange"];
var AttachmentButtonType;
exports.AttachmentButtonType = AttachmentButtonType;

(function (AttachmentButtonType) {
  AttachmentButtonType["download"] = "download";
  AttachmentButtonType["remove"] = "remove";
  AttachmentButtonType["history"] = "history";
})(AttachmentButtonType || (exports.AttachmentButtonType = AttachmentButtonType = {}));

var defaultSort = {
  type: 'time',
  order: 'asc',
  custom: true
};

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

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

  function Attachment() {
    var _this;

    (0, _classCallCheck2["default"])(this, Attachment);
    _this = _super.apply(this, arguments);

    _this.handleDragUpload = function (file, files) {
      if (files.indexOf(file) === files.length - 1) {
        _this.getAttachmentUUID().then(function (uuid) {
          _this.uploadAttachments(_this.processFiles(files, uuid));
        });
      }

      return false;
    };

    return _this;
  }

  (0, _createClass2["default"])(Attachment, [{
    key: "help",
    get: function get() {
      return this.getDisplayProp('help');
    }
  }, {
    key: "showAttachmentHelp",
    get: function get() {
      var defaultShowHelp = this.getContextConfig('showHelp');
      var viewMode = this.props.viewMode;
      var showHelp = this.showHelp;
      var formNode = this.context.formNode;

      if (showHelp === _enum6.ShowHelp.none || formNode && showHelp === _enum6.ShowHelp.label || viewMode === 'popup' && (showHelp || defaultShowHelp) === _enum6.ShowHelp.label && formNode) {
        return _enum6.ShowHelp.none;
      }

      if (viewMode === 'popup') {
        return _enum6.ShowHelp.tooltip;
      }

      return _enum6.ShowHelp.newLine;
    }
  }, {
    key: "bucketName",
    get: function get() {
      return this.getProp('bucketName');
    }
  }, {
    key: "bucketDirectory",
    get: function get() {
      return this.getProp('bucketDirectory');
    }
  }, {
    key: "storageCode",
    get: function get() {
      return this.getProp('storageCode');
    }
  }, {
    key: "fileKey",
    get: function get() {
      return this.getProp('fileKey') || this.getContextConfig('attachment').defaultFileKey;
    }
  }, {
    key: "isPublic",
    get: function get() {
      return this.getProp('isPublic');
    }
  }, {
    key: "attachments",
    get: function get() {
      var field = this.field;

      if (field) {
        return field.getAttachments(this.record, this.tempAttachmentUUID);
      }

      if (this.getValue()) {
        return this.observableProps.attachments;
      }
    },
    set: function set(attachments) {
      var _this2 = this;

      (0, _mobx.runInAction)(function () {
        var field = _this2.field;

        if (field) {
          field.setAttachments(attachments, _this2.record, _this2.tempAttachmentUUID);
        } else {
          _this2.observableProps.attachments = attachments;
        }

        if (attachments) {
          var onAttachmentsChange = _this2.props.onAttachmentsChange;

          if (onAttachmentsChange) {
            onAttachmentsChange(attachments);
          }
        }
      });
    }
  }, {
    key: "count",
    get: function get() {
      var attachments = this.attachments,
          field = this.field;

      if (attachments) {
        return attachments.length;
      }

      if (field) {
        var attachmentCount = field.getAttachmentCount(this.record);

        if (attachmentCount !== undefined) {
          return attachmentCount;
        }
      }

      var count = this.observableProps.count;
      return count;
    }
  }, {
    key: "defaultValidationMessages",
    get: function get() {
      var label = this.getProp('label');
      return {
        valueMissing: (0, _localeContext.$l)('Attachment', label ? 'value_missing' : 'value_missing_no_label', {
          label: label
        })
      };
    }
  }, {
    key: "accept",
    get: function get() {
      return this.getProp('accept');
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this3 = this;

      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Attachment.prototype), "componentDidMount", this).call(this);
      this.fetchCount();
      this.reaction = (0, _mobx.reaction)(function () {
        return _this3.record;
      }, function () {
        return _this3.fetchCount();
      });
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var _this$props = this.props,
          value = _this$props.value,
          viewMode = _this$props.viewMode;

      if (prevProps.value !== value || prevProps.viewMode !== viewMode) {
        this.fetchCount();
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Attachment.prototype), "componentWillUnmount", this).call(this);
      var reaction = this.reaction;

      if (reaction) {
        reaction();
        delete this.reaction;
      }
    }
  }, {
    key: "getFieldType",
    value: function getFieldType() {
      return _enum5.FieldType.attachment;
    }
  }, {
    key: "getObservableProps",
    value: function getObservableProps(props, context) {
      var count = props.count,
          attachments = props.attachments;
      var _this$observableProps = this.observableProps,
          observableProps = _this$observableProps === void 0 ? {
        count: count,
        attachments: attachments
      } : _this$observableProps;
      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _get2["default"])((0, _getPrototypeOf2["default"])(Attachment.prototype), "getObservableProps", this).call(this, props, context)), {}, {
        count: count === undefined ? observableProps.count : count,
        attachments: attachments ? attachments.map(function (attachment) {
          if (attachment instanceof _AttachmentFile["default"]) {
            return attachment;
          }

          return new _AttachmentFile["default"](attachment);
        }) : observableProps.attachments
      });
    }
  }, {
    key: "getValidAttachments",
    value: function getValidAttachments() {
      var attachments = this.attachments;

      if (attachments) {
        return attachments.filter(function (_ref) {
          var status = _ref.status;
          return !status || ['success', 'done'].includes(status);
        });
      }
    }
  }, {
    key: "getValidatorProp",
    value: function getValidatorProp(key) {
      if (key === 'attachmentCount') {
        var attachments = this.getValidAttachments();
        var count = attachments ? attachments.length : this.count;
        return count || 0;
      }

      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Attachment.prototype), "getValidatorProp", this).call(this, key);
    }
  }, {
    key: "fetchCount",
    value: function fetchCount() {
      var _this4 = this;

      var field = this.field;
      var viewMode = this.props.viewMode;

      if (viewMode !== 'list' && (0, _isNil["default"])(this.count)) {
        var value = this.getValue();

        if (value) {
          var isPublic = this.isPublic;

          if (field) {
            field.fetchAttachmentCount(value, isPublic, this.record);
          } else {
            var _this$getContextConfi = this.getContextConfig('attachment'),
                batchFetchCount = _this$getContextConfi.batchFetchCount;

            if (batchFetchCount && !this.attachments) {
              var bucketName = this.bucketName,
                  bucketDirectory = this.bucketDirectory,
                  storageCode = this.storageCode;

              _AttachmentStore["default"].fetchCountInBatch({
                attachmentUUID: value,
                bucketName: bucketName,
                bucketDirectory: bucketDirectory,
                storageCode: storageCode,
                isPublic: isPublic
              }).then((0, _mobx.action)(function (count) {
                _this4.observableProps.count = count || 0;
              }));
            }
          }
        }
      }
    }
  }, {
    key: "handleDataSetLoad",
    value: function handleDataSetLoad() {
      this.fetchCount();
    }
  }, {
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Attachment.prototype), "getOmitPropsKeys", this).call(this).concat(['value', 'accept', 'action', 'data', 'headers', 'buttons', 'withCredentials', 'sortable', 'listType', 'viewMode', 'fileKey', 'fileSize', 'useChunk', 'chunkSize', 'chunkThreads', 'bucketName', 'bucketDirectory', 'storageCode', 'count', 'max', 'listLimit', 'dragBoxRender', 'dragUpload', 'showHistory', 'showSize', 'isPublic', 'downloadAll', 'attachments', 'onAttachmentsChange', 'beforeUpload', 'onUploadProgress', 'onUploadSuccess', 'onUploadError', 'onRemove', 'getPreviewUrl']);
    }
  }, {
    key: "isAcceptFile",
    value: function isAcceptFile(attachment, accept) {
      var acceptTypes = accept.map(function (type) {
        return new RegExp(type.replace(/\./g, '\\.').replace(/\*/g, '.*'));
      });
      var name = attachment.name,
          type = attachment.type;
      return acceptTypes.some(function (acceptType) {
        return acceptType.test(name) || acceptType.test(type);
      });
    }
  }, {
    key: "getAttachmentUUID",
    value: function () {
      var _getAttachmentUUID = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
        var _this5 = this;

        var oldAttachmentUUID, attachmentUUID;
        return _regenerator["default"].wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                this.autoCreate();
                oldAttachmentUUID = this.tempAttachmentUUID || this.getValue();
                _context.t0 = oldAttachmentUUID;

                if (_context.t0) {
                  _context.next = 7;
                  break;
                }

                _context.next = 6;
                return this.fetchAttachmentUUID();

              case 6:
                _context.t0 = _context.sent;

              case 7:
                attachmentUUID = _context.t0;

                if (attachmentUUID !== oldAttachmentUUID) {
                  (0, _mobx.runInAction)(function () {
                    _this5.tempAttachmentUUID = attachmentUUID;
                  });
                }

                return _context.abrupt("return", attachmentUUID);

              case 10:
              case "end":
                return _context.stop();
            }
          }
        }, _callee, this);
      }));

      function getAttachmentUUID() {
        return _getAttachmentUUID.apply(this, arguments);
      }

      return getAttachmentUUID;
    }()
  }, {
    key: "fetchAttachmentUUID",
    value: function fetchAttachmentUUID() {
      var _this$props$getUUID = this.props.getUUID,
          getUUID = _this$props$getUUID === void 0 ? this.getContextConfig('attachment').getAttachmentUUID : _this$props$getUUID;

      if (!getUUID) {
        throw new Error('no getAttachmentUUID hook in global configure.');
      }

      return getUUID({
        isPublic: this.isPublic
      });
    }
  }, {
    key: "uploadAttachments",
    value: function () {
      var _uploadAttachments = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(attachments) {
        var _this6 = this;

        var max, oldAttachments;
        return _regenerator["default"].wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                max = this.getProp('max');

                if (!(max > 0 && (this.count || 0) + attachments.length > max)) {
                  _context2.next = 4;
                  break;
                }

                _modal["default"].error((0, _localeContext.$l)('Attachment', 'file_list_max_length', {
                  count: max
                }));

                return _context2.abrupt("return");

              case 4:
                oldAttachments = this.attachments || [];

                if (this.multiple) {
                  this.attachments = [].concat((0, _toConsumableArray2["default"])(oldAttachments.slice()), (0, _toConsumableArray2["default"])(attachments));
                } else {
                  oldAttachments.forEach(function (attachment) {
                    return _this6.doRemove(attachment);
                  });
                  this.attachments = (0, _toConsumableArray2["default"])(attachments);
                }

                _context2.prev = 6;
                _context2.next = 9;
                return Promise.all(attachments.map(function (attachment) {
                  return _this6.upload(attachment);
                }));

              case 9:
                _context2.prev = 9;
                this.changeOrder();
                return _context2.finish(9);

              case 12:
              case "end":
                return _context2.stop();
            }
          }
        }, _callee2, this, [[6,, 9, 12]]);
      }));

      function uploadAttachments(_x) {
        return _uploadAttachments.apply(this, arguments);
      }

      return uploadAttachments;
    }()
  }, {
    key: "uploadAttachment",
    value: function () {
      var _uploadAttachment = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(attachment) {
        return _regenerator["default"].wrap(function _callee3$(_context3) {
          while (1) {
            switch (_context3.prev = _context3.next) {
              case 0:
                _context3.next = 2;
                return this.upload(attachment);

              case 2:
                if (attachment.status === 'success') {
                  this.changeOrder();
                }

              case 3:
              case "end":
                return _context3.stop();
            }
          }
        }, _callee3, this);
      }));

      function uploadAttachment(_x2) {
        return _uploadAttachment.apply(this, arguments);
      }

      return uploadAttachment;
    }()
  }, {
    key: "getUploaderProps",
    value: function getUploaderProps() {
      var bucketName = this.bucketName,
          bucketDirectory = this.bucketDirectory,
          storageCode = this.storageCode,
          isPublic = this.isPublic,
          fileKey = this.fileKey,
          accept = this.accept;
      var fileSize = this.getProp('fileSize');
      var chunkSize = this.getProp('chunkSize');
      var chunkThreads = this.getProp('chunkThreads');
      var useChunk = this.getProp('useChunk');
      var _this$props2 = this.props,
          action = _this$props2.action,
          data = _this$props2.data,
          headers = _this$props2.headers,
          withCredentials = _this$props2.withCredentials,
          beforeUpload = _this$props2.beforeUpload,
          onUploadProgress = _this$props2.onUploadProgress,
          onUploadSuccess = _this$props2.onUploadSuccess,
          onUploadError = _this$props2.onUploadError;
      return {
        accept: accept,
        action: action,
        data: data,
        headers: headers,
        fileKey: fileKey,
        withCredentials: withCredentials,
        bucketName: bucketName,
        bucketDirectory: bucketDirectory,
        storageCode: storageCode,
        isPublic: isPublic,
        fileSize: fileSize,
        chunkSize: chunkSize,
        chunkThreads: chunkThreads,
        useChunk: useChunk,
        beforeUpload: beforeUpload,
        onUploadProgress: onUploadProgress,
        onUploadSuccess: onUploadSuccess,
        onUploadError: onUploadError
      };
    }
  }, {
    key: "upload",
    value: function () {
      var _upload = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(attachment) {
        var _this7 = this;

        var uploader, result;
        return _regenerator["default"].wrap(function _callee4$(_context4) {
          while (1) {
            switch (_context4.prev = _context4.next) {
              case 0:
                _context4.prev = 0;
                uploader = (0, _utils4.getIf)(this, 'uploader', function () {
                  return new _dataset.Uploader({}, {
                    getConfig: _this7.getContextConfig
                  });
                });
                uploader.setProps(this.getUploaderProps());
                _context4.next = 5;
                return uploader.upload(attachment, this.attachments || [attachment], this.tempAttachmentUUID);

              case 5:
                result = _context4.sent;

                if (result === false) {
                  this.removeAttachment(attachment);
                } else {
                  (0, _mobx.runInAction)(function () {
                    var tempAttachmentUUID = _this7.tempAttachmentUUID;

                    if (attachment.status === 'success' && tempAttachmentUUID) {
                      _this7.tempAttachmentUUID = undefined;

                      _this7.setValue(tempAttachmentUUID);
                    } else {
                      _this7.checkValidity();
                    }
                  });
                }

                _context4.next = 13;
                break;

              case 9:
                _context4.prev = 9;
                _context4.t0 = _context4["catch"](0);
                this.removeAttachment(attachment);
                throw _context4.t0;

              case 13:
              case "end":
                return _context4.stop();
            }
          }
        }, _callee4, this, [[0, 9]]);
      }));

      function upload(_x3) {
        return _upload.apply(this, arguments);
      }

      return upload;
    }()
  }, {
    key: "getOtherProps",
    value: function getOtherProps() {
      var otherProps = (0, _get2["default"])((0, _getPrototypeOf2["default"])(Attachment.prototype), "getOtherProps", this).call(this);
      otherProps.onClick = this.handleClick;
      return otherProps;
    }
  }, {
    key: "processFiles",
    value: function processFiles(files, attachmentUUID) {
      var _this8 = this;

      return files.map(function (file, index) {
        return new _AttachmentFile["default"]({
          uid: _this8.getUid(index),
          url: URL.createObjectURL(file),
          name: file.name,
          size: file.size,
          type: file.type,
          lastModified: file.lastModified,
          originFileObj: file,
          creationDate: new Date(),
          attachmentUUID: attachmentUUID
        });
      });
    }
  }, {
    key: "handleChange",
    value: function handleChange(e) {
      var _this9 = this;

      var target = e.target;

      if (target.value) {
        var files = (0, _toConsumableArray2["default"])(target.files);
        target.value = '';
        this.getAttachmentUUID().then(function (uuid) {
          _this9.uploadAttachments(_this9.processFiles(files, uuid));
        });
      }
    }
  }, {
    key: "doRemove",
    value: function doRemove(attachment) {
      var _this10 = this;

      var _this$props$onRemove = this.props.onRemove,
          onAttachmentRemove = _this$props$onRemove === void 0 ? _noop["default"] : _this$props$onRemove;
      return Promise.resolve(onAttachmentRemove(attachment)).then((0, _mobx.action)(function (ret) {
        if (ret !== false) {
          var _this10$getContextCon = _this10.getContextConfig('attachment'),
              onRemove = _this10$getContextCon.onRemove;

          if (onRemove) {
            if (attachment.status === 'error' || attachment.invalid) {
              return _this10.removeAttachment(attachment);
            }

            var attachmentUUID = _this10.getValue();

            if (attachmentUUID) {
              var bucketName = _this10.bucketName,
                  bucketDirectory = _this10.bucketDirectory,
                  storageCode = _this10.storageCode,
                  isPublic = _this10.isPublic,
                  multiple = _this10.multiple;
              attachment.status = 'deleting';
              return onRemove({
                attachment: attachment,
                attachmentUUID: attachmentUUID,
                bucketName: bucketName,
                bucketDirectory: bucketDirectory,
                storageCode: storageCode,
                isPublic: isPublic
              }, multiple).then((0, _mobx.action)(function (result) {
                if (result !== false) {
                  _this10.removeAttachment(attachment);
                }

                attachment.status = 'done';
              }))["catch"]((0, _mobx.action)(function () {
                attachment.status = 'done';
              }));
            }
          }
        }
      }));
    }
  }, {
    key: "handleHistory",
    value: function handleHistory(attachment, attachmentUUID) {
      var _this$getContextConfi2 = this.getContextConfig('attachment'),
          renderHistory = _this$getContextConfi2.renderHistory;

      if (renderHistory) {
        var bucketName = this.bucketName,
            bucketDirectory = this.bucketDirectory,
            storageCode = this.storageCode;
        (0, _ModalContainer.open)({
          title: (0, _localeContext.$l)('Attachment', 'operation_records'),
          children: renderHistory({
            attachment: attachment,
            attachmentUUID: attachmentUUID,
            bucketName: bucketName,
            bucketDirectory: bucketDirectory,
            storageCode: storageCode
          }),
          cancelButton: false,
          okText: (0, _localeContext.$l)('Modal', 'close'),
          drawer: true
        });
      }
    }
  }, {
    key: "handleRemove",
    value: function handleRemove(attachment) {
      return this.doRemove(attachment);
    }
  }, {
    key: "handleAttachmentsChange",
    value: function handleAttachmentsChange(attachments) {
      this.observableProps.attachments = attachments;
    }
  }, {
    key: "handleFetchAttachment",
    value: function handleFetchAttachment(fetchProps) {
      var _this11 = this;

      var field = this.field;

      if (field) {
        field.fetchAttachments(fetchProps, this.record);
      } else {
        var _this$getContextConfi3 = this.getContextConfig('attachment'),
            fetchList = _this$getContextConfi3.fetchList;

        if (fetchList) {
          fetchList(fetchProps).then(function (results) {
            _this11.attachments = results.map(function (file) {
              return new _AttachmentFile["default"](file);
            });
          });
        }
      }
    }
  }, {
    key: "handlePreview",
    value: function handlePreview() {
      this.setPopup(false);
    }
  }, {
    key: "removeAttachment",
    value: function removeAttachment(attachment) {
      var attachments = this.attachments;

      if (attachments) {
        var index = attachments.indexOf(attachment);

        if (index !== -1) {
          attachments.splice(index, 1);
          this.attachments = attachments;
          this.checkValidity();
        }
      }

      return undefined;
    }
  }, {
    key: "handleClick",
    value: function handleClick(e) {
      var element = this.element;

      if (element) {
        element.click();
      }

      var onClick = this.props.onClick;

      if (onClick) {
        onClick(e);
      }
    }
  }, {
    key: "getUid",
    value: function getUid(index) {
      var prefixCls = this.prefixCls;
      return "".concat(prefixCls, "-").concat(Date.now(), "-").concat(index);
    }
  }, {
    key: "renderHeaderLabel",
    value: function renderHeaderLabel() {
      var viewMode = this.props.viewMode;

      if (this.hasFloatLabel || viewMode === 'popup') {
        var label = this.getLabel();

        if (label) {
          var prefixCls = this.prefixCls;
          return /*#__PURE__*/_react["default"].createElement("span", {
            className: (0, _classnames["default"])("".concat(prefixCls, "-header-label"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-required"), this.getProp('required')))
          }, label);
        }
      }
    }
  }, {
    key: "isDisabled",
    value: function isDisabled() {
      if ((0, _get2["default"])((0, _getPrototypeOf2["default"])(Attachment.prototype), "isDisabled", this).call(this)) {
        return true;
      }

      var max = this.getProp('max');

      if (max) {
        var _this$count = this.count,
            count = _this$count === void 0 ? 0 : _this$count;
        return count >= max;
      }

      return false;
    }
  }, {
    key: "isValid",
    value: function isValid() {
      var attachments = this.attachments;

      if (attachments && attachments.some(function (_ref2) {
        var status = _ref2.status,
            invalid = _ref2.invalid;
        return invalid || status === 'error';
      })) {
        return false;
      }

      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Attachment.prototype), "isValid", this).call(this);
    }
  }, {
    key: "renderTemplateDownloadButton",
    value: function renderTemplateDownloadButton() {
      if (!this.readOnly) {
        var template = this.getProp('template');

        if (template) {
          var bucketName = template.bucketName,
              bucketDirectory = template.bucketDirectory,
              storageCode = template.storageCode,
              isPublic = template.isPublic,
              attachmentUUID = template.attachmentUUID;

          if (attachmentUUID) {
            var _this$props3 = this.props,
                _this$props3$previewT = _this$props3.previewTarget,
                previewTarget = _this$props3$previewT === void 0 ? _Item.ATTACHMENT_TARGET : _this$props3$previewT,
                viewMode = _this$props3.viewMode,
                color = _this$props3.color,
                _this$props3$funcType = _this$props3.funcType,
                funcType = _this$props3$funcType === void 0 ? viewMode === 'popup' ? _enum4.FuncType.flat : _enum4.FuncType.link : _this$props3$funcType;
            return /*#__PURE__*/_react["default"].createElement(_TemplateDownloadButton["default"], {
              attachmentUUID: attachmentUUID,
              bucketName: bucketName,
              bucketDirectory: bucketDirectory,
              storageCode: storageCode,
              isPublic: isPublic,
              target: previewTarget,
              funcType: funcType,
              color: color
            });
          }
        }
      }
    }
  }, {
    key: "renderUploadBtn",
    value: function renderUploadBtn(isCardButton, label) {
      var _this$count2 = this.count,
          count = _this$count2 === void 0 ? 0 : _this$count2,
          multiple = this.multiple,
          prefixCls = this.prefixCls,
          accept = this.accept,
          _this$props4 = this.props,
          children = _this$props4.children,
          viewMode = _this$props4.viewMode;
      var buttonProps = this.getOtherProps();
      var ref = buttonProps.ref,
          style = buttonProps.style,
          name = buttonProps.name,
          onChange = buttonProps.onChange,
          rest = (0, _objectWithoutProperties2["default"])(buttonProps, _excluded);
      var max = this.getProp('max');
      var uploadProps = {
        multiple: multiple,
        accept: accept ? accept.join(',') : undefined,
        name: name || this.fileKey,
        type: 'file',
        ref: ref,
        onChange: onChange
      };
      var width = isCardButton ? (0, _UnitConvertor.pxToRem)(this.getPictureWidth()) : undefined;
      var countText = multiple && (max ? "".concat(count, "/").concat(max) : count) || undefined;
      return isCardButton ? /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
        funcType: _enum4.FuncType.link,
        key: "upload-btn",
        icon: "add"
      }, rest, {
        className: (0, _classnames["default"])("".concat(prefixCls, "-card-button"), this.getClassName()),
        style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
          width: width,
          height: width
        })
      }), /*#__PURE__*/_react["default"].createElement("div", null, children || (0, _localeContext.$l)('Attachment', 'upload_picture')), countText ? /*#__PURE__*/_react["default"].createElement("div", null, countText) : undefined, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
        key: "upload"
      }, uploadProps, {
        style: {
          width: 0,
          height: 0,
          display: 'block'
        }
      }))) : /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
        funcType: viewMode === 'popup' ? _enum4.FuncType.flat : _enum4.FuncType.link,
        key: "upload-btn",
        icon: "file_upload",
        color: this.valid ? _enum4.ButtonColor.primary : _enum4.ButtonColor.red
      }, rest, {
        className: viewMode === 'popup' ? this.getMergedClassNames() : this.getClassName(),
        onMouseEnter: this.handleMouseEnter,
        onMouseLeave: this.handleMouseLeave
      }), children || (0, _localeContext.$l)('Attachment', 'upload_attachment'), label && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "(", label, ")"), " ", countText, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
        key: "upload"
      }, uploadProps, {
        style: {
          width: 0,
          height: 0,
          display: 'block'
        }
      })));
    }
  }, {
    key: "showTooltip",
    value: function showTooltip(e) {
      if (this.showValidation === _enum7.ShowValidation.tooltip) {
        var message = this.getTooltipValidationMessage();

        if (message) {
          (0, _utils3.showValidationMessage)(e, message, this.context.getTooltipTheme('validation'), this.context.getTooltipPlacement('validation'), this.getContextConfig);
          return true;
        }
      }

      return false;
    }
  }, {
    key: "renderViewButton",
    value: function renderViewButton(label) {
      var _this$props5 = this.props,
          children = _this$props5.children,
          multiple = _this$props5.multiple,
          viewMode = _this$props5.viewMode;
      var rest = this.getOtherProps();
      return /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
        funcType: viewMode === 'popup' ? _enum4.FuncType.flat : _enum4.FuncType.link,
        key: "view-btn",
        icon: "attach_file",
        color: _enum4.ButtonColor.primary
      }, (0, _omit["default"])(rest, ['ref']), {
        className: this.getMergedClassNames()
      }), children || (0, _localeContext.$l)('Attachment', 'view_attachment'), label && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "(", label, ")"), " ", multiple && this.count || undefined);
    }
  }, {
    key: "handleSort",
    value: function handleSort(sort) {
      this.sort = sort;
    }
  }, {
    key: "handleOrderChange",
    value: function handleOrderChange(props) {
      var attachments = props.attachments;
      this.attachments = attachments;
      this.changeOrder();
    }
  }, {
    key: "changeOrder",
    value: function changeOrder() {
      this.sort = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, defaultSort), this.sort), {}, {
        custom: true
      });
      var sortable = this.props.sortable;

      if (sortable) {
        var _this$getContextConfi4 = this.getContextConfig('attachment'),
            onOrderChange = _this$getContextConfi4.onOrderChange;

        if (onOrderChange) {
          var attachmentUUID = this.getValue();

          if (attachmentUUID) {
            var attachments = this.getValidAttachments();

            if (attachments) {
              var bucketName = this.bucketName,
                  bucketDirectory = this.bucketDirectory,
                  storageCode = this.storageCode,
                  isPublic = this.isPublic;
              onOrderChange({
                bucketName: bucketName,
                bucketDirectory: bucketDirectory,
                storageCode: storageCode,
                attachments: attachments,
                attachmentUUID: attachmentUUID,
                isPublic: isPublic
              });
            }
          }
        }
      }
    }
  }, {
    key: "getSortSelectPopupContainer",
    value: function getSortSelectPopupContainer() {
      return this.wrapper;
    }
  }, {
    key: "renderSorter",
    value: function renderSorter() {
      var _this12 = this;

      var _this$props6 = this.props,
          sortable = _this$props6.sortable,
          viewMode = _this$props6.viewMode;

      if (sortable) {
        var prefixCls = this.prefixCls,
            attachments = this.attachments;

        if (attachments && attachments.length > 1) {
          var _ref3 = this.sort || defaultSort,
              type = _ref3.type,
              order = _ref3.order;

          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
            value: type,
            onChange: function onChange(newType) {
              return _this12.handleSort({
                type: newType,
                order: order,
                custom: false
              });
            },
            clearButton: false,
            isFlat: true,
            popupPlacement: "bottomRight",
            getPopupContainer: viewMode === 'popup' ? this.getSortSelectPopupContainer : undefined,
            size: _enum2.Size.small,
            border: false
          }, /*#__PURE__*/_react["default"].createElement(_Select["default"].Option, {
            value: "time"
          }, (0, _localeContext.$l)('Attachment', 'by_upload_time')), /*#__PURE__*/_react["default"].createElement(_Select["default"].Option, {
            value: "name"
          }, (0, _localeContext.$l)('Attachment', 'by_name'))), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
            funcType: _enum4.FuncType.link,
            className: (0, _classnames["default"])("".concat(prefixCls, "-order-icon"), order),
            onClick: function onClick() {
              return _this12.handleSort({
                type: type,
                order: order === 'asc' ? 'desc' : 'asc',
                custom: false
              });
            }
          }));
        }
      }
    }
  }, {
    key: "renderUploadList",
    value: function renderUploadList(uploadButton) {
      var _this$props7 = this.props,
          listType = _this$props7.listType,
          sortable = _this$props7.sortable,
          listLimit = _this$props7.listLimit,
          showHistory = _this$props7.showHistory,
          showSize = _this$props7.showSize,
          previewTarget = _this$props7.previewTarget,
          buttons = _this$props7.buttons,
          getPreviewUrl = _this$props7.getPreviewUrl,
          disabled = _this$props7.disabled;
      var mergeButtons = [AttachmentButtonType.download, AttachmentButtonType.remove];

      if (buttons) {
        mergeButtons = [].concat((0, _toConsumableArray2["default"])(mergeButtons), (0, _toConsumableArray2["default"])(buttons));
      }

      if (showHistory) {
        mergeButtons.unshift(AttachmentButtonType.history);
      }

      var attachments = this.attachments;
      var attachmentUUID = this.tempAttachmentUUID || this.getValue();

      if (attachmentUUID || uploadButton || attachments && attachments.length) {
        var bucketName = this.bucketName,
            bucketDirectory = this.bucketDirectory,
            storageCode = this.storageCode,
            readOnly = this.readOnly,
            isPublic = this.isPublic;
        var width = this.getPictureWidth();
        return /*#__PURE__*/_react["default"].createElement(_AttachmentList["default"], {
          prefixCls: "".concat(this.prefixCls, "-list"),
          pictureWidth: width,
          listType: listType,
          attachments: (0, _utils.sortAttachments)(attachments, this.sort || defaultSort),
          bucketName: bucketName,
          bucketDirectory: bucketDirectory,
          storageCode: storageCode,
          attachmentUUID: attachmentUUID,
          uploadButton: uploadButton,
          sortable: sortable,
          showSize: showSize,
          readOnly: readOnly,
          disabled: disabled,
          isPublic: isPublic,
          limit: readOnly ? listLimit : undefined,
          previewTarget: previewTarget,
          onHistory: showHistory ? this.handleHistory : undefined,
          onRemove: this.handleRemove,
          onUpload: this.uploadAttachment,
          onOrderChange: this.handleOrderChange,
          onFetchAttachments: this.handleFetchAttachment,
          onAttachmentsChange: this.handleAttachmentsChange,
          onPreview: this.handlePreview,
          record: this.record,
          buttons: mergeButtons,
          getPreviewUrl: getPreviewUrl
        });
      }
    }
  }, {
    key: "renderHeader",
    value: function renderHeader(uploadBtn) {
      var prefixCls = this.prefixCls,
          count = this.count,
          _this$props8 = this.props,
          downloadAll = _this$props8.downloadAll,
          viewMode = _this$props8.viewMode,
          __inGroup = _this$props8.__inGroup;
      var label = (!__inGroup || count) && this.renderHeaderLabel();
      var buttons = [];

      if (uploadBtn) {
        buttons.push(uploadBtn, this.renderTemplateDownloadButton());
      }

      var _this$getContextConfi5 = this.getContextConfig('attachment'),
          _this$getContextConfi6 = _this$getContextConfi5.downloadAllMode,
          downloadAllMode = _this$getContextConfi6 === void 0 ? _enum.DownloadAllMode.readOnly : _this$getContextConfi6;

      if (downloadAllMode === _enum.DownloadAllMode.readOnly && this.readOnly || downloadAllMode === _enum.DownloadAllMode.always) {
        if (this.count) {
          if (downloadAll) {
            var _this$getContextConfi7 = this.getContextConfig('attachment'),
                getDownloadAllUrl = _this$getContextConfi7.getDownloadAllUrl;

            if (getDownloadAllUrl) {
              var attachmentUUID = this.getValue();

              if (attachmentUUID) {
                var bucketName = this.bucketName,
                    bucketDirectory = this.bucketDirectory,
                    storageCode = this.storageCode,
                    isPublic = this.isPublic;
                var downloadAllUrl = getDownloadAllUrl({
                  bucketName: bucketName,
                  bucketDirectory: bucketDirectory,
                  storageCode: storageCode,
                  attachmentUUID: attachmentUUID,
                  isPublic: isPublic
                });

                if (downloadAllUrl) {
                  var downProps = {
                    key: 'download',
                    icon: 'get_app',
                    funcType: _enum4.FuncType.link,
                    href: (0, _isString["default"])(downloadAllUrl) ? downloadAllUrl : undefined,
                    onClick: (0, _isFunction["default"])(downloadAllUrl) ? downloadAllUrl : undefined,
                    target: '_blank',
                    color: _enum4.ButtonColor.primary,
                    children: (0, _localeContext.$l)('Attachment', 'download_all')
                  };
                  buttons.push( /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, downProps, downloadAll)));
                }
              }
            }
          }
        } else if (viewMode !== 'popup' && !__inGroup) {
          var viewProps = {
            key: 'view',
            funcType: _enum4.FuncType.link,
            disabled: true,
            children: (0, _localeContext.$l)('Attachment', 'no_attachments')
          };
          buttons.push( /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, viewProps)));
        }
      }

      var hasButton = buttons.length;
      var sorter = this.renderSorter();
      var divider = !__inGroup && label && hasButton ? /*#__PURE__*/_react["default"].createElement("span", {
        key: "divider",
        className: "".concat(prefixCls, "-header-divider")
      }) : undefined;

      if (label || divider || hasButton || sorter) {
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(prefixCls, "-header")
        }, label, divider, /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(prefixCls, "-header-buttons")
        }, buttons), sorter);
      }
    }
  }, {
    key: "renderWrapper",
    value: function renderWrapper() {
      var prefixCls = this.prefixCls;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-popup-inner"),
        ref: this.wrapperReference
      }, this.renderWrapperList());
    }
  }, {
    key: "getTooltipValidationMessage",
    value: function getTooltipValidationMessage() {
      var validationMessage = this.renderValidationResult();

      if (!this.isValidationMessageHidden(validationMessage)) {
        return validationMessage;
      }
    }
  }, {
    key: "renderValidationResult",
    value: function renderValidationResult(validationResult) {
      var message = (0, _get2["default"])((0, _getPrototypeOf2["default"])(Attachment.prototype), "renderValidationResult", this).call(this, validationResult);

      if (message) {
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(this.prefixCls, "-validation-message")
        }, message);
      }
    }
  }, {
    key: "renderEmpty",
    value: function renderEmpty() {
      var viewMode = this.props.viewMode;

      if (viewMode === 'popup' && !this.count) {
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(this.prefixCls, "-empty")
        }, this.getContextConfig('renderEmpty')('Attachment'));
      }
    }
  }, {
    key: "getWrapperClassNames",
    value: function getWrapperClassNames() {
      var _classNames2;

      var prefixCls = this.prefixCls,
          _this$props9 = this.props,
          className = _this$props9.className,
          size = _this$props9.size;
      return (0, _classnames["default"])("".concat(prefixCls, "-wrapper"), className, (_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-sm"), size === _enum2.Size.small), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-lg"), size === _enum2.Size.large), _classNames2));
    }
  }, {
    key: "renderWrapperList",
    value: function renderWrapperList(uploadBtn) {
      var prefixCls = this.prefixCls,
          _this$props10 = this.props,
          viewMode = _this$props10.viewMode,
          listType = _this$props10.listType,
          __inGroup = _this$props10.__inGroup;
      var isCard = listType === 'picture-card';
      var classes = ["".concat(prefixCls, "-list-wrapper")];

      if (viewMode !== 'popup') {
        var wrapperClassName = this.getWrapperClassNames();

        if (wrapperClassName) {
          classes.push(wrapperClassName);
        }
      }

      return /*#__PURE__*/_react["default"].createElement("div", {
        className: classes.join(' ')
      }, viewMode !== 'popup' && this.renderDragUploadArea(), this.renderHeader(!isCard && uploadBtn), !__inGroup && viewMode !== 'popup' && this.renderHelp(), !__inGroup && this.showValidation === _enum7.ShowValidation.newLine && this.renderValidationResult(), !__inGroup && this.renderEmpty(), viewMode !== 'none' && this.renderUploadList(isCard && uploadBtn));
    }
  }, {
    key: "getPictureWidth",
    value: function getPictureWidth() {
      var _this$props11 = this.props,
          pictureWidth = _this$props11.pictureWidth,
          listType = _this$props11.listType;
      return pictureWidth || (listType === 'picture-card' ? 100 : 48);
    }
  }, {
    key: "handleHelpMouseEnter",
    value: function handleHelpMouseEnter(e) {
      var getTooltipTheme = this.context.getTooltipTheme;
      var helpTooltipProps = this.helpTooltipProps,
          help = this.help;
      var helpTooltipCls = "".concat(this.getContextConfig('proPrefixCls'), "-tooltip-popup-help");

      if (helpTooltipProps && helpTooltipProps.popupClassName) {
        helpTooltipCls = helpTooltipCls.concat(' ', helpTooltipProps.popupClassName);
      }

      (0, _singleton.show)(e.currentTarget, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
        title: help,
        theme: getTooltipTheme('help'),
        placement: 'bottom'
      }, helpTooltipProps), {}, {
        popupClassName: helpTooltipCls
      }));
    }
  }, {
    key: "handleHelpMouseLeave",
    value: function handleHelpMouseLeave() {
      (0, _singleton.hide)();
    }
  }, {
    key: "renderHelp",
    value: function renderHelp() {
      var help = this.help,
          showAttachmentHelp = this.showAttachmentHelp;
      if (!help || showAttachmentHelp === _enum6.ShowHelp.none) return;

      switch (showAttachmentHelp) {
        case _enum6.ShowHelp.tooltip:
          return /*#__PURE__*/_react["default"].createElement(_icon["default"], {
            type: "help",
            style: {
              fontSize: '0.14rem',
              color: '#8c8c8c'
            },
            onMouseEnter: this.handleHelpMouseEnter,
            onMouseLeave: this.handleHelpMouseLeave
          });

        default:
          return /*#__PURE__*/_react["default"].createElement("div", {
            key: "help",
            className: "".concat(this