choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
1,465 lines (1,279 loc) • 48.2 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
function _createSuper(Derived) {
function isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
return true;
} catch (e) {
return false;
}
}
return function () {
var Super = _getPrototypeOf(Derived),
result;
if (isNativeReflectConstruct()) {
var NewTarget = _getPrototypeOf(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return _possibleConstructorReturn(this, result);
};
}
import { __decorate } from "tslib";
import React from 'react';
import PropTypes from 'prop-types';
import { action as mobxAction, observable, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import classNames from 'classnames';
import omit from 'lodash/omit';
import isNil from 'lodash/isNil';
import isString from 'lodash/isString';
import isFunction from 'lodash/isFunction';
import { Size } from '../../../es/_util/enum';
import Trigger from '../../../es/trigger/Trigger';
import { Action } from '../../../es/trigger/enum';
import Button from '../button/Button';
import { $l } from '../locale-context';
import { ButtonColor, FuncType } from '../button/enum';
import AttachmentList from './AttachmentList';
import AttachmentGroup from './AttachmentGroup';
import { FormField } from '../field/FormField';
import axios from '../axios';
import autobind from '../_util/autobind';
import Modal from '../modal';
import AttachmentFile from '../data-set/AttachmentFile';
import { appendFormData, formatFileSize, sortAttachments } from './utils';
import ObserverSelect from '../select/Select';
import BUILT_IN_PLACEMENTS from '../trigger-field/placements';
import attachmentStore from '../stores/AttachmentStore';
import { DataSetEvents, FieldType } from '../data-set/enum';
import { open } from '../modal-container/ModalContainer';
import Icon from '../icon';
import Tooltip from '../tooltip';
import { ShowHelp } from '../field/enum';
import { FIELD_SUFFIX } from '../form/utils';
import { showValidationMessage } from '../field/utils';
import { ShowValidation } from '../form/enum';
var defaultSort = {
type: 'time',
order: 'asc',
custom: true
};
var Attachment =
/*#__PURE__*/
function (_FormField) {
_inherits(Attachment, _FormField);
var _super = _createSuper(Attachment);
function Attachment() {
_classCallCheck(this, Attachment);
return _super.apply(this, arguments);
}
_createClass(Attachment, [{
key: "processDataSetEventListener",
value: function processDataSetEventListener(on) {
var dataSet = this.dataSet;
if (dataSet) {
dataSet[on ? 'addEventListener' : 'removeEventListener'](DataSetEvents.load, this.handleDataSetLoad);
}
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
_get(_getPrototypeOf(Attachment.prototype), "componentDidMount", this).call(this);
this.fetchCount();
this.processDataSetEventListener(true);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var _this$props = this.props,
value = _this$props.value,
viewMode = _this$props.viewMode;
if (prevProps.value !== value || prevProps.viewMode !== viewMode) {
this.fetchCount();
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
_get(_getPrototypeOf(Attachment.prototype), "componentWillUnmount", this).call(this);
this.processDataSetEventListener(false);
}
}, {
key: "getFieldType",
value: function getFieldType() {
return FieldType.attachment;
}
}, {
key: "getObservableProps",
value: function getObservableProps(props, context) {
var count = props.count,
attachments = props.attachments;
var _this$observableProps = this.observableProps,
observableProps = _this$observableProps === void 0 ? {
count: count,
attachments: attachments
} : _this$observableProps;
return _objectSpread({}, _get(_getPrototypeOf(Attachment.prototype), "getObservableProps", this).call(this, props, context), {
count: count === undefined ? observableProps.count : count,
attachments: attachments ? attachments.map(function (attachment) {
if (attachment instanceof AttachmentFile) {
return attachment;
}
return new AttachmentFile(attachment);
}) : observableProps.attachments
});
}
}, {
key: "getValidAttachments",
value: function getValidAttachments() {
var attachments = this.attachments;
if (attachments) {
return attachments.filter(function (_ref) {
var status = _ref.status;
return !status || ['success', 'done'].includes(status);
});
}
}
}, {
key: "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 _this = 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) {
_this.observableProps.count = count || 0;
}));
}
}
}
}
}
}, {
key: "handleDataSetLoad",
value: function handleDataSetLoad() {
this.fetchCount();
}
}, {
key: "getOmitPropsKeys",
value: function getOmitPropsKeys() {
return _get(_getPrototypeOf(Attachment.prototype), "getOmitPropsKeys", this).call(this).concat(['value', 'accept', 'action', 'data', 'headers', 'withCredentials', 'sortable', 'listType', 'viewMode', 'fileKey', 'fileSize', 'bucketName', 'bucketDirectory', 'storageCode', 'count', 'max', 'listLimit', 'showHistory', '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 = _objectSpread({
'X-Requested-With': 'XMLHttpRequest'
}, headers);
var formData = new FormData();
formData.append(fileKey, originFileObj);
if (data) {
appendFormData(formData, data);
}
var _onUploadProgress = function onUploadProgress(e) {
_this2.handleProgress(e.total > 0 ? e.loaded / e.total * 100 : 0, attachment);
};
if (action) {
return {
url: action,
headers: _objectSpread({}, newHeaders),
data: formData,
onUploadProgress: _onUploadProgress,
method: 'POST',
withCredentials: withCredentials
};
}
var actionHook = globalConfig.action;
if (actionHook) {
var bucketName = this.bucketName,
bucketDirectory = this.bucketDirectory,
storageCode = this.storageCode,
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) {
appendFormData(formData, customData);
}
return _objectSpread({
withCredentials: withCredentials,
method: 'POST'
}, newConfig, {
headers: _objectSpread({}, newHeaders, {}, newConfig.headers),
data: formData,
onUploadProgress: function onUploadProgress(e) {
_onUploadProgress(e);
if (customUploadProgress) {
customUploadProgress(e);
}
}
});
}
throw new Error("Please set Upload.action or configure.attachment.action .");
}
}
}, {
key: "isAcceptFile",
value: function isAcceptFile(attachment, accept) {
var acceptTypes = accept.map(function (type) {
return new RegExp(type.replace(/\./g, '\\.').replace(/\*/g, '.*'));
});
var name = attachment.name,
type = attachment.type;
return acceptTypes.some(function (acceptType) {
return acceptType.test(name) || acceptType.test(type);
});
}
}, {
key: "getAttachmentUUID",
value: function getAttachmentUUID() {
var _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 = _asyncToGenerator(
/*#__PURE__*/
_regeneratorRuntime.mark(function _callee(attachments) {
var _this3 = this;
var oldAttachmentUUID, attachmentUUID, max, oldAttachments;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
oldAttachmentUUID = this.getValue();
_context.t0 = oldAttachmentUUID;
if (_context.t0) {
_context.next = 6;
break;
}
_context.next = 5;
return this.getAttachmentUUID();
case 5:
_context.t0 = _context.sent;
case 6:
attachmentUUID = _context.t0;
if (attachmentUUID !== oldAttachmentUUID) {
this.tempAttachmentUUID = attachmentUUID;
}
max = this.getProp('max');
if (!(max > 0 && (this.count || 0) + attachments.length > max)) {
_context.next = 12;
break;
}
Modal.error($l('Attachment', 'file_list_max_length', {
count: max
}));
return _context.abrupt("return");
case 12:
oldAttachments = this.attachments || [];
if (this.multiple) {
this.attachments = [].concat(_toConsumableArray(oldAttachments.slice()), _toConsumableArray(attachments));
} else {
oldAttachments.forEach(function (attachment) {
return _this3.doRemove(attachment);
});
this.attachments = _toConsumableArray(attachments);
}
if (!attachmentUUID) {
_context.next = 22;
break;
}
_context.prev = 15;
_context.next = 18;
return Promise.all(attachments.map(function (attachment) {
return _this3.upload(attachment, attachmentUUID);
}));
case 18:
_context.prev = 18;
this.changeOrder();
if (this.tempAttachmentUUID) {
delete this.tempAttachmentUUID;
this.setValue(attachmentUUID);
}
return _context.finish(18);
case 22:
case "end":
return _context.stop();
}
}
}, _callee, this, [[15,, 18, 22]]);
}));
function uploadAttachments(_x) {
return _uploadAttachments.apply(this, arguments);
}
return uploadAttachments;
}()
}, {
key: "uploadAttachment",
value: function () {
var _uploadAttachment = _asyncToGenerator(
/*#__PURE__*/
_regeneratorRuntime.mark(function _callee2(attachment, attachmentUUID) {
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
_context2.next = 2;
return this.upload(attachment, attachmentUUID);
case 2:
this.changeOrder();
case 3:
case "end":
return _context2.stop();
}
}
}, _callee2, this);
}));
function uploadAttachment(_x2, _x3) {
return _uploadAttachment.apply(this, arguments);
}
return uploadAttachment;
}()
}, {
key: "upload",
value: function () {
var _upload = _asyncToGenerator(
/*#__PURE__*/
_regeneratorRuntime.mark(function _callee3(attachment, attachmentUUID) {
var result, config;
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
_context3.prev = 0;
_context3.next = 3;
return this.beforeUpload(attachment, this.attachments);
case 3:
result = _context3.sent;
if (!(result === false)) {
_context3.next = 8;
break;
}
this.removeAttachment(attachment);
_context3.next = 18;
break;
case 8:
if (!(attachment.status !== 'error' && !attachment.invalid)) {
_context3.next = 18;
break;
}
config = this.getUploadAxiosConfig(attachment, attachmentUUID);
if (!config) {
_context3.next = 18;
break;
}
_context3.t0 = this;
_context3.next = 14;
return this.axios(config);
case 14:
_context3.t1 = _context3.sent;
_context3.t2 = attachment;
_context3.next = 18;
return _context3.t0.handleSuccess.call(_context3.t0, _context3.t1, _context3.t2);
case 18:
_context3.next = 24;
break;
case 20:
_context3.prev = 20;
_context3.t3 = _context3["catch"](0);
this.handleError(_context3.t3, attachment);
throw _context3.t3;
case 24:
case "end":
return _context3.stop();
}
}
}, _callee3, this, [[0, 20]]);
}));
function upload(_x4, _x5) {
return _upload.apply(this, arguments);
}
return upload;
}()
}, {
key: "getOtherProps",
value: function getOtherProps() {
var otherProps = _get(_getPrototypeOf(Attachment.prototype), "getOtherProps", this).call(this);
otherProps.onClick = this.handleClick;
return otherProps;
}
}, {
key: "handleProgress",
value: function handleProgress(percent, attachment) {
attachment.status = 'uploading';
attachment.percent = percent;
var onUploadProgress = this.props.onUploadProgress;
if (onUploadProgress) {
onUploadProgress(percent, attachment);
}
}
}, {
key: "handleSuccess",
value: function handleSuccess(response, attachment) {
var _this4 = this;
attachment.percent = 100;
return new Promise(function (resolve) {
setTimeout(mobxAction(function () {
attachment.status = 'success';
var _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 = _toConsumableArray(target.files);
target.value = '';
this.autoCreate();
this.uploadAttachments(files.map(function (file, index) {
return new AttachmentFile({
uid: _this5.getUid(index),
url: URL.createObjectURL(file),
name: file.name,
size: file.size,
type: file.type,
lastModified: file.lastModified,
originFileObj: file,
creationDate: new Date()
});
}));
}
}
}, {
key: "doRemove",
value: function doRemove(attachment) {
var _this6 = this;
var _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(mobxAction(function (result) {
if (result !== false) {
_this6.removeAttachment(attachment);
}
attachment.status = 'done';
}))["catch"](mobxAction(function () {
attachment.status = 'done';
}));
}
}
}, {
key: "handleHistory",
value: function handleHistory(attachment, attachmentUUID) {
var _this$getContextConfi5 = this.getContextConfig('attachment'),
renderHistory = _this$getContextConfi5.renderHistory;
if (renderHistory) {
var bucketName = this.bucketName,
bucketDirectory = this.bucketDirectory,
storageCode = this.storageCode;
open({
title: $l('Attachment', 'operation_records'),
children: renderHistory({
attachment: attachment,
attachmentUUID: attachmentUUID,
bucketName: bucketName,
bucketDirectory: bucketDirectory,
storageCode: storageCode
}),
cancelButton: false,
okText: $l('Modal', 'close'),
drawer: true
});
}
}
}, {
key: "handleRemove",
value: function handleRemove(attachment) {
return this.doRemove(attachment);
}
}, {
key: "handleFetchAttachment",
value: function handleFetchAttachment(fetchProps) {
var _this7 = this;
var field = this.field;
if (field) {
field.fetchAttachments(fetchProps, 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(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 = $l('Attachment', 'file_type_mismatch', {
types: accept.join(',')
});
return;
}
if (fileSize && fileSize > 0 && attachment.size > fileSize) {
attachment.status = 'error';
attachment.invalid = true;
attachment.errorMessage = $l('Attachment', 'file_max_size', {
size: formatFileSize(fileSize)
});
return;
}
if (!beforeUpload) {
return true;
}
return beforeUpload(attachment, attachments);
}
}, {
key: "handleClick",
value: function handleClick(e) {
var element = this.element;
if (element) {
element.click();
}
var onClick = this.props.onClick;
if (onClick) {
onClick(e);
}
}
}, {
key: "getUid",
value: function getUid(index) {
var prefixCls = this.prefixCls;
return "".concat(prefixCls, "-").concat(Date.now(), "-").concat(index);
}
}, {
key: "renderHeaderLabel",
value: function renderHeaderLabel() {
var viewMode = this.props.viewMode;
if (this.hasFloatLabel || viewMode === 'popup') {
var label = this.getLabel();
if (label) {
var prefixCls = this.prefixCls;
return 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: "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 = _objectWithoutProperties(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.createElement(Button, _extends({
funcType: FuncType.link,
key: "upload-btn",
icon: "add"
}, rest, {
className: classNames("".concat(prefixCls, "-card-button"), this.getClassName()),
style: _objectSpread({}, style, {
width: width,
height: width
})
}), React.createElement("div", null, children || $l('Attachment', 'upload_picture')), countText ? React.createElement("div", null, countText) : undefined, React.createElement("input", _extends({
key: "upload"
}, uploadProps, {
hidden: true
}))) : React.createElement(Button, _extends({
funcType: viewMode === 'popup' ? FuncType.flat : FuncType.link,
key: "upload-btn",
icon: "file_upload",
color: this.isValid ? ButtonColor.primary : ButtonColor.red
}, rest, {
className: viewMode === 'popup' ? this.getMergedClassNames() : this.getClassName(),
onMouseEnter: this.handleMouseEnter,
onMouseLeave: this.handleMouseLeave
}), children || $l('Attachment', 'upload_attachment'), label && React.createElement(React.Fragment, null, "(", label, ")"), " ", countText, 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$props5 = this.props,
children = _this$props5.children,
multiple = _this$props5.multiple,
viewMode = _this$props5.viewMode;
var rest = this.getOtherProps();
return 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 && React.createElement(React.Fragment, null, "(", label, ")"), " ", multiple && this.count || undefined);
}
}, {
key: "handleSort",
value: function handleSort(sort) {
this.sort = sort;
}
}, {
key: "handleOrderChange",
value: function handleOrderChange(props) {
var attachments = props.attachments;
this.attachments = attachments;
this.changeOrder();
}
}, {
key: "changeOrder",
value: function changeOrder() {
this.sort = _objectSpread({}, defaultSort, {}, this.sort, {
custom: true
});
var attachmentUUID = this.getValue();
if (attachmentUUID) {
var attachments = this.getValidAttachments();
var _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.createElement(React.Fragment, null, React.createElement(ObserverSelect, {
value: type,
onChange: function onChange(newType) {
return _this8.handleSort({
type: newType,
order: order,
custom: false
});
},
clearButton: false,
isFlat: true,
popupPlacement: "bottomRight",
getPopupContainer: viewMode === 'popup' ? this.getSortSelectPopupContainer : undefined,
size: Size.small,
border: false
}, React.createElement(ObserverSelect.Option, {
value: "time"
}, $l('Attachment', 'by_upload_time')), React.createElement(ObserverSelect.Option, {
value: "name"
}, $l('Attachment', 'by_name'))), React.createElement(Button, {
funcType: FuncType.link,
className: classNames("".concat(prefixCls, "-order-icon"), order),
onClick: function onClick() {
return _this8.handleSort({
type: type,
order: order === 'asc' ? 'desc' : 'asc',
custom: false
});
}
}));
}
}
}
}, {
key: "renderUploadList",
value: function renderUploadList(uploadButton) {
var _this$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.createElement(AttachmentList, {
prefixCls: "".concat(this.prefixCls, "-list"),
pictureWidth: width,
listType: listType,
attachments: sortAttachments(attachments, this.sort || defaultSort),
bucketName: bucketName,
bucketDirectory: bucketDirectory,
storageCode: storageCode,
attachmentUUID: attachmentUUID,
uploadButton: uploadButton,
sortable: sortable,
readOnly: readOnly,
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: FuncType.link,
href: isString(downloadAllUrl) ? downloadAllUrl : undefined,
onClick: isFunction(downloadAllUrl) ? downloadAllUrl : undefined,
target: '_blank',
color: ButtonColor.primary,
children: $l('Attachment', 'download_all')
};
buttons.push(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(React.createElement(Button, _extends({}, viewProps)));
}
}
var hasButton = buttons.length;
var sorter = this.renderSorter();
var divider = !__inGroup && label && hasButton ? React.createElement("span", {
key: "divider",
className: "".concat(prefixCls, "-header-divider")
}) : undefined;
if (label || divider || hasButton || sorter) {
return React.createElement("div", {
className: "".concat(prefixCls, "-header")
}, label, divider, React.createElement("div", {
className: "".concat(prefixCls, "-header-buttons")
}, buttons), sorter);
}
}
}, {
key: "renderWrapper",
value: function renderWrapper() {
var prefixCls = this.prefixCls;
return React.createElement("div", {
className: "".concat(prefixCls, "-popup-inner"),
ref: this.wrapperReference
}, this.renderWrapperList());
}
}, {
key: "getTooltipValidationMessage",
value: function getTooltipValidationMessage() {
var validationMessage = this.renderValidationResult();
if (!this.isValidationMessageHidden(validationMessage)) {
return validationMessage;
}
}
}, {
key: "renderValidationResult",
value: function renderValidationResult(validationResult) {
var message = _get(_getPrototypeOf(Attachment.prototype), "renderValidationResult", this).call(this, validationResult);
if (message) {
return React.createElement("div", {
className: "".concat(this.prefixCls, "-validation-message")
}, message);
}
}
}, {
key: "renderEmpty",
value: function renderEmpty() {
var viewMode = this.props.viewMode;
if (viewMode === 'popup' && !this.count) {
return React.createElement("div", {
className: "".concat(this.prefixCls, "-empty")
}, 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 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$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.createElement("div", {
className: classes.join(' ')
}, 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$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 === ShowHelp.none) return;
switch (forceHelpMode) {
case ShowHelp.tooltip:
return React.createElement(Tooltip, {
title: help,
openClassName: "".concat(this.getContextConfig('proPrefixCls'), "-tooltip-popup-help"),
placement: "bottom"
}, React.createElement(Icon, {
type: "help",
style: {
fontSize: '14px',
color: '#8c8c8c'
}
}));
default:
return React.createElement("div", {
key: "help",
className: "".concat(this.getContextProPrefixCls(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.createElement(React.Fragment, null, 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
}, readOnly ? this.renderViewButton(label) : this.renderUploadBtn(false, label)), this.renderHelp(ShowHelp.tooltip), this.showValidation === ShowValidation.newLine && this.renderValidationResult());
}
return this.renderWrapperList(readOnly ? undefined : this.renderUploadBtn(listType === 'picture-card'));
}
}, {
key: "help",
get: function get() {
return this.getProp('help');
}
}, {
key: "bucketName",
get: function get() {
return this.getProp('bucketName');
}
}, {
key: "bucketDirectory",
get: function get() {
return this.getProp('bucketDirectory');
}
}, {
key: "storageCode",
get: function get() {
return this.getProp('storageCode');
}
}, {
key: "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;
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;
}
}, {
key: "defaultValidationMessages",
get: function get() {
var label = this.getProp('label');
return {
valueMissing: $l('Attachment', label ? 'value_missing' : 'value_missing_no_label', {
label: label
})
};
}
}, {
key: "showValidation",
get: function get() {
var _this$props13 = this.props,
viewMode = _this$props13.viewMode,
_this$props13$showVal = _this$props13.showValidation,
showValidation = _this$props13$showVal === void 0 ? viewMode === 'popup' ? ShowValidation.tooltip : 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;
}(FormField);
Attachment.displayName = 'Attachment';
Attachment.defaultProps = _objectSpread({}, FormField.defaultProps, {
suffixCls: 'attachment',
multiple: true,
sortable: true,
downloadAll: true,
listType: 'text',
viewMode: 'list'
});
Attachment.propTypes = _objectSpread({}, FormField.propTypes, {
sortable: PropTypes.bool,
listType: PropTypes.oneOf(['text', 'picture', 'picture-card']),
viewMode: PropTypes.oneOf(['none', 'list', 'popup'])
}); // eslint-disable-next-line camelcase
Attachment.__IS_IN_CELL_EDITOR = true; // 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([autobind], Attachment.prototype, "handleDataSetLoad", null);
__decorate([mobxAction], Attachment.prototype, "uploadAttachments", null);
__decorate([autobind], Attachment.prototype, "uploadAttachment", null);
__decorate([mobxAction], Attachment.prototype, "handleProgress", null);
__decorate([mobxAction], Attachment.prototype, "handleSuccess", null);
__decorate([mobxAction], Attachment.prototype, "handleError", null);
__decorate([autobind, mobxAction], Attachment.prototype, "handleChange", null);
__decorate([mobxAction], Attachment.prototype, "doRemove", null);
__decorate([autobind], Attachment.prototype, "handleHistory", null);
__decorate([autobind], Attachment.prototype, "handleRemove", null);
__decorate([autobind], Attachment.prototype, "handleFetchAttachment", null);
__decorate([autobind], Attachment.prototype, "handlePreview", null);
__decorate([mobxAction], Attachment.prototype, "removeAttachment", null);
__decorate([mobxAction], Attachment.prototype, "beforeUpload", null);
__decorate([autobind], Attachment.prototype, "handleClick", null);
__decorate([mobxAction], Attachment.prototype, "handleSort", null);
__decorate([autobind, mobxAction], Attachment.prototype, "handleOrderChange", null);
__decorate([mobxAction], Attachment.prototype, "changeOrder", null);
__decorate([autobind], Attachment.prototype, "getSortSelectPopupContainer", null);
__decorate([autobind], Attachment.prototype, "renderWrapper", null);
__decorate([autobind], Attachment.prototype, "getTooltipValidationMessage", null);
__decorate([autobind], Attachment.prototype, "handlePopupHiddenChange", null);
__decorate([mobxAction], Attachment.prototype, "setPopup", null);
Attachment = __decorate([observer], Attachment);
export default Attachment;
//# sourceMappingURL=Attachment.js.map