2016-09-21 11:54:53 +08:00
|
|
|
import React from 'react';
|
2015-08-21 17:12:42 +08:00
|
|
|
import Animate from 'rc-animate';
|
2015-11-20 11:05:34 +08:00
|
|
|
import Icon from '../icon';
|
2017-02-15 20:58:40 +08:00
|
|
|
import Tooltip from '../tooltip';
|
2016-04-07 11:39:23 +08:00
|
|
|
import Progress from '../progress';
|
2015-12-12 15:25:54 +08:00
|
|
|
import classNames from 'classnames';
|
2016-08-01 16:35:01 +08:00
|
|
|
import { UploadListProps } from './interface';
|
2015-10-02 16:52:34 +08:00
|
|
|
|
2015-12-27 15:32:37 +08:00
|
|
|
// https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
|
2016-05-24 17:57:31 +08:00
|
|
|
const previewFile = (file, callback) => {
|
2015-12-27 15:32:37 +08:00
|
|
|
const reader = new FileReader();
|
2016-05-24 17:57:31 +08:00
|
|
|
reader.onloadend = () => callback(reader.result);
|
2015-12-27 15:32:37 +08:00
|
|
|
reader.readAsDataURL(file);
|
|
|
|
};
|
|
|
|
|
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 = {
|
|
|
|
listType: 'text', // or picture
|
|
|
|
progressAttr: {
|
|
|
|
strokeWidth: 3,
|
2016-05-11 09:32:33 +08:00
|
|
|
showInfo: false,
|
|
|
|
},
|
2016-09-14 16:18:33 +08:00
|
|
|
prefixCls: 'ant-upload',
|
2017-01-10 20:15:02 +08:00
|
|
|
showRemoveIcon: true,
|
|
|
|
showPreviewIcon: true,
|
2016-03-29 17:33:37 +08:00
|
|
|
};
|
|
|
|
|
2016-04-05 12:30:14 +08:00
|
|
|
handleClose = (file) => {
|
2016-10-24 16:30:38 +08:00
|
|
|
const onRemove = this.props.onRemove;
|
|
|
|
if (onRemove) {
|
|
|
|
onRemove(file);
|
|
|
|
}
|
2016-03-29 17:33:37 +08:00
|
|
|
}
|
|
|
|
|
2016-04-05 12:30:14 +08:00
|
|
|
handlePreview = (file, e) => {
|
2016-11-22 14:21:42 +08:00
|
|
|
const { onPreview } = this.props;
|
2016-10-24 16:30:38 +08:00
|
|
|
if (!onPreview) {
|
|
|
|
return;
|
|
|
|
}
|
2016-11-22 14:21:42 +08:00
|
|
|
e.preventDefault();
|
2016-10-24 16:30:38 +08:00
|
|
|
return onPreview(file);
|
2016-04-05 12:30:14 +08:00
|
|
|
}
|
|
|
|
|
2015-12-27 16:00:40 +08:00
|
|
|
componentDidUpdate() {
|
2016-01-15 15:56:06 +08:00
|
|
|
if (this.props.listType !== 'picture' && this.props.listType !== 'picture-card') {
|
2015-12-28 13:07:47 +08:00
|
|
|
return;
|
|
|
|
}
|
2016-10-24 16:30:38 +08:00
|
|
|
(this.props.items || []).forEach(file => {
|
2015-12-27 16:00:40 +08:00
|
|
|
if (typeof document === 'undefined' ||
|
|
|
|
typeof window === 'undefined' ||
|
2016-08-01 16:35:01 +08:00
|
|
|
!(window as any).FileReader || !(window as any).File ||
|
2016-01-26 19:55:19 +08:00
|
|
|
!(file.originFileObj instanceof File) ||
|
2015-12-27 15:32:37 +08:00
|
|
|
file.thumbUrl !== undefined) {
|
|
|
|
return;
|
|
|
|
}
|
2016-01-07 18:04:05 +08:00
|
|
|
/*eslint-disable */
|
2015-12-27 15:32:37 +08:00
|
|
|
file.thumbUrl = '';
|
2016-01-07 18:04:05 +08:00
|
|
|
/*eslint-enable */
|
2015-12-27 15:32:37 +08:00
|
|
|
previewFile(file.originFileObj, (previewDataUrl) => {
|
2016-01-07 18:04:05 +08:00
|
|
|
/*eslint-disable */
|
2015-12-27 15:32:37 +08:00
|
|
|
file.thumbUrl = previewDataUrl;
|
2016-01-07 18:04:05 +08:00
|
|
|
/*eslint-enable */
|
2015-12-27 15:32:37 +08:00
|
|
|
this.forceUpdate();
|
|
|
|
});
|
|
|
|
});
|
2016-03-29 17:33:37 +08:00
|
|
|
}
|
|
|
|
|
2015-08-09 18:00:20 +08:00
|
|
|
render() {
|
2017-02-28 18:43:22 +08:00
|
|
|
const { prefixCls, items = [], listType, showPreviewIcon, showRemoveIcon, locale } = this.props;
|
2016-09-22 11:54:36 +08:00
|
|
|
const list = items.map(file => {
|
2015-10-31 13:27:58 +08:00
|
|
|
let progress;
|
2015-12-12 15:25:54 +08:00
|
|
|
let icon = <Icon type="paper-clip" />;
|
|
|
|
|
2016-09-22 11:54:36 +08:00
|
|
|
if (listType === 'picture' || listType === 'picture-card') {
|
2016-01-15 15:56:06 +08:00
|
|
|
if (file.status === 'uploading' || (!file.thumbUrl && !file.url)) {
|
2016-09-22 11:54:36 +08:00
|
|
|
if (listType === 'picture-card') {
|
2017-02-28 18:43:22 +08:00
|
|
|
icon = <div className={`${prefixCls}-list-item-uploading-text`}>{locale.uploading}</div>;
|
2016-01-15 15:56:06 +08:00
|
|
|
} else {
|
2016-02-17 18:04:42 +08:00
|
|
|
icon = <Icon className={`${prefixCls}-list-item-thumbnail`} type="picture" />;
|
2016-01-15 15:56:06 +08:00
|
|
|
}
|
|
|
|
} else {
|
2016-05-24 17:57:31 +08:00
|
|
|
icon = (
|
|
|
|
<a
|
|
|
|
className={`${prefixCls}-list-item-thumbnail`}
|
|
|
|
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
|
|
|
>
|
2017-01-24 14:59:39 +08:00
|
|
|
<img src={file.thumbUrl || file.url} alt={file.name} />
|
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
|
|
|
|
const loadingProgress = file.percent ? (
|
|
|
|
<Progress type="line" {...this.props.progressAttr} percent={file.percent} />
|
|
|
|
) : <Icon type="loading" />;
|
|
|
|
|
2016-01-07 14:21:29 +08:00
|
|
|
progress = (
|
2016-02-17 18:04:42 +08:00
|
|
|
<div className={`${prefixCls}-list-item-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,
|
2015-12-12 15:25:54 +08:00
|
|
|
});
|
2016-11-25 12:03:39 +08:00
|
|
|
const preview = file.url ? (
|
|
|
|
<a
|
|
|
|
href={file.url}
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
className={`${prefixCls}-list-item-name`}
|
|
|
|
onClick={e => this.handlePreview(file, e)}
|
2017-03-08 12:11:31 +08:00
|
|
|
title={file.name}
|
2016-11-25 12:03:39 +08:00
|
|
|
>
|
|
|
|
{file.name}
|
|
|
|
</a>
|
|
|
|
) : (
|
|
|
|
<span
|
|
|
|
className={`${prefixCls}-list-item-name`}
|
|
|
|
onClick={e => this.handlePreview(file, e)}
|
2017-03-08 12:11:31 +08:00
|
|
|
title={file.name}
|
2016-11-25 12:03:39 +08:00
|
|
|
>
|
|
|
|
{file.name}
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
const style = (file.url || file.thumbUrl) ? undefined : {
|
|
|
|
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"
|
|
|
|
style={style}
|
|
|
|
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
|
|
|
>
|
|
|
|
<Icon type="eye-o" />
|
|
|
|
</a>
|
|
|
|
) : null;
|
|
|
|
const removeIcon = showRemoveIcon ? (
|
2017-02-28 18:43:22 +08:00
|
|
|
<Icon type="delete" title={locale.removeFile} onClick={() => this.handleClose(file)} />
|
2017-01-10 20:15:02 +08:00
|
|
|
) : null;
|
|
|
|
const removeIconCross = showRemoveIcon ? (
|
2017-02-28 18:43:22 +08:00
|
|
|
<Icon type="cross" title={locale.removeFile} onClick={() => this.handleClose(file)} />
|
2017-01-10 20:15:02 +08:00
|
|
|
) : null;
|
|
|
|
const actions = (listType === 'picture-card' && file.status !== 'uploading')
|
|
|
|
? <span className={`${prefixCls}-list-item-actions`}>{previewIcon}{removeIcon}</span>
|
|
|
|
: removeIconCross;
|
2016-11-25 12:03:39 +08:00
|
|
|
|
2017-03-08 18:02:15 +08:00
|
|
|
const message = file.response || (file.error && file.error.statusText) || locale.uploadError;
|
|
|
|
const iconAndPreview = (file.status === 'error')
|
|
|
|
? <Tooltip title={message}>{icon}{preview}</Tooltip>
|
|
|
|
: <span>{icon}{preview}</span>;
|
|
|
|
|
|
|
|
return (
|
2015-12-12 15:25:54 +08:00
|
|
|
<div className={infoUploadingClass} key={file.uid}>
|
2016-02-17 18:04:42 +08:00
|
|
|
<div className={`${prefixCls}-list-item-info`}>
|
2017-03-08 18:02:15 +08:00
|
|
|
{iconAndPreview}
|
2015-10-31 13:27:58 +08:00
|
|
|
</div>
|
2017-03-08 18:02:15 +08:00
|
|
|
{actions}
|
2016-04-29 12:13:27 +08:00
|
|
|
{progress}
|
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,
|
2015-12-12 15:25:54 +08:00
|
|
|
});
|
2017-03-08 18:02:15 +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
|
|
|
);
|
2015-08-09 18:00:20 +08:00
|
|
|
}
|
2016-03-29 17:33:37 +08:00
|
|
|
}
|