Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1304x 1304x 1304x 1304x 1304x 1304x 1304x 10x 10x 10x 10x 10x 1304x 35x 10x 25x 5x | import {Add, Close} from '@mui/icons-material'
import {Button, Dialog, DialogContent, DialogTitle, IconButton, Stack, TextField, Tooltip} from '@mui/material'
import {type KeyboardEvent, useContext, useState} from 'react'
import {AllCategories, CategoryEditContext} from './building'
import {CategoryEditor} from './categoryEditor'
export function CategoryAdder() {
const [menuOpen, setMenuOpen] = useState(false)
const toggleMenu = () => setMenuOpen(!menuOpen)
const categories = useContext(AllCategories)
const editCategories = useContext(CategoryEditContext)
const [name, setName] = useState('')
const [editingCategory, setEditingCategory] = useState('')
const add = () => {
Eif (name && -1 === categories.indexOf(name)) {
editCategories({type: 'add', cat: name})
setEditingCategory(name)
setName('')
setMenuOpen(false)
}
}
return (
<>
<Tooltip title="add category">
<IconButton
size="small"
aria-label="add category"
sx={{position: 'absolute', right: '-42px', top: '-4px', zIndex: 1}}
onClick={toggleMenu}
>
<Add />
</IconButton>
</Tooltip>
{menuOpen && (
<Dialog open={menuOpen} onClose={() => setMenuOpen(false)}>
<DialogTitle>Add Category</DialogTitle>
<IconButton
aria-label="close category adder"
onClick={toggleMenu}
sx={{
position: 'absolute',
right: 8,
top: 12,
}}
className="close-button"
>
<Close />
</IconButton>
<DialogContent>
<Stack direction="row">
<TextField
label="New Category Name"
size="small"
id="category_adder_input"
value={name}
onKeyDown={(e: KeyboardEvent) => {
if (e.code === 'Enter' || e.code === 'NumpadEnter') {
add()
}
}}
onChange={e => setName(e.target.value)}
></TextField>
<Button variant="contained" onClick={add}>
Add
</Button>
</Stack>
</DialogContent>
</Dialog>
)}
{editingCategory && <CategoryEditor category={editingCategory} onClose={() => setEditingCategory('')} />}
</>
)
}
|