2017-11-17 14:38:54 +08:00
|
|
|
import * as React from 'react';
|
2015-08-21 17:12:42 +08:00
|
|
|
import Animate from 'rc-animate';
|
2018-12-05 19:12:18 +08:00
|
|
|
import classNames from 'classnames';
|
2020-03-02 12:09:38 +08:00
|
|
|
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
|
|
|
|
import PaperClipOutlined from '@ant-design/icons/PaperClipOutlined';
|
|
|
|
import PictureTwoTone from '@ant-design/icons/PictureTwoTone';
|
|
|
|
import FileTwoTone from '@ant-design/icons/FileTwoTone';
|
|
|
|
import EyeOutlined from '@ant-design/icons/EyeOutlined';
|
|
|
|
import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
|
|
|
|
import DownloadOutlined from '@ant-design/icons/DownloadOutlined';
|
2019-08-13 14:07:17 +08:00
|
|
|
|
2020-06-01 13:29:22 +08:00
|
|
|
import { cloneElement, isValidElement } from '../_util/reactNode';
|
2018-12-05 19:12:18 +08:00
|
|
|
import { UploadListProps, UploadFile, UploadListType } from './interface';
|
2019-05-06 12:04:39 +08:00
|
|
|
import { previewImage, isImageUrl } from './utils';
|
2017-02-15 20:58:40 +08:00
|
|
|
import Tooltip from '../tooltip';
|
2016-04-07 11:39:23 +08:00
|
|
|
import Progress from '../progress';
|
2018-12-05 19:12:18 +08:00
|
|
|
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
2020-06-01 13:29:22 +08:00
|
|
|
import Button, { ButtonProps } from '../button';
|
2015-10-02 16:52:34 +08:00
|
|
|
|
2016-08-01 16:35:01 +08:00
|
|
|
export default class UploadList extends React.Component<UploadListProps, any> {
|
2016-03-29 17:33:37 +08:00
|
|
|
static defaultProps = {
|
2018-12-07 20:02:01 +08:00
|
|
|
listType: 'text' as UploadListType, // or picture
|
2020-05-20 22:29:45 +08:00
|
|
|
progress: {
|
2017-03-20 16:44:29 +08:00
|
|
|
strokeWidth: 2,
|
2016-05-11 09:32:33 +08:00
|
|
|
showInfo: false,
|
|
|
|
},
|
2017-01-10 20:15:02 +08:00
|
|
|
showRemoveIcon: true,
|
2020-02-20 22:47:14 +08:00
|
|
|
showDownloadIcon: false,
|
2017-01-10 20:15:02 +08:00
|
|
|
showPreviewIcon: true,
|
2019-05-06 12:04:39 +08:00
|
|
|
previewFile: previewImage,
|
2020-04-14 19:32:16 +08:00
|
|
|
isImageUrl,
|
2016-03-29 17:33:37 +08:00
|
|
|
};
|
|
|
|
|
2015-12-27 16:00:40 +08:00
|
|
|
componentDidUpdate() {
|
2019-05-06 12:04:39 +08:00
|
|
|
const { listType, items, previewFile } = this.props;
|
|
|
|
if (listType !== 'picture' && listType !== 'picture-card') {
|
2015-12-28 13:07:47 +08:00
|
|
|
return;
|
|
|
|
}
|
2019-05-06 12:04:39 +08:00
|
|
|
(items || []).forEach(file => {
|
2018-12-07 20:02:01 +08:00
|
|
|
if (
|
|
|
|
typeof document === 'undefined' ||
|
|
|
|
typeof window === 'undefined' ||
|
|
|
|
!(window as any).FileReader ||
|
|
|
|
!(window as any).File ||
|
2019-08-08 12:19:21 +08:00
|
|
|
!(file.originFileObj instanceof File || file.originFileObj instanceof Blob) ||
|
2018-12-07 20:02:01 +08:00
|
|
|
file.thumbUrl !== undefined
|
|
|
|
) {
|
2015-12-27 15:32:37 +08:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
file.thumbUrl = '';
|
2019-05-06 12:04:39 +08:00
|
|
|
if (previewFile) {
|
2019-07-01 17:52:37 +08:00
|
|
|
previewFile(file.originFileObj as File).then((previewDataUrl: string) => {
|
2019-05-06 12:04:39 +08:00
|
|
|
// Need append '' to avoid dead loop
|
|
|
|
file.thumbUrl = previewDataUrl || '';
|
|
|
|
this.forceUpdate();
|
|
|
|
});
|
|
|
|
}
|
2015-12-27 15:32:37 +08:00
|
|
|
});
|
2016-03-29 17:33:37 +08:00
|
|
|
}
|
|
|
|
|
2019-08-05 18:38:10 +08:00
|
|
|
handlePreview = (file: UploadFile, e: React.SyntheticEvent<HTMLElement>) => {
|
|
|
|
const { onPreview } = this.props;
|
|
|
|
if (!onPreview) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
e.preventDefault();
|
|
|
|
return onPreview(file);
|
|
|
|
};
|
|
|
|
|
2019-09-11 21:46:56 +08:00
|
|
|
handleDownload = (file: UploadFile) => {
|
|
|
|
const { onDownload } = this.props;
|
|
|
|
if (typeof onDownload === 'function') {
|
|
|
|
onDownload(file);
|
|
|
|
} else if (file.url) {
|
|
|
|
window.open(file.url);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2019-08-05 18:38:10 +08:00
|
|
|
handleClose = (file: UploadFile) => {
|
|
|
|
const { onRemove } = this.props;
|
|
|
|
if (onRemove) {
|
|
|
|
onRemove(file);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2020-01-03 17:48:10 +08:00
|
|
|
handleIconRender = (file: UploadFile) => {
|
2020-04-14 19:32:16 +08:00
|
|
|
const { listType, locale, iconRender, isImageUrl: isImgUrl } = this.props;
|
2020-01-03 17:48:10 +08:00
|
|
|
if (iconRender) {
|
|
|
|
return iconRender(file, listType);
|
|
|
|
}
|
|
|
|
const isLoading = file.status === 'uploading';
|
2020-04-14 19:32:16 +08:00
|
|
|
const fileIcon = isImgUrl && isImgUrl(file) ? <PictureTwoTone /> : <FileTwoTone />;
|
2020-01-03 17:48:10 +08:00
|
|
|
let icon: React.ReactNode = isLoading ? <LoadingOutlined /> : <PaperClipOutlined />;
|
|
|
|
if (listType === 'picture') {
|
|
|
|
icon = isLoading ? <LoadingOutlined /> : fileIcon;
|
|
|
|
} else if (listType === 'picture-card') {
|
|
|
|
icon = isLoading ? locale.uploading : fileIcon;
|
|
|
|
}
|
|
|
|
return icon;
|
|
|
|
};
|
|
|
|
|
2020-06-01 13:29:22 +08:00
|
|
|
handleActionIconRender = (
|
|
|
|
customIcon: React.ReactNode,
|
|
|
|
callback: () => void,
|
|
|
|
prefixCls: string,
|
|
|
|
title?: string,
|
|
|
|
) => {
|
|
|
|
const btnProps: ButtonProps = {
|
|
|
|
type: 'text',
|
|
|
|
size: 'small',
|
|
|
|
title,
|
|
|
|
onClick: (e: React.MouseEvent<HTMLElement>) => {
|
|
|
|
callback();
|
|
|
|
if (isValidElement(customIcon) && customIcon.props.onClick) {
|
|
|
|
customIcon.props.onClick(e);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
className: `${prefixCls}-list-item-card-actions-btn`,
|
|
|
|
};
|
2020-05-14 20:54:49 +08:00
|
|
|
if (isValidElement(customIcon)) {
|
2020-06-01 13:29:22 +08:00
|
|
|
const btnIcon = cloneElement(customIcon, {
|
2020-02-19 13:20:43 +08:00
|
|
|
...customIcon.props,
|
2020-06-01 13:29:22 +08:00
|
|
|
onClick: () => {},
|
2020-02-19 13:20:43 +08:00
|
|
|
});
|
2020-06-01 13:29:22 +08:00
|
|
|
|
|
|
|
return <Button {...btnProps} icon={btnIcon} />;
|
2020-02-17 14:55:16 +08:00
|
|
|
}
|
|
|
|
return (
|
2020-06-01 13:29:22 +08:00
|
|
|
<Button {...btnProps}>
|
|
|
|
<span>{customIcon}</span>
|
|
|
|
</Button>
|
2020-02-17 14:55:16 +08:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2020-01-02 19:10:16 +08:00
|
|
|
renderUploadList = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
|
2018-12-05 19:12:18 +08:00
|
|
|
const {
|
|
|
|
prefixCls: customizePrefixCls,
|
2018-12-07 20:02:01 +08:00
|
|
|
items = [],
|
|
|
|
listType,
|
|
|
|
showPreviewIcon,
|
|
|
|
showRemoveIcon,
|
2019-09-11 21:46:56 +08:00
|
|
|
showDownloadIcon,
|
2020-02-17 14:55:16 +08:00
|
|
|
removeIcon: customRemoveIcon,
|
|
|
|
downloadIcon: customDownloadIcon,
|
2018-12-07 20:02:01 +08:00
|
|
|
locale,
|
2020-05-20 22:29:45 +08:00
|
|
|
progress: progressProps,
|
2020-04-14 19:32:16 +08:00
|
|
|
isImageUrl: isImgUrl,
|
2018-12-05 19:12:18 +08:00
|
|
|
} = this.props;
|
|
|
|
const prefixCls = getPrefixCls('upload', customizePrefixCls);
|
2016-09-22 11:54:36 +08:00
|
|
|
const list = items.map(file => {
|
2015-10-31 13:27:58 +08:00
|
|
|
let progress;
|
2020-01-03 17:48:10 +08:00
|
|
|
const iconNode = this.handleIconRender(file);
|
|
|
|
let icon = <div className={`${prefixCls}-text-icon`}>{iconNode}</div>;
|
2016-09-22 11:54:36 +08:00
|
|
|
if (listType === 'picture' || listType === 'picture-card') {
|
2020-01-03 17:48:10 +08:00
|
|
|
if (file.status === 'uploading' || (!file.thumbUrl && !file.url)) {
|
|
|
|
const uploadingClassName = classNames({
|
|
|
|
[`${prefixCls}-list-item-thumbnail`]: true,
|
|
|
|
[`${prefixCls}-list-item-file`]: file.status !== 'uploading',
|
|
|
|
});
|
|
|
|
icon = <div className={uploadingClassName}>{iconNode}</div>;
|
2016-01-15 15:56:06 +08:00
|
|
|
} else {
|
2020-04-14 19:32:16 +08:00
|
|
|
const thumbnail =
|
|
|
|
isImgUrl && isImgUrl(file) ? (
|
|
|
|
<img
|
|
|
|
src={file.thumbUrl || file.url}
|
|
|
|
alt={file.name}
|
|
|
|
className={`${prefixCls}-list-item-image`}
|
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
iconNode
|
|
|
|
);
|
2020-01-03 17:48:10 +08:00
|
|
|
const aClassName = classNames({
|
|
|
|
[`${prefixCls}-list-item-thumbnail`]: true,
|
2020-04-14 19:32:16 +08:00
|
|
|
[`${prefixCls}-list-item-file`]: isImgUrl && !isImgUrl(file),
|
2020-01-03 17:48:10 +08:00
|
|
|
});
|
2016-05-24 17:57:31 +08:00
|
|
|
icon = (
|
|
|
|
<a
|
2020-01-03 17:48:10 +08:00
|
|
|
className={aClassName}
|
2016-05-24 17:57:31 +08:00
|
|
|
onClick={e => this.handlePreview(file, e)}
|
2016-11-22 14:43:20 +08:00
|
|
|
href={file.url || file.thumbUrl}
|
2016-11-23 17:53:10 +08:00
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
2016-06-06 13:54:10 +08:00
|
|
|
>
|
2018-03-11 22:24:09 +08:00
|
|
|
{thumbnail}
|
2016-05-24 17:57:31 +08:00
|
|
|
</a>
|
2016-01-07 17:46:46 +08:00
|
|
|
);
|
2016-01-15 15:56:06 +08:00
|
|
|
}
|
2015-12-12 15:25:54 +08:00
|
|
|
}
|
2016-01-15 15:56:06 +08:00
|
|
|
|
2015-10-31 13:27:58 +08:00
|
|
|
if (file.status === 'uploading') {
|
2017-03-10 19:18:05 +08:00
|
|
|
// show loading icon if upload progress listener is disabled
|
2018-12-07 20:02:01 +08:00
|
|
|
const loadingProgress =
|
|
|
|
'percent' in file ? (
|
2020-05-21 14:58:36 +08:00
|
|
|
<Progress {...progressProps} type="line" percent={file.percent} />
|
2018-12-07 20:02:01 +08:00
|
|
|
) : null;
|
2017-03-10 19:18:05 +08:00
|
|
|
|
2016-01-07 14:21:29 +08:00
|
|
|
progress = (
|
2017-03-20 16:44:29 +08:00
|
|
|
<div className={`${prefixCls}-list-item-progress`} key="progress">
|
2017-03-10 19:18:05 +08:00
|
|
|
{loadingProgress}
|
2016-01-07 14:21:29 +08:00
|
|
|
</div>
|
|
|
|
);
|
2015-10-31 13:27:58 +08:00
|
|
|
}
|
2015-12-12 15:25:54 +08:00
|
|
|
const infoUploadingClass = classNames({
|
|
|
|
[`${prefixCls}-list-item`]: true,
|
2015-12-14 11:56:00 +08:00
|
|
|
[`${prefixCls}-list-item-${file.status}`]: true,
|
2019-09-11 21:46:56 +08:00
|
|
|
[`${prefixCls}-list-item-list-type-${listType}`]: true,
|
2015-12-12 15:25:54 +08:00
|
|
|
});
|
2018-12-07 20:02:01 +08:00
|
|
|
const linkProps =
|
|
|
|
typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps;
|
2019-09-11 21:46:56 +08:00
|
|
|
|
2020-02-19 13:20:43 +08:00
|
|
|
const removeIcon = showRemoveIcon
|
2020-06-01 13:29:22 +08:00
|
|
|
? this.handleActionIconRender(
|
|
|
|
customRemoveIcon || <DeleteOutlined />,
|
|
|
|
() => this.handleClose(file),
|
|
|
|
prefixCls,
|
|
|
|
locale.removeFile,
|
2020-02-19 13:20:43 +08:00
|
|
|
)
|
|
|
|
: null;
|
2019-10-16 10:44:56 +08:00
|
|
|
|
2019-09-11 21:46:56 +08:00
|
|
|
const downloadIcon =
|
2020-02-19 13:20:43 +08:00
|
|
|
showDownloadIcon && file.status === 'done'
|
2020-06-01 13:29:22 +08:00
|
|
|
? this.handleActionIconRender(
|
|
|
|
customDownloadIcon || <DownloadOutlined />,
|
|
|
|
() => this.handleDownload(file),
|
|
|
|
prefixCls,
|
|
|
|
locale.downloadFile,
|
2020-02-19 13:20:43 +08:00
|
|
|
)
|
|
|
|
: null;
|
2019-09-11 21:46:56 +08:00
|
|
|
const downloadOrDelete = listType !== 'picture-card' && (
|
|
|
|
<span
|
|
|
|
key="download-delete"
|
|
|
|
className={`${prefixCls}-list-item-card-actions ${
|
|
|
|
listType === 'picture' ? 'picture' : ''
|
|
|
|
}`}
|
2016-11-25 12:03:39 +08:00
|
|
|
>
|
2020-06-01 13:29:22 +08:00
|
|
|
{downloadIcon}
|
|
|
|
{removeIcon}
|
2019-09-11 21:46:56 +08:00
|
|
|
</span>
|
|
|
|
);
|
|
|
|
const listItemNameClass = classNames({
|
|
|
|
[`${prefixCls}-list-item-name`]: true,
|
|
|
|
[`${prefixCls}-list-item-name-icon-count-${
|
|
|
|
[downloadIcon, removeIcon].filter(x => x).length
|
|
|
|
}`]: true,
|
|
|
|
});
|
2019-10-18 00:02:04 +08:00
|
|
|
const preview = file.url
|
|
|
|
? [
|
|
|
|
<a
|
|
|
|
key="view"
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
className={listItemNameClass}
|
|
|
|
title={file.name}
|
|
|
|
{...linkProps}
|
|
|
|
href={file.url}
|
|
|
|
onClick={e => this.handlePreview(file, e)}
|
|
|
|
>
|
|
|
|
{file.name}
|
|
|
|
</a>,
|
|
|
|
downloadOrDelete,
|
|
|
|
]
|
|
|
|
: [
|
|
|
|
<span
|
|
|
|
key="view"
|
|
|
|
className={listItemNameClass}
|
|
|
|
onClick={e => this.handlePreview(file, e)}
|
|
|
|
title={file.name}
|
|
|
|
>
|
|
|
|
{file.name}
|
|
|
|
</span>,
|
|
|
|
downloadOrDelete,
|
|
|
|
];
|
2018-04-04 14:46:59 +08:00
|
|
|
const style: React.CSSProperties = {
|
2016-11-25 12:03:39 +08:00
|
|
|
pointerEvents: 'none',
|
|
|
|
opacity: 0.5,
|
|
|
|
};
|
2017-01-10 20:15:02 +08:00
|
|
|
const previewIcon = showPreviewIcon ? (
|
|
|
|
<a
|
|
|
|
href={file.url || file.thumbUrl}
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
2018-12-07 20:02:01 +08:00
|
|
|
style={file.url || file.thumbUrl ? undefined : style}
|
2017-01-10 20:15:02 +08:00
|
|
|
onClick={e => this.handlePreview(file, e)}
|
2017-02-28 18:43:22 +08:00
|
|
|
title={locale.previewFile}
|
2017-01-10 20:15:02 +08:00
|
|
|
>
|
2019-11-28 12:34:33 +08:00
|
|
|
<EyeOutlined />
|
2017-01-10 20:15:02 +08:00
|
|
|
</a>
|
|
|
|
) : null;
|
2019-09-11 21:46:56 +08:00
|
|
|
|
|
|
|
const actions = listType === 'picture-card' && file.status !== 'uploading' && (
|
|
|
|
<span className={`${prefixCls}-list-item-actions`}>
|
|
|
|
{previewIcon}
|
|
|
|
{file.status === 'done' && downloadIcon}
|
|
|
|
{removeIcon}
|
|
|
|
</span>
|
|
|
|
);
|
2019-10-16 10:44:56 +08:00
|
|
|
|
2017-08-08 13:34:24 +08:00
|
|
|
let message;
|
2017-08-08 17:18:55 +08:00
|
|
|
if (file.response && typeof file.response === 'string') {
|
2017-08-08 13:34:24 +08:00
|
|
|
message = file.response;
|
|
|
|
} else {
|
|
|
|
message = (file.error && file.error.statusText) || locale.uploadError;
|
|
|
|
}
|
2019-11-12 21:45:32 +08:00
|
|
|
const iconAndPreview = (
|
|
|
|
<span>
|
|
|
|
{icon}
|
|
|
|
{preview}
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
const dom = (
|
|
|
|
<div className={infoUploadingClass}>
|
2019-11-29 23:34:12 +08:00
|
|
|
<div className={`${prefixCls}-list-item-info`}>{iconAndPreview}</div>
|
|
|
|
{actions}
|
|
|
|
<Animate transitionName="fade" component="">
|
|
|
|
{progress}
|
|
|
|
</Animate>
|
2019-11-12 21:45:32 +08:00
|
|
|
</div>
|
|
|
|
);
|
2019-11-18 18:20:04 +08:00
|
|
|
const listContainerNameClass = classNames({
|
|
|
|
[`${prefixCls}-list-picture-card-container`]: listType === 'picture-card',
|
|
|
|
});
|
2017-03-08 18:02:15 +08:00
|
|
|
return (
|
2019-11-18 18:20:04 +08:00
|
|
|
<div key={file.uid} className={listContainerNameClass}>
|
2020-05-09 18:58:44 +08:00
|
|
|
{file.status === 'error' ? (
|
|
|
|
<Tooltip title={message} getPopupContainer={node => node.parentNode as HTMLElement}>
|
|
|
|
{dom}
|
|
|
|
</Tooltip>
|
|
|
|
) : (
|
|
|
|
<span>{dom}</span>
|
|
|
|
)}
|
2015-08-09 18:00:20 +08:00
|
|
|
</div>
|
|
|
|
);
|
2015-08-31 18:13:16 +08:00
|
|
|
});
|
2015-12-12 15:25:54 +08:00
|
|
|
const listClassNames = classNames({
|
|
|
|
[`${prefixCls}-list`]: true,
|
2016-09-22 11:54:36 +08:00
|
|
|
[`${prefixCls}-list-${listType}`]: true,
|
2020-01-02 19:10:16 +08:00
|
|
|
[`${prefixCls}-list-rtl`]: direction === 'rtl',
|
2015-12-12 15:25:54 +08:00
|
|
|
});
|
2018-12-07 20:02:01 +08:00
|
|
|
const animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate';
|
2016-01-07 14:21:29 +08:00
|
|
|
return (
|
2016-09-22 11:54:36 +08:00
|
|
|
<Animate
|
2017-03-08 18:02:15 +08:00
|
|
|
transitionName={`${prefixCls}-${animationDirection}`}
|
2016-09-22 11:54:36 +08:00
|
|
|
component="div"
|
|
|
|
className={listClassNames}
|
|
|
|
>
|
|
|
|
{list}
|
|
|
|
</Animate>
|
2016-01-07 14:21:29 +08:00
|
|
|
);
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2018-12-05 19:12:18 +08:00
|
|
|
|
|
|
|
render() {
|
2018-12-07 20:02:01 +08:00
|
|
|
return <ConfigConsumer>{this.renderUploadList}</ConfigConsumer>;
|
2018-12-05 19:12:18 +08:00
|
|
|
}
|
2016-03-29 17:33:37 +08:00
|
|
|
}
|