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 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | import React from 'react';
import { Divider, MenuItem, MenuList, Popover, useTheme } from '@mui/material';
import { DropdownItem } from '../types';
export type Section = DropdownItem[];
export type PopoverProps = {
sections: Section[];
handleClick: (item: DropdownItem) => void;
anchorElement: HTMLElement | null;
setAnchorElement: (anchorEl: HTMLElement | null) => void;
itemRenderer?: (item: DropdownItem) => React.ReactNode;
menuAlign?: 'left' | 'center' | 'right';
selectedValue?: any;
onClose?: () => void;
};
export default function PopoverDropdown(props: PopoverProps): JSX.Element {
const { sections, handleClick, anchorElement, setAnchorElement, itemRenderer, menuAlign, selectedValue, onClose } =
props;
const theme = useTheme();
const handleClose = () => {
if (onClose) {
onClose();
}
setAnchorElement(null);
};
const onClick = (item: DropdownItem) => {
if (item.onClick) {
item.onClick();
}
handleClick(item);
};
const itemStyles = (type?: 'passive' | 'destructive') => ({
color: type === 'destructive' ? theme.palette.TwClrTxtDanger : theme.palette.TwClrTxt,
'& .MuiMenuItem-root:hover': {
backgroundColor: theme.palette.TwClrBgSelectedGhostHover,
},
'&.MuiMenuItem-root:active': {
backgroundColor: theme.palette.TwClrBgSelectedGhostActive,
},
});
return (
<Popover
id='simple-popover'
open={Boolean(anchorElement)}
anchorEl={anchorElement}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: menuAlign ?? 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: menuAlign ?? 'left',
}}
sx={{
'& .MuiPaper-root': {
borderRadius: '8px',
boxShadow: 'none',
border: `1px solid ${theme.palette.TwClrBrdrSecondary}`,
paddingY: '8px',
marginTop: '4px',
},
}}
>
<MenuList sx={{ padding: 0 }}>
{sections?.map((section, index) => {
let elements: JSX.Element[] = [];
if (index > 0) {
elements.push(<Divider />);
}
elements = [
...elements,
...section.map((item, itemIndex) => {
return (
<MenuItem
onClick={() => onClick(item)}
key={`option-${itemIndex}`}
sx={itemStyles(item.type)}
disableRipple={true}
disabled={item.disabled}
selected={item.value === selectedValue}
>
{itemRenderer ? itemRenderer(item) : item.label}
</MenuItem>
);
}),
];
return elements;
})}
</MenuList>
</Popover>
);
}
|