choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
1,462 lines (1,263 loc) • 52 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _tslib = require("tslib");
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
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 _enum = require("../../../lib/_util/enum");
var _Trigger = _interopRequireDefault(require("../../../lib/trigger/Trigger"));
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 _axios = _interopRequireDefault(require("../axios"));
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");
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 = (0, _getPrototypeOf2["default"])(Derived),
result;
if (isNativeReflectConstruct()) {
var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return (0, _possibleConstructorReturn2["default"])(this, result);
};
}
var defaultSort = {
type: 'time',
order: 'asc',
custom: true
};
var Attachment =
/*#__PURE__*/
function (_FormField) {
(0, _inherits2["default"])(Attachment, _FormField);
var _super = _createSuper(Attachment);
function Attachment() {
(0, _classCallCheck2["default"])(this, Attachment);
return _super.apply(this, arguments);
}
(0, _createClass2["default"])(Attachment, [{
key: "processDataSetEventListener",
value: function processDataSetEventListener(on) {
var dataSet = this.dataSet;
if (dataSet) {
dataSet[on ? 'addEventListener' : 'removeEventListener'](_enum4.DataSetEvents.load, this.handleDataSetLoad);
}
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
(0, _get2["default"])((0, _getPrototypeOf2["default"])(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() {
(0, _get2["default"])((0, _getPrototypeOf2["default"])(Attachment.prototype), "componentWillUnmount", this).call(this);
this.processDataSetEventListener(false);
}
}, {
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, _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 _this = 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) {
_this.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', 'bucketName', 'bucketDirectory', 'storageCode', 'count', 'max', 'listLimit', 'showHistory', 'isPublic', '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 = this.getContextConfig('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 = (0, _objectSpread2["default"])({
'X-Requested-With': 'XMLHttpRequest'
}, headers);
var formData = new FormData();
formData.append(fileKey, originFileObj);
if (data) {
(0, _utils.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: (0, _objectSpread2["default"])({}, 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,
isPublic = this.isPublic;
var newConfig = typeof actionHook === 'function' ? actionHook({
attachment: attachment,
bucketName: bucketName,
bucketDirectory: bucketDirectory,
storageCode: storageCode,
attachmentUUID: attachmentUUID,
isPublic: isPublic
}) : actionHook;
var customData = newConfig.data,
customUploadProgress = newConfig.onUploadProgress;
if (customData) {
(0, _utils.appendFormData)(formData, customData);
}
return (0, _objectSpread2["default"])({
withCredentials: withCredentials,
method: 'POST'
}, newConfig, {
headers: (0, _objectSpread2["default"])({}, 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 _this$getContextConfi2 = this.getContextConfig('attachment'),
getAttachmentUUID = _this$getContextConfi2.getAttachmentUUID;
if (!getAttachmentUUID) {
throw new Error('no getAttachmentUUID hook in global configure.');
}
return getAttachmentUUID({
isPublic: this.isPublic
});
}
}, {
key: "uploadAttachments",
value: function () {
var _uploadAttachments = (0, _asyncToGenerator2["default"])(
/*#__PURE__*/
_regenerator["default"].mark(function _callee(attachments) {
var _this3 = this;
var oldAttachmentUUID, attachmentUUID, max, oldAttachments;
return _regenerator["default"].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["default"].error((0, _localeContext.$l)('Attachment', 'file_list_max_length', {
count: max
}));
return _context.abrupt("return");
case 12:
oldAttachments = this.attachments || [];
if (this.multiple) {
this.attachments = [].concat((0, _toConsumableArray2["default"])(oldAttachments.slice()), (0, _toConsumableArray2["default"])(attachments));
} else {
oldAttachments.forEach(function (attachment) {
return _this3.doRemove(attachment);
});
this.attachments = (0, _toConsumableArray2["default"])(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 = (0, _asyncToGenerator2["default"])(
/*#__PURE__*/
_regenerator["default"].mark(function _callee2(attachment, attachmentUUID) {
return _regenerator["default"].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 = (0, _asyncToGenerator2["default"])(
/*#__PURE__*/
_regenerator["default"].mark(function _callee3(attachment, attachmentUUID) {
var result, config;
return _regenerator["default"].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 = (0, _get2["default"])((0, _getPrototypeOf2["default"])(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((0, _mobx.action)(function () {
attachment.status = 'success';
var _this4$getContextConf = _this4.getContextConfig('attachment'),
handleUploadSuccess = _this4$getContextConf.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 _this$getContextConfi3 = this.getContextConfig('attachment'),
handleUploadError = _this$getContextConfi3.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 = (0, _toConsumableArray2["default"])(target.files);
target.value = '';
this.autoCreate();
this.uploadAttachments(files.map(function (file, index) {
return new _AttachmentFile["default"]({
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 _this$getContextConfi4 = this.getContextConfig('attachment'),
onRemove = _this$getContextConfi4.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,
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) {
_this6.removeAttachment(attachment);
}
attachment.status = 'done';
}))["catch"]((0, _mobx.action)(function () {
attachment.status = 'done';
}));
}
}
}, {
key: "handleHistory",
value: function handleHistory(attachment, attachmentUUID) {
var _this$getContextConfi5 = this.getContextConfig('attachment'),
renderHistory = _this$getContextConfi5.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 _this7 = this;
var field = this.field;
if (field) {
field.fetchAttachments(fetchProps, this.record);
} else {
var _this$getContextConfi6 = this.getContextConfig('attachment'),
fetchList = _this$getContextConfi6.fetchList;
if (fetchList) {
fetchList(fetchProps).then(function (results) {
_this7.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: "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 ? this.getContextConfig('attachment').defaultFileSize : _this$props3$fileSize,
accept = _this$props3.accept;
if (accept && !this.isAcceptFile(attachment, accept)) {
attachment.status = 'error';
attachment.invalid = true;
attachment.errorMessage = (0, _localeContext.$l)('Attachment', 'file_type_mismatch', {
types: accept.join(',')
});
return;
}
if (fileSize && fileSize > 0 && attachment.size > fileSize) {
attachment.status = 'error';
attachment.invalid = true;
attachment.errorMessage = (0, _localeContext.$l)('Attachment', 'file_max_size', {
size: (0, _utils.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) {
var prefixCls = this.prefixCls;
return _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: "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$props4 = this.props,
children = _this$props4.children,
viewMode = _this$props4.viewMode,
accept = _this$props4.accept;
var buttonProps = this.getOtherProps();
var ref = buttonProps.ref,
style = buttonProps.style,
name = buttonProps.name,
fileKey = buttonProps.fileKey,
onChange = buttonProps.onChange,
rest = (0, _objectWithoutProperties2["default"])(buttonProps, ["ref", "style", "name", "fileKey", "onChange"]);
var max = this.getProp('max');
var uploadProps = {
multiple: multiple,
accept: accept ? accept.join(',') : undefined,
name: name || fileKey || this.getContextConfig('attachment').defaultFileKey,
type: 'file',
ref: ref,
onChange: onChange
};
var width = isCardButton ? this.getPictureWidth() : undefined;
var countText = multiple && (max ? "".concat(count, "/").concat(max) : count) || undefined;
return isCardButton ? _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"])({}, style, {
width: width,
height: width
})
}), _react["default"].createElement("div", null, children || (0, _localeContext.$l)('Attachment', 'upload_picture')), countText ? _react["default"].createElement("div", null, countText) : undefined, _react["default"].createElement("input", (0, _extends2["default"])({
key: "upload"
}, uploadProps, {
hidden: true
}))) : _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.isValid ? _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 && _react["default"].createElement(_react["default"].Fragment, null, "(", label, ")"), " ", countText, _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$props5 = this.props,
children = _this$props5.children,
multiple = _this$props5.multiple,
viewMode = _this$props5.viewMode;
var rest = this.getOtherProps();
return _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 && _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"])({}, defaultSort, {}, this.sort, {
custom: true
});
var attachmentUUID = this.getValue();
if (attachmentUUID) {
var attachments = this.getValidAttachments();
var _this$getContextConfi7 = this.getContextConfig('attachment'),
onOrderChange = _this$getContextConfi7.onOrderChange;
if (onOrderChange && 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 _this8 = this;
var _this$props6 = this.props,
sortable = _this$props6.sortable,
viewMode = _this$props6.viewMode;
if (sortable) {
var prefixCls = this.prefixCls,
attachments = this.attachments;
if (attachments && attachments.length > 1) {
var _ref2 = this.sort || defaultSort,
type = _ref2.type,
order = _ref2.order;
return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_Select["default"], {
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: _enum.Size.small,
border: false
}, _react["default"].createElement(_Select["default"].Option, {
value: "time"
}, (0, _localeContext.$l)('Attachment', 'by_upload_time')), _react["default"].createElement(_Select["default"].Option, {
value: "name"
}, (0, _localeContext.$l)('Attachment', 'by_name'))), _react["default"].createElement(_Button["default"], {
funcType: _enum3.FuncType.link,
className: (0, _classnames["default"])("".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$props7 = this.props,
listType = _this$props7.listType,
sortable = _this$props7.sortable,
listLimit = _this$props7.listLimit,
showHistory = _this$props7.showHistory,
previewTarget = _this$props7.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 _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,
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$props8 = this.props,
downloadAll = _this$props8.downloadAll,
viewMode = _this$props8.viewMode,
__inGroup = _this$props8.__inGroup;
var label = (!__inGroup || count) && this.renderHeaderLabel();
var buttons = [];
if (uploadBtn) {
buttons.push(uploadBtn);
}
if (this.readOnly) {
if (this.count) {
if (downloadAll) {
var _this$getContextConfi8 = this.getContextConfig('attachment'),
getDownloadAllUrl = _this$getContextConfi8.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(_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(_react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, viewProps)));
}
}
var hasButton = buttons.length;
var sorter = this.renderSorter();
var divider = !__inGroup && label && hasButton ? _react["default"].createElement("span", {
key: "divider",
className: "".concat(prefixCls, "-header-divider")
}) : undefined;
if (label || divider || hasButton || sorter) {
return _react["default"].createElement("div", {
className: "".concat(prefixCls, "-header")
}, label, divider, _react["default"].createElement("div", {
className: "".concat(prefixCls, "-header-buttons")
}, buttons), sorter);
}
}
}, {
key: "renderWrapper",
value: function renderWrapper() {
var prefixCls = this.prefixCls;
return _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 _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 _react["default"].createElement("div", {
className: "".concat(this.prefixCls, "-empty")
}, this.getContextConfig('renderEmpty')('Attachment'));
}
}
}, {
key: "getWrapperClassNames",
value: function getWrapperClassNames() {
var _classNames2;
var prefixCls = this.prefixCls,
_this$props9 = this.props,
className = _this$props9.className,
size = _this$props9.size;
return (0, _classnames["default"])("".concat(prefixCls, "-wrapper"), className, (_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-sm"), size === _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$props10 = this.props,
viewMode = _this$props10.viewMode,
listType = _this$props10.listType,
__inGroup = _this$props10.__inGroup;
var isCard = listType === 'picture-card';
var classes = ["".concat(prefixCls, "-list-wrapper")];
if (viewMode !== 'popup') {
var wrapperClassName = this.getWrapperClassNames();
if (wrapperClassName) {
classes.push(wrapperClassName);
}
}
return _react["default"].createElement("div", {
className: classes.join(' ')
}, 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$props11 = this.props,
pictureWidth = _this$props11.pictureWidth,
listType = _this$props11.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 _react["default"].createElement(_tooltip["default"], {
title: help,
openClassName: "".concat(this.getContextConfig('proPrefixCls'), "-tooltip-popup-help"),
placement: "bottom"
}, _react["default"].createElement(_icon["default"], {
type: "help",
style: {
fontSize: '14px',
color: '#8c8c8c'
}
}));
default:
return _react["default"].createElement("div", {
key: "help",
className: "".concat(this.getContextProPrefixCls(_utils2.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$props12 = this.props,
viewMode = _this$props12.viewMode,
listType = _this$props12.listType,
hidden = _this$props12.hidden;
var readOnly = this.readOnly,
prefixCls = this.prefixCls;
if (viewMode === 'popup') {
var label = this.hasFloatLabel && this.getLabel();
return _react["default"].createElement(_react["default"].Fragment, null, _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
}, 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'));
}
}, {
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: "isPublic",
get: function get() {
return this.getProp('isPublic');
}
}, {
key: "attachments",
get: function get() {
var field = this.field;
if (field) {
return field.getAttachments(this.record);
}
return this.observableProps.attachments;
},
set: function set(attachments) {
var _this9 = this;
(0, _mobx.runInAction)(function () {
var field = _this9.field;
if (field) {
field.setAttachments(attachments, _this9.record, _this9.tempAttachmentUUID);
} 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.getAttachmentCount(this.record);
if (attachmentCount !== undefined) {
return attachmentCount;
}
}
var count = this.observableProps.count;
return count;
}
}, {
key: "axios",
get: function get() {
return this.getContextConfig('axios') || _axios["default"];
}
}, {
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: "showValidation",
get: function get() {
var _this$props13 = this.props,
viewMode = _this$props13.viewMode,
_this$props13$showVal = _this$props13.showValidation,
showValidation = _this$props13$showVal === void 0 ? viewMode === 'popup' ? _enum6.ShowValidation.tooltip : _enum6.ShowValidation.newLine : _this$props13$showVal;
var _this$context$showVal = this.context.showValidation,
ctxShowValidation = _this$context$showVal === void 0 ? showValidation : _this$context$showVal;
return ctxShowValidation;
}
}]);
return Attachment;
}(_FormField2.FormField);
Attachment.displayName = 'Attachment';
Attachment.defaultProps = (0, _objectSpread2["default"])({}, _FormField2.FormField.defaultProps, {
suffixCls: 'attachment',
multiple: true,
sortable: true,
downloadAll: true,
listType: 'text',
viewMode: 'list'
});
Attachment.propTypes = (0, _objectSpread2["default"])({}, _FormField2.FormField.propTypes, {
sortable: _propTypes["default"].bool,
listType: _propTypes["default"].oneOf(['text', 'picture', 'picture-card']),
viewMode: _propTypes["default"].oneOf(['none', 'list', 'popup'])
}); // 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)([_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)([_mo