57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { Box, Flex, type BoxProps } from '@chakra-ui/react';
|
|
import { useLoading } from '@/hooks/useLoading';
|
|
import { useSelectFile } from '@/hooks/useSelectFile';
|
|
|
|
import MyIcon from '@/components/Icon';
|
|
|
|
interface Props extends BoxProps {
|
|
fileExtension: string;
|
|
tipText?: string;
|
|
onSelectFile: (files: File[]) => Promise<void>;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
const FileSelect = ({ fileExtension, onSelectFile, isLoading, tipText, ...props }: Props) => {
|
|
const { Loading: FileSelectLoading } = useLoading();
|
|
|
|
const { File, onOpen } = useSelectFile({
|
|
fileType: fileExtension,
|
|
multiple: true
|
|
});
|
|
|
|
return (
|
|
<Box
|
|
display={'inline-block'}
|
|
textAlign={'center'}
|
|
bg={'myWhite.400'}
|
|
p={5}
|
|
borderRadius={'lg'}
|
|
border={'1px dashed'}
|
|
borderColor={'myGray.300'}
|
|
w={'100%'}
|
|
position={'relative'}
|
|
{...props}
|
|
>
|
|
<Flex justifyContent={'center'} alignItems={'center'}>
|
|
<MyIcon mr={1} name={'uploadFile'} w={'16px'} />
|
|
{/* 拖拽文件至此，或{' '} */}
|
|
点击
|
|
<Box ml={1} as={'span'} cursor={'pointer'} color={'myBlue.700'} onClick={onOpen}>
|
|
选择文件
|
|
</Box>
|
|
</Flex>
|
|
<Box mt={1}>支持 {fileExtension} 文件</Box>
|
|
{tipText && (
|
|
<Box mt={1} fontSize={'sm'} color={'myGray.600'}>
|
|
{tipText}
|
|
</Box>
|
|
)}
|
|
<FileSelectLoading loading={isLoading} fixed={false} />
|
|
<File onSelect={onSelectFile} />
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default FileSelect;
|