34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import FolderIcon from "@mui/icons-material/Folder"
|
|
import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile"
|
|
import { List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material"
|
|
import type { IFile } from "../types/files"
|
|
import { normalDate } from "../util"
|
|
|
|
export interface FileListProps {
|
|
files: IFile[]
|
|
onOpenFolder: (file: IFile) => void
|
|
onContextMenu: (event: React.MouseEvent<HTMLElement>, file: IFile) => void
|
|
}
|
|
|
|
export function FileList({ files, onOpenFolder, onContextMenu }: FileListProps) {
|
|
return (
|
|
<List sx={{ bgcolor: "background.paper" }}>
|
|
{files.map((f) => (
|
|
<ListItemButton
|
|
key={f.uri}
|
|
onClick={() => f.type === "Folder" && onOpenFolder(f)}
|
|
onContextMenu={(e) => onContextMenu(e, f)}
|
|
>
|
|
<ListItemIcon>
|
|
{f.type === "Folder" ? <FolderIcon /> : <InsertDriveFileIcon />}
|
|
</ListItemIcon>
|
|
<ListItemText
|
|
primary={f.name}
|
|
secondary={normalDate.format(new Date(f.created))}
|
|
/>
|
|
</ListItemButton>
|
|
))}
|
|
</List>
|
|
)
|
|
}
|