You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
1008 B
41 lines
1008 B
import { Menu as MuiMenu } from '@mui/material'; |
|
import { FC, useMemo } from 'react'; |
|
|
|
import MenuItem from './MenuItem'; |
|
|
|
const Menu: FC<MenuProps> = (props) => { |
|
const { |
|
items = {}, |
|
muiMenuProps: menuProps, |
|
onItemClick, |
|
open, |
|
renderItem, |
|
} = props; |
|
|
|
const pairs = useMemo(() => Object.entries(items), [items]); |
|
|
|
const itemElements = useMemo( |
|
() => |
|
pairs.map(([key, value]) => ( |
|
<MenuItem |
|
onClick={(...parent) => |
|
onItemClick?.call(null, key, value, ...parent) |
|
} |
|
// The key is only relevant within the same branch; i.e., instance of |
|
// the same key under a different parent is OK. |
|
key={key} |
|
> |
|
{renderItem?.call(null, key, value)} |
|
</MenuItem> |
|
)), |
|
[onItemClick, pairs, renderItem], |
|
); |
|
|
|
return ( |
|
<MuiMenu open={open} {...menuProps}> |
|
{itemElements} |
|
</MuiMenu> |
|
); |
|
}; |
|
|
|
export default Menu as <T>(props: MenuProps<T>) => ReturnType<FC<MenuProps<T>>>;
|
|
|