Cédric FAMIBELLE-PRONZOLA
119 lines
2.7 KiB
JavaScript
119 lines
2.7 KiB
JavaScript
import {useRef, useEffect, useState} from 'react'
|
|
import {useRouter} from 'next/router'
|
|
import PropTypes from 'prop-types'
|
|
|
|
import {
|
|
Button,
|
|
ClickAwayListener,
|
|
Grow,
|
|
MenuItem,
|
|
MenuList,
|
|
Paper,
|
|
Popper,
|
|
Badge
|
|
} from '@mui/material'
|
|
|
|
import {styled} from '@mui/material/styles'
|
|
import MenuBookIcon from '@mui/icons-material/MenuBook'
|
|
|
|
const PREFIX = 'mizik-badj-meni'
|
|
|
|
const classes = {
|
|
root: `${PREFIX}-root`,
|
|
paper: `${PREFIX}-paper`
|
|
}
|
|
|
|
const Root = styled('div')((
|
|
{
|
|
theme
|
|
}
|
|
) => ({
|
|
[`&.${classes.root}`]: {
|
|
display: 'flex'
|
|
},
|
|
|
|
[`& .${classes.paper}`]: {
|
|
marginRight: theme.spacing(2)
|
|
}
|
|
}))
|
|
|
|
export default function MizikBadjMeni({teks}) {
|
|
const [open, setOpen] = useState(false)
|
|
const anchorRef = useRef(null)
|
|
const router = useRouter()
|
|
|
|
const handleToggle = () => {
|
|
setOpen(previousOpen_ => !previousOpen_)
|
|
}
|
|
|
|
const handleClose = event => {
|
|
if (anchorRef.current && anchorRef.current.contains(event.target)) {
|
|
return
|
|
}
|
|
|
|
setOpen(false)
|
|
}
|
|
|
|
const handleClick = slug => {
|
|
router.push(`/teks/${slug}#${slug}`).then(() => window.scrollTo(0, 0))
|
|
}
|
|
|
|
function handleListKeyDown(event) {
|
|
if (event.key === 'Tab') {
|
|
event.preventDefault()
|
|
setOpen(false)
|
|
}
|
|
}
|
|
|
|
const previousOpen = useRef(open)
|
|
useEffect(() => {
|
|
if (previousOpen.current === true && open === false) {
|
|
anchorRef.current.focus()
|
|
}
|
|
|
|
previousOpen.current = open
|
|
}, [open])
|
|
|
|
return (
|
|
<Root className={classes.root}>
|
|
<Button
|
|
ref={anchorRef}
|
|
aria-controls={open ? 'menu-list-grow' : undefined}
|
|
aria-haspopup='true'
|
|
onClick={handleToggle}
|
|
>
|
|
<Badge
|
|
anchorOrigin={{
|
|
vertical: 'top',
|
|
horizontal: 'right'
|
|
}}
|
|
badgeContent={teks.length}
|
|
color='primary'
|
|
>
|
|
<MenuBookIcon style={{fontSize: 30}} />
|
|
</Badge>
|
|
</Button>
|
|
<Popper transition disablePortal open={open} anchorEl={anchorRef.current} role={undefined}>
|
|
{({TransitionProps, placement}) => (
|
|
<Grow
|
|
{...TransitionProps}
|
|
style={{transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'}}
|
|
>
|
|
<Paper>
|
|
<ClickAwayListener onClickAway={handleClose}>
|
|
<MenuList autoFocusItem={open} id='menu-list-grow' onKeyDown={() => handleListKeyDown()}>
|
|
{teks.map(t => <MenuItem key={t._id} onClick={() => handleClick(t.slug)}>{t.tit}</MenuItem>)}
|
|
</MenuList>
|
|
</ClickAwayListener>
|
|
</Paper>
|
|
</Grow>
|
|
)}
|
|
</Popper>
|
|
</Root>
|
|
)
|
|
}
|
|
|
|
MizikBadjMeni.propTypes = {
|
|
teks: PropTypes.array.isRequired
|
|
}
|