choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
535 lines (471 loc) • 21.1 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { Component, createElement } from 'react';
import classNames from 'classnames';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
import isFunction from 'lodash/isFunction';
import Icon from '../icon';
import Tooltip from '../tooltip';
import Progress from '../progress';
import Animate from '../animate';
import PopConfirm from '../popconfirm';
import { ProgressType } from '../progress/enum';
import { getFileSizeStr, getFileType, isImageUrl, previewImage } from './utils';
import CompressedfileIcon from './icon-svg/compressedfileIcon';
import DocIcon from './icon-svg/docIcon';
import FileuploadIcon from './icon-svg/fileuploadIcon';
import ImageIcon from './icon-svg/imageIcon';
import PdfIcon from './icon-svg/pdfIcon';
import XlsIcon from './icon-svg/xlsIcon';
import { Size } from '../_util/enum';
import ConfigContext from '../config-provider/ConfigContext'; // a little function to help us with reordering the result
var reorder = function reorder(list, startIndex, endIndex) {
var result = Array.from(list);
var _result$splice = result.splice(startIndex, 1),
_result$splice2 = _slicedToArray(_result$splice, 1),
removed = _result$splice2[0];
result.splice(endIndex, 0, removed);
return result;
};
function defaultRenderIcon(file, listType, prefixCls) {
if (listType === 'picture' || listType === 'picture-card') {
return /*#__PURE__*/React.createElement(Icon, {
type: "insert_drive_file",
className: "".concat(prefixCls, "-list-item-icon")
});
}
if (file.status === 'uploading') {
return /*#__PURE__*/React.createElement(Progress, {
key: 'loading',
type: ProgressType.loading,
size: Size.small
});
}
var filetype = getFileType(file.name);
switch (filetype) {
case 'compressedfile':
return /*#__PURE__*/React.createElement(CompressedfileIcon, {
className: "".concat(prefixCls, "-icon-file")
});
case 'doc':
return /*#__PURE__*/React.createElement(DocIcon, {
className: "".concat(prefixCls, "-icon-file")
});
case 'image':
return /*#__PURE__*/React.createElement(ImageIcon, {
className: "".concat(prefixCls, "-icon-file")
});
case 'pdf':
return /*#__PURE__*/React.createElement(PdfIcon, {
className: "".concat(prefixCls, "-icon-file")
});
case 'xls':
return /*#__PURE__*/React.createElement(XlsIcon, {
className: "".concat(prefixCls, "-icon-file")
});
default:
return /*#__PURE__*/React.createElement(FileuploadIcon, {
className: "".concat(prefixCls, "-icon-file")
});
}
}
var UploadList = /*#__PURE__*/function (_Component) {
_inherits(UploadList, _Component);
var _super = _createSuper(UploadList);
function UploadList() {
var _this;
_classCallCheck(this, UploadList);
_this = _super.apply(this, arguments);
_this.handleClose = function (file) {
var onRemove = _this.props.onRemove;
if (onRemove) {
onRemove(file);
}
};
_this.handlePreview = function (file, e) {
var onPreview = _this.props.onPreview;
if (!onPreview) {
return;
}
e.preventDefault();
return onPreview(file);
};
/**
* @param {UploadFile} file
* @param {React.SyntheticEvent<HTMLElement>} e
*/
_this.handleReUpload = function (file, e) {
var onReUpload = _this.props.onReUpload;
if (!onReUpload) {
return;
}
e.preventDefault();
onReUpload(file);
};
_this.handleReUploadConfirm = function (fileTarget, e) {
if (fileTarget.status === 'error') {
_this.handleReUpload(fileTarget, e);
} else if (fileTarget.status && ['success', 'done', 'removed'].includes(fileTarget.status)) {
var _this$props = _this.props,
getUploadRef = _this$props.getUploadRef,
setReplaceReuploadItem = _this$props.setReplaceReuploadItem;
var uploadRef = getUploadRef();
if (uploadRef) {
var fileInput = uploadRef.uploader.fileInput;
setReplaceReuploadItem(fileTarget);
fileInput.click();
}
}
};
/**
* 拖拽事件
* @param result
*/
_this.onDragEnd = function (result) {
var _this$props2 = _this.props,
items = _this$props2.items,
onDragEnd = _this$props2.onDragEnd; // dropped outside the list
if (!result.destination) {
return;
}
var dragItems = reorder(items, result.source.index, result.destination.index);
onDragEnd(dragItems);
};
return _this;
}
_createClass(UploadList, [{
key: "componentDidUpdate",
value: function componentDidUpdate() {
var _this2 = this;
var listType = this.props.listType;
if (listType !== 'picture' && listType !== 'picture-card') {
return;
}
var _this$props3 = this.props,
items = _this$props3.items,
previewFile = _this$props3.previewFile;
(items || []).forEach(function (file) {
if (typeof document === 'undefined' || typeof window === 'undefined' || !window.FileReader || !window.File || !(file.originFileObj instanceof File || file.originFileObj instanceof Blob) || file.thumbUrl !== undefined) {
return;
}
file.thumbUrl = '';
if (previewFile) {
previewFile(file.originFileObj).then(function (previewDataUrl) {
// Need append '' to avoid dead loop
file.thumbUrl = previewDataUrl || '';
_this2.forceUpdate();
});
}
});
}
}, {
key: "render",
value: function render() {
var _this3 = this,
_classNames3;
var _this$props4 = this.props,
customizePrefixCls = _this$props4.prefixCls,
_this$props4$items = _this$props4.items,
items = _this$props4$items === void 0 ? [] : _this$props4$items,
listType = _this$props4.listType,
showPreviewIcon = _this$props4.showPreviewIcon,
showRemoveIcon = _this$props4.showRemoveIcon,
showDownloadIcon = _this$props4.showDownloadIcon,
showReUploadIcon = _this$props4.showReUploadIcon,
removePopConfirmTitle = _this$props4.removePopConfirmTitle,
reUploadText = _this$props4.reUploadText,
reUploadPopConfirmTitle = _this$props4.reUploadPopConfirmTitle,
locale = _this$props4.locale,
dragUploadList = _this$props4.dragUploadList,
showFileSize = _this$props4.showFileSize,
getCustomFilenameTitle = _this$props4.getCustomFilenameTitle,
downloadPropsIntercept = _this$props4.downloadPropsIntercept,
tooltipPrefixCls = _this$props4.tooltipPrefixCls,
popconfirmProps = _this$props4.popconfirmProps,
_this$props4$renderIc = _this$props4.renderIcon,
renderIcon = _this$props4$renderIc === void 0 ? defaultRenderIcon : _this$props4$renderIc;
var getPrefixCls = this.context.getPrefixCls;
var prefixCls = getPrefixCls('upload', customizePrefixCls);
var list = items.map(function (file, index) {
var _classNames2;
var progress;
var icon = renderIcon(file, listType, prefixCls);
var stat = {
isImg: isImageUrl(file),
isUploading: file.status === 'uploading',
isError: file.status === 'error',
isPictureCard: listType === 'picture-card'
};
if (listType === 'picture' || stat.isPictureCard) {
if (stat.isPictureCard && stat.isUploading) {
icon = /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-list-item-uploading-text")
}, locale.uploading);
} else if (listType === 'picture' && stat.isUploading) {
icon = /*#__PURE__*/React.createElement(Progress, {
key: 'loading',
type: ProgressType.loading,
size: Size.small
});
} else if (!file.thumbUrl && !file.url) {
icon = /*#__PURE__*/React.createElement(Icon, {
className: "".concat(prefixCls, "-list-item-thumbnail"),
type: "picture"
});
} else {
var thumbnail = stat.isImg ? /*#__PURE__*/React.createElement("img", {
src: file.thumbUrl || file.url,
alt: file.name
}) : icon;
icon = /*#__PURE__*/React.createElement("a", {
className: "".concat(prefixCls, "-list-item-thumbnail"),
onClick: function onClick(e) {
return _this3.handlePreview(file, e);
},
href: file.url || file.thumbUrl,
target: "_blank",
rel: "noopener noreferrer"
}, thumbnail);
}
}
if (stat.isUploading) {
var progressAttr = _this3.props.progressAttr; // show loading icon if upload progress listener is disabled
var loadingProgress = 'percent' in file ? /*#__PURE__*/React.createElement(Progress, _extends({
type: ProgressType.line
}, progressAttr, {
percent: file.percent
})) : null;
progress = /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-list-item-progress"),
key: "progress"
}, loadingProgress);
}
var message = file.response && typeof file.response === 'string' ? file.response : file.error && file.error.statusText || locale.uploadError;
var preview = file.url ? /*#__PURE__*/React.createElement("a", _extends({
href: file.url
}, file.linkProps, {
target: "_blank",
rel: "noopener noreferrer",
className: "".concat(prefixCls, "-list-item-name"),
onClick: function onClick(e) {
return _this3.handlePreview(file, e);
},
title: file.name
}), file.name) : /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-list-item-name"),
onClick: function onClick(e) {
return _this3.handlePreview(file, e);
},
title: file.name
}, file.name);
var style = file.url || file.thumbUrl ? undefined : {
pointerEvents: 'none',
opacity: 0.5
};
var previewIcon = (isFunction(showPreviewIcon) ? showPreviewIcon(file) : stat.isImg && showPreviewIcon) ? /*#__PURE__*/React.createElement("a", {
href: file.url || file.thumbUrl,
target: "_blank",
rel: "noopener noreferrer",
style: style,
onClick: function onClick(e) {
return _this3.handlePreview(file, e);
},
title: locale.previewFile
}, /*#__PURE__*/React.createElement(Icon, {
type: "visibility"
})) : null;
var showReUploadIconType;
if (isFunction(showReUploadIcon)) {
var customReUploadIcon = showReUploadIcon(file, listType);
showReUploadIconType = customReUploadIcon ? customReUploadIcon === 'text' ? 'text' : 'icon' : undefined;
} else if (showReUploadIcon) {
showReUploadIconType = showReUploadIcon === 'text' ? 'text' : 'icon';
}
var pictureCardReUploadIconOrText = showReUploadIconType && !stat.isUploading ? /*#__PURE__*/React.createElement(PopConfirm, _extends({}, popconfirmProps, {
title: reUploadPopConfirmTitle || locale.confirmReUpload,
onConfirm: function onConfirm(e) {
_this3.handleReUploadConfirm(file, e);
}
}), showReUploadIconType === 'icon' ? /*#__PURE__*/React.createElement(Icon, {
type: "file_upload",
title: reUploadText
}) : stat.isError ? /*#__PURE__*/React.createElement(Tooltip, {
prefixCls: tooltipPrefixCls,
title: message
}, /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-list-item-reupload-").concat(listType),
title: reUploadText
}, locale.reUpload)) : /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-list-item-reupload-").concat(listType),
title: reUploadText
}, locale.reUpload)) : null;
var removeIcon = showRemoveIcon ? /*#__PURE__*/React.createElement(PopConfirm, _extends({}, popconfirmProps, {
title: removePopConfirmTitle || locale.confirmRemove,
onConfirm: function onConfirm() {
_this3.handleClose(file);
}
}), /*#__PURE__*/React.createElement(Icon, {
type: stat.isPictureCard ? 'delete' : 'close',
className: stat.isPictureCard ? "".concat(prefixCls, "-list-item-action-remove") : undefined,
title: locale.removeFile
})) : null;
var downloadLinkProps = _objectSpread(_objectSpread({}, file.linkProps), {}, {
rel: 'noopener noreferrer'
});
if (stat.isError) {
downloadLinkProps.style = {
color: '#f5222d'
};
}
if (!(stat.isError || stat.isUploading)) {
downloadLinkProps.href = file.url || file.thumbUrl;
downloadLinkProps.target = '_blank';
if (downloadLinkProps.href) {
downloadLinkProps.filename = file.name;
}
}
var downloadIcon = !stat.isError && !stat.isUploading && (isFunction(showDownloadIcon) ? showDownloadIcon(file) : showDownloadIcon) && /*#__PURE__*/React.createElement("a", _extends({}, downloadPropsIntercept(downloadLinkProps), {
style: style
}), /*#__PURE__*/React.createElement(Icon, {
type: "get_app"
}));
var actionsClass = classNames("".concat(prefixCls, "-list-item-actions"), _defineProperty({}, "".concat(prefixCls, "-list-item-actions-reupload-text"), showReUploadIconType === 'text' && stat.isError));
var fileName = stat.isPictureCard && !stat.isUploading ? /*#__PURE__*/React.createElement(Tooltip, {
prefixCls: tooltipPrefixCls,
title: getCustomFilenameTitle ? getCustomFilenameTitle(file) : file.name,
placement: "bottom"
}, /*#__PURE__*/createElement(downloadLinkProps.href ? 'a' : 'span', _objectSpread({
className: "".concat(prefixCls, "-list-item-file-name")
}, downloadPropsIntercept(downloadLinkProps)), file.name)) : null;
var filesizeStr = getFileSizeStr(file.size);
var fileSize = showFileSize && filesizeStr !== '' && listType === 'text' ? /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-list-item-info-filesize")
}, filesizeStr) : null;
var iconAndPreview = stat.isPictureCard ? /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-list-item-picture-card")
}, icon) : /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-list-item-text")
}, icon, preview);
var iconAndPreviewTooltip = stat.isError ? /*#__PURE__*/React.createElement(Tooltip, {
prefixCls: tooltipPrefixCls,
title: message
}, iconAndPreview) : iconAndPreview;
var reUpload = showReUploadIconType && (listType === 'text' || listType === 'picture') && !stat.isUploading ? /*#__PURE__*/React.createElement(PopConfirm, _extends({}, popconfirmProps, {
title: reUploadPopConfirmTitle || locale.confirmReUpload,
onConfirm: function onConfirm(e) {
_this3.handleReUploadConfirm(file, e);
}
}), /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-list-item-reupload-").concat(listType),
title: reUploadText
}, locale.reUpload)) : null;
var getActions = function getActions() {
if (!stat.isUploading) {
if (stat.isPictureCard) {
return /*#__PURE__*/React.createElement("div", {
className: actionsClass
}, /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-reupload-action")
}, pictureCardReUploadIconOrText), /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-other-actions")
}, stat.isError || previewIcon, downloadIcon, removeIcon));
}
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-actions")
}, reUpload, stat.isError || previewIcon, downloadIcon, removeIcon);
}
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-actions")
}, removeIcon);
};
var listItemInfo = /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-list-item-info")
}, /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-list-item-span")
}, iconAndPreviewTooltip, fileName, fileSize, getActions()), /*#__PURE__*/React.createElement(Animate, {
transitionName: "fade",
component: ""
}, progress));
var infoUploadingClass = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-list-item"), true), _defineProperty(_classNames2, "".concat(prefixCls, "-list-item-").concat(file.status), true), _defineProperty(_classNames2, "".concat(prefixCls, "-list-item-error-reupload"), file.status === 'error' && showReUploadIconType), _defineProperty(_classNames2, "".concat(prefixCls, "-list-item-done-reupload"), file.status === 'done' && showReUploadIconType), _classNames2));
if (dragUploadList) {
return /*#__PURE__*/React.createElement(Draggable, {
key: file.uid,
draggableId: String(file.uid),
index: index
}, function (provided) {
return /*#__PURE__*/React.createElement("div", _extends({
className: infoUploadingClass,
key: file.uid,
ref: provided.innerRef
}, provided.draggableProps, provided.dragHandleProps), listItemInfo);
});
}
return /*#__PURE__*/React.createElement("div", {
className: infoUploadingClass,
key: file.uid
}, listItemInfo);
});
var listClassNames = classNames((_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefixCls, "-list"), true), _defineProperty(_classNames3, "".concat(prefixCls, "-list-").concat(listType), true), _defineProperty(_classNames3, "".concat(prefixCls, "-list-drag"), dragUploadList), _classNames3));
var animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate';
if (dragUploadList) {
return /*#__PURE__*/React.createElement(DragDropContext, {
onDragEnd: this.onDragEnd
}, /*#__PURE__*/React.createElement(Droppable, {
droppableId: "droppable",
direction: "horizontal"
}, function (provided, snapshot) {
return /*#__PURE__*/React.createElement("div", _extends({
ref: provided.innerRef,
style: {
background: snapshot.isDraggingOver ? '#f2f9f4' : '',
border: snapshot.isDraggingOver ? '2px dashed #1ab16f' : '',
display: 'inline-flex',
maxWidth: '100%',
flexWrap: 'wrap',
overflow: 'auto'
}
}, provided.droppableProps, {
className: listClassNames
}), list, provided.placeholder);
}));
}
return /*#__PURE__*/React.createElement(Animate, {
transitionName: "".concat(prefixCls, "-").concat(animationDirection),
component: "div",
className: listClassNames
}, list);
}
}], [{
key: "contextType",
get: function get() {
return ConfigContext;
}
}]);
return UploadList;
}(Component);
export { UploadList as default };
UploadList.displayName = 'UploadList';
UploadList.defaultProps = {
listType: 'text',
progressAttr: {
strokeWidth: 2,
showInfo: false
},
previewFile: previewImage,
showRemoveIcon: true,
showPreviewIcon: true,
dragUploadList: false,
showFileSize: false,
showDownloadIcon: true,
showReUploadIcon: false,
downloadPropsIntercept: function downloadPropsIntercept(o) {
return o;
}
};
//# sourceMappingURL=UploadList.js.map