113 lines
2.7 KiB
JavaScript
113 lines
2.7 KiB
JavaScript
import { useRef, useState } from "react";
|
|
import {
|
|
Button,
|
|
ButtonGroup,
|
|
ClickAwayListener,
|
|
Grow,
|
|
MenuItem,
|
|
MenuList,
|
|
Paper,
|
|
Popper,
|
|
} from "@mui/material";
|
|
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
|
|
|
|
const DropDownButton = ({ actions = [], payload = [] }) => {
|
|
const [open, setOpen] = useState(false);
|
|
const [selectedIndex, setSelectedIndex] = useState(0);
|
|
const anchorRef = useRef(null);
|
|
|
|
const handleClick = () => {
|
|
actions[selectedIndex].trigger(...payload);
|
|
};
|
|
|
|
const handleMenuItemClick = (event, index) => {
|
|
setSelectedIndex(index);
|
|
setOpen(false);
|
|
}
|
|
|
|
const handleToggle = () => {
|
|
setOpen(open => !open);
|
|
};
|
|
|
|
const handleClose = (event) => {
|
|
if (
|
|
anchorRef.current &&
|
|
anchorRef.current.contains(event.target)
|
|
) {
|
|
return;
|
|
}
|
|
|
|
setOpen(false);
|
|
};
|
|
|
|
if (!actions.length) {
|
|
return <></>;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<ButtonGroup
|
|
color="primary"
|
|
variant="contained"
|
|
ref={anchorRef}
|
|
aria-label="choose action"
|
|
>
|
|
<Button
|
|
onClick={handleClick}
|
|
disabled={actions[selectedIndex].disabled}
|
|
>
|
|
{actions[selectedIndex].name}
|
|
</Button>
|
|
<Button
|
|
size="small"
|
|
aria-controls={open ? 'split-button-menu' : undefined}
|
|
aria-expanded={open ? 'true' : undefined}
|
|
aria-label="select action"
|
|
aria-haspopup="menu"
|
|
onClick={handleToggle}
|
|
>
|
|
<ArrowDropDownIcon />
|
|
</Button>
|
|
</ButtonGroup>
|
|
<Popper
|
|
sx={{
|
|
zIndex: 100,
|
|
}}
|
|
open={open}
|
|
anchorEl={anchorRef.current}
|
|
role={undefined}
|
|
transition
|
|
disablePortal
|
|
>
|
|
{({ TransitionProps, placement }) => (
|
|
<Grow
|
|
{...TransitionProps}
|
|
style={{
|
|
transformOrigin:
|
|
placement === 'bottom' ? 'center top' : 'center bottom',
|
|
}}
|
|
>
|
|
<Paper>
|
|
<ClickAwayListener onClickAway={handleClose}>
|
|
<MenuList id="split-button-menu" autoFocusItem>
|
|
{actions.map((action, index) => (
|
|
<MenuItem
|
|
key={action.name}
|
|
disabled={actions[index].disabled}
|
|
selected={index === selectedIndex}
|
|
onClick={(event) => handleMenuItemClick(event, index)}
|
|
>
|
|
{action.name}
|
|
</MenuItem>
|
|
))}
|
|
</MenuList>
|
|
</ClickAwayListener>
|
|
</Paper>
|
|
</Grow>
|
|
)}
|
|
</Popper>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default DropDownButton; |