✨ frontend add

2021-10-21 09:03:17 +09:00
parent 8caa4bbc5a
commit cb9d50511e
443 changed files with 88282 additions and 0 deletions
--- a/frontend/admin/src/components/Upload/FileList.tsx
+++ b/frontend/admin/src/components/Upload/FileList.tsx
@@ -0,0 +1,116 @@
+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