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 _regeneratorRuntime from "@babel/runtime/regenerator";
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 _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

import { __decorate } from "tslib";
import React from 'react';
import PropTypes from 'prop-types';
import { action as mobxAction, observable, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import classNames from 'classnames';
import isNil from 'lodash/isNil';
import { getConfig, getProPrefixCls } from '../../../es/configure';
import { Size } from '../../../es/_util/enum';
import Trigger from '../../../es/trigger/Trigger';
import { Action } from '../../../es/trigger/enum';
import Button from '../button/Button';
import { $l } from '../locale-context';
import { ButtonColor, FuncType } from '../button/enum';
import AttachmentList from './AttachmentList';
import { FormField } from '../field/FormField';
import axios from '../axios';
import autobind from '../_util/autobind';
import Modal from '../modal';
import AttachmentFile from '../data-set/AttachmentFile';
import { appendFormData, formatFileSize, sortAttachments } from './utils';
import ObserverSelect from '../select/Select';
import BUILT_IN_PLACEMENTS from '../trigger-field/placements';
import attachmentStore from '../stores/AttachmentStore';
import { DataSetEvents, FieldType } from '../data-set/enum';
import { open } from '../modal-container/ModalContainer';
import Icon from '../icon';
import Tooltip from '../tooltip';
import { ShowHelp } from '../field/enum';
import { FIELD_SUFFIX } from '../form/utils';
import { showValidationMessage } from '../field/utils';
import { ShowValidation } from '../form/enum';
var defaultSort = {
  type: 'time',
  order: 'asc',
  custom: true
};

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

  var _super = _createSuper(Attachment);

  function Attachment() {
    _classCallCheck(this, Attachment);

    return _super.apply(this, arguments);
  }

  _createClass(Attachment, [{
    key: "processDataSetEventListener",
    value: function processDataSetEventListener(on) {
      var dataSet = this.dataSet;

      if (dataSet) {
        dataSet[on ? 'addEventListener' : 'removeEventListener'](DataSetEvents.load, this.handleDataSetLoad);
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      _get(_getPrototypeOf(Attachment.prototype), "componentDidMount", this).call(this);

      this.fetchCount();
      this.processDataSetEventListener(true);
    }
  }, {
    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);

      this.processDataSetEventListener(false);
    }
  }, {
    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({}, _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: "getValidatorProps",
    value: function getValidatorProps() {
      var attachments = this.getValidAttachments();
      var count = attachments ? attachments.length : this.count;
      return _objectSpread({}, _get(_getPrototypeOf(Attachment.prototype), "getValidatorProps", this).call(this), {
        attachmentCount: count || 0
      });
    }
  }, {
    key: "fetchCount",
    value: function fetchCount() {
      var _this = this;

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

      if (viewMode !== 'list' && isNil(this.count)) {
        var value = this.getValue();

        if (value) {
          if (field) {
            field.fetchAttachmentCount(value);
          } else {
            var _getConfig = getConfig('attachment'),
                batchFetchCount = _getConfig.batchFetchCount;

            if (batchFetchCount && !this.attachments) {
              attachmentStore.fetchCountInBatch(value).then(mobxAction(function (count) {
                _this.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', 'withCredentials', 'sortable', 'listType', 'viewMode', 'fileKey', 'fileSize', 'bucketName', 'bucketDirectory', 'storageCode', 'count', 'max', 'listLimit', 'showHistory', 'downloadAll', 'attachments', 'onAttachmentsChange', 'beforeUpload', 'onUploadProgress', 'onUploadSuccess', 'onUploadError']);
    }
  }, {
    key: "getUploadAxiosConfig",
    value: function getUploadAxiosConfig(attachment, attachmentUUID) {
      var _this2 = this;

      var originFileObj = attachment.originFileObj;

      if (originFileObj) {
        var globalConfig = getConfig('attachment');
        var _this$props2 = this.props,
            action = _this$props2.action,
            data = _this$props2.data,
            headers = _this$props2.headers,
            _this$props2$fileKey = _this$props2.fileKey,
            fileKey = _this$props2$fileKey === void 0 ? globalConfig.defaultFileKey : _this$props2$fileKey,
            withCredentials = _this$props2.withCredentials;

        var newHeaders = _objectSpread({
          'X-Requested-With': 'XMLHttpRequest'
        }, headers);

        var formData = new FormData();
        formData.append(fileKey, originFileObj);

        if (data) {
          appendFormData(formData, data);
        }

        var _onUploadProgress = function onUploadProgress(e) {
          _this2.handleProgress(e.total > 0 ? e.loaded / e.total * 100 : 0, attachment);
        };

        if (action) {
          return {
            url: action,
            headers: _objectSpread({}, newHeaders),
            data: formData,
            onUploadProgress: _onUploadProgress,
            method: 'POST',
            withCredentials: withCredentials
          };
        }

        var actionHook = globalConfig.action;

        if (actionHook) {
          var bucketName = this.bucketName,
              bucketDirectory = this.bucketDirectory,
              storageCode = this.storageCode;
          var newConfig = typeof actionHook === 'function' ? actionHook({
            attachment: attachment,
            bucketName: bucketName,
            bucketDirectory: bucketDirectory,
            storageCode: storageCode,
            attachmentUUID: attachmentUUID
          }) : actionHook;
          var customData = newConfig.data,
              customUploadProgress = newConfig.onUploadProgress;

          if (customData) {
            appendFormData(formData, customData);
          }

          return _objectSpread({
            withCredentials: withCredentials,
            method: 'POST'
          }, newConfig, {
            headers: _objectSpread({}, newHeaders, {}, newConfig.headers),
            data: formData,
            onUploadProgress: function onUploadProgress(e) {
              _onUploadProgress(e);

              if (customUploadProgress) {
                customUploadProgress(e);
              }
            }
          });
        }

        throw new Error("Please set Upload.action or configure.attachment.action .");
      }
    }
  }, {
    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 getAttachmentUUID() {
      var _getConfig2 = getConfig('attachment'),
          getAttachmentUUID = _getConfig2.getAttachmentUUID;

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

      return getAttachmentUUID();
    }
  }, {
    key: "uploadAttachments",
    value: function () {
      var _uploadAttachments = _asyncToGenerator(
      /*#__PURE__*/
      _regeneratorRuntime.mark(function _callee(attachments) {
        var _this3 = this;

        var oldAttachmentUUID, attachmentUUID, max, oldAttachments;
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                oldAttachmentUUID = this.getValue();
                _context.t0 = oldAttachmentUUID;

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

                _context.next = 5;
                return this.getAttachmentUUID();

              case 5:
                _context.t0 = _context.sent;

              case 6:
                attachmentUUID = _context.t0;

                if (attachmentUUID !== oldAttachmentUUID) {
                  this.tempAttachmentUUID = attachmentUUID;
                }

                max = this.getProp('max');

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

                Modal.error($l('Attachment', 'file_list_max_length', {
                  count: max
                }));
                return _context.abrupt("return");

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

                if (this.multiple) {
                  this.attachments = [].concat(_toConsumableArray(oldAttachments.slice()), _toConsumableArray(attachments));
                } else {
                  oldAttachments.forEach(function (attachment) {
                    return _this3.doRemove(attachment);
                  });
                  this.attachments = _toConsumableArray(attachments);
                }

                if (!attachmentUUID) {
                  _context.next = 22;
                  break;
                }

                _context.prev = 15;
                _context.next = 18;
                return Promise.all(attachments.map(function (attachment) {
                  return _this3.upload(attachment, attachmentUUID);
                }));

              case 18:
                _context.prev = 18;
                this.changeOrder();

                if (this.tempAttachmentUUID) {
                  delete this.tempAttachmentUUID;
                  this.setValue(attachmentUUID);
                }

                return _context.finish(18);

              case 22:
              case "end":
                return _context.stop();
            }
          }
        }, _callee, this, [[15,, 18, 22]]);
      }));

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

      return uploadAttachments;
    }()
  }, {
    key: "uploadAttachment",
    value: function () {
      var _uploadAttachment = _asyncToGenerator(
      /*#__PURE__*/
      _regeneratorRuntime.mark(function _callee2(attachment, attachmentUUID) {
        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                _context2.next = 2;
                return this.upload(attachment, attachmentUUID);

              case 2:
                this.changeOrder();

              case 3:
              case "end":
                return _context2.stop();
            }
          }
        }, _callee2, this);
      }));

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

      return uploadAttachment;
    }()
  }, {
    key: "upload",
    value: function () {
      var _upload = _asyncToGenerator(
      /*#__PURE__*/
      _regeneratorRuntime.mark(function _callee3(attachment, attachmentUUID) {
        var result, config;
        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
          while (1) {
            switch (_context3.prev = _context3.next) {
              case 0:
                _context3.prev = 0;
                _context3.next = 3;
                return this.beforeUpload(attachment, this.attachments);

              case 3:
                result = _context3.sent;

                if (!(result === false)) {
                  _context3.next = 8;
                  break;
                }

                this.removeAttachment(attachment);
                _context3.next = 18;
                break;

              case 8:
                if (!(attachment.status !== 'error' && !attachment.invalid)) {
                  _context3.next = 18;
                  break;
                }

                config = this.getUploadAxiosConfig(attachment, attachmentUUID);

                if (!config) {
                  _context3.next = 18;
                  break;
                }

                _context3.t0 = this;
                _context3.next = 14;
                return this.axios(config);

              case 14:
                _context3.t1 = _context3.sent;
                _context3.t2 = attachment;
                _context3.next = 18;
                return _context3.t0.handleSuccess.call(_context3.t0, _context3.t1, _context3.t2);

              case 18:
                _context3.next = 24;
                break;

              case 20:
                _context3.prev = 20;
                _context3.t3 = _context3["catch"](0);
                this.handleError(_context3.t3, attachment);
                throw _context3.t3;

              case 24:
              case "end":
                return _context3.stop();
            }
          }
        }, _callee3, this, [[0, 20]]);
      }));

      function upload(_x4, _x5) {
        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: "handleProgress",
    value: function handleProgress(percent, attachment) {
      attachment.status = 'uploading';
      attachment.percent = percent;
      var onUploadProgress = this.props.onUploadProgress;

      if (onUploadProgress) {
        onUploadProgress(percent, attachment);
      }
    }
  }, {
    key: "handleSuccess",
    value: function handleSuccess(response, attachment) {
      var _this4 = this;

      attachment.percent = 100;
      return new Promise(function (resolve) {
        setTimeout(mobxAction(function () {
          attachment.status = 'success';

          var _getConfig3 = getConfig('attachment'),
              handleUploadSuccess = _getConfig3.onUploadSuccess;

          if (handleUploadSuccess) {
            handleUploadSuccess(response, attachment);
          }

          var onUploadSuccess = _this4.props.onUploadSuccess;

          if (onUploadSuccess) {
            onUploadSuccess(response, attachment);
          }

          _this4.checkValidity();

          resolve();
        }), 0);
      });
    }
  }, {
    key: "handleError",
    value: function handleError(error, attachment) {
      var _getConfig4 = getConfig('attachment'),
          handleUploadError = _getConfig4.onUploadError;

      var response = error.response;
      var onUploadError = this.props.onUploadError;
      attachment.status = 'error';
      attachment.error = error;
      var message = error.message;

      if (handleUploadError) {
        handleUploadError(error, attachment);
      }

      attachment.errorMessage = attachment.errorMessage || message;

      if (onUploadError) {
        onUploadError(error, response, attachment);
      }
    }
  }, {
    key: "handleChange",
    value: function handleChange(e) {
      var _this5 = this;

      var target = e.target;

      if (target.value) {
        var files = _toConsumableArray(target.files);

        target.value = '';
        this.autoCreate();
        this.uploadAttachments(files.map(function (file, index) {
          return new AttachmentFile({
            uid: _this5.getUid(index),
            url: URL.createObjectURL(file),
            name: file.name,
            size: file.size,
            type: file.type,
            lastModified: file.lastModified,
            originFileObj: file,
            creationDate: new Date()
          });
        }));
      }
    }
  }, {
    key: "doRemove",
    value: function doRemove(attachment) {
      var _this6 = this;

      var _getConfig5 = getConfig('attachment'),
          onRemove = _getConfig5.onRemove;

      var attachmentUUID = this.getValue();

      if (onRemove && attachmentUUID) {
        if (attachment.status === 'error') {
          return this.removeAttachment(attachment);
        }

        var bucketName = this.bucketName,
            bucketDirectory = this.bucketDirectory,
            storageCode = this.storageCode;
        attachment.status = 'deleting';
        return onRemove({
          attachment: attachment,
          attachmentUUID: attachmentUUID,
          bucketName: bucketName,
          bucketDirectory: bucketDirectory,
          storageCode: storageCode
        }).then(mobxAction(function (result) {
          if (result !== false) {
            _this6.removeAttachment(attachment);
          }

          attachment.status = 'done';
        }))["catch"](mobxAction(function () {
          attachment.status = 'done';
        }));
      }
    }
  }, {
    key: "handleHistory",
    value: function handleHistory(attachment, attachmentUUID) {
      var _getConfig6 = getConfig('attachment'),
          renderHistory = _getConfig6.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: "handleFetchAttachment",
    value: function handleFetchAttachment(fetchProps) {
      var _this7 = this;

      var field = this.field;

      if (field) {
        field.fetchAttachments(fetchProps);
      } else {
        var _getConfig7 = getConfig('attachment'),
            fetchList = _getConfig7.fetchList;

        if (fetchList) {
          fetchList(fetchProps).then(function (results) {
            _this7.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.checkValidity();
          var onAttachmentsChange = this.props.onAttachmentsChange;

          if (onAttachmentsChange) {
            onAttachmentsChange(attachments);
          }
        }
      }

      return undefined;
    }
  }, {
    key: "beforeUpload",
    value: function beforeUpload(attachment, attachments) {
      var _this$props3 = this.props,
          beforeUpload = _this$props3.beforeUpload,
          _this$props3$fileSize = _this$props3.fileSize,
          fileSize = _this$props3$fileSize === void 0 ? getConfig('attachment').defaultFileSize : _this$props3$fileSize,
          accept = _this$props3.accept;

      if (accept && !this.isAcceptFile(attachment, accept)) {
        attachment.status = 'error';
        attachment.invalid = true;
        attachment.errorMessage = $l('Attachment', 'file_type_mismatch', {
          types: accept.join(',')
        });
        return;
      }

      if (fileSize && fileSize > 0 && attachment.size > fileSize) {
        attachment.status = 'error';
        attachment.invalid = true;
        attachment.errorMessage = $l('Attachment', 'file_max_size', {
          size: formatFileSize(fileSize)
        });
        return;
      }

      if (!beforeUpload) {
        return true;
      }

      return beforeUpload(attachment, attachments);
    }
  }, {
    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) {
          return React.createElement("span", {
            className: "".concat(this.prefixCls, "-header-label")
          }, 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: "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,
          viewMode = this.props.viewMode;
      var buttonProps = this.getOtherProps();

      var children = buttonProps.children,
          ref = buttonProps.ref,
          className = buttonProps.className,
          style = buttonProps.style,
          accept = buttonProps.accept,
          name = buttonProps.name,
          fileKey = buttonProps.fileKey,
          rest = _objectWithoutProperties(buttonProps, ["children", "ref", "className", "style", "accept", "name", "fileKey"]);

      var max = this.getProp('max');
      var uploadProps = {
        multiple: multiple,
        accept: accept ? accept.join(',') : undefined,
        name: name || fileKey || getConfig('attachment').defaultFileKey,
        type: 'file',
        ref: ref
      };
      var width = isCardButton ? this.getPictureWidth() : undefined;
      return isCardButton ? React.createElement(Button, _extends({
        funcType: FuncType.link,
        key: "upload-btn",
        icon: "add"
      }, rest, {
        className: classNames("".concat(prefixCls, "-card-button"), className),
        style: _objectSpread({}, style, {
          width: width,
          height: width
        })
      }), React.createElement("div", null, children || $l('Attachment', 'upload_picture')), max ? React.createElement("div", null, "".concat(count, "/").concat(max)) : count || undefined, React.createElement("input", _extends({
        key: "upload"
      }, uploadProps, {
        hidden: true
      }))) : React.createElement(Button, _extends({
        funcType: viewMode === 'popup' ? FuncType.flat : FuncType.link,
        key: "upload-btn",
        icon: "file_upload",
        color: this.isValid ? ButtonColor.primary : ButtonColor.red
      }, rest, {
        onMouseEnter: this.handleMouseEnter,
        onMouseLeave: this.handleMouseLeave
      }), children || $l('Attachment', 'upload_attachment'), label && React.createElement(React.Fragment, null, "(", label, ")"), " ", multiple && (max ? "".concat(count, "/").concat(max) : count) || undefined, React.createElement("input", _extends({
        key: "upload"
      }, uploadProps, {
        hidden: true
      })));
    }
  }, {
    key: "showTooltip",
    value: function showTooltip(e) {
      if (this.showValidation === ShowValidation.tooltip) {
        var message = this.getTooltipValidationMessage();

        if (message) {
          showValidationMessage(e, message);
          return true;
        }
      }

      return false;
    }
  }, {
    key: "renderViewButton",
    value: function renderViewButton(label) {
      var _this$props4 = this.props,
          multiple = _this$props4.multiple,
          viewMode = _this$props4.viewMode;

      var _this$getOtherProps = this.getOtherProps(),
          children = _this$getOtherProps.children,
          rest = _objectWithoutProperties(_this$getOtherProps, ["children"]);

      return React.createElement(Button, _extends({
        funcType: viewMode === 'popup' ? FuncType.flat : FuncType.link,
        key: "view-btn",
        icon: "attach_file",
        color: ButtonColor.primary
      }, rest), children || $l('Attachment', 'view_attachment'), label && 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({}, defaultSort, {}, this.sort, {
        custom: true
      });
      var attachmentUUID = this.getValue();

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

        var _getConfig8 = getConfig('attachment'),
            onOrderChange = _getConfig8.onOrderChange;

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

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

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

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

          return React.createElement(React.Fragment, null, React.createElement(ObserverSelect, {
            value: type,
            onChange: function onChange(newType) {
              return _this8.handleSort({
                type: newType,
                order: order,
                custom: false
              });
            },
            clearButton: false,
            isFlat: true,
            popupPlacement: "bottomRight",
            getPopupContainer: viewMode === 'popup' ? this.getSortSelectPopupContainer : undefined,
            size: Size.small,
            border: false
          }, React.createElement(ObserverSelect.Option, {
            value: "time"
          }, $l('Attachment', 'by_upload_time')), React.createElement(ObserverSelect.Option, {
            value: "name"
          }, $l('Attachment', 'by_name'))), React.createElement(Button, {
            funcType: FuncType.link,
            className: classNames("".concat(prefixCls, "-order-icon"), order),
            onClick: function onClick() {
              return _this8.handleSort({
                type: type,
                order: order === 'asc' ? 'desc' : 'asc',
                custom: false
              });
            }
          }));
        }
      }
    }
  }, {
    key: "renderUploadList",
    value: function renderUploadList(uploadButton) {
      var _this$props6 = this.props,
          listType = _this$props6.listType,
          sortable = _this$props6.sortable,
          listLimit = _this$props6.listLimit,
          showHistory = _this$props6.showHistory;
      var attachments = this.attachments;
      var attachmentUUID = this.tempAttachmentUUID || this.getValue();

      if (attachmentUUID || uploadButton) {
        var bucketName = this.bucketName,
            bucketDirectory = this.bucketDirectory,
            storageCode = this.storageCode;
        var width = this.getPictureWidth();
        var readOnly = this.readOnly;
        return 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,
          readOnly: readOnly,
          limit: readOnly ? listLimit : undefined,
          onHistory: showHistory ? this.handleHistory : undefined,
          onRemove: this.handleRemove,
          onUpload: this.uploadAttachment,
          onOrderChange: this.handleOrderChange,
          onFetchAttachments: this.handleFetchAttachment,
          onPreview: this.handlePreview
        });
      }
    }
  }, {
    key: "renderHeader",
    value: function renderHeader(uploadBtn) {
      var prefixCls = this.prefixCls,
          _this$props7 = this.props,
          downloadAll = _this$props7.downloadAll,
          viewMode = _this$props7.viewMode;
      var label = this.renderHeaderLabel();
      var buttons = [];

      if (uploadBtn) {
        buttons.push(uploadBtn);
      }

      if (this.readOnly) {
        if (this.count) {
          if (downloadAll) {
            var _getConfig9 = getConfig('attachment'),
                getDownloadAllUrl = _getConfig9.getDownloadAllUrl;

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

              var downProps = _objectSpread({
                key: 'download',
                icon: 'get_app',
                funcType: FuncType.link,
                href: getDownloadAllUrl({
                  bucketName: bucketName,
                  bucketDirectory: bucketDirectory,
                  storageCode: storageCode,
                  attachmentUUID: attachmentUUID
                }),
                target: '_blank',
                color: ButtonColor.primary,
                children: $l('Attachment', 'download_all')
              }, downloadAll);

              buttons.push(React.createElement(Button, _extends({}, downProps)));
            }
          }
        } else if (viewMode !== 'popup') {
          var viewProps = {
            key: 'view',
            funcType: FuncType.link,
            disabled: true,
            children: $l('Attachment', 'no_attachments')
          };
          buttons.push(React.createElement(Button, _extends({}, viewProps)));
        }
      }

      return React.createElement("div", {
        className: "".concat(prefixCls, "-header")
      }, label, label && buttons.length ? React.createElement("span", {
        key: "divider",
        className: "".concat(prefixCls, "-header-divider")
      }) : undefined, React.createElement("div", {
        className: "".concat(prefixCls, "-header-buttons")
      }, buttons), this.renderSorter());
    }
  }, {
    key: "renderWrapper",
    value: function renderWrapper() {
      var prefixCls = this.prefixCls;
      return 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 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 React.createElement("div", {
          className: "".concat(this.prefixCls, "-empty")
        }, getConfig('renderEmpty')('Attachment'));
      }
    }
  }, {
    key: "renderWrapperList",
    value: function renderWrapperList(uploadBtn) {
      var prefixCls = this.prefixCls,
          _this$props8 = this.props,
          viewMode = _this$props8.viewMode,
          listType = _this$props8.listType;
      var isCard = listType === 'picture-card';
      return React.createElement("div", {
        className: "".concat(prefixCls, "-wrapper")
      }, this.renderHeader(!isCard && uploadBtn), viewMode !== 'popup' && this.renderHelp(ShowHelp.newLine), this.showValidation === ShowValidation.newLine && this.renderValidationResult(), this.renderEmpty(), viewMode !== 'none' && this.renderUploadList(isCard && uploadBtn));
    }
  }, {
    key: "getPictureWidth",
    value: function getPictureWidth() {
      var _this$props9 = this.props,
          pictureWidth = _this$props9.pictureWidth,
          listType = _this$props9.listType;
      return pictureWidth || (listType === 'picture-card' ? 100 : 48);
    }
  }, {
    key: "renderHelp",
    value: function renderHelp(forceHelpMode) {
      var showHelp = this.props.showHelp;
      var help = this.getProp('help');
      if (help === undefined || showHelp === ShowHelp.none) return;

      switch (forceHelpMode) {
        case ShowHelp.tooltip:
          return React.createElement(Tooltip, {
            title: help,
            openClassName: "".concat(getConfig('proPrefixCls'), "-tooltip-popup-help"),
            placement: "bottom"
          }, React.createElement(Icon, {
            type: "help",
            style: {
              fontSize: '14px',
              color: '#8c8c8c'
            }
          }));

        default:
          return React.createElement("div", {
            key: "help",
            className: "".concat(getProPrefixCls(FIELD_SUFFIX), "-help")
          }, help);
      }
    }
  }, {
    key: "handlePopupHiddenChange",
    value: function handlePopupHiddenChange(hidden) {
      this.setPopup(!hidden);
    }
  }, {
    key: "setPopup",
    value: function setPopup(popup) {
      this.popup = popup;
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props10 = this.props,
          viewMode = _this$props10.viewMode,
          listType = _this$props10.listType,
          _inTable = _this$props10._inTable,
          hidden = _this$props10.hidden;
      var readOnly = this.readOnly,
          prefixCls = this.prefixCls;

      if (viewMode === 'popup') {
        var label = !_inTable && this.hasFloatLabel && this.getLabel();
        return React.createElement("div", {
          className: "".concat(prefixCls, "-popup-wrapper")
        }, React.createElement(Trigger, {
          prefixCls: this.prefixCls,
          popupContent: this.renderWrapper,
          action: [Action.hover, Action.focus],
          builtinPlacements: BUILT_IN_PLACEMENTS,
          popupPlacement: "bottomLeft",
          popupHidden: hidden || !this.popup,
          onPopupHiddenChange: this.handlePopupHiddenChange
        }, readOnly ? this.renderViewButton(label) : this.renderUploadBtn(false, label)), this.renderHelp(ShowHelp.tooltip), this.showValidation === ShowValidation.newLine && this.renderValidationResult());
      }

      return this.renderWrapperList(readOnly ? undefined : this.renderUploadBtn(listType === 'picture-card'));
    }
  }, {
    key: "help",
    get: function get() {
      return this.getProp('help');
    }
  }, {
    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: "attachments",
    get: function get() {
      var field = this.field;

      if (field) {
        return field.attachments;
      }

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

      runInAction(function () {
        var field = _this9.field;

        if (field) {
          field.attachments = attachments;
        } else {
          _this9.observableProps.attachments = attachments;
        }

        if (attachments) {
          var onAttachmentsChange = _this9.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.attachmentCount;

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

      var count = this.observableProps.count;
      return count;
    }
  }, {
    key: "axios",
    get: function get() {
      return getConfig('axios') || axios;
    }
  }, {
    key: "defaultValidationMessages",
    get: function get() {
      var label = this.getProp('label');
      return {
        valueMissing: $l('Attachment', label ? 'value_missing' : 'value_missing_no_label', {
          label: label
        })
      };
    }
  }, {
    key: "showValidation",
    get: function get() {
      var _this$props11 = this.props,
          viewMode = _this$props11.viewMode,
          _this$props11$showVal = _this$props11.showValidation,
          showValidation = _this$props11$showVal === void 0 ? viewMode === 'popup' ? ShowValidation.tooltip : ShowValidation.newLine : _this$props11$showVal;
      var _this$context$showVal = this.context.showValidation,
          ctxShowValidation = _this$context$showVal === void 0 ? showValidation : _this$context$showVal;
      return ctxShowValidation;
    }
  }]);

  return Attachment;
}(FormField);

