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 | import React from "react";
import { Text } from "@common/Text";
import { DropdownItem } from "@common/Select";
import { palette } from "@palette";
import { Menu, MenuProps } from "@mui/material";
export type MenuItem = {
disabled?: boolean;
onSelect: (e: any) => void;
label: string | React.ReactNode;
};
type MenuItems = {
items: MenuItem[];
anchorEl: HTMLElement | null;
setAnchorEl: (el: HTMLElement | null) => void;
} & Omit<MenuProps, "open">;
const DropdownMenu = ({
items,
anchorEl,
setAnchorEl,
...props
}: MenuItems) => {
return (
<Menu
open={Boolean(anchorEl)}
anchorEl={anchorEl}
onClose={() => setAnchorEl(null)}
disableRestoreFocus
anchorOrigin={{
vertical: "bottom",
horizontal: "right",
}}
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
sx={{
"& .MuiPaper-root": {
width: "auto",
},
...(props.sx && props.sx),
}}
{...props}
>
{items.map(({ label, onSelect, disabled }, index) => (
<DropdownItem
sx={itemStyles(disabled)}
key={index}
onClick={(e) => {
if (!disabled) {
onSelect(e);
setAnchorEl(null);
}
}}
>
{typeof label === "string" ? (
<Text
fontSize={14}
lineHeight={"21.6px"}
color={disabled ? palette.neutral[70] : palette.neutral[80]}
>
{label}
</Text>
) : label}
</DropdownItem>
))}
</Menu>
);
};
const itemStyles = (disabled?: boolean) => {
return {
whiteSpace: "pre-wrap",
...(disabled && {
cursor: "default",
"&:hover": { backgroundColor: "transparent" },
}),
};
};
export default DropdownMenu;
|