choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
1,410 lines (1,232 loc) • 51.6 kB
JavaScript
"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"