117 lines
3.2 KiB
TypeScript
117 lines
3.2 KiB
TypeScript
import React, { useContext, useEffect, useState } from 'react'
|
|
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
|
|
import Grid from '@material-ui/core/Grid'
|
|
import List from '@material-ui/core/List'
|
|
import ListItem from '@material-ui/core/ListItem'
|
|
import ListItemAvatar from '@material-ui/core/ListItemAvatar'
|
|
import Avatar from '@material-ui/core/Avatar'
|
|
import FolderIcon from '@material-ui/icons/Folder'
|
|
import ListItemText from '@material-ui/core/ListItemText'
|
|
import { IFile } from '@service'
|
|
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
|
|
import IconButton from '@material-ui/core/IconButton'
|
|
import DeleteIcon from '@material-ui/icons/Delete'
|
|
import { formatBytes } from '@utils'
|
|
import produce from 'immer'
|
|
import { FileContext } from '.'
|
|
|
|
const useStyles = makeStyles((theme: Theme) =>
|
|
createStyles({
|
|
root: {
|
|
flexGrow: 1,
|
|
marginTop: '1px',
|
|
padding: 0,
|
|
},
|
|
list: {
|
|
backgroundColor: theme.palette.background.paper,
|
|
padding: theme.spacing(0),
|
|
},
|
|
item: {
|
|
padding: theme.spacing(1, 6, 1, 1),
|
|
},
|
|
pd0: {
|
|
padding: theme.spacing(0),
|
|
},
|
|
}),
|
|
)
|
|
|
|
interface IFileList {
|
|
key: string
|
|
name: string
|
|
size: number
|
|
}
|
|
|
|
const FileList = () => {
|
|
const classes = useStyles()
|
|
|
|
const { selectedFiles, setSelectedFilesHandler } = useContext(FileContext)
|
|
const [fileList, setFileList] = useState<IFileList[]>([])
|
|
|
|
useEffect(() => {
|
|
let list: IFileList[] = []
|
|
|
|
for (const key in selectedFiles) {
|
|
if (Object.prototype.hasOwnProperty.call(selectedFiles, key)) {
|
|
const item = selectedFiles[key]
|
|
list.push({
|
|
key: item.key,
|
|
name: item.file.name,
|
|
size: item.file.size,
|
|
})
|
|
}
|
|
}
|
|
|
|
setFileList(list)
|
|
}, [selectedFiles])
|
|
|
|
const handleDelete = (
|
|
event: React.MouseEvent<HTMLDivElement, MouseEvent>,
|
|
key: string,
|
|
) => {
|
|
event.preventDefault()
|
|
|
|
const index = selectedFiles.findIndex(item => item.key === key)
|
|
const newFiles: IFile[] = produce(selectedFiles, draft => {
|
|
draft.splice(index, 1)
|
|
})
|
|
|
|
setSelectedFilesHandler(newFiles)
|
|
}
|
|
return (
|
|
<div className={classes.root}>
|
|
<Grid container>
|
|
<Grid item>
|
|
<div>
|
|
{fileList && (
|
|
<List className={classes.list}>
|
|
{fileList.map(item => (
|
|
<ListItem key={item.key} className={classes.item}>
|
|
<ListItemAvatar>
|
|
<Avatar>
|
|
<FolderIcon />
|
|
</Avatar>
|
|
</ListItemAvatar>
|
|
<ListItemText
|
|
primary={item.name}
|
|
secondary={formatBytes(item.size)}
|
|
/>
|
|
<ListItemSecondaryAction
|
|
onClick={event => handleDelete(event, item.key)}
|
|
>
|
|
<IconButton edge="end" aria-label="delete">
|
|
<DeleteIcon />
|
|
</IconButton>
|
|
</ListItemSecondaryAction>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
)}
|
|
</div>
|
|
</Grid>
|
|
</Grid>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default FileList
|