72 lines
1.6 KiB
TypeScript
72 lines
1.6 KiB
TypeScript
import React, { useState } from 'react'
|
|
import { Backdrop, Box, Button, Fade, Link, Modal, TextField } from "@mui/material"
|
|
import { useCookies } from "react-cookie"
|
|
import api from '../../../api_utils'
|
|
import style from './style'
|
|
|
|
function CreateFolderModal({ open, setOpen, refresh }: Props) {
|
|
const [name, setName] = useState("")
|
|
|
|
const [cookies] = useCookies(["token"])
|
|
|
|
const handleChange: React.ChangeEventHandler<HTMLInputElement> = event => {
|
|
const value = event.target.value
|
|
setName(value)
|
|
}
|
|
|
|
// handle click "Enter (Return)"
|
|
const handleKeyPress = (event: React.KeyboardEvent) => {
|
|
if (event.keyCode === 13 || event.which === 13 || event.charCode === 13) {
|
|
handle()
|
|
}
|
|
}
|
|
|
|
const handle = () => {
|
|
setOpen(false)
|
|
|
|
const request = api.createDir(name, cookies.token)
|
|
|
|
request
|
|
.then(refresh)
|
|
}
|
|
|
|
return (
|
|
<Modal
|
|
open={open}
|
|
onClose={() => setOpen(false)}
|
|
closeAfterTransition
|
|
BackdropComponent={Backdrop}
|
|
BackdropProps={{
|
|
timeout: 500,
|
|
}}
|
|
>
|
|
<Fade in={open}>
|
|
<Box sx={style}>
|
|
<TextField
|
|
label="Folder"
|
|
placeholder="Folder"
|
|
margin="normal"
|
|
value={name}
|
|
onChange={handleChange}
|
|
onKeyPress={handleKeyPress}
|
|
/>
|
|
|
|
<Link>
|
|
<Button variant="outlined" onClick={handle}>
|
|
Create Folder
|
|
</Button>
|
|
</Link>
|
|
</Box>
|
|
</Fade>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export type Props = {
|
|
open: boolean,
|
|
setOpen: React.Dispatch<React.SetStateAction<boolean>>,
|
|
refresh: () => void,
|
|
}
|
|
|
|
export default CreateFolderModal
|