mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 28 Packages Projects Releases Wiki Activity

refactor: UploadList use rc-motion instead of rc-animate (#27923)

Browse Source 
* chore: Update rc-motion version

* refactor: Move item into single file

* refactor: Use CSSMotion of progress bar

* chore: part style it

* chore: slit style of pic card

* chore: RM count-x

* support appendAction back

* chore: Style smooth

* fix progress makes shaking

* docs: clean up demo

* test: Update snapshot

* test: fix test case

* fix: lint

* test: Update snapshot

* test: coverage

* clean up
This commit is contained in:
二货机器人 2020-11-21 19:00:11 +08:00 committed by GitHub
parent 8a1dfe8af1
commit 388edca10b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 3274 additions and 3107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/_util/reactNode.ts
View File

@ -13,7 +13,10 @@ export function replaceElement(
): React.ReactNode {
if (!isValidElement(element)) return replacement;
return React.cloneElement(element, typeof props === 'function' ? props(element.props) : props);
return React.cloneElement(
element,
typeof props === 'function' ? props(element.props || {}) : props,
);
}
export function cloneElement(element: React.ReactNode, props?: RenderProps): React.ReactElement {

72
components/config-provider/__tests__/__snapshots__/components.test.js.snap
View File

@ -37674,16 +37674,17 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
class="config-upload-list config-upload-list-text"
>
<div
class=""
class="config-upload-list-text-container"
>
<span>
<div
class="config-upload-list-item config-upload-list-item-done config-upload-list-item-list-type-text"
>
<div
class="config-upload-list-item-info"
>
<span>
<span
class="config-upload-span"
>
<div
class="config-upload-text-icon"
>
@ -37708,13 +37709,13 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
</span>
</div>
<span
class="config-upload-list-item-name config-upload-list-item-name-icon-count-1"
class="config-upload-list-item-name"
title="xxx.png"
>
xxx.png
</span>
<span
class="config-upload-list-item-card-actions "
class="config-upload-list-item-card-actions"
>
<button
class="config-btn config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-card-actions-btn"
@ -37746,7 +37747,6 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
</span>
</div>
</div>
</span>
</div>
</div>
</span>
@ -37776,16 +37776,17 @@ exports[`ConfigProvider components Upload configProvider componentSize large 1`]
class="config-upload-list config-upload-list-text"
>
<div
class=""
class="config-upload-list-text-container"
>
<span>
<div
class="config-upload-list-item config-upload-list-item-done config-upload-list-item-list-type-text"
>
<div
class="config-upload-list-item-info"
>
<span>
<span
class="config-upload-span"
>
<div
class="config-upload-text-icon"
>
@ -37810,13 +37811,13 @@ exports[`ConfigProvider components Upload configProvider componentSize large 1`]
</span>
</div>
<span
class="config-upload-list-item-name config-upload-list-item-name-icon-count-1"
class="config-upload-list-item-name"
title="xxx.png"
>
xxx.png
</span>
<span
class="config-upload-list-item-card-actions "
class="config-upload-list-item-card-actions"
>
<button
class="config-btn config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-card-actions-btn"
@ -37848,7 +37849,6 @@ exports[`ConfigProvider components Upload configProvider componentSize large 1`]
</span>
</div>
</div>
</span>
</div>
</div>
</span>
@ -37878,16 +37878,17 @@ exports[`ConfigProvider components Upload configProvider componentSize middle 1`
class="config-upload-list config-upload-list-text"
>
<div
class=""
class="config-upload-list-text-container"
>
<span>
<div
class="config-upload-list-item config-upload-list-item-done config-upload-list-item-list-type-text"
>
<div
class="config-upload-list-item-info"
>
<span>
<span
class="config-upload-span"
>
<div
class="config-upload-text-icon"
>
@ -37912,13 +37913,13 @@ exports[`ConfigProvider components Upload configProvider componentSize middle 1`
</span>
</div>
<span
class="config-upload-list-item-name config-upload-list-item-name-icon-count-1"
class="config-upload-list-item-name"
title="xxx.png"
>
xxx.png
</span>
<span
class="config-upload-list-item-card-actions "
class="config-upload-list-item-card-actions"
>
<button
class="config-btn config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-card-actions-btn"
@ -37950,7 +37951,6 @@ exports[`ConfigProvider components Upload configProvider componentSize middle 1`
</span>
</div>
</div>
</span>
</div>
</div>
</span>
@ -37980,16 +37980,17 @@ exports[`ConfigProvider components Upload configProvider virtual and dropdownMat
class="ant-upload-list ant-upload-list-text"
>
<div
class=""
class="ant-upload-list-text-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-text-icon"
>
@ -38014,13 +38015,13 @@ exports[`ConfigProvider components Upload configProvider virtual and dropdownMat
</span>
</div>
<span
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
title="xxx.png"
>
xxx.png
</span>
<span
class="ant-upload-list-item-card-actions "
class="ant-upload-list-item-card-actions"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@ -38052,7 +38053,6 @@ exports[`ConfigProvider components Upload configProvider virtual and dropdownMat
</span>
</div>
</div>
</span>
</div>
</div>
</span>
@ -38082,16 +38082,17 @@ exports[`ConfigProvider components Upload normal 1`] = `
class="ant-upload-list ant-upload-list-text"
>
<div
class=""
class="ant-upload-list-text-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-text-icon"
>
@ -38116,13 +38117,13 @@ exports[`ConfigProvider components Upload normal 1`] = `
</span>
</div>
<span
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
title="xxx.png"
>
xxx.png
</span>
<span
class="ant-upload-list-item-card-actions "
class="ant-upload-list-item-card-actions"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@ -38154,7 +38155,6 @@ exports[`ConfigProvider components Upload normal 1`] = `
</span>
</div>
</div>
</span>
</div>
</div>
</span>
@ -38184,16 +38184,17 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
class="ant-upload-list ant-upload-list-text"
>
<div
class=""
class="ant-upload-list-text-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-text-icon"
>
@ -38218,13 +38219,13 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
</span>
</div>
<span
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
title="xxx.png"
>
xxx.png
</span>
<span
class="ant-upload-list-item-card-actions "
class="ant-upload-list-item-card-actions"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@ -38256,7 +38257,6 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
</span>
</div>
</div>
</span>
</div>
</div>
</span>

2
components/style/themes/default.less
View File

@ -860,7 +860,7 @@
// Skeleton
// ---
@skeleton-color: rgba(190, 190, 190, .2);
@skeleton-color: rgba(190, 190, 190, 0.2);
@skeleton-to-color: shade(@skeleton-color, 5%);
@skeleton-paragraph-margin-top: 28px;
@skeleton-paragraph-li-margin-top: @margin-md;

373
components/upload/UploadList.tsx
View File

@ -1,373 +0,0 @@
import * as React from 'react';
import Animate from 'rc-animate';
import classNames from 'classnames';
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';
import { cloneElement, isValidElement } from '../_util/reactNode';
import { UploadListProps, UploadFile, UploadListType } from './interface';
import { previewImage, isImageUrl } from './utils';
import Tooltip from '../tooltip';
import Progress from '../progress';
import { ConfigContext } from '../config-provider';
import Button, { ButtonProps } from '../button';
import useForceUpdate from '../_util/hooks/useForceUpdate';
const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProps> = (
{
listType,
previewFile,
onPreview,
onDownload,
onRemove,
locale,
iconRender,
isImageUrl: isImgUrl,
prefixCls: customizePrefixCls,
items = [],
showPreviewIcon,
showRemoveIcon,
showDownloadIcon,
removeIcon: customRemoveIcon,
downloadIcon: customDownloadIcon,
progress: progressProps,
appendAction,
itemRender,
},
ref,
) => {
const forceUpdate = useForceUpdate();
React.useEffect(() => {
if (listType !== 'picture' && listType !== 'picture-card') {
return;
}
(items || []).forEach(file => {
if (
typeof document === 'undefined' ||
typeof window === 'undefined' ||
!(window as any).FileReader ||
!(window as any).File ||
!(file.originFileObj instanceof File || file.originFileObj instanceof Blob) ||
file.thumbUrl !== undefined
) {
return;
}
file.thumbUrl = '';
if (previewFile) {
previewFile(file.originFileObj as File).then((previewDataUrl: string) => {
// Need append '' to avoid dead loop
file.thumbUrl = previewDataUrl || '';
forceUpdate();
});
}
});
}, [listType, items, previewFile]);
const handlePreview = (file: UploadFile, e: React.SyntheticEvent<HTMLElement>) => {
if (!onPreview) {
return;
}
e.preventDefault();
return onPreview(file);
};
const handleDownload = (file: UploadFile) => {
if (typeof onDownload === 'function') {
onDownload(file);
} else if (file.url) {
window.open(file.url);
}
};
const handleClose = (file: UploadFile) => {
if (onRemove) {
onRemove(file);
}
};
const handleIconRender = (file: UploadFile) => {
if (iconRender) {
return iconRender(file, listType);
}
const isLoading = file.status === 'uploading';
const fileIcon = isImgUrl && isImgUrl(file) ? <PictureTwoTone /> : <FileTwoTone />;
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;
};
const 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`,
};
if (isValidElement(customIcon)) {
const btnIcon = cloneElement(customIcon, {
...customIcon.props,
onClick: () => {},
});
return <Button {...btnProps} icon={btnIcon} />;
}
return (
<Button {...btnProps}>
<span>{customIcon}</span>
</Button>
);
};
// Test needs
React.useImperativeHandle(ref, () => ({
handlePreview,
handleDownload,
}));
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('upload', customizePrefixCls);
const list = items.map(file => {
let progress;
const iconNode = handleIconRender(file);
let icon = <div className={`${prefixCls}-text-icon`}>{iconNode}</div>;
if (listType === 'picture' || listType === 'picture-card') {
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>;
} else {
const thumbnail =
isImgUrl && isImgUrl(file) ? (
<img
src={file.thumbUrl || file.url}
alt={file.name}
className={`${prefixCls}-list-item-image`}
/>
) : (
iconNode
);
const aClassName = classNames({
[`${prefixCls}-list-item-thumbnail`]: true,
[`${prefixCls}-list-item-file`]: isImgUrl && !isImgUrl(file),
});
icon = (
<a
className={aClassName}
onClick={e => handlePreview(file, e)}
href={file.url || file.thumbUrl}
target="_blank"
rel="noopener noreferrer"
>
{thumbnail}
</a>
);
}
}
if (file.status === 'uploading') {
// show loading icon if upload progress listener is disabled
const loadingProgress =
'percent' in file ? (
<Progress {...progressProps} type="line" percent={file.percent} />
) : null;
progress = (
<div className={`${prefixCls}-list-item-progress`} key="progress">
{loadingProgress}
</div>
);
}
const infoUploadingClass = classNames({
[`${prefixCls}-list-item`]: true,
[`${prefixCls}-list-item-${file.status}`]: true,
[`${prefixCls}-list-item-list-type-${listType}`]: true,
});
const linkProps =
typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps;
const removeIcon = showRemoveIcon
? handleActionIconRender(
(typeof customRemoveIcon === 'function' ? customRemoveIcon(file) : customRemoveIcon) || (
<DeleteOutlined />
),
() => handleClose(file),
prefixCls,
locale.removeFile,
)
: null;
const downloadIcon =
showDownloadIcon && file.status === 'done'
? handleActionIconRender(
(typeof customDownloadIcon === 'function'
? customDownloadIcon(file)
: customDownloadIcon) || <DownloadOutlined />,
() => handleDownload(file),
prefixCls,
locale.downloadFile,
)
: null;
const downloadOrDelete = listType !== 'picture-card' && (
<span
key="download-delete"
className={`${prefixCls}-list-item-card-actions ${listType === 'picture' ? 'picture' : ''}`}
>
{downloadIcon}
{removeIcon}
</span>
);
const listItemNameClass = classNames({
[`${prefixCls}-list-item-name`]: true,
[`${prefixCls}-list-item-name-icon-count-${
[downloadIcon, removeIcon].filter(x => x).length
}`]: true,
});
const preview = file.url
? [
<a
key="view"
target="_blank"
rel="noopener noreferrer"
className={listItemNameClass}
title={file.name}
{...linkProps}
href={file.url}
onClick={e => handlePreview(file, e)}
>
{file.name}
</a>,
downloadOrDelete,
]
: [
<span
key="view"
className={listItemNameClass}
onClick={e => handlePreview(file, e)}
title={file.name}
>
{file.name}
</span>,
downloadOrDelete,
];
const style: 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 : style}
onClick={e => handlePreview(file, e)}
title={locale.previewFile}
>
<EyeOutlined />
</a>
) : null;
const actions = listType === 'picture-card' && file.status !== 'uploading' && (
<span className={`${prefixCls}-list-item-actions`}>
{previewIcon}
{file.status === 'done' && downloadIcon}
{removeIcon}
</span>
);
let message;
if (file.response && typeof file.response === 'string') {
message = file.response;
} else {
message = (file.error && file.error.statusText) || locale.uploadError;
}
const iconAndPreview = (
<span>
{icon}
{preview}
</span>
);
const dom = (
<div className={infoUploadingClass}>
<div className={`${prefixCls}-list-item-info`}>{iconAndPreview}</div>
{actions}
<Animate transitionName="fade" component="">
{progress}
</Animate>
</div>
);
const listContainerNameClass = classNames({
[`${prefixCls}-list-picture-card-container`]: listType === 'picture-card',
});
const item =
file.status === 'error' ? (
<Tooltip title={message} getPopupContainer={node => node.parentNode as HTMLElement}>
{dom}
</Tooltip>
) : (
<span>{dom}</span>
);
return (
<div key={file.uid} className={listContainerNameClass}>
{itemRender ? itemRender(item, file, items) : item}
</div>
);
});
const listClassNames = classNames({
[`${prefixCls}-list`]: true,
[`${prefixCls}-list-${listType}`]: true,
[`${prefixCls}-list-rtl`]: direction === 'rtl',
});
const animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate';
const transitionName = list.length === 0 ? '' : `${prefixCls}-${animationDirection}`;
return (
<Animate transitionName={transitionName} component="div" className={listClassNames}>
{list}
{React.isValidElement(appendAction)
? React.cloneElement(appendAction, { key: 'appendAction' })
: appendAction}
</Animate>
);
};
const UploadList = React.forwardRef<unknown, UploadListProps>(InternalUploadList);
UploadList.displayName = 'UploadList';
UploadList.defaultProps = {
listType: 'text' as UploadListType, // or picture
progress: {
strokeWidth: 2,
showInfo: false,
},
showRemoveIcon: true,
showDownloadIcon: false,
showPreviewIcon: true,
previewFile: previewImage,
isImageUrl,
};
export default UploadList;

273
components/upload/UploadList/ListItem.tsx Normal file
View File

@ -0,0 +1,273 @@
import * as React from 'react';
import CSSMotion from 'rc-motion';
import classNames from 'classnames';
import EyeOutlined from '@ant-design/icons/EyeOutlined';
import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
import DownloadOutlined from '@ant-design/icons/DownloadOutlined';
import Tooltip from '../../tooltip';
import Progress from '../../progress';
import {
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);
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,
removeIcon: customRemoveIcon,
downloadIcon: customDownloadIcon,
onPreview,
onDownload,
onClose,
}: ListItemProps,
ref: React.Ref<HTMLDivElement>,
) => {
// 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') {
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>;
} else {
const thumbnail = isImgUrl?.(file) ? (
<img
src={file.thumbUrl || file.url}
alt={file.name}
className={`${prefixCls}-list-item-image`}
/>
) : (
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,
[`${prefixCls}-list-item-${file.status}`]: true,
[`${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 =
showDownloadIcon && file.status === 'done'
? 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}
>
<EyeOutlined />
</a>
) : null;
const actions = listType === 'picture-card' && file.status !== 'uploading' && (
<span className={`${prefixCls}-list-item-actions`}>
{previewIcon}
{file.status === 'done' && downloadIcon}
{removeIcon}
</span>
);
let message;
if (file.response && typeof file.response === 'string') {
message = file.response;
} else {
message = (file.error && file.error.statusText) || locale.uploadError;
}
const iconAndPreview = (
<span className={spanClassName}>
{icon}
{preview}
</span>
);
const dom = (
<div className={infoUploadingClass}>
<div className={`${prefixCls}-list-item-info`}>{iconAndPreview}</div>
{actions}
{showProgress && (
<CSSMotion motionName="fade" visible={file.status === 'uploading'}>
{({ 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 =
file.status === 'error' ? (
<Tooltip title={message} getPopupContainer={node => node.parentNode as HTMLElement}>
{dom}
</Tooltip>
) : (
dom
);
return (
<div className={listContainerNameClass} style={style} ref={ref}>
{itemRender ? itemRender(item, file, items) : item}
</div>
);
},
);
export default ListItem;

262
components/upload/UploadList/index.tsx Normal file
View File

@ -0,0 +1,262 @@
import * as React from 'react';
import CSSMotion, { CSSMotionList, CSSMotionListProps } from 'rc-motion';
import classNames from 'classnames';
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 { cloneElement, isValidElement } from '../../_util/reactNode';
import { UploadListProps, UploadFile, UploadListType } from '../interface';
import { previewImage, isImageUrl } from '../utils';
import collapseMotion from '../../_util/motion';
import { ConfigContext } from '../../config-provider';
import Button, { ButtonProps } from '../../button';
import useForceUpdate from '../../_util/hooks/useForceUpdate';
import ListItem from './ListItem';
const listItemMotion: Partial<CSSMotionListProps> = {
...collapseMotion,
};
delete listItemMotion.onAppearEnd;
delete listItemMotion.onEnterEnd;
delete listItemMotion.onLeaveEnd;
const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProps> = (
{
listType,
previewFile,
onPreview,
onDownload,
onRemove,
locale,
iconRender,
isImageUrl: isImgUrl,
prefixCls: customizePrefixCls,
items = [],
showPreviewIcon,
showRemoveIcon,
showDownloadIcon,
removeIcon,
downloadIcon,
progress,
appendAction,
itemRender,
},
ref,
) => {
const forceUpdate = useForceUpdate();
const [motionAppear, setMotionAppear] = React.useState(false);
// ============================= Effect =============================
React.useEffect(() => {
if (listType !== 'picture' && listType !== 'picture-card') {
return;
}
(items || []).forEach(file => {
if (
typeof document === 'undefined' ||
typeof window === 'undefined' ||
!(window as any).FileReader ||
!(window as any).File ||
!(file.originFileObj instanceof File || file.originFileObj instanceof Blob) ||
file.thumbUrl !== undefined
) {
return;
}
file.thumbUrl = '';
if (previewFile) {
previewFile(file.originFileObj as File).then((previewDataUrl: string) => {
// Need append '' to avoid dead loop
file.thumbUrl = previewDataUrl || '';
forceUpdate();
});
}
});
}, [listType, items, previewFile]);
React.useEffect(() => {
setMotionAppear(true);
}, []);
// ============================= Events =============================
const onInternalPreview = (file: UploadFile, e: React.SyntheticEvent<HTMLElement>) => {
if (!onPreview) {
return;
}
e.preventDefault();
return onPreview(file);
};
const onInternalDownload = (file: UploadFile) => {
if (typeof onDownload === 'function') {
onDownload(file);
} else if (file.url) {
window.open(file.url);
}
};
const onInternalClose = (file: UploadFile) => {
if (onRemove) {
onRemove(file);
}
};
const internalIconRender = (file: UploadFile) => {
if (iconRender) {
return iconRender(file, listType);
}
const isLoading = file.status === 'uploading';
const fileIcon = isImgUrl && isImgUrl(file) ? <PictureTwoTone /> : <FileTwoTone />;
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;
};
const actionIconRender = (
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`,
};
if (isValidElement(customIcon)) {
const btnIcon = cloneElement(customIcon, {
...customIcon.props,
onClick: () => {},
});
return <Button {...btnProps} icon={btnIcon} />;
}
return (
<Button {...btnProps}>
<span>{customIcon}</span>
</Button>
);
};
// ============================== Ref ===============================
// Test needs
React.useImperativeHandle(ref, () => ({
handlePreview: onInternalPreview,
handleDownload: onInternalDownload,
}));
const { getPrefixCls, direction } = React.useContext(ConfigContext);
// ============================= Render =============================
const prefixCls = getPrefixCls('upload', customizePrefixCls);
const listClassNames = classNames({
[`${prefixCls}-list`]: true,
[`${prefixCls}-list-${listType}`]: true,
[`${prefixCls}-list-rtl`]: direction === 'rtl',
});
// >>> Motion config
const motionKeyList = [
...items.map(file => ({
key: file.uid,
file,
})),
];
const animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate';
// const transitionName = list.length === 0 ? '' : `${prefixCls}-${animationDirection}`;
let motionConfig: Omit<CSSMotionListProps, 'onVisibleChanged'> = {
motionName: `${prefixCls}-${animationDirection}`,
keys: motionKeyList,
motionAppear,
};
if (listType !== 'picture-card') {
motionConfig = {
...listItemMotion,
...motionConfig,
};
}
return (
<div className={listClassNames}>
<CSSMotionList {...motionConfig} component={false}>
{({ key, file, className: motionClassName, style: motionStyle }) => {
return (
<ListItem
key={key}
locale={locale}
prefixCls={prefixCls}
className={motionClassName}
style={motionStyle}
file={file}
items={items}
progress={progress}
listType={listType}
isImgUrl={isImgUrl}
showPreviewIcon={showPreviewIcon}
showRemoveIcon={showRemoveIcon}
showDownloadIcon={showDownloadIcon}
removeIcon={removeIcon}
downloadIcon={downloadIcon}
iconRender={internalIconRender}
actionIconRender={actionIconRender}
itemRender={itemRender}
onPreview={onInternalPreview}
onDownload={onInternalDownload}
onClose={onInternalClose}
/>
);
}}
</CSSMotionList>
{/* Append action */}
{appendAction && (
<CSSMotion {...motionConfig}>
{({ className: motionClassName, style: motionStyle }) => {
return cloneElement(appendAction, oriProps => ({
className: classNames(oriProps.className, motionClassName),
style: {
...motionStyle,
...oriProps.style,
},
}));
}}
</CSSMotion>
)}
</div>
);
};
const UploadList = React.forwardRef<unknown, UploadListProps>(InternalUploadList);
UploadList.displayName = 'UploadList';
UploadList.defaultProps = {
listType: 'text' as UploadListType, // or picture
progress: {
strokeWidth: 2,
showInfo: false,
},
showRemoveIcon: true,
showDownloadIcon: false,
showPreviewIcon: true,
previewFile: previewImage,
isImageUrl,
};
export default UploadList;

282
components/upload/__tests__/__snapshots__/demo.test.js.snap
View File

@ -114,14 +114,15 @@ exports[`renders ./components/upload/demo/crop-image.md correctly 1`] = `
<div
class="ant-upload-list-picture-card-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
@ -135,7 +136,7 @@ exports[`renders ./components/upload/demo/crop-image.md correctly 1`] = `
/>
</a>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
@ -202,7 +203,6 @@ exports[`renders ./components/upload/demo/crop-image.md correctly 1`] = `
</button>
</span>
</div>
</span>
</div>
<div
class="ant-upload ant-upload-select ant-upload-select-picture-card"
@ -326,16 +326,17 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
class="ant-upload-list ant-upload-list-text"
>
<div
class=""
class="ant-upload-list-text-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-text-icon"
>
@ -360,7 +361,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
</span>
</div>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="http://www.baidu.com/xxx.png"
rel="noopener noreferrer"
target="_blank"
@ -369,7 +370,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
xxx.png
</a>
<span
class="ant-upload-list-item-card-actions "
class="ant-upload-list-item-card-actions"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@ -401,19 +402,19 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
</span>
</div>
</div>
</span>
</div>
<div
class=""
class="ant-upload-list-text-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-text-icon"
>
@ -438,7 +439,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
</span>
</div>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="http://www.baidu.com/yyy.png"
rel="noopener noreferrer"
target="_blank"
@ -447,7 +448,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
yyy.png
</a>
<span
class="ant-upload-list-item-card-actions "
class="ant-upload-list-item-card-actions"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@ -479,10 +480,9 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
</span>
</div>
</div>
</span>
</div>
<div
class=""
class="ant-upload-list-text-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-error ant-upload-list-item-list-type-text"
@ -490,7 +490,9 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-text-icon"
>
@ -515,7 +517,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
</span>
</div>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="http://www.baidu.com/zzz.png"
rel="noopener noreferrer"
target="_blank"
@ -524,7 +526,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
zzz.png
</a>
<span
class="ant-upload-list-item-card-actions "
class="ant-upload-list-item-card-actions"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@ -726,20 +728,21 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
class="ant-upload-list ant-upload-list-text"
>
<div
class=""
class="ant-upload-list-text-container"
>
<div
class="ant-upload-draggable-list-item "
style="cursor:move"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-text-icon"
>
@ -764,7 +767,7 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
</span>
</div>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
@ -773,7 +776,7 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
image1.png
</a>
<span
class="ant-upload-list-item-card-actions "
class="ant-upload-list-item-card-actions"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@ -805,24 +808,24 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
</span>
</div>
</div>
</span>
</div>
</div>
<div
class=""
class="ant-upload-list-text-container"
>
<div
class="ant-upload-draggable-list-item "
style="cursor:move"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-text-icon"
>
@ -847,7 +850,7 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
</span>
</div>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
@ -856,7 +859,7 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
image2.png
</a>
<span
class="ant-upload-list-item-card-actions "
class="ant-upload-list-item-card-actions"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@ -888,24 +891,24 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
</span>
</div>
</div>
</span>
</div>
</div>
<div
class=""
class="ant-upload-list-text-container"
>
<div
class="ant-upload-draggable-list-item "
style="cursor:move"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-text-icon"
>
@ -930,7 +933,7 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
</span>
</div>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
@ -939,7 +942,7 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
image3.png
</a>
<span
class="ant-upload-list-item-card-actions "
class="ant-upload-list-item-card-actions"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@ -971,24 +974,24 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
</span>
</div>
</div>
</span>
</div>
</div>
<div
class=""
class="ant-upload-list-text-container"
>
<div
class="ant-upload-draggable-list-item "
style="cursor:move"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-text-icon"
>
@ -1013,7 +1016,7 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
</span>
</div>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
@ -1022,7 +1025,7 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
image4.png
</a>
<span
class="ant-upload-list-item-card-actions "
class="ant-upload-list-item-card-actions"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@ -1054,11 +1057,10 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
</span>
</div>
</div>
</span>
</div>
</div>
<div
class=""
class="ant-upload-list-text-container"
>
<div
class="ant-upload-draggable-list-item "
@ -1070,7 +1072,9 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-text-icon"
>
@ -1095,13 +1099,13 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
</span>
</div>
<span
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
title="image.png"
>
image.png
</span>
<span
class="ant-upload-list-item-card-actions "
class="ant-upload-list-item-card-actions"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@ -1149,14 +1153,15 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
<div
class="ant-upload-list-picture-card-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<a
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
href="http://cdn07.foxitsoftware.cn/pub/foxit/cpdf/FoxitCompanyProfile.pdf"
@ -1201,7 +1206,7 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
</span>
</a>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="http://cdn07.foxitsoftware.cn/pub/foxit/cpdf/FoxitCompanyProfile.pdf"
rel="noopener noreferrer"
target="_blank"
@ -1268,19 +1273,19 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
</button>
</span>
</div>
</span>
</div>
<div
class="ant-upload-list-picture-card-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<a
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.doc"
@ -1317,7 +1322,7 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
</span>
</a>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.doc"
rel="noopener noreferrer"
target="_blank"
@ -1384,7 +1389,6 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
</button>
</span>
</div>
</span>
</div>
<div
class="ant-upload-list-picture-card-container"
@ -1395,7 +1399,9 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
>
@ -1437,7 +1443,7 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
</span>
</div>
<span
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
title="image.png"
>
image.png
@ -1511,7 +1517,9 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
>
@ -1553,7 +1561,7 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
</span>
</div>
<span
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
title="pdf.pdf"
>
pdf.pdf
@ -1627,7 +1635,9 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
>
@ -1661,7 +1671,7 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
</span>
</div>
<span
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
title="doc.doc"
>
doc.doc
@ -1826,16 +1836,17 @@ exports[`renders ./components/upload/demo/fileList.md correctly 1`] = `
class="ant-upload-list ant-upload-list-text"
>
<div
class=""
class="ant-upload-list-text-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-text-icon"
>
@ -1860,7 +1871,7 @@ exports[`renders ./components/upload/demo/fileList.md correctly 1`] = `
</span>
</div>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="http://www.baidu.com/xxx.png"
rel="noopener noreferrer"
target="_blank"
@ -1869,7 +1880,7 @@ exports[`renders ./components/upload/demo/fileList.md correctly 1`] = `
xxx.png
</a>
<span
class="ant-upload-list-item-card-actions "
class="ant-upload-list-item-card-actions"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@ -1901,7 +1912,6 @@ exports[`renders ./components/upload/demo/fileList.md correctly 1`] = `
</span>
</div>
</div>
</span>
</div>
</div>
</span>
@ -1917,14 +1927,15 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
<div
class="ant-upload-list-picture-card-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
@ -1938,7 +1949,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
/>
</a>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
@ -2005,19 +2016,19 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
</button>
</span>
</div>
</span>
</div>
<div
class="ant-upload-list-picture-card-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
@ -2031,7 +2042,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
/>
</a>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
@ -2098,19 +2109,19 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
</button>
</span>
</div>
</span>
</div>
<div
class="ant-upload-list-picture-card-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
@ -2124,7 +2135,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
/>
</a>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
@ -2191,19 +2202,19 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
</button>
</span>
</div>
</span>
</div>
<div
class="ant-upload-list-picture-card-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
@ -2217,7 +2228,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
/>
</a>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
@ -2284,26 +2295,26 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
</button>
</span>
</div>
</span>
</div>
<div
class="ant-upload-list-picture-card-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-uploading ant-upload-list-item-list-type-picture-card"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-list-item-thumbnail"
>
Uploading...
</div>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
@ -2313,29 +2324,8 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
</a>
</span>
</div>
<div
class="ant-upload-list-item-progress"
>
<div
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default"
>
<div
class="ant-progress-outer"
>
<div
class="ant-progress-inner"
>
<div
class="ant-progress-bg"
style="width:50%;height:2px;border-radius:"
/>
</div>
</div>
</div>
</div>
</div>
</span>
</div>
<div
class="ant-upload-list-picture-card-container"
>
@ -2345,7 +2335,9 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
>
@ -2387,7 +2379,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
</span>
</div>
<span
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
title="image.png"
>
image.png
@ -2552,16 +2544,17 @@ Array [
class="ant-upload-list ant-upload-list-picture"
>
<div
class=""
class="ant-upload-list-picture-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
@ -2575,7 +2568,7 @@ Array [
/>
</a>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
@ -2616,10 +2609,9 @@ Array [
</span>
</div>
</div>
</span>
</div>
<div
class=""
class="ant-upload-list-picture-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-error ant-upload-list-item-list-type-picture"
@ -2627,7 +2619,9 @@ Array [
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
>
@ -2669,7 +2663,7 @@ Array [
</span>
</div>
<span
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
title="yyy.png"
>
yyy.png
@ -2761,16 +2755,17 @@ Array [
class="ant-upload-list ant-upload-list-picture"
>
<div
class=""
class="ant-upload-list-picture-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
@ -2784,7 +2779,7 @@ Array [
/>
</a>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
@ -2825,10 +2820,9 @@ Array [
</span>
</div>
</div>
</span>
</div>
<div
class=""
class="ant-upload-list-picture-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-error ant-upload-list-item-list-type-picture"
@ -2836,7 +2830,9 @@ Array [
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
>
@ -2878,7 +2874,7 @@ Array [
</span>
</div>
<span
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
title="yyy.png"
>
yyy.png
@ -3076,16 +3072,17 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
class="ant-upload-list ant-upload-list-text"
>
<div
class=""
class="ant-upload-list-text-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-text-icon"
>
@ -3110,7 +3107,7 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
</span>
</div>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
class="ant-upload-list-item-name"
href="http://www.baidu.com/xxx.png"
rel="noopener noreferrer"
target="_blank"
@ -3119,7 +3116,7 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
xxx.png
</a>
<span
class="ant-upload-list-item-card-actions "
class="ant-upload-list-item-card-actions"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-upload-list-item-card-actions-btn"
@ -3160,19 +3157,19 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
</span>
</div>
</div>
</span>
</div>
<div
class=""
class="ant-upload-list-text-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-text-icon"
>
@ -3197,7 +3194,7 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
</span>
</div>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
class="ant-upload-list-item-name"
href="http://www.baidu.com/yyy.png"
rel="noopener noreferrer"
target="_blank"
@ -3206,7 +3203,7 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
yyy.png
</a>
<span
class="ant-upload-list-item-card-actions "
class="ant-upload-list-item-card-actions"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-upload-list-item-card-actions-btn"
@ -3247,10 +3244,9 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
</span>
</div>
</div>
</span>
</div>
<div
class=""
class="ant-upload-list-text-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-error ant-upload-list-item-list-type-text"
@ -3258,7 +3254,9 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-text-icon"
>
@ -3283,7 +3281,7 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
</span>
</div>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="http://www.baidu.com/zzz.png"
rel="noopener noreferrer"
target="_blank"
@ -3292,7 +3290,7 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
zzz.png
</a>
<span
class="ant-upload-list-item-card-actions "
class="ant-upload-list-item-card-actions"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"

250
components/upload/__tests__/__snapshots__/uploadlist.test.js.snap
View File

@ -28,7 +28,8 @@ exports[`Upload List handle error 1`] = `
class="ant-upload-list ant-upload-list-text"
>
<div
class="ant-upload-animate-enter ant-upload-animate-enter-active"
class="ant-upload-list-text-container ant-upload-animate-appear ant-upload-animate-appear-start ant-upload-animate"
style="height: 0px; opacity: 0;"
>
<div
class="ant-upload-list-item ant-upload-list-item-error ant-upload-list-item-list-type-text"
@ -36,7 +37,9 @@ exports[`Upload List handle error 1`] = `
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-text-icon"
>
@ -61,13 +64,13 @@ exports[`Upload List handle error 1`] = `
</span>
</div>
<span
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
title="foo.png"
>
foo.png
</span>
<span
class="ant-upload-list-item-card-actions "
class="ant-upload-list-item-card-actions"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@ -109,7 +112,7 @@ exports[`Upload List itemRender 1`] = `
class="ant-upload-list ant-upload-list-text"
>
<div
class=""
class="ant-upload-list-text-container"
>
<span
class="custom-item-render"
@ -118,7 +121,7 @@ exports[`Upload List itemRender 1`] = `
</span>
</div>
<div
class=""
class="ant-upload-list-text-container"
>
<span
class="custom-item-render"
@ -157,16 +160,18 @@ exports[`Upload List should be uploading when upload a file 1`] = `
class="ant-upload-list ant-upload-list-text"
>
<div
class="ant-upload-animate-enter"
class="ant-upload-list-text-container ant-upload-animate-appear ant-upload-animate-appear-start ant-upload-animate"
style="height: 0px; opacity: 0;"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-uploading ant-upload-list-item-list-type-text"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-text-icon"
>
@ -191,13 +196,13 @@ exports[`Upload List should be uploading when upload a file 1`] = `
</span>
</div>
<span
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
title="foo.png"
>
foo.png
</span>
<span
class="ant-upload-list-item-card-actions "
class="ant-upload-list-item-card-actions"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@ -228,30 +233,9 @@ exports[`Upload List should be uploading when upload a file 1`] = `
</span>
</span>
</div>
<div
class="ant-upload-list-item-progress"
>
<div
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default"
>
<div
class="ant-progress-outer"
>
<div
class="ant-progress-inner"
>
<div
class="ant-progress-bg"
style="width: 0%; height: 2px;"
/>
</div>
</div>
</div>
</div>
</div>
</span>
</div>
</div>
</span>
`;
@ -283,16 +267,18 @@ exports[`Upload List should be uploading when upload a file 2`] = `
class="ant-upload-list ant-upload-list-text"
>
<div
class="ant-upload-animate-enter ant-upload-animate-enter-active"
class="ant-upload-list-text-container ant-upload-animate-appear ant-upload-animate-appear-start ant-upload-animate"
style="height: 0px; opacity: 0;"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-text-icon"
>
@ -317,13 +303,13 @@ exports[`Upload List should be uploading when upload a file 2`] = `
</span>
</div>
<span
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
title="foo.png"
>
foo.png
</span>
<span
class="ant-upload-list-item-card-actions "
class="ant-upload-list-item-card-actions"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@ -354,30 +340,9 @@ exports[`Upload List should be uploading when upload a file 2`] = `
</span>
</span>
</div>
<div
class="ant-upload-list-item-progress fade-leave"
>
<div
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default"
>
<div
class="ant-progress-outer"
>
<div
class="ant-progress-inner"
>
<div
class="ant-progress-bg"
style="width: 0%; height: 2px;"
/>
</div>
</div>
</div>
</div>
</div>
</span>
</div>
</div>
</span>
`;
@ -409,16 +374,17 @@ exports[`Upload List should non-image format file preview 1`] = `
class="ant-upload-list ant-upload-list-picture"
>
<div
class=""
class="ant-upload-list-picture-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<a
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
href="https://cdn.xxx.com/aaa.zip"
@ -451,7 +417,7 @@ exports[`Upload List should non-image format file preview 1`] = `
</span>
</a>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://cdn.xxx.com/aaa.zip"
rel="noopener noreferrer"
target="_blank"
@ -492,19 +458,19 @@ exports[`Upload List should non-image format file preview 1`] = `
</span>
</div>
</div>
</span>
</div>
<div
class=""
class="ant-upload-list-picture-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://cdn.xxx.com/aaa"
@ -518,7 +484,7 @@ exports[`Upload List should non-image format file preview 1`] = `
/>
</a>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://cdn.xxx.com/aaa"
rel="noopener noreferrer"
target="_blank"
@ -559,19 +525,19 @@ exports[`Upload List should non-image format file preview 1`] = `
</span>
</div>
</div>
</span>
</div>
<div
class=""
class="ant-upload-list-picture-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<a
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
href="https://cdn.xxx.com/aaa.xx"
@ -604,7 +570,7 @@ exports[`Upload List should non-image format file preview 1`] = `
</span>
</a>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://cdn.xxx.com/aaa.xx"
rel="noopener noreferrer"
target="_blank"
@ -645,19 +611,19 @@ exports[`Upload List should non-image format file preview 1`] = `
</span>
</div>
</div>
</span>
</div>
<div
class=""
class="ant-upload-list-picture-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<a
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
href="https://cdn.xxx.com/aaa.png/xx.xx"
@ -690,7 +656,7 @@ exports[`Upload List should non-image format file preview 1`] = `
</span>
</a>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://cdn.xxx.com/aaa.png/xx.xx"
rel="noopener noreferrer"
target="_blank"
@ -731,19 +697,19 @@ exports[`Upload List should non-image format file preview 1`] = `
</span>
</div>
</div>
</span>
</div>
<div
class=""
class="ant-upload-list-picture-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://cdn.xxx.com/xx.xx/aaa.png"
@ -757,7 +723,7 @@ exports[`Upload List should non-image format file preview 1`] = `
/>
</a>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://cdn.xxx.com/xx.xx/aaa.png"
rel="noopener noreferrer"
target="_blank"
@ -798,19 +764,19 @@ exports[`Upload List should non-image format file preview 1`] = `
</span>
</div>
</div>
</span>
</div>
<div
class=""
class="ant-upload-list-picture-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://cdn.xxx.com/xx.xx/aaa.png"
@ -824,7 +790,7 @@ exports[`Upload List should non-image format file preview 1`] = `
/>
</a>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://cdn.xxx.com/xx.xx/aaa.png"
rel="noopener noreferrer"
target="_blank"
@ -865,19 +831,19 @@ exports[`Upload List should non-image format file preview 1`] = `
</span>
</div>
</div>
</span>
</div>
<div
class=""
class="ant-upload-list-picture-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://cdn.xxx.com/xx.xx/aaa.png?query=123"
@ -891,7 +857,7 @@ exports[`Upload List should non-image format file preview 1`] = `
/>
</a>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://cdn.xxx.com/xx.xx/aaa.png?query=123"
rel="noopener noreferrer"
target="_blank"
@ -932,19 +898,19 @@ exports[`Upload List should non-image format file preview 1`] = `
</span>
</div>
</div>
</span>
</div>
<div
class=""
class="ant-upload-list-picture-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://cdn.xxx.com/xx.xx/aaa.png#anchor"
@ -958,7 +924,7 @@ exports[`Upload List should non-image format file preview 1`] = `
/>
</a>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://cdn.xxx.com/xx.xx/aaa.png#anchor"
rel="noopener noreferrer"
target="_blank"
@ -999,19 +965,19 @@ exports[`Upload List should non-image format file preview 1`] = `
</span>
</div>
</div>
</span>
</div>
<div
class=""
class="ant-upload-list-picture-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://cdn.xxx.com/xx.xx/aaa.png?query=some.query.with.dot"
@ -1025,7 +991,7 @@ exports[`Upload List should non-image format file preview 1`] = `
/>
</a>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://cdn.xxx.com/xx.xx/aaa.png?query=some.query.with.dot"
rel="noopener noreferrer"
target="_blank"
@ -1066,19 +1032,19 @@ exports[`Upload List should non-image format file preview 1`] = `
</span>
</div>
</div>
</span>
</div>
<div
class=""
class="ant-upload-list-picture-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://publish-pic-cpu.baidu.com/1296beb3-50d9-4276-885f-52645cbb378e.jpeg@w_228%2ch_152"
@ -1092,7 +1058,7 @@ exports[`Upload List should non-image format file preview 1`] = `
/>
</a>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://publish-pic-cpu.baidu.com/1296beb3-50d9-4276-885f-52645cbb378e.jpeg@w_228%2ch_152"
rel="noopener noreferrer"
target="_blank"
@ -1133,7 +1099,6 @@ exports[`Upload List should non-image format file preview 1`] = `
</span>
</div>
</div>
</span>
</div>
</div>
</span>
@ -1167,16 +1132,17 @@ exports[`Upload List should support removeIcon and downloadIcon 1`] = `
class="ant-upload-list ant-upload-list-picture"
>
<div
class=""
class="ant-upload-list-picture-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-uploading ant-upload-list-item-list-type-picture"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-list-item-thumbnail"
>
@ -1201,7 +1167,7 @@ exports[`Upload List should support removeIcon and downloadIcon 1`] = `
</span>
</div>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://cdn.xxx.com/aaa"
rel="noopener noreferrer"
target="_blank"
@ -1224,23 +1190,20 @@ exports[`Upload List should support removeIcon and downloadIcon 1`] = `
</span>
</span>
</div>
<div
class="ant-upload-list-item-progress"
/>
</div>
</span>
</div>
<div
class=""
class="ant-upload-list-picture-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://cdn.xxx.com/aaa"
@ -1254,7 +1217,7 @@ exports[`Upload List should support removeIcon and downloadIcon 1`] = `
/>
</a>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
class="ant-upload-list-item-name"
href="https://cdn.xxx.com/aaa"
rel="noopener noreferrer"
target="_blank"
@ -1287,7 +1250,6 @@ exports[`Upload List should support removeIcon and downloadIcon 1`] = `
</span>
</div>
</div>
</span>
</div>
</div>
</span>
@ -1321,16 +1283,17 @@ exports[`Upload List should support removeIcon and downloadIcon 2`] = `
class="ant-upload-list ant-upload-list-picture"
>
<div
class=""
class="ant-upload-list-picture-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-uploading ant-upload-list-item-list-type-picture"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-list-item-thumbnail"
>
@ -1355,7 +1318,7 @@ exports[`Upload List should support removeIcon and downloadIcon 2`] = `
</span>
</div>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
class="ant-upload-list-item-name"
href="https://cdn.xxx.com/aaa"
rel="noopener noreferrer"
target="_blank"
@ -1378,23 +1341,20 @@ exports[`Upload List should support removeIcon and downloadIcon 2`] = `
</span>
</span>
</div>
<div
class="ant-upload-list-item-progress"
/>
</div>
</span>
</div>
<div
class=""
class="ant-upload-list-picture-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://cdn.xxx.com/aaa"
@ -1408,7 +1368,7 @@ exports[`Upload List should support removeIcon and downloadIcon 2`] = `
/>
</a>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
class="ant-upload-list-item-name"
href="https://cdn.xxx.com/aaa"
rel="noopener noreferrer"
target="_blank"
@ -1441,7 +1401,6 @@ exports[`Upload List should support removeIcon and downloadIcon 2`] = `
</span>
</div>
</div>
</span>
</div>
</div>
</span>
@ -1475,16 +1434,17 @@ exports[`Upload List should support showRemoveIcon and showPreviewIcon 1`] = `
class="ant-upload-list ant-upload-list-picture"
>
<div
class=""
class="ant-upload-list-picture-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-uploading ant-upload-list-item-list-type-picture"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<div
class="ant-upload-list-item-thumbnail"
>
@ -1509,7 +1469,7 @@ exports[`Upload List should support showRemoveIcon and showPreviewIcon 1`] = `
</span>
</div>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-0"
class="ant-upload-list-item-name"
href="https://cdn.xxx.com/aaa"
rel="noopener noreferrer"
target="_blank"
@ -1522,23 +1482,20 @@ exports[`Upload List should support showRemoveIcon and showPreviewIcon 1`] = `
/>
</span>
</div>
<div
class="ant-upload-list-item-progress"
/>
</div>
</span>
</div>
<div
class=""
class="ant-upload-list-picture-container"
>
<span>
<div
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
>
<div
class="ant-upload-list-item-info"
>
<span>
<span
class="ant-upload-span"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://cdn.xxx.com/aaa"
@ -1552,7 +1509,7 @@ exports[`Upload List should support showRemoveIcon and showPreviewIcon 1`] = `
/>
</a>
<a
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-0"
class="ant-upload-list-item-name"
href="https://cdn.xxx.com/aaa"
rel="noopener noreferrer"
target="_blank"
@ -1566,7 +1523,6 @@ exports[`Upload List should support showRemoveIcon and showPreviewIcon 1`] = `
</span>
</div>
</div>
</span>
</div>
</div>
</span>

17
components/upload/__tests__/uploadlist.test.js
View File

@ -131,9 +131,20 @@ describe('Upload List', () => {
);
expect(wrapper.find('.ant-upload-list-item').length).toBe(2);
wrapper.find('.ant-upload-list-item').at(0).find('.anticon-delete').simulate('click');
await act(async () => {
await sleep(1000);
wrapper.update();
expect(wrapper.find('.ant-upload-list-item').hostNodes().length).toBe(1);
const domNode = wrapper.find('.ant-upload-list-text-container').at(0).hostNodes().instance();
const transitionEndEvent = new Event('transitionend');
domNode.dispatchEvent(transitionEndEvent);
wrapper.update();
});
// console.log(wrapper.html());
expect(wrapper.find('.ant-upload-list-text-container').hostNodes().length).toBe(1);
});
it('should be uploading when upload a file', done => {
@ -222,6 +233,10 @@ describe('Upload List', () => {
<button type="button">upload</button>
</Upload>,
);
// Has error item className
wrapper.find('.ant-upload-list-item-error').simulate('mouseenter');
expect(wrapper.find('div.ant-upload-list-item i.anticon-download').length).toBe(0);
});

18
components/upload/interface.tsx
View File

@ -72,6 +72,12 @@ export type UploadType = 'drag' | 'select';
export type UploadListType = 'text' | 'picture' | 'picture-card';
export type UploadListProgressProps = Omit<ProgressProps, 'percent' | 'type'>;
export type ItemRender<T = any> = (
originNode: React.ReactElement,
file: UploadFile,
fileList?: Array<UploadFile<T>>,
) => React.ReactNode;
type PreviewFileHandler = (file: File | Blob) => PromiseLike<string>;
type TransformFileHandler = (
file: RcFile,
@ -111,11 +117,7 @@ export interface UploadProps<T = any> {
iconRender?: (file: UploadFile<T>, listType?: UploadListType) => React.ReactNode;
isImageUrl?: (file: UploadFile) => boolean;
progress?: UploadListProgressProps;
itemRender?: (
originNode: React.ReactElement,
file: UploadFile,
fileList?: Array<UploadFile<T>>,
) => React.ReactNode;
itemRender?: ItemRender<T>;
}
export interface UploadState<T = any> {
@ -141,9 +143,5 @@ export interface UploadListProps<T = any> {
iconRender?: (file: UploadFile<T>, listType?: UploadListType) => React.ReactNode;
isImageUrl?: (file: UploadFile) => boolean;
appendAction?: React.ReactNode;
itemRender?: (
originNode: React.ReactElement,
file: UploadFile,
fileList?: Array<UploadFile<T>>,
) => React.ReactNode;
itemRender?: ItemRender<T>;
}

151
components/upload/style/index.less
View File

@ -142,16 +142,8 @@
.reset-component;
.clearfix;
line-height: @line-height-base;
&-item-list-type-text {
&:hover {
.@{upload-prefix-cls}-list-item-name-icon-count-1 {
padding-right: 14px;
}
.@{upload-prefix-cls}-list-item-name-icon-count-2 {
padding-right: 28px;
}
}
}
// ============================ Item ============================
&-item {
position: relative;
height: @line-height-base * @font-size-base;
@ -167,10 +159,6 @@
text-overflow: ellipsis;
}
&-name-icon-count-1 {
padding-right: 14px;
}
&-card-actions {
position: absolute;
right: 0;
@ -200,7 +188,7 @@
&-info {
height: 100%;
padding: 0 12px 0 4px;
padding: 0 4px;
transition: background-color 0.3s;
> span {
@ -273,6 +261,7 @@
}
}
// =================== Picture & Picture Card ===================
&-picture,
&-picture-card {
.@{upload-item} {
@ -304,9 +293,6 @@
}
.@{upload-item}-thumbnail {
position: absolute;
top: 8px;
left: 8px;
width: 48px;
height: 48px;
line-height: 54px;
@ -370,14 +356,6 @@
transition: all 0.3s;
}
.@{upload-item}-name-icon-count-1 {
padding-right: 18px;
}
.@{upload-item}-name-icon-count-2 {
padding-right: 36px;
}
.@{upload-item}-uploading .@{upload-item}-name {
line-height: 28px;
}
@ -398,11 +376,8 @@
}
}
// ======================== Picture Card ========================
&-picture-card {
&.@{upload-prefix-cls}-list::after {
display: none;
}
&-container {
display: inline-block;
width: @upload-picture-card-size;
@ -411,6 +386,10 @@
vertical-align: top;
}
&.@{upload-prefix-cls}-list::after {
display: none;
}
.@{upload-item} {
height: 100%;
margin: 0;
@ -492,6 +471,12 @@
display: block;
}
// .@{upload-item}-thumbnail {
// position: absolute;
// top: 8px;
// left: 8px;
// }
.@{upload-item}-uploading {
&.@{upload-item} {
background-color: @background-color-light;
@ -515,27 +500,77 @@
}
}
.@{upload-prefix-cls}-success-icon {
color: @success-color;
font-weight: bold;
// ======================= Picture & Text =======================
&-text,
&-picture {
&-container {
transition: opacity @animation-duration-slow, height @animation-duration-slow;
&::before {
display: table;
width: 0;
height: 0;
content: '';
}
.@{upload-prefix-cls}-animate-enter,
.@{upload-prefix-cls}-animate-leave,
// Don't know why span here, just stretch it
.@{upload-prefix-cls}-span {
display: block;
flex: auto;
}
}
// text & picture no need this additional element.
// But it used for picture-card, let's keep it.
.@{upload-prefix-cls}-span {
display: flex;
align-items: center;
> * {
flex: none;
}
}
.@{upload-item}-name {
flex: auto;
padding: 0 @padding-xs;
}
.@{upload-item}-card-actions {
position: static;
}
}
// ============================ Text ============================
&-text {
.@{upload-prefix-cls}-text-icon {
.@{iconfont-css-prefix} {
position: static;
}
}
}
// =========================== Motion ===========================
// .@{upload-prefix-cls}-animate-appear,
// .@{upload-prefix-cls}-animate-enter,
// .@{upload-prefix-cls}-animate-leave,
.@{upload-prefix-cls}-animate-inline-appear,
.@{upload-prefix-cls}-animate-inline-enter,
.@{upload-prefix-cls}-animate-inline-leave {
animation-duration: 0.3s;
animation-duration: @animation-duration-slow;
animation-fill-mode: @ease-in-out-circ;
}
.@{upload-prefix-cls}-animate-enter {
animation-name: uploadAnimateIn;
}
// .@{upload-prefix-cls}-animate-appear,
// .@{upload-prefix-cls}-animate-enter {
// animation-name: uploadAnimateIn;
// }
.@{upload-prefix-cls}-animate-leave {
animation-name: uploadAnimateOut;
}
// .@{upload-prefix-cls}-animate-leave {
// animation-name: uploadAnimateOut;
// }
.@{upload-prefix-cls}-animate-inline-appear,
.@{upload-prefix-cls}-animate-inline-enter {
animation-name: uploadAnimateInlineIn;
}
@ -545,23 +580,23 @@
}
}
@keyframes uploadAnimateIn {
from {
height: 0;
margin: 0;
padding: 0;
opacity: 0;
}
}
// @keyframes uploadAnimateIn {
// from {
// height: 0;
// margin: 0;
// padding: 0;
// opacity: 0;
// }
// }
@keyframes uploadAnimateOut {
to {
height: 0;
margin: 0;
padding: 0;
opacity: 0;
}
}
// @keyframes uploadAnimateOut {
// to {
// height: 0;
// margin: 0;
// padding: 0;
// opacity: 0;
// }
// }
@keyframes uploadAnimateInlineIn {
from {

6
package.json
View File

@ -129,7 +129,7 @@
"rc-input-number": "~6.1.0",
"rc-mentions": "~1.5.0",
"rc-menu": "~8.10.0",
"rc-motion": "^2.2.0",
"rc-motion": "^2.4.0",
"rc-notification": "~4.5.2",
"rc-pagination": "~3.1.0",
"rc-picker": "~2.4.1",
@ -235,7 +235,7 @@
"open": "^7.0.3",
"preact": "^10.0.0",
"preact-compat": "^3.18.5",
"prettier": "^2.0.1",
"prettier": "^2.2.0",
"pretty-quick": "^3.0.0",
"querystring": "^0.2.0",
"rc-footer": "^0.6.3",
@ -271,7 +271,7 @@
"reqwest": "^2.0.5",
"rimraf": "^3.0.0",
"scrollama": "^2.0.0",
"simple-git": "^2.0.0",
"simple-git": "^2.23.0",
"string-replace-loader": "^2.3.0",
"stylelint": "^13.0.0",
"stylelint-config-prettier": "^8.0.0",