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.
42 lines
1008 B
42 lines
1008 B
11 months ago
|
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>>>;
|