mirror of
https://github.com/binwiederhier/ntfy.git
synced 2024-10-02 05:04:08 +02:00
99 lines
3.3 KiB
JavaScript
99 lines
3.3 KiB
JavaScript
|
import * as React from 'react';
|
||
|
import {useEffect, useRef, useState} from 'react';
|
||
|
import ClickAwayListener from '@mui/material/ClickAwayListener';
|
||
|
import Grow from '@mui/material/Grow';
|
||
|
import Paper from '@mui/material/Paper';
|
||
|
import Popper from '@mui/material/Popper';
|
||
|
import MenuItem from '@mui/material/MenuItem';
|
||
|
import MenuList from '@mui/material/MenuList';
|
||
|
import IconButton from "@mui/material/IconButton";
|
||
|
import MoreVertIcon from "@mui/icons-material/MoreVert";
|
||
|
|
||
|
// Originally from https://mui.com/components/menus/#MenuListComposition.js
|
||
|
const DetailSettingsIcon = () => {
|
||
|
const [open, setOpen] = useState(false);
|
||
|
const anchorRef = useRef(null);
|
||
|
|
||
|
const handleToggle = () => {
|
||
|
setOpen((prevOpen) => !prevOpen);
|
||
|
};
|
||
|
|
||
|
const handleClose = (event) => {
|
||
|
if (anchorRef.current && anchorRef.current.contains(event.target)) {
|
||
|
return;
|
||
|
}
|
||
|
setOpen(false);
|
||
|
};
|
||
|
|
||
|
function handleListKeyDown(event) {
|
||
|
if (event.key === 'Tab') {
|
||
|
event.preventDefault();
|
||
|
setOpen(false);
|
||
|
} else if (event.key === 'Escape') {
|
||
|
setOpen(false);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// return focus to the button when we transitioned from !open -> open
|
||
|
const prevOpen = useRef(open);
|
||
|
useEffect(() => {
|
||
|
if (prevOpen.current === true && open === false) {
|
||
|
anchorRef.current.focus();
|
||
|
}
|
||
|
|
||
|
prevOpen.current = open;
|
||
|
}, [open]);
|
||
|
|
||
|
return (
|
||
|
<>
|
||
|
<IconButton
|
||
|
color="inherit"
|
||
|
size="large"
|
||
|
edge="end"
|
||
|
ref={anchorRef}
|
||
|
id="composition-button"
|
||
|
aria-controls={open ? 'composition-menu' : undefined}
|
||
|
aria-expanded={open ? 'true' : undefined}
|
||
|
aria-haspopup="true"
|
||
|
onClick={handleToggle}
|
||
|
>
|
||
|
<MoreVertIcon/>
|
||
|
</IconButton>
|
||
|
<Popper
|
||
|
open={open}
|
||
|
anchorEl={anchorRef.current}
|
||
|
role={undefined}
|
||
|
placement="bottom-start"
|
||
|
transition
|
||
|
disablePortal
|
||
|
>
|
||
|
{({TransitionProps, placement}) => (
|
||
|
<Grow
|
||
|
{...TransitionProps}
|
||
|
style={{
|
||
|
transformOrigin:
|
||
|
placement === 'bottom-start' ? 'left top' : 'left bottom',
|
||
|
}}
|
||
|
>
|
||
|
<Paper>
|
||
|
<ClickAwayListener onClickAway={handleClose}>
|
||
|
<MenuList
|
||
|
autoFocusItem={open}
|
||
|
id="composition-menu"
|
||
|
aria-labelledby="composition-button"
|
||
|
onKeyDown={handleListKeyDown}
|
||
|
>
|
||
|
<MenuItem onClick={handleClose}>Send test notification</MenuItem>
|
||
|
<MenuItem onClick={handleClose}>Unsubscribe</MenuItem>
|
||
|
</MenuList>
|
||
|
</ClickAwayListener>
|
||
|
</Paper>
|
||
|
</Grow>
|
||
|
)}
|
||
|
</Popper>
|
||
|
</>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
export default DetailSettingsIcon;
|