UNPKG

choerodon-ui

Version:

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

1,410 lines (1,232 loc) 51.6 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"]; Object.defineProperty(exports, "__esModule", { value: true }); exports["default"] = void 0; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")); var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator")); var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray")); var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator")); var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2")); var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck")); var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass")); var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get")); var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf")); var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits")); var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper")); var _tslib = require("tslib"); var _react = _interopRequireDefault(require("react")); var _mobx = require("mobx"); var _mobxReact = require("mobx-react"); var _classnames = _interopRequireDefault(require("classnames")); var _omit = _interopRequireDefault(require("lodash/omit")); var _isNil = _interopRequireDefault(require("lodash/isNil")); var _isString = _interopRequireDefault(require("lodash/isString")); var _isFunction = _interopRequireDefault(require("lodash/isFunction")); var _dataset = require("choerodon-ui/dataset"); var _enum = require("../../../lib/_util/enum"); var _Trigger = _interopRequireDefault(require("../../../lib/trigger/Trigger")); var _upload2 = _interopRequireDefault(require("../../../lib/rc-components/upload")); var _enum2 = require("../../../lib/trigger/enum"); var _Button = _interopRequireDefault(require("../button/Button")); var _localeContext = require("../locale-context"); var _enum3 = require("../button/enum"); var _AttachmentList = _interopRequireDefault(require("./AttachmentList")); var _AttachmentGroup = _interopRequireDefault(require("./AttachmentGroup")); var _FormField2 = require("../field/FormField"); var _autobind = _interopRequireDefault(require("../_util/autobind")); var _modal = _interopRequireDefault(require("../modal")); var _AttachmentFile = _interopRequireDefault(require("../data-set/AttachmentFile")); var _utils = require("./utils"); var _Select = _interopRequireDefault(require("../select/Select")); var _placements = _interopRequireDefault(require("../trigger-field/placements")); var _AttachmentStore = _interopRequireDefault(require("../stores/AttachmentStore")); var _enum4 = require("../data-set/enum"); var _ModalContainer = require("../modal-container/ModalContainer"); var _icon = _interopRequireDefault(require("../icon")); var _tooltip = _interopRequireDefault(require("../tooltip")); var _enum5 = require("../field/enum"); var _utils2 = require("../form/utils"); var _utils3 = require("../field/utils"); var _enum6 = require("../form/enum"); var _utils4 = require("../data-set/utils"); var _excluded = ["ref", "style", "name", "onChange"]; var defaultSort = { type: 'time', order: 'asc', custom: true }; var Attachment = /*#__PURE__*/function (_FormField) { (0, _inherits2["default"])(Attachment, _FormField); var _super = (0, _createSuper2["default"])(Attachment); function Attachment() { var _this; (0, _classCallCheck2["default"])(this, Attachment); _this = _super.apply(this, arguments); _this.handleDragUpload = function (file) { _this.getAttachmentUUID().then(function (uuid) { _this.uploadAttachments(_this.processFiles([file], uuid)); }); return false; }; return _this; } (0, _createClass2["default"])(Attachment, [{ 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: "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); } return this.observableProps.attachments; }, set: function set(attachments) { var _this2 = this; (0, _mobx.runInAction)(function () { var field = _this2.field; if (field) { field.setAttachments(attachments, _this2.record, _this2.tempAttachmentUUID); } else { _this2.observableProps.attachments = attachments; } if (attachments) { var onAttachmentsChange = _this2.props.onAttachmentsChange; if (onAttachmentsChange) { onAttachmentsChange(attachments); } } }); } }, { key: "count", get: function get() { var attachments = this.attachments, field = this.field; if (attachments) { return attachments.length; } if (field) { var attachmentCount = field.getAttachmentCount(this.record); if (attachmentCount !== undefined) { return attachmentCount; } } var count = this.observableProps.count; return count; } }, { key: "defaultValidationMessages", get: function get() { var label = this.getProp('label'); return { valueMissing: (0, _localeContext.$l)('Attachment', label ? 'value_missing' : 'value_missing_no_label', { label: label }) }; } }, { key: "componentDidMount", value: function componentDidMount() { var _this3 = this; (0, _get2["default"])((0, _getPrototypeOf2["default"])(Attachment.prototype), "componentDidMount", this).call(this); this.fetchCount(); this.reaction = (0, _mobx.reaction)(function () { return _this3.record; }, function () { return _this3.fetchCount(); }); } }, { key: "componentDidUpdate", value: function componentDidUpdate(prevProps) { var _this$props = this.props, value = _this$props.value, viewMode = _this$props.viewMode; if (prevProps.value !== value || prevProps.viewMode !== viewMode) { this.fetchCount(); } } }, { key: "componentWillUnmount", value: function componentWillUnmount() { (0, _get2["default"])((0, _getPrototypeOf2["default"])(Attachment.prototype), "componentWillUnmount", this).call(this); var reaction = this.reaction; if (reaction) { reaction(); delete this.reaction; } } }, { key: "getFieldType", value: function getFieldType() { return _enum4.FieldType.attachment; } }, { key: "getObservableProps", value: function getObservableProps(props, context) { var count = props.count, attachments = props.attachments; var _this$observableProps = this.observableProps, observableProps = _this$observableProps === void 0 ? { count: count, attachments: attachments } : _this$observableProps; return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _get2["default"])((0, _getPrototypeOf2["default"])(Attachment.prototype), "getObservableProps", this).call(this, props, context)), {}, { count: count === undefined ? observableProps.count : count, attachments: attachments ? attachments.map(function (attachment) { if (attachment instanceof _AttachmentFile["default"]) { return attachment; } return new _AttachmentFile["default"](attachment); }) : observableProps.attachments }); } }, { key: "getValidAttachments", value: function getValidAttachments() { var attachments = this.attachments; if (attachments) { return attachments.filter(function (_ref) { var status = _ref.status; return !status || ['success', 'done'].includes(status); }); } } }, { key: "getValidatorProp", value: function getValidatorProp(key) { if (key === 'attachmentCount') { var attachments = this.getValidAttachments(); var count = attachments ? attachments.length : this.count; return count || 0; } return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Attachment.prototype), "getValidatorProp", this).call(this, key); } }, { key: "fetchCount", value: function fetchCount() { var _this4 = this; var field = this.field; var viewMode = this.props.viewMode; if (viewMode !== 'list' && (0, _isNil["default"])(this.count)) { var value = this.getValue(); if (value) { var isPublic = this.isPublic; if (field) { field.fetchAttachmentCount(value, isPublic, this.record); } else { var _this$getContextConfi = this.getContextConfig('attachment'), batchFetchCount = _this$getContextConfi.batchFetchCount; if (batchFetchCount && !this.attachments) { _AttachmentStore["default"].fetchCountInBatch(value, undefined, isPublic).then((0, _mobx.action)(function (count) { _this4.observableProps.count = count || 0; })); } } } } } }, { key: "handleDataSetLoad", value: function handleDataSetLoad() { this.fetchCount(); } }, { key: "getOmitPropsKeys", value: function getOmitPropsKeys() { return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Attachment.prototype), "getOmitPropsKeys", this).call(this).concat(['value', 'accept', 'action', 'data', 'headers', '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']); } }, { key: "isAcceptFile", value: function isAcceptFile(attachment, accept) { var acceptTypes = accept.map(function (type) { return new RegExp(type.replace(/\./g, '\\.').replace(/\*/g, '.*')); }); var name = attachment.name, type = attachment.type; return acceptTypes.some(function (acceptType) { return acceptType.test(name) || acceptType.test(type); }); } }, { key: "getAttachmentUUID", value: function () { var _getAttachmentUUID = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() { var _this5 = this; var oldAttachmentUUID, attachmentUUID; return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { case 0: this.autoCreate(); oldAttachmentUUID = this.tempAttachmentUUID || this.getValue(); _context.t0 = oldAttachmentUUID; if (_context.t0) { _context.next = 7; break; } _context.next = 6; return this.fetchAttachmentUUID(); case 6: _context.t0 = _context.sent; case 7: attachmentUUID = _context.t0; if (attachmentUUID !== oldAttachmentUUID) { (0, _mobx.runInAction)(function () { _this5.tempAttachmentUUID = attachmentUUID; }); } return _context.abrupt("return", attachmentUUID); case 10: case "end": return _context.stop(); } } }, _callee, this); })); function getAttachmentUUID() { return _getAttachmentUUID.apply(this, arguments); } return getAttachmentUUID; }() }, { key: "fetchAttachmentUUID", value: function fetchAttachmentUUID() { var _this$props$getUUID = this.props.getUUID, getUUID = _this$props$getUUID === void 0 ? this.getContextConfig('attachment').getAttachmentUUID : _this$props$getUUID; if (!getUUID) { throw new Error('no getAttachmentUUID hook in global configure.'); } return getUUID({ isPublic: this.isPublic }); } }, { key: "uploadAttachments", value: function () { var _uploadAttachments = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(attachments) { var _this6 = this; var max, oldAttachments; return _regenerator["default"].wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { case 0: max = this.getProp('max'); if (!(max > 0 && (this.count || 0) + attachments.length > max)) { _context2.next = 4; break; } _modal["default"].error((0, _localeContext.$l)('Attachment', 'file_list_max_length', { count: max })); return _context2.abrupt("return"); case 4: oldAttachments = this.attachments || []; if (this.multiple) { this.attachments = [].concat((0, _toConsumableArray2["default"])(oldAttachments.slice()), (0, _toConsumableArray2["default"])(attachments)); } else { oldAttachments.forEach(function (attachment) { return _this6.doRemove(attachment); }); this.attachments = (0, _toConsumableArray2["default"])(attachments); } _context2.prev = 6; _context2.next = 9; return Promise.all(attachments.map(function (attachment) { return _this6.upload(attachment); })); case 9: _context2.prev = 9; this.changeOrder(); return _context2.finish(9); case 12: case "end": return _context2.stop(); } } }, _callee2, this, [[6,, 9, 12]]); })); function uploadAttachments(_x) { return _uploadAttachments.apply(this, arguments); } return uploadAttachments; }() }, { key: "uploadAttachment", value: function () { var _uploadAttachment = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(attachment) { return _regenerator["default"].wrap(function _callee3$(_context3) { while (1) { switch (_context3.prev = _context3.next) { case 0: _context3.next = 2; return this.upload(attachment); case 2: if (attachment.status === 'success') { this.changeOrder(); } case 3: case "end": return _context3.stop(); } } }, _callee3, this); })); function uploadAttachment(_x2) { return _uploadAttachment.apply(this, arguments); } return uploadAttachment; }() }, { key: "getUploaderProps", value: function getUploaderProps() { var bucketName = this.bucketName, bucketDirectory = this.bucketDirectory, storageCode = this.storageCode, isPublic = this.isPublic, fileKey = this.fileKey; 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, accept = _this$props2.accept, action = _this$props2.action, data = _this$props2.data, headers = _this$props2.headers, withCredentials = _this$props2.withCredentials, beforeUpload = _this$props2.beforeUpload, onUploadProgress = _this$props2.onUploadProgress, onUploadSuccess = _this$props2.onUploadSuccess, onUploadError = _this$props2.onUploadError; return { accept: accept, action: action, data: data, headers: headers, fileKey: fileKey, withCredentials: withCredentials, bucketName: bucketName, bucketDirectory: bucketDirectory, storageCode: storageCode, isPublic: isPublic, fileSize: fileSize, chunkSize: chunkSize, chunkThreads: chunkThreads, useChunk: useChunk, beforeUpload: beforeUpload, onUploadProgress: onUploadProgress, onUploadSuccess: onUploadSuccess, onUploadError: onUploadError }; } }, { key: "upload", value: function () { var _upload = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(attachment) { var _this7 = this; var uploader, result; return _regenerator["default"].wrap(function _callee4$(_context4) { while (1) { switch (_context4.prev = _context4.next) { case 0: _context4.prev = 0; uploader = (0, _utils4.getIf)(this, 'uploader', function () { return new _dataset.Uploader({}, { getConfig: _this7.getContextConfig }); }); uploader.setProps(this.getUploaderProps()); _context4.next = 5; return uploader.upload(attachment, this.attachments || [attachment], this.tempAttachmentUUID); case 5: result = _context4.sent; if (result === false) { this.removeAttachment(attachment); } else { (0, _mobx.runInAction)(function () { var tempAttachmentUUID = _this7.tempAttachmentUUID; if (attachment.status === 'success' && tempAttachmentUUID) { _this7.tempAttachmentUUID = undefined; _this7.setValue(tempAttachmentUUID); } else { _this7.checkValidity(); } }); } _context4.next = 13; break; case 9: _context4.prev = 9; _context4.t0 = _context4["catch"](0); this.removeAttachment(attachment); throw _context4.t0; case 13: case "end": return _context4.stop(); } } }, _callee4, this, [[0, 9]]); })); function upload(_x3) { return _upload.apply(this, arguments); } return upload; }() }, { key: "getOtherProps", value: function getOtherProps() { var otherProps = (0, _get2["default"])((0, _getPrototypeOf2["default"])(Attachment.prototype), "getOtherProps", this).call(this); otherProps.onClick = this.handleClick; return otherProps; } }, { key: "processFiles", value: function processFiles(files, attachmentUUID) { var _this8 = this; return files.map(function (file, index) { return new _AttachmentFile["default"]({ uid: _this8.getUid(index), url: URL.createObjectURL(file), name: file.name, size: file.size, type: file.type, lastModified: file.lastModified, originFileObj: file, creationDate: new Date(), attachmentUUID: attachmentUUID }); }); } }, { key: "handleChange", value: function handleChange(e) { var _this9 = this; var target = e.target; if (target.value) { var files = (0, _toConsumableArray2["default"])(target.files); target.value = ''; this.getAttachmentUUID().then(function (uuid) { _this9.uploadAttachments(_this9.processFiles(files, uuid)); }); } } }, { key: "doRemove", value: function doRemove(attachment) { var _this10 = this; var _this$getContextConfi2 = this.getContextConfig('attachment'), onRemove = _this$getContextConfi2.onRemove; if (onRemove) { if (attachment.status === 'error' || attachment.invalid) { return this.removeAttachment(attachment); } var attachmentUUID = this.getValue(); if (attachmentUUID) { var bucketName = this.bucketName, bucketDirectory = this.bucketDirectory, storageCode = this.storageCode, isPublic = this.isPublic; attachment.status = 'deleting'; return onRemove({ attachment: attachment, attachmentUUID: attachmentUUID, bucketName: bucketName, bucketDirectory: bucketDirectory, storageCode: storageCode, isPublic: isPublic }).then((0, _mobx.action)(function (result) { if (result !== false) { _this10.removeAttachment(attachment); } attachment.status = 'done'; }))["catch"]((0, _mobx.action)(function () { attachment.status = 'done'; })); } } } }, { key: "handleHistory", value: function handleHistory(attachment, attachmentUUID) { var _this$getContextConfi3 = this.getContextConfig('attachment'), renderHistory = _this$getContextConfi3.renderHistory; if (renderHistory) { var bucketName = this.bucketName, bucketDirectory = this.bucketDirectory, storageCode = this.storageCode; (0, _ModalContainer.open)({ title: (0, _localeContext.$l)('Attachment', 'operation_records'), children: renderHistory({ attachment: attachment, attachmentUUID: attachmentUUID, bucketName: bucketName, bucketDirectory: bucketDirectory, storageCode: storageCode }), cancelButton: false, okText: (0, _localeContext.$l)('Modal', 'close'), drawer: true }); } } }, { key: "handleRemove", value: function handleRemove(attachment) { return this.doRemove(attachment); } }, { key: "handleFetchAttachment", value: function handleFetchAttachment(fetchProps) { var _this11 = this; var field = this.field; if (field) { field.fetchAttachments(fetchProps, this.record); } else { var _this$getContextConfi4 = this.getContextConfig('attachment'), fetchList = _this$getContextConfi4.fetchList; if (fetchList) { fetchList(fetchProps).then(function (results) { _this11.attachments = results.map(function (file) { return new _AttachmentFile["default"](file); }); }); } } } }, { key: "handlePreview", value: function handlePreview() { this.setPopup(false); } }, { key: "removeAttachment", value: function removeAttachment(attachment) { var attachments = this.attachments; if (attachments) { var index = attachments.indexOf(attachment); if (index !== -1) { attachments.splice(index, 1); this.attachments = attachments; this.checkValidity(); } } return undefined; } }, { key: "handleClick", value: function handleClick(e) { var element = this.element; if (element) { element.click(); } var onClick = this.props.onClick; if (onClick) { onClick(e); } } }, { key: "getUid", value: function getUid(index) { var prefixCls = this.prefixCls; return "".concat(prefixCls, "-").concat(Date.now(), "-").concat(index); } }, { key: "renderHeaderLabel", value: function renderHeaderLabel() { var viewMode = this.props.viewMode; if (this.hasFloatLabel || viewMode === 'popup') { var label = this.getLabel(); if (label) { var prefixCls = this.prefixCls; return /*#__PURE__*/_react["default"].createElement("span", { className: (0, _classnames["default"])("".concat(prefixCls, "-header-label"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-required"), this.getProp('required'))) }, label); } } } }, { key: "isDisabled", value: function isDisabled() { if ((0, _get2["default"])((0, _getPrototypeOf2["default"])(Attachment.prototype), "isDisabled", this).call(this)) { return true; } var max = this.getProp('max'); if (max) { var _this$count = this.count, count = _this$count === void 0 ? 0 : _this$count; return count >= max; } return false; } }, { key: "isValid", value: function isValid() { var attachments = this.attachments; if (attachments && attachments.some(function (_ref2) { var status = _ref2.status, invalid = _ref2.invalid; return invalid || status === 'error'; })) { return false; } return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Attachment.prototype), "isValid", this).call(this); } }, { key: "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, _this$props3 = this.props, children = _this$props3.children, viewMode = _this$props3.viewMode, accept = _this$props3.accept; var buttonProps = this.getOtherProps(); var ref = buttonProps.ref, style = buttonProps.style, name = buttonProps.name, onChange = buttonProps.onChange, rest = (0, _objectWithoutProperties2["default"])(buttonProps, _excluded); var max = this.getProp('max'); var uploadProps = { multiple: multiple, accept: accept ? accept.join(',') : undefined, name: name || this.fileKey, type: 'file', ref: ref, onChange: onChange }; var width = isCardButton ? this.getPictureWidth() : undefined; var countText = multiple && (max ? "".concat(count, "/").concat(max) : count) || undefined; return isCardButton ? /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({ funcType: _enum3.FuncType.link, key: "upload-btn", icon: "add" }, rest, { className: (0, _classnames["default"])("".concat(prefixCls, "-card-button"), this.getClassName()), style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, { width: width, height: width }) }), /*#__PURE__*/_react["default"].createElement("div", null, children || (0, _localeContext.$l)('Attachment', 'upload_picture')), countText ? /*#__PURE__*/_react["default"].createElement("div", null, countText) : undefined, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({ key: "upload" }, uploadProps, { hidden: true }))) : /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({ funcType: viewMode === 'popup' ? _enum3.FuncType.flat : _enum3.FuncType.link, key: "upload-btn", icon: "file_upload", color: this.valid ? _enum3.ButtonColor.primary : _enum3.ButtonColor.red }, rest, { className: viewMode === 'popup' ? this.getMergedClassNames() : this.getClassName(), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }), children || (0, _localeContext.$l)('Attachment', 'upload_attachment'), label && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "(", label, ")"), " ", countText, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({ key: "upload" }, uploadProps, { hidden: true }))); } }, { key: "showTooltip", value: function showTooltip(e) { if (this.showValidation === _enum6.ShowValidation.tooltip) { var message = this.getTooltipValidationMessage(); if (message) { (0, _utils3.showValidationMessage)(e, message, this.context.getTooltipTheme('validation'), this.context.getTooltipPlacement('validation')); return true; } } return false; } }, { key: "renderViewButton", value: function renderViewButton(label) { var _this$props4 = this.props, children = _this$props4.children, multiple = _this$props4.multiple, viewMode = _this$props4.viewMode; var rest = this.getOtherProps(); return /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({ funcType: viewMode === 'popup' ? _enum3.FuncType.flat : _enum3.FuncType.link, key: "view-btn", icon: "attach_file", color: _enum3.ButtonColor.primary }, (0, _omit["default"])(rest, ['ref']), { className: this.getMergedClassNames() }), children || (0, _localeContext.$l)('Attachment', 'view_attachment'), label && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "(", label, ")"), " ", multiple && this.count || undefined); } }, { key: "handleSort", value: function handleSort(sort) { this.sort = sort; } }, { key: "handleOrderChange", value: function handleOrderChange(props) { var attachments = props.attachments; this.attachments = attachments; this.changeOrder(); } }, { key: "changeOrder", value: function changeOrder() { this.sort = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, defaultSort), this.sort), {}, { custom: true }); var sortable = this.props.sortable; if (sortable) { var _this$getContextConfi5 = this.getContextConfig('attachment'), onOrderChange = _this$getContextConfi5.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$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 _ref3 = this.sort || defaultSort, type = _ref3.type, order = _ref3.order; return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Select["default"], { value: type, onChange: function onChange(newType) { return _this12.handleSort({ type: newType, order: order, custom: false }); }, clearButton: false, isFlat: true, popupPlacement: "bottomRight", getPopupContainer: viewMode === 'popup' ? this.getSortSelectPopupContainer : undefined, size: _enum.Size.small, border: false }, /*#__PURE__*/_react["default"].createElement(_Select["default"].Option, { value: "time" }, (0, _localeContext.$l)('Attachment', 'by_upload_time')), /*#__PURE__*/_react["default"].createElement(_Select["default"].Option, { value: "name" }, (0, _localeContext.$l)('Attachment', 'by_name'))), /*#__PURE__*/_react["default"].createElement(_Button["default"], { funcType: _enum3.FuncType.link, className: (0, _classnames["default"])("".concat(prefixCls, "-order-icon"), order), onClick: function onClick() { return _this12.handleSort({ type: type, order: order === 'asc' ? 'desc' : 'asc', custom: false }); } })); } } } }, { key: "renderUploadList", value: function renderUploadList(uploadButton) { var _this$props6 = this.props, listType = _this$props6.listType, sortable = _this$props6.sortable, listLimit = _this$props6.listLimit, showHistory = _this$props6.showHistory, showSize = _this$props6.showSize, previewTarget = _this$props6.previewTarget; var attachments = this.attachments; var attachmentUUID = this.tempAttachmentUUID || this.getValue(); if (attachmentUUID || uploadButton || attachments && attachments.length) { var bucketName = this.bucketName, bucketDirectory = this.bucketDirectory, storageCode = this.storageCode, readOnly = this.readOnly, isPublic = this.isPublic; var width = this.getPictureWidth(); return /*#__PURE__*/_react["default"].createElement(_AttachmentList["default"], { prefixCls: "".concat(this.prefixCls, "-list"), pictureWidth: width, listType: listType, attachments: (0, _utils.sortAttachments)(attachments, this.sort || defaultSort), bucketName: bucketName, bucketDirectory: bucketDirectory, storageCode: storageCode, attachmentUUID: attachmentUUID, uploadButton: uploadButton, sortable: sortable, showSize: showSize, readOnly: readOnly, 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, onPreview: this.handlePreview, record: this.record }); } } }, { key: "renderHeader", value: function renderHeader(uploadBtn) { var prefixCls = this.prefixCls, count = this.count, _this$props7 = this.props, downloadAll = _this$props7.downloadAll, viewMode = _this$props7.viewMode, __inGroup = _this$props7.__inGroup; var label = (!__inGroup || count) && this.renderHeaderLabel(); var buttons = []; if (uploadBtn) { buttons.push(uploadBtn); } if (this.readOnly) { if (this.count) { if (downloadAll) { var _this$getContextConfi6 = this.getContextConfig('attachment'), getDownloadAllUrl = _this$getContextConfi6.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: _enum3.FuncType.link, href: (0, _isString["default"])(downloadAllUrl) ? downloadAllUrl : undefined, onClick: (0, _isFunction["default"])(downloadAllUrl) ? downloadAllUrl : undefined, target: '_blank', color: _enum3.ButtonColor.primary, children: (0, _localeContext.$l)('Attachment', 'download_all') }; buttons.push( /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, downProps, downloadAll))); } } } } } else if (viewMode !== 'popup' && !__inGroup) { var viewProps = { key: 'view', funcType: _enum3.FuncType.link, disabled: true, children: (0, _localeContext.$l)('Attachment', 'no_attachments') }; buttons.push( /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, viewProps))); } } var hasButton = buttons.length; var sorter = this.renderSorter(); var divider = !__inGroup && label && hasButton ? /*#__PURE__*/_react["default"].createElement("span", { key: "divider", className: "".concat(prefixCls, "-header-divider") }) : undefined; if (label || divider || hasButton || sorter) { return /*#__PURE__*/_react["default"].createElement("div", { className: "".concat(prefixCls, "-header") }, label, divider, /*#__PURE__*/_react["default"].createElement("div", { className: "".concat(prefixCls, "-header-buttons") }, buttons), sorter); } } }, { key: "renderWrapper", value: function renderWrapper() { var prefixCls = this.prefixCls; return /*#__PURE__*/_react["default"].createElement("div", { className: "".concat(prefixCls, "-popup-inner"), ref: this.wrapperReference }, this.renderWrapperList()); } }, { key: "getTooltipValidationMessage", value: function getTooltipValidationMessage() { var validationMessage = this.renderValidationResult(); if (!this.isValidationMessageHidden(validationMessage)) { return validationMessage; } } }, { key: "renderValidationResult", value: function renderValidationResult(validationResult) { var message = (0, _get2["default"])((0, _getPrototypeOf2["default"])(Attachment.prototype), "renderValidationResult", this).call(this, validationResult); if (message) { return /*#__PURE__*/_react["default"].createElement("div", { className: "".concat(this.prefixCls, "-validation-message") }, message); } } }, { key: "renderEmpty", value: function renderEmpty() { var viewMode = this.props.viewMode; if (viewMode === 'popup' && !this.count) { return /*#__PURE__*/_react["default"].createElement("div", { className: "".concat(this.prefixCls, "-empty") }, this.getContextConfig('renderEmpty')('Attachment')); } } }, { key: "getWrapperClassNames", value: function getWrapperClassNames() { var _classNames2; var prefixCls = this.prefixCls, _this$props8 = this.props, className = _this$props8.className, size = _this$props8.size; return (0, _classnames["default"])("".concat(prefixCls, "-wrapper"), className, (_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-sm"), size === _enum.Size.small), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-lg"), size === _enum.Size.large), _classNames2)); } }, { key: "renderWrapperList", value: function renderWrapperList(uploadBtn) { var prefixCls = this.prefixCls, _this$props9 = this.props, viewMode = _this$props9.viewMode, listType = _this$props9.listType, __inGroup = _this$props9.__inGroup; var isCard = listType === 'picture-card'; var classes = ["".concat(prefixCls, "-list-wrapper")]; if (viewMode !== 'popup') { var wrapperClassName = this.getWrapperClassNames(); if (wrapperClassName) { classes.push(wrapperClassName); } } return /*#__PURE__*/_react["default"].createElement("div", { className: classes.join(' ') }, this.renderDragUploadArea(), this.renderHeader(!isCard && uploadBtn), !__inGroup && viewMode !== 'popup' && this.renderHelp(_enum5.ShowHelp.newLine), !__inGroup && this.showValidation === _enum6.ShowValidation.newLine && this.renderValidationResult(), !__inGroup && this.renderEmpty(), viewMode !== 'none' && this.renderUploadList(isCard && uploadBtn)); } }, { key: "getPictureWidth", value: function getPictureWidth() { var _this$props10 = this.props, pictureWidth = _this$props10.pictureWidth, listType = _this$props10.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 === _enum5.ShowHelp.none) return; switch (forceHelpMode) { case _enum5.ShowHelp.tooltip: return /*#__PURE__*/_react["default"].createElement(_tooltip["default"], { title: help, openClassName: "".concat(this.getContextConfig('proPrefixCls'), "-tooltip-popup-help"), placement: "bottom" }, /*#__PURE__*/_react["default"].createElement(_icon["default"], { type: "help", style: { fontSize: '14px', color: '#8c8c8c' } })); default: return /*#__PURE__*/_react["default"].createElement("div", { key: "help", className: "".concat(this.getContextProPrefixCls(_utils2.FIELD_SUFFIX), "-help") }, help); } } }, { 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' ? _enum6.ShowValidation.tooltip : _enum6.ShowValidation.newLine : _this$props11$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; return /*#__PURE__*/_react["default"].createElement("div", { className: "".concat(prefixCls, "-drag-box") }, /*#__PURE__*/_react["default"].createElement("p", { className: "".concat(prefixCls, "-drag-box-icon") }, /*#__PURE__*/_react["default"].createElement(_icon["default"], { type: "inbox" })), /*#__PURE__*/_react["default"].createElement("p", { className: "".concat(prefixCls, "-drag-box-text") }, (0, _localeContext.$l)('Attachment', 'file_type_mismatch')), /*#__PURE__*/_react["default"].createElement("p", { className: "".concat(prefixCls, "-drag-box-hint") }, this.getProp('help'))); } }, { key: "renderDragUploadArea", value: function renderDragUploadArea() { var _this$props12 = this.props, dragUpload = _this$props12.dragUpload, dragBoxRender = _this$props12.dragBoxRender, accept = _this$props12.accept; var prefixCls = this.prefixCls; if (dragUpload) { var _classNames3; var dragCls = (0, _classnames["default"])(prefixCls, (_classNames3 = {}, (0, _defineProperty2["default"])(_classNames3, "".concat(prefixCls, "-drag"), true), (0, _defineProperty2["default"])(_classNames3, "".concat(prefixCls, "-drag-hover"), this.dragState === 'dragover'), _classNames3)); var rcUploadProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, this.props), {}, { accept: accept ? accept.join(',') : undefined, beforeUpload: this.handleDragUpload, prefixCls: prefixCls }); return /*#__PURE__*/_react["default"].createElement("div", { className: dragCls, onDrop: this.handleFileDrop, onDragOver: this.handleFileDrop, onDragLeave: this.handleFileDrop }, /*#__PURE__*/_react["default"].createElement(_upload2["default"], (0, _extends2["default"])({}, rcUploadProps, { className: "".concat(prefixCls, "-btn") }), dragBoxRender || this.renderDefaultDragBox())); } return undefined; } }, { key: "render", value: function render() { var _this$props13 = this.props, viewMode = _this$props13.viewMode, listType = _this$props13.listType, hidden = _this$props13.hidden; var readOnly = this.readOnly, prefixCls = this.prefixCls; if (viewMode === 'popup') { var label = this.hasFloatLabel && this.getLabel(); return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Trigger["default"], { prefixCls: prefixCls, popupContent: this.renderWrapper, action: [_enum2.Action.hover, _enum2.Action.focus], builtinPlacements: _placements["default"], popupPlacement: "bottomLeft", popupHidden: hidden || !this.popup, onPopupHiddenChange: this.handlePopupHiddenChange }, this.renderDragUploadArea(), readOnly ? this.renderViewButton(label) : this.renderUploadBtn(false, label)), this.renderHelp(_enum5.ShowHelp.tooltip), this.showValidation === _enum6.ShowValidation.newLine && this.renderValidationResult()); } return this.renderWrapperList(readOnly ? undefined : this.renderUploadBtn(listType === 'picture-card')); } }]); return Attachment; }(_FormField2.FormField); Attachment.displayName = 'Attachment'; Attachment.defaultProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _FormField2.FormField.defaultProps), {}, { suffixCls: 'attachment', multiple: true, sortable: true, showSize: true, downloadAll: true, listType: 'text', viewMode: 'list', dragUpload: false }); // eslint-disable-next-line camelcase Attachment.__IS_IN_CELL_EDITOR = true; // eslint-disable-next-line camelcase Attachment.__PRO_ATTACHMENT = true; Attachment.Group = _AttachmentGroup["default"]; (0, _tslib.__decorate)([_mobx.observable], Attachment.prototype, "sort", void 0); (0, _tslib.__decorate)([_mobx.observable], Attachment.prototype, "popup", void 0); (0, _tslib.__decorate)([_mobx.observable], Attachment.prototype, "dragState", void 0); (0, _tslib.__decorate)([_mobx.observable], Attachment.prototype, "tempAttachmentUUID", void 0); (0, _tslib.__decorate)([_autobind["default"]], Attachment.prototype, "handleDataSetLoad", null); (0, _tslib.__decorate)([_mobx.action], Attachment.prototype, "uploadAttachments", null); (0, _tslib.__decorate)([_autobind["default"]], Attachment.prototype, "uploadAttachment", null); (0, _tslib.__decorate)([_autobind["default"], _mobx.action], Attachment.prototype, "handleChange", null); (0, _tslib.__decorate)([_mobx.action], Attachment.prototype, "doRemove", null); (0, _tslib.__decorate)([_autobind["default"