-
+
e.stopPropagation()}>
(
+ trigger={({ open }) => (
{
props.onPreview?.({ file, index, e });
- onOpen();
+ open();
}}
/>
)}
- images={displayFiles.map((t) => t.url)}
+ images={displayFiles.map((t) => t.url || t.raw)}
defaultIndex={index}
/>
@@ -117,7 +118,7 @@ const ImageCard = (props: ImageCardUploadProps) => {
{file.status === 'progress' && renderProgressFile(file, loadCard)}
{file.status === 'fail' && renderFailFile(file, index, loadCard)}
- {!['progress', 'fail'].includes(file.status) && file.url && renderMainContent(file, index)}
+ {!['progress', 'fail'].includes(file.status) && renderMainContent(file, index)}
{fileName &&
(file.url ? (
diff --git a/src/upload/themes/MultipleFlowList.tsx b/src/upload/themes/MultipleFlowList.tsx
index daff406571..f7784258e8 100644
--- a/src/upload/themes/MultipleFlowList.tsx
+++ b/src/upload/themes/MultipleFlowList.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEvent, useMemo } from 'react';
+import React, { MouseEvent, useMemo, useState } from 'react';
import classNames from 'classnames';
import {
BrowseIcon as TdBrowseIcon,
@@ -6,6 +6,12 @@ import {
CheckCircleFilledIcon as TdCheckCircleFilledIcon,
ErrorCircleFilledIcon as TdErrorCircleFilledIcon,
TimeFilledIcon as TdTimeFilledIcon,
+ FileExcelIcon as TdFileExcelIcon,
+ FilePdfIcon as TdFilePdfIcon,
+ FileWordIcon as TdFileWordIcon,
+ FilePowerpointIcon as TdFilePowerpointIcon,
+ FileIcon as TdFileIcon,
+ VideoIcon as TdVideoIcon,
} from 'tdesign-icons-react';
import useGlobalIcon from '../../hooks/useGlobalIcon';
import ImageViewer from '../../image-viewer';
@@ -13,10 +19,20 @@ import { CommonDisplayFileProps } from '../interface';
import TButton from '../../button';
import { UploadFile, TdUploadProps } from '../type';
import useDrag, { UploadDragEvents } from '../hooks/useDrag';
-import { abridgeName, returnFileSize } from '../../_common/js/upload/utils';
+import {
+ abridgeName,
+ returnFileSize,
+ IMAGE_REGEXP,
+ FILE_PDF_REGEXP,
+ FILE_EXCEL_REGEXP,
+ FILE_WORD_REGEXP,
+ FILE_PPT_REGEXP,
+ VIDEO_REGEXP,
+} from '../../_common/js/upload/utils';
import TLoading from '../../loading';
import Link from '../../link';
import parseTNode from '../../_util/parseTNode';
+import Image from '../../image';
export interface ImageFlowListProps extends CommonDisplayFileProps {
uploadFiles?: (toFiles?: UploadFile[]) => void;
@@ -25,21 +41,43 @@ export interface ImageFlowListProps extends CommonDisplayFileProps {
disabled?: boolean;
isBatchUpload?: boolean;
draggable?: boolean;
+ showThumbnail?: boolean;
onPreview?: TdUploadProps['onPreview'];
}
const ImageFlowList = (props: ImageFlowListProps) => {
- const { draggable = true, accept } = props;
+ const { draggable = true, accept, showThumbnail, onPreview } = props;
// locale 已经在 useUpload 中统一处理优先级
const { locale, uploading, disabled, displayFiles, classPrefix } = props;
const uploadPrefix = `${classPrefix}-upload`;
- const { BrowseIcon, DeleteIcon, CheckCircleFilledIcon, ErrorCircleFilledIcon, TimeFilledIcon } = useGlobalIcon({
+ const [currentPreviewFile, setCurrentPreviewFile] = useState([]);
+ const [previewIndex, setPreviewIndex] = useState(0);
+
+ const {
+ BrowseIcon,
+ DeleteIcon,
+ CheckCircleFilledIcon,
+ ErrorCircleFilledIcon,
+ TimeFilledIcon,
+ FileExcelIcon,
+ FilePdfIcon,
+ FileWordIcon,
+ FilePowerpointIcon,
+ FileIcon,
+ VideoIcon,
+ } = useGlobalIcon({
BrowseIcon: TdBrowseIcon,
DeleteIcon: TdDeleteIcon,
CheckCircleFilledIcon: TdCheckCircleFilledIcon,
ErrorCircleFilledIcon: TdErrorCircleFilledIcon,
TimeFilledIcon: TdTimeFilledIcon,
+ FileExcelIcon: TdFileExcelIcon,
+ FilePdfIcon: TdFilePdfIcon,
+ FileWordIcon: TdFileWordIcon,
+ FilePowerpointIcon: TdFilePowerpointIcon,
+ FileIcon: TdFileIcon,
+ VideoIcon: TdVideoIcon,
});
const drag = useDrag({ ...props.dragEvents, accept });
@@ -58,6 +96,30 @@ const ImageFlowList = (props: ImageFlowListProps) => {
}
: {};
+ const browseIconClick = ({
+ e,
+ index,
+ file,
+ viewFiles,
+ }: {
+ e: MouseEvent;
+ index: number;
+ file: UploadFile;
+ viewFiles: UploadFile[];
+ }) => {
+ setPreviewIndex(index);
+ setCurrentPreviewFile(viewFiles);
+ onPreview?.({ file, index, e });
+ };
+
+ const previewIndexChange = (index: number) => {
+ setPreviewIndex(index);
+ };
+
+ const closePreview = () => {
+ setCurrentPreviewFile([]);
+ };
+
const getStatusMap = () => {
const iconMap = {
success: ,
@@ -106,25 +168,21 @@ const ImageFlowList = (props: ImageFlowListProps) => {
)}
{(['waiting', 'success'].includes(file.status) || (!file.status && file.url)) && (
-
+
)}
- {file.url && (
+ {(file.url || file.raw) && (
- (
- {
- props.onPreview?.({ file, index, e });
- onOpen();
- }}
- />
- )}
- images={displayFiles.map((t) => t.url)}
- defaultIndex={index}
+ {
+ const e = event.type ? event : event.e;
+ browseIconClick({
+ e,
+ index,
+ file,
+ viewFiles: displayFiles,
+ });
+ }}
/>
@@ -139,7 +197,9 @@ const ImageFlowList = (props: ImageFlowListProps) => {
)}
+ {file.status === 'waiting' ? locale.progress.waitingText : fileName}
+