File size: 3,061 Bytes
8c06509 4056097 8c06509 4056097 8c06509 4056097 8c06509 4056097 8c06509 4056097 8c06509 4056097 8c06509 4056097 8c06509 4056097 8c06509 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
import { useSelectFileList } from '@/hooks/fileManagerHooks';
import { IFile } from '@/interfaces/database/file-manager';
import { formatDate } from '@/utils/date';
import { Button, Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import ActionCell from './action-cell';
import FileToolbar from './file-toolbar';
import {
useGetRowSelection,
useHandleCreateFolder,
useNavigateToOtherFolder,
useRenameCurrentFile,
useSelectFileListLoading,
} from './hooks';
import RenameModal from '@/components/rename-modal';
import FolderCreateModal from './folder-create-modal';
import styles from './index.less';
const FileManager = () => {
const fileList = useSelectFileList();
const rowSelection = useGetRowSelection();
const loading = useSelectFileListLoading();
const navigateToOtherFolder = useNavigateToOtherFolder();
const {
fileRenameVisible,
fileRenameLoading,
hideFileRenameModal,
showFileRenameModal,
initialFileName,
onFileRenameOk,
} = useRenameCurrentFile();
const {
folderCreateModalVisible,
showFolderCreateModal,
hideFolderCreateModal,
folderCreateLoading,
onFolderCreateOk,
} = useHandleCreateFolder();
const columns: ColumnsType<IFile> = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
render(value, record) {
return record.type === 'folder' ? (
<Button
type={'link'}
onClick={() => navigateToOtherFolder(record.id)}
>
{value}
</Button>
) : (
value
);
},
},
{
title: 'Upload Date',
dataIndex: 'create_date',
key: 'create_date',
render(text) {
return formatDate(text);
},
},
{
title: 'Location',
dataIndex: 'location',
key: 'location',
},
{
title: 'Action',
dataIndex: 'action',
key: 'action',
render: (text, record) => (
<ActionCell
record={record}
setCurrentRecord={(record: any) => {
console.info(record);
}}
showRenameModal={showFileRenameModal}
></ActionCell>
),
},
];
return (
<section className={styles.fileManagerWrapper}>
<FileToolbar
selectedRowKeys={rowSelection.selectedRowKeys as string[]}
showFolderCreateModal={showFolderCreateModal}
></FileToolbar>
<Table
dataSource={fileList}
columns={columns}
rowKey={'id'}
rowSelection={rowSelection}
loading={loading}
/>
<RenameModal
visible={fileRenameVisible}
hideModal={hideFileRenameModal}
onOk={onFileRenameOk}
initialName={initialFileName}
loading={fileRenameLoading}
></RenameModal>
<FolderCreateModal
loading={folderCreateLoading}
visible={folderCreateModalVisible}
hideModal={hideFolderCreateModal}
onOk={onFolderCreateOk}
></FolderCreateModal>
</section>
);
};
export default FileManager;
|