import * as React from "react";
import { Popover, List, ListItem, ListItemIcon, ListItemText, Divider } from "@material-ui/core";
import { DefaultTransformOrigin } from "../popover/helpers";
+import { IconType } from "../icon/icon";
-export interface ContextMenuAction {
- name: string;
- icon: string;
- openCreateDialog?: boolean;
+export interface ContextMenuItem {
+ name?: string | React.ComponentType;
+ icon?: IconType;
+ component?: React.ComponentType<any>;
}
-export type ContextMenuActionGroup = ContextMenuAction[];
+export type ContextMenuItemGroup = ContextMenuItem[];
-export interface ContextMenuProps<T> {
+export interface ContextMenuProps {
anchorEl?: HTMLElement;
- actions: ContextMenuActionGroup[];
- onActionClick: (action: ContextMenuAction) => void;
+ items: ContextMenuItemGroup[];
+ open: boolean;
+ onItemClick: (action: ContextMenuItem) => void;
onClose: () => void;
}
-export default class ContextMenu<T> extends React.PureComponent<ContextMenuProps<T>> {
+export class ContextMenu extends React.PureComponent<ContextMenuProps> {
render() {
- const { anchorEl, actions, onClose, onActionClick } = this.props;
+ const { anchorEl, items, open, onClose, onItemClick } = this.props;
return <Popover
anchorEl={anchorEl}
- open={!!anchorEl}
+ open={open}
onClose={onClose}
transformOrigin={DefaultTransformOrigin}
- anchorOrigin={DefaultTransformOrigin}>
+ anchorOrigin={DefaultTransformOrigin}
+ onContextMenu={this.handleContextMenu}>
<List dense>
- {actions.map((group, groupIndex) =>
+ {items.map((group, groupIndex) =>
<React.Fragment key={groupIndex}>
- {group.map((action, actionIndex) =>
- <ListItem
- button
- key={actionIndex}
- onClick={() => onActionClick(action)}>
- <ListItemIcon>
- <i className={action.icon} />
- </ListItemIcon>
- <ListItemText>
- {action.name}
- </ListItemText>
- </ListItem>)}
- {groupIndex < actions.length - 1 && <Divider />}
+ {group.map((item, actionIndex) =>
+ 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>)}
+ {
+ items[groupIndex + 1] &&
+ items[groupIndex + 1].length > 0 &&
+ <Divider />
+ }
</React.Fragment>)}
</List>
</Popover>;
}
+
+ handleContextMenu = (event: React.MouseEvent<HTMLElement>) => {
+ event.preventDefault();
+ this.props.onClose();
+ }
}