import { IconType } from "../icon/icon";
export interface ContextMenuItem {
- name: string;
- icon: IconType;
+ name?: string | React.ComponentType;
+ icon?: IconType;
+ component?: React.ComponentType<any>;
}
export type ContextMenuItemGroup = ContextMenuItem[];
export interface ContextMenuProps {
anchorEl?: HTMLElement;
items: ContextMenuItemGroup[];
+ open: boolean;
onItemClick: (action: ContextMenuItem) => void;
onClose: () => void;
}
export class ContextMenu extends React.PureComponent<ContextMenuProps> {
render() {
- const { anchorEl, items, onClose, onItemClick} = this.props;
+ const { anchorEl, items, open, onClose, onItemClick } = this.props;
return <Popover
anchorEl={anchorEl}
- open={!!anchorEl}
+ open={open}
onClose={onClose}
transformOrigin={DefaultTransformOrigin}
anchorOrigin={DefaultTransformOrigin}
{items.map((group, groupIndex) =>
<React.Fragment key={groupIndex}>
{group.map((item, actionIndex) =>
- <ListItem
- button
- key={actionIndex}
- onClick={() => onItemClick(item)}>
- <ListItemIcon>
- <item.icon/>
- </ListItemIcon>
- <ListItemText>
- {item.name}
- </ListItemText>
- </ListItem>)}
+ item.component
+ ? <item.component
+ key={actionIndex}
+ onClick={() => onItemClick(item)} />
+ : <ListItem
+ button
+ key={actionIndex}
+ onClick={() => onItemClick(item)}>
+ {item.icon &&
+ <ListItemIcon>
+ <item.icon />
+ </ListItemIcon>}
+ {item.name &&
+ <ListItemText>
+ {item.name}
+ </ListItemText>}
+ </ListItem>)}
{groupIndex < items.length - 1 && <Divider />}
</React.Fragment>)}
</List>