2020-11-21 19:00:11 +08:00
|
|
|
import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
|
|
|
|
import DownloadOutlined from '@ant-design/icons/DownloadOutlined';
|
2022-06-22 14:57:09 +08:00
|
|
|
import EyeOutlined from '@ant-design/icons/EyeOutlined';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import CSSMotion from 'rc-motion';
|
|
|
|
import * as React from 'react';
|
2021-02-08 17:09:13 +08:00
|
|
|
import { ConfigContext } from '../../config-provider';
|
2022-06-22 14:57:09 +08:00
|
|
|
import Progress from '../../progress';
|
|
|
|
import Tooltip from '../../tooltip';
|
2021-02-08 17:09:13 +08:00
|
|
|
|
2022-05-07 14:31:54 +08:00
|
|
|
import type {
|
2020-11-21 19:00:11 +08:00
|
|
|
ItemRender,
|
|
|
|
UploadFile,
|
|
|
|
UploadListProgressProps,
|
|
|
|
UploadListType,
|
|
|
|
UploadLocale,
|
|
|
|
} from '../interface';
|
|
|
|
|
|
|
|
export interface ListItemProps {
|
|
|
|
prefixCls: string;
|
|
|
|
className?: string;
|
|
|
|
style?: React.CSSProperties;
|
|
|
|
locale: UploadLocale;
|
|
|
|
file: UploadFile;
|
|
|
|
items: UploadFile[];
|
|
|
|
listType?: UploadListType;
|
|
|
|
isImgUrl?: (file: UploadFile) => boolean;
|
|
|
|
showRemoveIcon?: boolean;
|
|
|
|
showDownloadIcon?: boolean;
|
|
|
|
showPreviewIcon?: boolean;
|
|
|
|
removeIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
|
|
|
|
downloadIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
|
2021-09-08 09:30:09 +08:00
|
|
|
previewIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
|
2020-11-21 19:00:11 +08:00
|
|
|
iconRender: (file: UploadFile) => React.ReactNode;
|
|
|
|
actionIconRender: (
|
|
|
|
customIcon: React.ReactNode,
|
|
|
|
callback: () => void,
|
|
|
|
prefixCls: string,
|
|
|
|
title?: string | undefined,
|
|
|
|
) => React.ReactNode;
|
|
|
|
itemRender?: ItemRender;
|
|
|
|
onPreview: (file: UploadFile, e: React.SyntheticEvent<HTMLElement>) => void;
|
|
|
|
onClose: (file: UploadFile) => void;
|
|
|
|
onDownload: (file: UploadFile) => void;
|
|
|
|
progress?: UploadListProgressProps;
|
|
|
|
}
|
|
|
|
|
|
|
|
const ListItem = React.forwardRef(
|
|
|
|
(
|
|
|
|
{
|
|
|
|
prefixCls,
|
|
|
|
className,
|
|
|
|
style,
|
|
|
|
locale,
|
|
|
|
listType,
|
|
|
|
file,
|
|
|
|
items,
|
|
|
|
progress: progressProps,
|
|
|
|
iconRender,
|
|
|
|
actionIconRender,
|
|
|
|
itemRender,
|
|
|
|
isImgUrl,
|
|
|
|
showPreviewIcon,
|
|
|
|
showRemoveIcon,
|
|
|
|
showDownloadIcon,
|
2021-09-08 09:30:09 +08:00
|
|
|
previewIcon: customPreviewIcon,
|
2020-11-21 19:00:11 +08:00
|
|
|
removeIcon: customRemoveIcon,
|
|
|
|
downloadIcon: customDownloadIcon,
|
|
|
|
onPreview,
|
|
|
|
onDownload,
|
|
|
|
onClose,
|
|
|
|
}: ListItemProps,
|
|
|
|
ref: React.Ref<HTMLDivElement>,
|
|
|
|
) => {
|
2022-07-26 15:17:41 +08:00
|
|
|
// Status: which will ignore `removed` status
|
|
|
|
const { status } = file;
|
|
|
|
const [mergedStatus, setMergedStatus] = React.useState(status);
|
|
|
|
React.useEffect(() => {
|
|
|
|
if (status !== 'removed') {
|
|
|
|
setMergedStatus(status);
|
|
|
|
}
|
|
|
|
}, [status]);
|
|
|
|
|
2020-11-21 19:00:11 +08:00
|
|
|
// Delay to show the progress bar
|
|
|
|
const [showProgress, setShowProgress] = React.useState(false);
|
|
|
|
const progressRafRef = React.useRef<any>();
|
|
|
|
React.useEffect(() => {
|
|
|
|
progressRafRef.current = setTimeout(() => {
|
|
|
|
setShowProgress(true);
|
|
|
|
}, 300);
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
window.clearTimeout(progressRafRef.current);
|
|
|
|
};
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
// This is used for legacy span make scrollHeight the wrong value.
|
|
|
|
// We will force these to be `display: block` with non `picture-card`
|
|
|
|
const spanClassName = `${prefixCls}-span`;
|
|
|
|
|
|
|
|
const iconNode = iconRender(file);
|
|
|
|
let icon = <div className={`${prefixCls}-text-icon`}>{iconNode}</div>;
|
|
|
|
if (listType === 'picture' || listType === 'picture-card') {
|
2022-07-26 15:17:41 +08:00
|
|
|
if (mergedStatus === 'uploading' || (!file.thumbUrl && !file.url)) {
|
2020-11-21 19:00:11 +08:00
|
|
|
const uploadingClassName = classNames({
|
|
|
|
[`${prefixCls}-list-item-thumbnail`]: true,
|
2022-07-26 15:17:41 +08:00
|
|
|
[`${prefixCls}-list-item-file`]: mergedStatus !== 'uploading',
|
2020-11-21 19:00:11 +08:00
|
|
|
});
|
|
|
|
icon = <div className={uploadingClassName}>{iconNode}</div>;
|
|
|
|
} else {
|
|
|
|
const thumbnail = isImgUrl?.(file) ? (
|
|
|
|
<img
|
|
|
|
src={file.thumbUrl || file.url}
|
|
|
|
alt={file.name}
|
|
|
|
className={`${prefixCls}-list-item-image`}
|
2022-04-12 12:03:46 +08:00
|
|
|
crossOrigin={file.crossOrigin}
|
2020-11-21 19:00:11 +08:00
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
iconNode
|
|
|
|
);
|
|
|
|
const aClassName = classNames({
|
|
|
|
[`${prefixCls}-list-item-thumbnail`]: true,
|
|
|
|
[`${prefixCls}-list-item-file`]: isImgUrl && !isImgUrl(file),
|
|
|
|
});
|
|
|
|
icon = (
|
|
|
|
<a
|
|
|
|
className={aClassName}
|
|
|
|
onClick={e => onPreview(file, e)}
|
|
|
|
href={file.url || file.thumbUrl}
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
>
|
|
|
|
{thumbnail}
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const infoUploadingClass = classNames({
|
|
|
|
[`${prefixCls}-list-item`]: true,
|
2022-07-26 15:17:41 +08:00
|
|
|
[`${prefixCls}-list-item-${mergedStatus}`]: true,
|
2020-11-21 19:00:11 +08:00
|
|
|
[`${prefixCls}-list-item-list-type-${listType}`]: true,
|
|
|
|
});
|
|
|
|
const linkProps =
|
|
|
|
typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps;
|
|
|
|
|
|
|
|
const removeIcon = showRemoveIcon
|
|
|
|
? actionIconRender(
|
|
|
|
(typeof customRemoveIcon === 'function' ? customRemoveIcon(file) : customRemoveIcon) || (
|
|
|
|
<DeleteOutlined />
|
|
|
|
),
|
|
|
|
() => onClose(file),
|
|
|
|
prefixCls,
|
|
|
|
locale.removeFile,
|
|
|
|
)
|
|
|
|
: null;
|
|
|
|
|
|
|
|
const downloadIcon =
|
2022-07-26 15:17:41 +08:00
|
|
|
showDownloadIcon && mergedStatus === 'done'
|
2020-11-21 19:00:11 +08:00
|
|
|
? actionIconRender(
|
|
|
|
(typeof customDownloadIcon === 'function'
|
|
|
|
? customDownloadIcon(file)
|
|
|
|
: customDownloadIcon) || <DownloadOutlined />,
|
|
|
|
() => onDownload(file),
|
|
|
|
prefixCls,
|
|
|
|
locale.downloadFile,
|
|
|
|
)
|
|
|
|
: null;
|
|
|
|
const downloadOrDelete = listType !== 'picture-card' && (
|
|
|
|
<span
|
|
|
|
key="download-delete"
|
|
|
|
className={classNames(`${prefixCls}-list-item-card-actions`, {
|
|
|
|
picture: listType === 'picture',
|
|
|
|
})}
|
|
|
|
>
|
|
|
|
{downloadIcon}
|
|
|
|
{removeIcon}
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
const listItemNameClass = classNames(`${prefixCls}-list-item-name`);
|
|
|
|
const preview = file.url
|
|
|
|
? [
|
|
|
|
<a
|
|
|
|
key="view"
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
className={listItemNameClass}
|
|
|
|
title={file.name}
|
|
|
|
{...linkProps}
|
|
|
|
href={file.url}
|
|
|
|
onClick={e => onPreview(file, e)}
|
|
|
|
>
|
|
|
|
{file.name}
|
|
|
|
</a>,
|
|
|
|
downloadOrDelete,
|
|
|
|
]
|
|
|
|
: [
|
|
|
|
<span
|
|
|
|
key="view"
|
|
|
|
className={listItemNameClass}
|
|
|
|
onClick={e => onPreview(file, e)}
|
|
|
|
title={file.name}
|
|
|
|
>
|
|
|
|
{file.name}
|
|
|
|
</span>,
|
|
|
|
downloadOrDelete,
|
|
|
|
];
|
|
|
|
const previewStyle: React.CSSProperties = {
|
|
|
|
pointerEvents: 'none',
|
|
|
|
opacity: 0.5,
|
|
|
|
};
|
|
|
|
const previewIcon = showPreviewIcon ? (
|
|
|
|
<a
|
|
|
|
href={file.url || file.thumbUrl}
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
style={file.url || file.thumbUrl ? undefined : previewStyle}
|
|
|
|
onClick={e => onPreview(file, e)}
|
|
|
|
title={locale.previewFile}
|
|
|
|
>
|
2021-09-08 09:30:09 +08:00
|
|
|
{typeof customPreviewIcon === 'function'
|
|
|
|
? customPreviewIcon(file)
|
|
|
|
: customPreviewIcon || <EyeOutlined />}
|
2020-11-21 19:00:11 +08:00
|
|
|
</a>
|
|
|
|
) : null;
|
|
|
|
|
2022-07-26 15:17:41 +08:00
|
|
|
const actions = listType === 'picture-card' && mergedStatus !== 'uploading' && (
|
2020-11-21 19:00:11 +08:00
|
|
|
<span className={`${prefixCls}-list-item-actions`}>
|
|
|
|
{previewIcon}
|
2022-07-26 15:17:41 +08:00
|
|
|
{mergedStatus === 'done' && downloadIcon}
|
2020-11-21 19:00:11 +08:00
|
|
|
{removeIcon}
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
|
|
|
|
let message;
|
|
|
|
if (file.response && typeof file.response === 'string') {
|
|
|
|
message = file.response;
|
|
|
|
} else {
|
2021-01-15 23:24:09 +08:00
|
|
|
message = file.error?.statusText || file.error?.message || locale.uploadError;
|
2020-11-21 19:00:11 +08:00
|
|
|
}
|
|
|
|
const iconAndPreview = (
|
|
|
|
<span className={spanClassName}>
|
|
|
|
{icon}
|
|
|
|
{preview}
|
|
|
|
</span>
|
|
|
|
);
|
2021-02-08 17:09:13 +08:00
|
|
|
const { getPrefixCls } = React.useContext(ConfigContext);
|
|
|
|
const rootPrefixCls = getPrefixCls();
|
2020-11-21 19:00:11 +08:00
|
|
|
|
|
|
|
const dom = (
|
|
|
|
<div className={infoUploadingClass}>
|
|
|
|
<div className={`${prefixCls}-list-item-info`}>{iconAndPreview}</div>
|
|
|
|
{actions}
|
|
|
|
{showProgress && (
|
2021-03-09 23:14:52 +08:00
|
|
|
<CSSMotion
|
|
|
|
motionName={`${rootPrefixCls}-fade`}
|
2022-07-26 15:17:41 +08:00
|
|
|
visible={mergedStatus === 'uploading'}
|
2021-03-09 23:14:52 +08:00
|
|
|
motionDeadline={2000}
|
|
|
|
>
|
2020-11-21 19:00:11 +08:00
|
|
|
{({ className: motionClassName }) => {
|
|
|
|
// show loading icon if upload progress listener is disabled
|
|
|
|
const loadingProgress =
|
|
|
|
'percent' in file ? (
|
|
|
|
<Progress {...progressProps} type="line" percent={file.percent} />
|
|
|
|
) : null;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={classNames(`${prefixCls}-list-item-progress`, motionClassName)}>
|
|
|
|
{loadingProgress}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}}
|
|
|
|
</CSSMotion>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
const listContainerNameClass = classNames(`${prefixCls}-list-${listType}-container`, className);
|
|
|
|
const item =
|
2022-07-26 15:17:41 +08:00
|
|
|
mergedStatus === 'error' ? (
|
2020-11-21 19:00:11 +08:00
|
|
|
<Tooltip title={message} getPopupContainer={node => node.parentNode as HTMLElement}>
|
|
|
|
{dom}
|
|
|
|
</Tooltip>
|
|
|
|
) : (
|
|
|
|
dom
|
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={listContainerNameClass} style={style} ref={ref}>
|
2021-05-06 14:12:26 +08:00
|
|
|
{itemRender
|
|
|
|
? itemRender(item, file, items, {
|
|
|
|
download: onDownload.bind(null, file),
|
|
|
|
preview: onPreview.bind(null, file),
|
|
|
|
remove: onClose.bind(null, file),
|
|
|
|
})
|
|
|
|
: item}
|
2020-11-21 19:00:11 +08:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
);
|
|
|
|
|
|
|
|
export default ListItem;
|