Attachment.displayName = 'Attachment';
Attachment.defaultProps = _objectSpread({}, FormField.defaultProps, {
  suffixCls: 'attachment',
  multiple: true,
  sortable: true,
  downloadAll: true,
  listType: 'text',
  viewMode: 'list'
});
Attachment.propTypes = _objectSpread({}, FormField.propTypes, {
  sortable: PropTypes.bool,
  listType: PropTypes.oneOf(['text', 'picture', 'picture-card']),
  viewMode: PropTypes.oneOf(['none', 'list', 'popup'])
}); // eslint-disable-next-line camelcase

Attachment.__IS_IN_CELL_EDITOR = true;

__decorate([observable], Attachment.prototype, "sort", void 0);

__decorate([observable], Attachment.prototype, "popup", void 0);

__decorate([autobind], Attachment.prototype, "handleDataSetLoad", null);

__decorate([mobxAction], Attachment.prototype, "uploadAttachments", null);

__decorate([autobind], Attachment.prototype, "uploadAttachment", null);

__decorate([mobxAction], Attachment.prototype, "handleProgress", null);

__decorate([mobxAction], Attachment.prototype, "handleSuccess", null);

__decorate([mobxAction], Attachment.prototype, "handleError", null);

__decorate([autobind, mobxAction], Attachment.prototype, "handleChange", null);

