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

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

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
var _excluded = ["ref", "style", "name", "onChange"];
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { __decorate } from "tslib";
import React from 'react';
import { action as mobxAction, computed, observable, reaction, runInAction, toJS } from 'mobx';
import { observer } from 'mobx-react';
import classNames from 'classnames';
import omit from 'lodash/omit';
import noop from 'lodash/noop';
import isNil from 'lodash/isNil';
import isString from 'lodash/isString';
import isFunction from 'lodash/isFunction';
import { Uploader } from 'choerodon-ui/dataset';
import { DownloadAllMode } from 'choerodon-ui/dataset/data-set/enum';
import { Size } from '../../../es/_util/enum';
import Trigger from '../../../es/trigger/Trigger';
import RcUpload from '../../../es/rc-components/upload';
import { Action } from '../../../es/trigger/enum';
import { pxToRem } from '../../../es/_util/UnitConvertor';
import Button from '../button/Button';
import { $l } from '../locale-context';
import { ButtonColor, FuncType } from '../button/enum';
import AttachmentList from './AttachmentList';
import AttachmentGroup from './AttachmentGroup';
import { FormField } from '../field/FormField';
import autobind from '../_util/autobind';
import Modal from '../modal';
import AttachmentFile from '../data-set/AttachmentFile';
import { sortAttachments } from './utils';
import ObserverSelect from '../select/Select';
import BUILT_IN_PLACEMENTS from '../trigger-field/placements';
import attachmentStore from '../stores/AttachmentStore';
import { FieldType } from '../data-set/enum';
import { open } from '../modal-container/ModalContainer';
import Icon from '../icon';
import { ShowHelp } from '../field/enum';
import { FIELD_SUFFIX } from '../form/utils';
import { showValidationMessage } from '../field/utils';
import { ShowValidation } from '../form/enum';
import { getIf } from '../data-set/utils';
import { ATTACHMENT_TARGET } from './Item';
import TemplateDownloadButton from './TemplateDownloadButton';
import { hide, show } from '../tooltip/singleton';
export var AttachmentButtonType;

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

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

