66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import useWindowSize from "@/hooks/useWindowSize";
|
|
import { useTranslation } from "react-i18next";
|
|
import { TouchableOpacity, View } from "react-native";
|
|
import { ThemedText } from "../ThemedText";
|
|
import FileItemPhone from "./file-item-phone";
|
|
import { FileStatus } from "./file-uploader";
|
|
|
|
interface MultiFileUploaderProps {
|
|
files: FileStatus[];
|
|
onRemove: (file: File) => void;
|
|
onClearAll: () => void;
|
|
formatFileSize: (bytes: number) => string;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
/**
|
|
* 多文件上传组件 - 用于显示文件列表和管理多个文件
|
|
*/
|
|
export default function MultiFileUploader({
|
|
files,
|
|
onRemove,
|
|
onClearAll,
|
|
formatFileSize,
|
|
disabled = false
|
|
}: MultiFileUploaderProps) {
|
|
const { t } = useTranslation();
|
|
// 获取当前屏幕尺寸
|
|
const { isMobile } = useWindowSize();
|
|
return (
|
|
<View className="space-y-4">
|
|
<View className="flex justify-between items-center">
|
|
<ThemedText className="text-md font-medium">
|
|
{t('fileUploader.uploadedFiles')}
|
|
</ThemedText>
|
|
<View className="p-6 w-full">
|
|
<TouchableOpacity
|
|
className={`w-full bg-white rounded-full p-4 items-center `}
|
|
onPress={onClearAll}
|
|
disabled={disabled}
|
|
>
|
|
<ThemedText className="text-textTertiary text-lg font-semibold">
|
|
{t('fileUploader.clearAll')}
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
</View>
|
|
|
|
<View className="grid grid-cols-3 xl:grid-cols-4 gap-4 sm:max-h-[15rem] overflow-y-auto w-full">
|
|
{files.map((fileStatus, index) => (
|
|
(
|
|
<FileItemPhone
|
|
key={index}
|
|
fileStatus={fileStatus}
|
|
index={index}
|
|
onRemove={onRemove}
|
|
formatFileSize={formatFileSize}
|
|
disabled={disabled}
|
|
/>
|
|
)
|
|
))}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|