kb

client/src/pages/kb/detail/components/Import/FileSelect.tsx

@@ -0,0 +1,49 @@
+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;
+  onSelectFile: (files: File[]) => Promise<void>;
+  isLoading?: boolean;
+}
+
+const FileSelect = ({ fileExtension, onSelectFile, isLoading, ...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>
+      <FileSelectLoading loading={isLoading} fixed={false} />
+      <File onSelect={onSelectFile} />
+    </Box>
+  );
+};
+
+export default FileSelect;