var Attachment = /*#__PURE__*/function (_FormField) {
  _inherits(Attachment, _FormField);

  var _super = _createSuper(Attachment);

  function Attachment() {
    var _this;

    _classCallCheck(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;
  }

  _createClass(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 === ShowHelp.none || formNode && showHelp === ShowHelp.label || viewMode === 'popup' && (showHelp || defaultShowHelp) === ShowHelp.label && formNode) {
        return ShowHelp.none;
      }

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

      return 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;

      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: $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;

      _get(_getPrototypeOf(Attachment.prototype), "componentDidMount", this).call(this);

      this.fetchCount();
      this.reaction = 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() {
      _get(_getPrototypeOf(Attachment.prototype), "componentWillUnmount", this).call(this);

      var reaction = this.reaction;

      if (reaction) {
        reaction();
        delete this.reaction;
      }
    }
  }, {
    key: "getFieldType",
    value: function getFieldType() {
      return 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 _objectSpread(_objectSpread({}, _get(_getPrototypeOf(Attachment.prototype), "getObservableProps", this).call(this, props, context)), {}, {
        count: count === undefined ? observableProps.count : count,
        attachments: attachments ? attachments.map(function (attachment) {
          if (attachment instanceof AttachmentFile) {
            return attachment;
          }

          return new AttachmentFile(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 _get(_getPrototypeOf(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' && isNil(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.fetchCountInBatch({
                attachmentUUID: value,
                bucketName: bucketName,
                bucketDirectory: bucketDirectory,
                storageCode: storageCode,
                isPublic: isPublic
              }).then(mobxAction(function (count) {
                _this4.observableProps.count = count || 0;
              }));
            }
          }
        }
      }
    }
  }, {
    key: "handleDataSetLoad",
    value: function handleDataSetLoad() {
      this.fetchCount();
    }
  }, {
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return _get(_getPrototypeOf(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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
        var _this5 = this;

        var oldAttachmentUUID, attachmentUUID;
        return _regeneratorRuntime.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) {
                  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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(attachments) {
        var _this6 = this;

        var max, oldAttachments;
        return _regeneratorRuntime.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.error($l('Attachment', 'file_list_max_length', {
                  count: max
                }));
                return _context2.abrupt("return");

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

                if (this.multiple) {
                  this.attachments = [].concat(_toConsumableArray(oldAttachments.slice()), _toConsumableArray(attachments));
                } else {
                  oldAttachments.forEach(function (attachment) {
                    return _this6.doRemove(attachment);
                  });
                  this.attachments = _toConsumableArray(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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(attachment) {
        return _regeneratorRuntime.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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(attachment) {
        var _this7 = this;

        var uploader, result;
        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
          while (1) {
            switch (_context4.prev = _context4.next) {
              case 0:
                _context4.prev = 0;
                uploader = getIf(this, 'uploader', function () {
                  return new 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 {
                  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 = _get(_getPrototypeOf(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({
          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 = _toConsumableArray(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 : _this$props$onRemove;
      return Promise.resolve(onAttachmentRemove(attachment)).then(mobxAction(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(mobxAction(function (result) {
                if (result !== false) {
                  _this10.removeAttachment(attachment);
                }

                attachment.status = 'done';
              }))["catch"](mobxAction(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;
        open({
          title: $l('Attachment', 'operation_records'),
          children: renderHistory({
            attachment: attachment,
            attachmentUUID: attachmentUUID,
            bucketName: bucketName,
            bucketDirectory: bucketDirectory,
            storageCode: storageCode
          }),
          cancelButton: false,
          okText: $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(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.createElement("span", {
            className: classNames("".concat(prefixCls, "-header-label"), _defineProperty({}, "".concat(prefixCls, "-required"), this.getProp('required')))
          }, label);
        }
      }
    }
  }, {
    key: "isDisabled",
    value: function isDisabled() {
      if (_get(_getPrototypeOf(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 _get(_getPrototypeOf(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 ? 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' ? FuncType.flat : FuncType.link : _this$props3$funcType;
            return /*#__PURE__*/React.createElement(TemplateDownloadButton, {
              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 = _objectWithoutProperties(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 ? pxToRem(this.getPictureWidth()) : undefined;
      var countText = multiple && (max ? "".concat(count, "/").concat(max) : count) || undefined;
      return isCardButton ? /*#__PURE__*/React.createElement(Button, _extends({
        funcType: FuncType.link,
        key: "upload-btn",
        icon: "add"
      }, rest, {
        className: classNames("".concat(prefixCls, "-card-button"), this.getClassName()),
        style: _objectSpread(_objectSpread({}, style), {}, {
          width: width,
          height: width
        })
      }), /*#__PURE__*/React.createElement("div", null, children || $l('Attachment', 'upload_picture')), countText ? /*#__PURE__*/React.createElement("div", null, countText) : undefined, /*#__PURE__*/React.createElement("input", _extends({
        key: "upload"
      }, uploadProps, {
        style: {
          width: 0,
          height: 0,
          display: 'block'
        }
      }))) : /*#__PURE__*/React.createElement(Button, _extends({
        funcType: viewMode === 'popup' ? FuncType.flat : FuncType.link,
        key: "upload-btn",
        icon: "file_upload",
        color: this.valid ? ButtonColor.primary : ButtonColor.red
      }, rest, {
        className: viewMode === 'popup' ? this.getMergedClassNames() : this.getClassName(),
        onMouseEnter: this.handleMouseEnter,
        onMouseLeave: this.handleMouseLeave
      }), children || $l('Attachment', 'upload_attachment'), label && /*#__PURE__*/React.createElement(React.Fragment, null, "(", label, ")"), " ", countText, /*#__PURE__*/React.createElement("input", _extends({
        key: "upload"
      }, uploadProps, {
        style: {
          width: 0,
          height: 0,
          display: 'block'
        }
      })));
    }
  }, {
    key: "showTooltip",
    value: function showTooltip(e) {
      if (this.showValidation === ShowValidation.tooltip) {
        var message = this.getTooltipValidationMessage();

        if (message) {
          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.createElement(Button, _extends({
        funcType: viewMode === 'popup' ? FuncType.flat : FuncType.link,
        key: "view-btn",
        icon: "attach_file",
        color: ButtonColor.primary
      }, omit(rest, ['ref']), {
        className: this.getMergedClassNames()
      }), children || $l('Attachment', 'view_attachment'), label && /*#__PURE__*/React.createElement(React.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 = _objectSpread(_objectSpread(_objectSpread({}, 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ObserverSelect, {
            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: Size.small,
            border: false
          }, /*#__PURE__*/React.createElement(ObserverSelect.Option, {
            value: "time"
          }, $l('Attachment', 'by_upload_time')), /*#__PURE__*/React.createElement(ObserverSelect.Option, {
            value: "name"
          }, $l('Attachment', 'by_name'))), /*#__PURE__*/React.createElement(Button, {
            funcType: FuncType.link,
            className: classNames("".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(_toConsumableArray(mergeButtons), _toConsumableArray(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.createElement(AttachmentList, {
          prefixCls: "".concat(this.prefixCls, "-list"),
          pictureWidth: width,
          listType: listType,
          attachments: 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 ? DownloadAllMode.readOnly : _this$getContextConfi6;

      if (downloadAllMode === DownloadAllMode.readOnly && this.readOnly || downloadAllMode === 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: FuncType.link,
                    href: isString(downloadAllUrl) ? downloadAllUrl : undefined,
                    onClick: isFunction(downloadAllUrl) ? downloadAllUrl : undefined,
                    target: '_blank',
                    color: ButtonColor.primary,
                    children: $l('Attachment', 'download_all')
                  };
                  buttons.push( /*#__PURE__*/React.createElement(Button, _extends({}, downProps, downloadAll)));
                }
              }
            }
          }
        } else if (viewMode !== 'popup' && !__inGroup) {
          var viewProps = {
            key: 'view',
            funcType: FuncType.link,
            disabled: true,
            children: $l('Attachment', 'no_attachments')
          };
          buttons.push( /*#__PURE__*/React.createElement(Button, _extends({}, viewProps)));
        }
      }

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

      if (label || divider || hasButton || sorter) {
        return /*#__PURE__*/React.createElement("div", {
          className: "".concat(prefixCls, "-header")
        }, label, divider, /*#__PURE__*/React.createElement("div", {
          className: "".concat(prefixCls, "-header-buttons")
        }, buttons), sorter);
      }
    }
  }, {
    key: "renderWrapper",
    value: function renderWrapper() {
      var prefixCls = this.prefixCls;
      return /*#__PURE__*/React.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 = _get(_getPrototypeOf(Attachment.prototype), "renderValidationResult", this).call(this, validationResult);

      if (message) {
        return /*#__PURE__*/React.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.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 classNames("".concat(prefixCls, "-wrapper"), className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-sm"), size === Size.small), _defineProperty(_classNames2, "".concat(prefixCls, "-lg"), size === 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.createElement("div", {
        className: classes.join(' ')
      }, viewMode !== 'popup' && this.renderDragUploadArea(), this.renderHeader(!isCard && uploadBtn), !__inGroup && viewMode !== 'popup' && this.renderHelp(), !__inGroup && this.showValidation === 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);
      }

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

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

        default:
          return /*#__PURE__*/React.createElement("div", {
            key: "help",
            className: "".concat(this.getContextProPrefixCls(FIELD_SUFFIX), "-help")
          }, toJS(help));
      }
    }
  }, {
    key: "showValidation",
    get: function get() {
      var _this$props12 = this.props,
          viewMode = _this$props12.viewMode,
          _this$props12$showVal = _this$props12.showValidation,
          showValidation = _this$props12$showVal === void 0 ? viewMode === 'popup' ? ShowValidation.tooltip : ShowValidation.newLine : _this$props12$showVal;
      var _this$context$showVal = this.context.showValidation,
          ctxShowValidation = _this$context$showVal === void 0 ? showValidation : _this$context$showVal;
      return ctxShowValidation;
    }
  }, {
    key: "handlePopupHiddenChange",
    value: function handlePopupHiddenChange(hidden) {
      this.setPopup(!hidden);
    }
  }, {
    key: "setPopup",
    value: function setPopup(popup) {
      this.popup = popup;
    }
  }, {
    key: "setDragState",
    value: function setDragState(state) {
      this.dragState = state;
    }
  }, {
    key: "handleFileDrop",
    value: function handleFileDrop(e) {
      this.setDragState(e.type);
    }
  }, {
    key: "renderDefaultDragBox",
    value: function renderDefaultDragBox() {
      var prefixCls = this.prefixCls,
          help = this.help;
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-drag-box")
      }, /*#__PURE__*/React.createElement("p", {
        className: "".concat(prefixCls, "-drag-box-icon")
      }, /*#__PURE__*/React.createElement(Icon, {
        type: "inbox"
      })), /*#__PURE__*/React.createElement("p", {
        className: "".concat(prefixCls, "-drag-box-text")
      }, $l('Attachment', 'file_type_mismatch')), /*#__PURE__*/React.createElement("p", {
        className: "".concat(prefixCls, "-drag-box-hint")
      }, help));
    }
  }, {
    key: "renderDragUploadArea",
    value: function renderDragUploadArea() {
      var _this$props13 = this.props,
          dragUpload = _this$props13.dragUpload,
          dragBoxRender = _this$props13.dragBoxRender,
          readOnly = _this$props13.readOnly;
      var prefixCls = this.prefixCls,
          accept = this.accept;

      if (dragUpload) {
        var _classNames3;

        var isDisabled = this.isDisabled() || readOnly;
        var dragCls = classNames(prefixCls, (_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefixCls, "-drag"), true), _defineProperty(_classNames3, "".concat(prefixCls, "-drag-hover"), this.dragState === 'dragover'), _defineProperty(_classNames3, "".concat(prefixCls, "-drag-disabled"), isDisabled), _classNames3));

        var rcUploadProps = _objectSpread(_objectSpread({}, this.props), {}, {
          disabled: isDisabled,
          accept: accept ? accept.join(',') : undefined,
          beforeUpload: this.handleDragUpload,
          prefixCls: prefixCls
        });

        return /*#__PURE__*/React.createElement("div", {
          className: dragCls,
          onDrop: this.handleFileDrop,
          onDragOver: this.handleFileDrop,
          onDragLeave: this.handleFileDrop
        }, /*#__PURE__*/React.createElement(RcUpload, _extends({}, rcUploadProps, {
          className: "".concat(prefixCls, "-btn")
        }), dragBoxRender || this.renderDefaultDragBox()));
      }

      return undefined;
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props14