2022-06-21 10:24:52 +08:00
|
|
|
import FileTwoTone from '@ant-design/icons/FileTwoTone';
|
2020-11-21 19:00:11 +08:00
|
|
|
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
|
|
|
|
import PaperClipOutlined from '@ant-design/icons/PaperClipOutlined';
|
|
|
|
import PictureTwoTone from '@ant-design/icons/PictureTwoTone';
|
2022-06-21 10:24:52 +08:00
|
|
|
import classNames from 'classnames';
|
|
|
|
import type { CSSMotionListProps } from 'rc-motion';
|
|
|
|
import CSSMotion, { CSSMotionList } from 'rc-motion';
|
|
|
|
import * as React from 'react';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type { ButtonProps } from '../../button';
|
|
|
|
import Button from '../../button';
|
2022-06-21 10:24:52 +08:00
|
|
|
import { ConfigContext } from '../../config-provider';
|
2020-11-21 19:00:11 +08:00
|
|
|
import useForceUpdate from '../../_util/hooks/useForceUpdate';
|
2022-07-19 22:53:38 +08:00
|
|
|
import initCollapseMotion from '../../_util/motion';
|
2022-06-21 10:24:52 +08:00
|
|
|
import { cloneElement, isValidElement } from '../../_util/reactNode';
|
2022-10-05 00:04:29 +08:00
|
|
|
import type { InternalUploadFile, UploadFile, UploadListProps } from '../interface';
|
2022-06-21 10:24:52 +08:00
|
|
|
import { isImageUrl, previewImage } from '../utils';
|
2020-11-21 19:00:11 +08:00
|
|
|
import ListItem from './ListItem';
|
|
|
|
|
|
|
|
const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProps> = (
|
2022-10-05 00:04:29 +08:00
|
|
|
props,
|
|
|
|
ref,
|
|
|
|
) => {
|
|
|
|
const {
|
|
|
|
listType = 'text',
|
|
|
|
previewFile = previewImage,
|
2020-11-21 19:00:11 +08:00
|
|
|
onPreview,
|
|
|
|
onDownload,
|
|
|
|
onRemove,
|
|
|
|
locale,
|
|
|
|
iconRender,
|
2022-10-05 00:04:29 +08:00
|
|
|
isImageUrl: isImgUrl = isImageUrl,
|
2020-11-21 19:00:11 +08:00
|
|
|
prefixCls: customizePrefixCls,
|
|
|
|
items = [],
|
2022-10-05 00:04:29 +08:00
|
|
|
showPreviewIcon = true,
|
|
|
|
showRemoveIcon = true,
|
|
|
|
showDownloadIcon = false,
|
2020-11-21 19:00:11 +08:00
|
|
|
removeIcon,
|
2021-09-08 09:30:09 +08:00
|
|
|
previewIcon,
|
2020-11-21 19:00:11 +08:00
|
|
|
downloadIcon,
|
2023-03-14 22:01:15 +08:00
|
|
|
progress = { size: [-1, 2], showInfo: false },
|
2020-11-21 19:00:11 +08:00
|
|
|
appendAction,
|
2022-10-05 00:04:29 +08:00
|
|
|
appendActionVisible = true,
|
2020-11-21 19:00:11 +08:00
|
|
|
itemRender,
|
2023-05-04 17:03:04 +08:00
|
|
|
disabled,
|
2022-10-05 00:04:29 +08:00
|
|
|
} = props;
|
2020-11-21 19:00:11 +08:00
|
|
|
const forceUpdate = useForceUpdate();
|
|
|
|
const [motionAppear, setMotionAppear] = React.useState(false);
|
|
|
|
|
|
|
|
// ============================= Effect =============================
|
|
|
|
React.useEffect(() => {
|
2023-01-31 14:31:34 +08:00
|
|
|
if (listType !== 'picture' && listType !== 'picture-card' && listType !== 'picture-circle') {
|
2020-11-21 19:00:11 +08:00
|
|
|
return;
|
|
|
|
}
|
2021-04-28 22:52:31 +08:00
|
|
|
(items || []).forEach((file: InternalUploadFile) => {
|
2020-11-21 19:00:11 +08:00
|
|
|
if (
|
|
|
|
typeof document === 'undefined' ||
|
|
|
|
typeof window === 'undefined' ||
|
|
|
|
!(window as any).FileReader ||
|
|
|
|
!(window as any).File ||
|
2021-03-13 23:46:32 +08:00
|
|
|
!(file.originFileObj instanceof File || (file.originFileObj as Blob) instanceof Blob) ||
|
2020-11-21 19:00:11 +08:00
|
|
|
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 =============================
|
2021-05-06 14:12:26 +08:00
|
|
|
const onInternalPreview = (file: UploadFile, e?: React.SyntheticEvent<HTMLElement>) => {
|
2020-11-21 19:00:11 +08:00
|
|
|
if (!onPreview) {
|
|
|
|
return;
|
|
|
|
}
|
2021-05-06 14:12:26 +08:00
|
|
|
e?.preventDefault();
|
2020-11-21 19:00:11 +08:00
|
|
|
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) => {
|
2021-02-19 18:26:53 +08:00
|
|
|
onRemove?.(file);
|
2020-11-21 19:00:11 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
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;
|
2023-01-31 14:31:34 +08:00
|
|
|
} else if (listType === 'picture-card' || listType === 'picture-circle') {
|
2020-11-21 19:00:11 +08:00
|
|
|
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);
|
|
|
|
}
|
|
|
|
},
|
2022-04-25 18:46:53 +08:00
|
|
|
className: `${prefixCls}-list-item-action`,
|
2023-05-04 17:03:04 +08:00
|
|
|
disabled,
|
2020-11-21 19:00:11 +08:00
|
|
|
};
|
|
|
|
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,
|
|
|
|
}));
|
|
|
|
|
2022-04-25 18:46:53 +08:00
|
|
|
const { getPrefixCls } = React.useContext(ConfigContext);
|
2020-11-21 19:00:11 +08:00
|
|
|
|
|
|
|
// ============================= Render =============================
|
|
|
|
const prefixCls = getPrefixCls('upload', customizePrefixCls);
|
2022-07-19 22:53:38 +08:00
|
|
|
const rootPrefixCls = getPrefixCls();
|
2020-11-21 19:00:11 +08:00
|
|
|
|
|
|
|
const listClassNames = classNames({
|
|
|
|
[`${prefixCls}-list`]: true,
|
|
|
|
[`${prefixCls}-list-${listType}`]: true,
|
|
|
|
});
|
|
|
|
|
|
|
|
// >>> Motion config
|
|
|
|
const motionKeyList = [
|
2022-11-19 13:47:33 +08:00
|
|
|
...items.map((file) => ({
|
2020-11-21 19:00:11 +08:00
|
|
|
key: file.uid,
|
|
|
|
file,
|
|
|
|
})),
|
|
|
|
];
|
|
|
|
|
2023-01-31 14:31:34 +08:00
|
|
|
const animationDirection =
|
|
|
|
listType === 'picture-card' || listType === 'picture-circle' ? 'animate-inline' : 'animate';
|
2020-11-21 19:00:11 +08:00
|
|
|
// const transitionName = list.length === 0 ? '' : `${prefixCls}-${animationDirection}`;
|
|
|
|
|
|
|
|
let motionConfig: Omit<CSSMotionListProps, 'onVisibleChanged'> = {
|
2021-03-09 23:14:52 +08:00
|
|
|
motionDeadline: 2000,
|
2020-11-21 19:00:11 +08:00
|
|
|
motionName: `${prefixCls}-${animationDirection}`,
|
|
|
|
keys: motionKeyList,
|
|
|
|
motionAppear,
|
|
|
|
};
|
|
|
|
|
2023-05-04 17:03:04 +08:00
|
|
|
const listItemMotion: Partial<CSSMotionListProps> = React.useMemo(() => {
|
2022-07-19 22:53:38 +08:00
|
|
|
const motion = {
|
|
|
|
...initCollapseMotion(rootPrefixCls),
|
|
|
|
};
|
|
|
|
|
|
|
|
delete motion.onAppearEnd;
|
|
|
|
delete motion.onEnterEnd;
|
|
|
|
delete motion.onLeaveEnd;
|
|
|
|
|
|
|
|
return motion;
|
|
|
|
}, [rootPrefixCls]);
|
|
|
|
|
2023-01-31 14:31:34 +08:00
|
|
|
if (listType !== 'picture-card' && listType !== 'picture-circle') {
|
2020-11-21 19:00:11 +08:00
|
|
|
motionConfig = {
|
|
|
|
...listItemMotion,
|
|
|
|
...motionConfig,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={listClassNames}>
|
|
|
|
<CSSMotionList {...motionConfig} component={false}>
|
2020-12-09 17:12:32 +08:00
|
|
|
{({ key, file, className: motionClassName, style: motionStyle }) => (
|
|
|
|
<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}
|
2021-09-08 09:30:09 +08:00
|
|
|
previewIcon={previewIcon}
|
2020-12-09 17:12:32 +08:00
|
|
|
downloadIcon={downloadIcon}
|
|
|
|
iconRender={internalIconRender}
|
|
|
|
actionIconRender={actionIconRender}
|
|
|
|
itemRender={itemRender}
|
|
|
|
onPreview={onInternalPreview}
|
|
|
|
onDownload={onInternalDownload}
|
|
|
|
onClose={onInternalClose}
|
|
|
|
/>
|
|
|
|
)}
|
2020-11-21 19:00:11 +08:00
|
|
|
</CSSMotionList>
|
|
|
|
|
|
|
|
{/* Append action */}
|
|
|
|
{appendAction && (
|
2022-01-25 11:20:46 +08:00
|
|
|
<CSSMotion {...motionConfig} visible={appendActionVisible} forceRender>
|
2020-12-09 17:12:32 +08:00
|
|
|
{({ className: motionClassName, style: motionStyle }) =>
|
2022-11-19 13:47:33 +08:00
|
|
|
cloneElement(appendAction, (oriProps) => ({
|
2020-11-21 19:00:11 +08:00
|
|
|
className: classNames(oriProps.className, motionClassName),
|
|
|
|
style: {
|
|
|
|
...motionStyle,
|
2022-01-25 11:20:46 +08:00
|
|
|
// prevent the element has hover css pseudo-class that may cause animation to end prematurely.
|
|
|
|
pointerEvents: motionClassName ? 'none' : undefined,
|
2020-11-21 19:00:11 +08:00
|
|
|
...oriProps.style,
|
|
|
|
},
|
2020-12-09 17:12:32 +08:00
|
|
|
}))
|
|
|
|
}
|
2020-11-21 19:00:11 +08:00
|
|
|
</CSSMotion>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const UploadList = React.forwardRef<unknown, UploadListProps>(InternalUploadList);
|
2022-10-05 00:04:29 +08:00
|
|
|
|
2022-06-21 10:24:52 +08:00
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
UploadList.displayName = 'UploadList';
|
|
|
|
}
|
2020-11-21 19:00:11 +08:00
|
|
|
|
|
|
|
export default UploadList;
|