__decorate([mobxAction], Attachment.prototype, "doRemove", null);

__decorate([autobind], Attachment.prototype, "handleHistory", null);

__decorate([autobind], Attachment.prototype, "handleRemove", null);

__decorate([autobind], Attachment.prototype, "handleFetchAttachment", null);

__decorate([autobind], Attachment.prototype, "handlePreview", null);

__decorate([mobxAction], Attachment.prototype, "removeAttachment", null);

__decorate([mobxAction], Attachment.prototype, "beforeUpload", null);

__decorate([autobind], Attachment.prototype, "handleClick", null);

__decorate([mobxAction], Attachment.prototype, "handleSort", null);

__decorate([autobind, mobxAction], Attachment.prototype, "handleOrderChange", null);

__decorate([mobxAction], Attachment.prototype, "changeOrder", null);

__decorate([autobind], Attachment.prototype, "getSortSelectPopupContainer", null);

__decorate([autobind], Attachment.prototype, "renderWrapper", null);

__decorate([autobind], Attachment.prototype, "getTooltipValidationMessage", null);

__decorate([autobind], Attachment.prototype, "handlePopupHiddenChange", null);

__decorate([mobxAction], Attachment.prototype, "setPopup", null);

Attachment = __decorate([observer], Attachment);
export default Attachment;
//# sourceMappingURL=Attachment.js.map