choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
1,406 lines (1,244 loc) • 47.6 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
var _excluded = ["ref", "style", "name", "onChange"];
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { __decorate } from "tslib";
import React from 'react';
import { action as mobxAction, observable, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import classNames from 'classnames';
import omit from 'lodash/omit';
import isNil from 'lodash/isNil';
import isString from 'lodash/isString';
import isFunction from 'lodash/isFunction';
import { Uploader } from 'choerodon-ui/dataset';
import { Size } from '../../../es/_util/enum';
import Trigger from '../../../es/trigger/Trigger';
import RcUpload from '../../../es/rc-components/upload';
import { Action } from '../../../es/trigger/enum';
import Button from '../button/Button';
import { $l } from '../locale-context';
import { ButtonColor, FuncType } from '../button/enum';
import AttachmentList from './AttachmentList';
import AttachmentGroup from './AttachmentGroup';
import { FormField } from '../field/FormField';
import autobind from '../_util/autobind';
import Modal from '../modal';
import AttachmentFile from '../data-set/AttachmentFile';
import { sortAttachments } from './utils';
import ObserverSelect from '../select/Select';
import BUILT_IN_PLACEMENTS from '../trigger-field/placements';
import attachmentStore from '../stores/AttachmentStore';
import { FieldType } from '../data-set/enum';
import { open } from '../modal-container/ModalContainer';
import Icon from '../icon';
import Tooltip from '../tooltip';
import { ShowHelp } from '../field/enum';
import { FIELD_SUFFIX } from '../form/utils';
import { showValidationMessage } from '../field/utils';
import { ShowValidation } from '../form/enum';
import { getIf } from '../data-set/utils';
var defaultSort = {
type: 'time',
order: 'asc',
custom: true
};
var Attachment = /*#__PURE__*/function (_FormField) {
_inherits(Attachment, _FormField);
var _super = _createSuper(Attachment);
function Attachment() {
var _this;
_classCallCheck(this, Attachment);
_this = _super.apply(this, arguments);
_this.handleDragUpload = function (file) {
_this.getAttachmentUUID().then(function (uuid) {
_this.uploadAttachments(_this.processFiles([file], uuid));
});
return false;
};
return _this;
}
_createClass(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;
runInAction(function () {
var field = _this2.field;
if (field) {
field.setAttachments(attachments, _this2.record, _this2.tempAttachmentUUID);
} else {
_this2.observableProps.attachments = attachments;
}
if (attachments) {
var onAttachmentsChange = _this2.props.onAttachmentsChange;
if (onAttachmentsChange) {
onAttachmentsChange(attachments);
}
}
});
}
}, {
key: "count",
get: function get() {
var attachments = this.attachments,
field = this.field;
if (attachments) {
return attachments.length;
}
if (field) {
var attachmentCount = field.getAttachmentCount(this.record);
if (attachmentCount !== undefined) {
return attachmentCount;
}
}
var count = this.observableProps.count;
return count;
}
}, {
key: "defaultValidationMessages",
get: function get() {
var label = this.getProp('label');
return {
valueMissing: $l('Attachment', label ? 'value_missing' : 'value_missing_no_label', {
label: label
})
};
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
var _this3 = this;
_get(_getPrototypeOf(Attachment.prototype), "componentDidMount", this).call(this);
this.fetchCount();
this.reaction = reaction(function () {
return _this3.record;
}, function () {
return _this3.fetchCount();
});
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var _this$props = this.props,
value = _this$props.value,
viewMode = _this$props.viewMode;
if (prevProps.value !== value || prevProps.viewMode !== viewMode) {
this.fetchCount();
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
_get(_getPrototypeOf(Attachment.prototype), "componentWillUnmount", this).call(this);
var reaction = this.reaction;
if (reaction) {
reaction();
delete this.reaction;
}
}
}, {
key: "getFieldType",
value: function getFieldType() {
return FieldType.attachment;
}
}, {
key: "getObservableProps",
value: function getObservableProps(props, context) {
var count = props.count,
attachments = props.attachments;
var _this$observableProps = this.observableProps,
observableProps = _this$observableProps === void 0 ? {
count: count,
attachments: attachments
} : _this$observableProps;
return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(Attachment.prototype), "getObservableProps", this).call(this, props, context)), {}, {
count: count === undefined ? observableProps.count : count,
attachments: attachments ? attachments.map(function (attachment) {
if (attachment instanceof AttachmentFile) {
return attachment;
}
return new AttachmentFile(attachment);
}) : observableProps.attachments
});
}
}, {
key: "getValidAttachments",
value: function getValidAttachments() {
var attachments = this.attachments;
if (attachments) {
return attachments.filter(function (_ref) {
var status = _ref.status;
return !status || ['success', 'done'].includes(status);
});
}
}
}, {
key: "getValidatorProp",
value: function getValidatorProp(key) {
if (key === 'attachmentCount') {
var attachments = this.getValidAttachments();
var count = attachments ? attachments.length : this.count;
return count || 0;
}
return _get(_getPrototypeOf(Attachment.prototype), "getValidatorProp", this).call(this, key);
}
}, {
key: "fetchCount",
value: function fetchCount() {
var _this4 = this;
var field = this.field;
var viewMode = this.props.viewMode;
if (viewMode !== 'list' && isNil(this.count)) {
var value = this.getValue();
if (value) {
var isPublic = this.isPublic;
if (field) {
field.fetchAttachmentCount(value, isPublic, this.record);
} else {
var _this$getContextConfi = this.getContextConfig('attachment'),
batchFetchCount = _this$getContextConfi.batchFetchCount;
if (batchFetchCount && !this.attachments) {
attachmentStore.fetchCountInBatch(value, undefined, isPublic).then(mobxAction(function (count) {
_this4.observableProps.count = count || 0;
}));
}
}
}
}
}
}, {
key: "handleDataSetLoad",
value: function handleDataSetLoad() {
this.fetchCount();
}
}, {
key: "getOmitPropsKeys",
value: function getOmitPropsKeys() {
return _get(_getPrototypeOf(Attachment.prototype), "getOmitPropsKeys", this).call(this).concat(['value', 'accept', 'action', 'data', 'headers', '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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var _this5 = this;
var oldAttachmentUUID, attachmentUUID;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
this.autoCreate();
oldAttachmentUUID = this.tempAttachmentUUID || this.getValue();
_context.t0 = oldAttachmentUUID;
if (_context.t0) {
_context.next = 7;
break;
}
_context.next = 6;
return this.fetchAttachmentUUID();
case 6:
_context.t0 = _context.sent;
case 7:
attachmentUUID = _context.t0;
if (attachmentUUID !== oldAttachmentUUID) {
runInAction(function () {
_this5.tempAttachmentUUID = attachmentUUID;
});
}
return _context.abrupt("return", attachmentUUID);
case 10:
case "end":
return _context.stop();
}
}
}, _callee, this);
}));
function getAttachmentUUID() {
return _getAttachmentUUID.apply(this, arguments);
}
return getAttachmentUUID;
}()
}, {
key: "fetchAttachmentUUID",
value: function fetchAttachmentUUID() {
var _this$props$getUUID = this.props.getUUID,
getUUID = _this$props$getUUID === void 0 ? this.getContextConfig('attachment').getAttachmentUUID : _this$props$getUUID;
if (!getUUID) {
throw new Error('no getAttachmentUUID hook in global configure.');
}
return getUUID({
isPublic: this.isPublic
});
}
}, {
key: "uploadAttachments",
value: function () {
var _uploadAttachments = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(attachments) {
var _this6 = this;
var max, oldAttachments;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
max = this.getProp('max');
if (!(max > 0 && (this.count || 0) + attachments.length > max)) {
_context2.next = 4;
break;
}
Modal.error($l('Attachment', 'file_list_max_length', {
count: max
}));
return _context2.abrupt("return");
case 4:
oldAttachments = this.attachments || [];
if (this.multiple) {
this.attachments = [].concat(_toConsumableArray(oldAttachments.slice()), _toConsumableArray(attachments));
} else {
oldAttachments.forEach(function (attachment) {
return _this6.doRemove(attachment);
});
this.attachments = _toConsumableArray(attachments);
}
_context2.prev = 6;
_context2.next = 9;
return Promise.all(attachments.map(function (attachment) {
return _this6.upload(attachment);
}));
case 9:
_context2.prev = 9;
this.changeOrder();
return _context2.finish(9);
case 12:
case "end":
return _context2.stop();
}
}
}, _callee2, this, [[6,, 9, 12]]);
}));
function uploadAttachments(_x) {
return _uploadAttachments.apply(this, arguments);
}
return uploadAttachments;
}()
}, {
key: "uploadAttachment",
value: function () {
var _uploadAttachment = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(attachment) {
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
_context3.next = 2;
return this.upload(attachment);
case 2:
if (attachment.status === 'success') {
this.changeOrder();
}
case 3:
case "end":
return _context3.stop();
}
}
}, _callee3, this);
}));
function uploadAttachment(_x2) {
return _uploadAttachment.apply(this, arguments);
}
return uploadAttachment;
}()
}, {
key: "getUploaderProps",
value: function getUploaderProps() {
var bucketName = this.bucketName,
bucketDirectory = this.bucketDirectory,
storageCode = this.storageCode,
isPublic = this.isPublic,
fileKey = this.fileKey;
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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(attachment) {
var _this7 = this;
var uploader, result;
return _regeneratorRuntime.wrap(function _callee4$(_context4) {
while (1) {
switch (_context4.prev = _context4.next) {
case 0:
_context4.prev = 0;
uploader = getIf(this, 'uploader', function () {
return new Uploader({}, {
getConfig: _this7.getContextConfig
});
});
uploader.setProps(this.getUploaderProps());
_context4.next = 5;
return uploader.upload(attachment, this.attachments || [attachment], this.tempAttachmentUUID);
case 5:
result = _context4.sent;
if (result === false) {
this.removeAttachment(attachment);
} else {
runInAction(function () {
var tempAttachmentUUID = _this7.tempAttachmentUUID;
if (attachment.status === 'success' && tempAttachmentUUID) {
_this7.tempAttachmentUUID = undefined;
_this7.setValue(tempAttachmentUUID);
} else {
_this7.checkValidity();
}
});
}
_context4.next = 13;
break;
case 9:
_context4.prev = 9;
_context4.t0 = _context4["catch"](0);
this.removeAttachment(attachment);
throw _context4.t0;
case 13:
case "end":
return _context4.stop();
}
}
}, _callee4, this, [[0, 9]]);
}));
function upload(_x3) {
return _upload.apply(this, arguments);
}
return upload;
}()
}, {
key: "getOtherProps",
value: function getOtherProps() {
var otherProps = _get(_getPrototypeOf(Attachment.prototype), "getOtherProps", this).call(this);
otherProps.onClick = this.handleClick;
return otherProps;
}
}, {
key: "processFiles",
value: function processFiles(files, attachmentUUID) {
var _this8 = this;
return files.map(function (file, index) {
return new AttachmentFile({
uid: _this8.getUid(index),
url: URL.createObjectURL(file),
name: file.name,
size: file.size,
type: file.type,
lastModified: file.lastModified,
originFileObj: file,
creationDate: new Date(),
attachmentUUID: attachmentUUID
});
});
}
}, {
key: "handleChange",
value: function handleChange(e) {
var _this9 = this;
var target = e.target;
if (target.value) {
var files = _toConsumableArray(target.files);
target.value = '';
this.getAttachmentUUID().then(function (uuid) {
_this9.uploadAttachments(_this9.processFiles(files, uuid));
});
}
}
}, {
key: "doRemove",
value: function doRemove(attachment) {
var _this10 = this;
var _this$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(mobxAction(function (result) {
if (result !== false) {
_this10.removeAttachment(attachment);
}
attachment.status = 'done';
}))["catch"](mobxAction(function () {
attachment.status = 'done';
}));
}
}
}
}, {
key: "handleHistory",
value: function handleHistory(attachment, attachmentUUID) {
var _this$getContextConfi3 = this.getContextConfig('attachment'),
renderHistory = _this$getContextConfi3.renderHistory;
if (renderHistory) {
var bucketName = this.bucketName,
bucketDirectory = this.bucketDirectory,
storageCode = this.storageCode;
open({
title: $l('Attachment', 'operation_records'),
children: renderHistory({
attachment: attachment,
attachmentUUID: attachmentUUID,
bucketName: bucketName,
bucketDirectory: bucketDirectory,
storageCode: storageCode
}),
cancelButton: false,
okText: $l('Modal', 'close'),
drawer: true
});
}
}
}, {
key: "handleRemove",
value: function handleRemove(attachment) {
return this.doRemove(attachment);
}
}, {
key: "handleFetchAttachment",
value: function handleFetchAttachment(fetchProps) {
var _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(file);
});
});
}
}
}
}, {
key: "handlePreview",
value: function handlePreview() {
this.setPopup(false);
}
}, {
key: "removeAttachment",
value: function removeAttachment(attachment) {
var attachments = this.attachments;
if (attachments) {
var index = attachments.indexOf(attachment);
if (index !== -1) {
attachments.splice(index, 1);
this.attachments = attachments;
this.checkValidity();
}
}
return undefined;
}
}, {
key: "handleClick",
value: function handleClick(e) {
var element = this.element;
if (element) {
element.click();
}
var onClick = this.props.onClick;
if (onClick) {
onClick(e);
}
}
}, {
key: "getUid",
value: function getUid(index) {
var prefixCls = this.prefixCls;
return "".concat(prefixCls, "-").concat(Date.now(), "-").concat(index);
}
}, {
key: "renderHeaderLabel",
value: function renderHeaderLabel() {
var viewMode = this.props.viewMode;
if (this.hasFloatLabel || viewMode === 'popup') {
var label = this.getLabel();
if (label) {
var prefixCls = this.prefixCls;
return /*#__PURE__*/React.createElement("span", {
className: classNames("".concat(prefixCls, "-header-label"), _defineProperty({}, "".concat(prefixCls, "-required"), this.getProp('required')))
}, label);
}
}
}
}, {
key: "isDisabled",
value: function isDisabled() {
if (_get(_getPrototypeOf(Attachment.prototype), "isDisabled", this).call(this)) {
return true;
}
var max = this.getProp('max');
if (max) {
var _this$count = this.count,
count = _this$count === void 0 ? 0 : _this$count;
return count >= max;
}
return false;
}
}, {
key: "isValid",
value: function isValid() {
var attachments = this.attachments;
if (attachments && attachments.some(function (_ref2) {
var status = _ref2.status,
invalid = _ref2.invalid;
return invalid || status === 'error';
})) {
return false;
}
return _get(_getPrototypeOf(Attachment.prototype), "isValid", this).call(this);
}
}, {
key: "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 = _objectWithoutProperties(buttonProps, _excluded);
var max = this.getProp('max');
var uploadProps = {
multiple: multiple,
accept: accept ? accept.join(',') : undefined,
name: name || this.fileKey,
type: 'file',
ref: ref,
onChange: onChange
};
var width = isCardButton ? this.getPictureWidth() : undefined;
var countText = multiple && (max ? "".concat(count, "/").concat(max) : count) || undefined;
return isCardButton ? /*#__PURE__*/React.createElement(Button, _extends({
funcType: FuncType.link,
key: "upload-btn",
icon: "add"
}, rest, {
className: classNames("".concat(prefixCls, "-card-button"), this.getClassName()),
style: _objectSpread(_objectSpread({}, style), {}, {
width: width,
height: width
})
}), /*#__PURE__*/React.createElement("div", null, children || $l('Attachment', 'upload_picture')), countText ? /*#__PURE__*/React.createElement("div", null, countText) : undefined, /*#__PURE__*/React.createElement("input", _extends({
key: "upload"
}, uploadProps, {
hidden: true
}))) : /*#__PURE__*/React.createElement(Button, _extends({
funcType: viewMode === 'popup' ? FuncType.flat : FuncType.link,
key: "upload-btn",
icon: "file_upload",
color: this.valid ? ButtonColor.primary : ButtonColor.red
}, rest, {
className: viewMode === 'popup' ? this.getMergedClassNames() : this.getClassName(),
onMouseEnter: this.handleMouseEnter,
onMouseLeave: this.handleMouseLeave
}), children || $l('Attachment', 'upload_attachment'), label && /*#__PURE__*/React.createElement(React.Fragment, null, "(", label, ")"), " ", countText, /*#__PURE__*/React.createElement("input", _extends({
key: "upload"
}, uploadProps, {
hidden: true
})));
}
}, {
key: "showTooltip",
value: function showTooltip(e) {
if (this.showValidation === ShowValidation.tooltip) {
var message = this.getTooltipValidationMessage();
if (message) {
showValidationMessage(e, message, this.context.getTooltipTheme('validation'), this.context.getTooltipPlacement('validation'));
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.createElement(Button, _extends({
funcType: viewMode === 'popup' ? FuncType.flat : FuncType.link,
key: "view-btn",
icon: "attach_file",
color: ButtonColor.primary
}, omit(rest, ['ref']), {
className: this.getMergedClassNames()
}), children || $l('Attachment', 'view_attachment'), label && /*#__PURE__*/React.createElement(React.Fragment, null, "(", label, ")"), " ", multiple && this.count || undefined);
}
}, {
key: "handleSort",
value: function handleSort(sort) {
this.sort = sort;
}
}, {
key: "handleOrderChange",
value: function handleOrderChange(props) {
var attachments = props.attachments;
this.attachments = attachments;
this.changeOrder();
}
}, {
key: "changeOrder",
value: function changeOrder() {
this.sort = _objectSpread(_objectSpread(_objectSpread({}, defaultSort), this.sort), {}, {
custom: true
});
var sortable = this.props.sortable;
if (sortable) {
var _this$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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ObserverSelect, {
value: type,
onChange: function onChange(newType) {
return _this12.handleSort({
type: newType,
order: order,
custom: false
});
},
clearButton: false,
isFlat: true,
popupPlacement: "bottomRight",
getPopupContainer: viewMode === 'popup' ? this.getSortSelectPopupContainer : undefined,
size: Size.small,
border: false
}, /*#__PURE__*/React.createElement(ObserverSelect.Option, {
value: "time"
}, $l('Attachment', 'by_upload_time')), /*#__PURE__*/React.createElement(ObserverSelect.Option, {
value: "name"
}, $l('Attachment', 'by_name'))), /*#__PURE__*/React.createElement(Button, {
funcType: FuncType.link,
className: classNames("".concat(prefixCls, "-order-icon"), order),
onClick: function onClick() {
return _this12.handleSort({
type: type,
order: order === 'asc' ? 'desc' : 'asc',
custom: false
});
}
}));
}
}
}
}, {
key: "renderUploadList",
value: function renderUploadList(uploadButton) {
var _this$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.createElement(AttachmentList, {
prefixCls: "".concat(this.prefixCls, "-list"),
pictureWidth: width,
listType: listType,
attachments: sortAttachments(attachments, this.sort || defaultSort),
bucketName: bucketName,
bucketDirectory: bucketDirectory,
storageCode: storageCode,
attachmentUUID: attachmentUUID,
uploadButton: uploadButton,
sortable: sortable,
showSize: showSize,
readOnly: readOnly,
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: FuncType.link,
href: isString(downloadAllUrl) ? downloadAllUrl : undefined,
onClick: isFunction(downloadAllUrl) ? downloadAllUrl : undefined,
target: '_blank',
color: ButtonColor.primary,
children: $l('Attachment', 'download_all')
};
buttons.push( /*#__PURE__*/React.createElement(Button, _extends({}, downProps, downloadAll)));
}
}
}
}
} else if (viewMode !== 'popup' && !__inGroup) {
var viewProps = {
key: 'view',
funcType: FuncType.link,
disabled: true,
children: $l('Attachment', 'no_attachments')
};
buttons.push( /*#__PURE__*/React.createElement(Button, _extends({}, viewProps)));
}
}
var hasButton = buttons.length;
var sorter = this.renderSorter();
var divider = !__inGroup && label && hasButton ? /*#__PURE__*/React.createElement("span", {
key: "divider",
className: "".concat(prefixCls, "-header-divider")
}) : undefined;
if (label || divider || hasButton || sorter) {
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-header")
}, label, divider, /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-header-buttons")
}, buttons), sorter);
}
}
}, {
key: "renderWrapper",
value: function renderWrapper() {
var prefixCls = this.prefixCls;
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-popup-inner"),
ref: this.wrapperReference
}, this.renderWrapperList());
}
}, {
key: "getTooltipValidationMessage",
value: function getTooltipValidationMessage() {
var validationMessage = this.renderValidationResult();
if (!this.isValidationMessageHidden(validationMessage)) {
return validationMessage;
}
}
}, {
key: "renderValidationResult",
value: function renderValidationResult(validationResult) {
var message = _get(_getPrototypeOf(Attachment.prototype), "renderValidationResult", this).call(this, validationResult);
if (message) {
return /*#__PURE__*/React.createElement("div", {
className: "".concat(this.prefixCls, "-validation-message")
}, message);
}
}
}, {
key: "renderEmpty",
value: function renderEmpty() {
var viewMode = this.props.viewMode;
if (viewMode === 'popup' && !this.count) {
return /*#__PURE__*/React.createElement("div", {
className: "".concat(this.prefixCls, "-empty")
}, this.getContextConfig('renderEmpty')('Attachment'));
}
}
}, {
key: "getWrapperClassNames",
value: function getWrapperClassNames() {
var _classNames2;
var prefixCls = this.prefixCls,
_this$props8 = this.props,
className = _this$props8.className,
size = _this$props8.size;
return classNames("".concat(prefixCls, "-wrapper"), className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-sm"), size === Size.small), _defineProperty(_classNames2, "".concat(prefixCls, "-lg"), size === Size.large), _classNames2));
}
}, {
key: "renderWrapperList",
value: function renderWrapperList(uploadBtn) {
var prefixCls = this.prefixCls,
_this$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.createElement("div", {
className: classes.join(' ')
}, this.renderDragUploadArea(), this.renderHeader(!isCard && uploadBtn), !__inGroup && viewMode !== 'popup' && this.renderHelp(ShowHelp.newLine), !__inGroup && this.showValidation === 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 === ShowHelp.none) return;
switch (forceHelpMode) {
case ShowHelp.tooltip:
return /*#__PURE__*/React.createElement(Tooltip, {
title: help,
openClassName: "".concat(this.getContextConfig('proPrefixCls'), "-tooltip-popup-help"),
placement: "bottom"
}, /*#__PURE__*/React.createElement(Icon, {
type: "help",
style: {
fontSize: '14px',
color: '#8c8c8c'
}
}));
default:
return /*#__PURE__*/React.createElement("div", {
key: "help",
className: "".concat(this.getContextProPrefixCls(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' ? ShowValidation.tooltip : ShowValidation.newLine : _this$props11$showVal;
var _this$context$showVal = this.context.showValidation,
ctxShowValidation = _this$context$showVal === void 0 ? showValidation : _this$context$showVal;
return ctxShowValidation;
}
}, {
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.createElement("div", {
className: "".concat(prefixCls, "-drag-box")
}, /*#__PURE__*/React.createElement("p", {
className: "".concat(prefixCls, "-drag-box-icon")
}, /*#__PURE__*/React.createElement(Icon, {
type: "inbox"
})), /*#__PURE__*/React.createElement("p", {
className: "".concat(prefixCls, "-drag-box-text")
}, $l('Attachment', 'file_type_mismatch')), /*#__PURE__*/React.createElement("p", {
className: "".concat(prefixCls, "-drag-box-hint")
}, 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 = classNames(prefixCls, (_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefixCls, "-drag"), true), _defineProperty(_classNames3, "".concat(prefixCls, "-drag-hover"), this.dragState === 'dragover'), _classNames3));
var rcUploadProps = _objectSpread(_objectSpread({}, this.props), {}, {
accept: accept ? accept.join(',') : undefined,
beforeUpload: this.handleDragUpload,
prefixCls: prefixCls
});
return /*#__PURE__*/React.createElement("div", {
className: dragCls,
onDrop: this.handleFileDrop,
onDragOver: this.handleFileDrop,
onDragLeave: this.handleFileDrop
}, /*#__PURE__*/React.createElement(RcUpload, _extends({}, rcUploadProps, {
className: "".concat(prefixCls, "-btn")
}), dragBoxRender || this.renderDefaultDragBox()));
}
return undefined;
}
}, {
key: "render",
value: function render() {
var _this$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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Trigger, {
prefixCls: prefixCls,
popupContent: this.renderWrapper,
action: [Action.hover, Action.focus],
builtinPlacements: BUILT_IN_PLACEMENTS,
popupPlacement: "bottomLeft",
popupHidden: hidden || !this.popup,
onPopupHiddenChange: this.handlePopupHiddenChange
}, this.renderDragUploadArea(), readOnly ? this.renderViewButton(label) : this.renderUploadBtn(false, label)), this.renderHelp(ShowHelp.tooltip), this.showValidation === ShowValidation.newLine && this.renderValidationResult());
}
return this.renderWrapperList(readOnly ? undefined : this.renderUploadBtn(listType === 'picture-card'));
}
}]);
return Attachment;
}(FormField);
Attachment.displayName = 'Attachment';
Attachment.defaultProps = _objectSpread(_objectSpread({}, 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;
__decorate([observable], Attachment.prototype, "sort", void 0);
__decorate([observable], Attachment.prototype, "popup", void 0);
__decorate([observable], Attachment.prototype, "dragState", void 0);
__decorate([observable], Attachment.prototype, "tempAttachmentUUID", void 0);
__decorate([autobind], Attachment.prototype, "handleDataSetLoad", null);
__decorate([mobxAction], Attachment.prototype, "uploadAttachments", null);
__decorate([autobind], Attachment.prototype, "uploadAttachment", null);
__decorate([autobind, mobxAction], Attachment.prototype, "handleChange", null);
__decorate([mobxAction], Attachment.prototype, "doRemove", null);
__decorate([autobind], Attachment.prototype, "handleHistory", null);
__decorate([autobind], Attachment.prototype, "handleRemove", null);
__decorate([autobind], Attachment.prototype, "handleFetchAttachment", null);
__decorate([autobind], Attachment.prototype, "handlePreview", null);
__decorate([mobxAction], Attachment.prototype, "removeAttachment", null);
__decorate([autobind], Attachment.prototype, "handleClick", null);
__decorate([mobxAction], Attachment.prototype, "handleSort", null);
__decorate([autobind, mobxAction], Attachment.prototype, "handleOrderChange", null);
__decorate([mobxAction], Attachment.prototype, "changeOrder", null);
__decorate([autobind], Attachment.prototype, "getSortSelectPopupContainer", null);
__decorate([autobind], Attachment.prototype, "renderWrapper", null);
__decorate([autobind], Attachment.prototype, "getTooltipValidationMessage", null);
__decorate([autobind], Attachment.prototype, "handlePopupHiddenChange", null);
__decorate([mobxAction], Attachment.prototype, "setPopup", null);
__decorate([mobxAction], Attachment.prototype, "setDragState", null);
__decorate([autobind], Attachment.prototype, "handleFileDrop", null);
Attachment = __decorate([observer], Attachment);
export default Attachment;
//# sourceMappingURL=Attachment.js.map