src/components/context-menu/context-menu.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4 import * as React from "react";
   5 import { Popover, List, ListItem, ListItemIcon, ListItemText, Divider } from "@material-ui/core";
   6 import { DefaultTransformOrigin } from "../popover/helpers";
   7 import { IconType } from "../icon/icon";
   8
   9 export interface ContextMenuItem {
  10     name: string;
  11     icon: IconType;
  12 }
  13
  14 export type ContextMenuItemGroup = ContextMenuItem[];
  15
  16 export interface ContextMenuProps {
  17     anchorEl?: HTMLElement;
  18     items: ContextMenuItemGroup[];
  19     onItemClick: (action: ContextMenuItem) => void;
  20     onClose: () => void;
  21 }
  22
  23 export default class ContextMenu extends React.PureComponent<ContextMenuProps> {
  24     render() {
  25         const { anchorEl, items, onClose, onItemClick} = this.props;
  26         return <Popover
  27             anchorEl={anchorEl}
  28             open={!!anchorEl}
  29             onClose={onClose}
  30             transformOrigin={DefaultTransformOrigin}
  31             anchorOrigin={DefaultTransformOrigin}
  32             onContextMenu={this.handleContextMenu}>
  33             <List dense>
  34                 {items.map((group, groupIndex) =>
  35                     <React.Fragment key={groupIndex}>
  36                         {group.map((item, actionIndex) =>
  37                             <ListItem
  38                                 button
  39                                 key={actionIndex}
  40                                 onClick={() => onItemClick(item)}>
  41                                 <ListItemIcon>
  42                                     <item.icon/>
  43                                 </ListItemIcon>
  44                                 <ListItemText>
  45                                     {item.name}
  46                                 </ListItemText>
  47                             </ListItem>)}
  48                         {groupIndex < items.length - 1 && <Divider />}
  49                     </React.Fragment>)}
  50             </List>
  51         </Popover>;
  52     }
  53
  54     handleContextMenu = (event: React.MouseEvent<HTMLElement>) => {
  55         event.preventDefault();
  56         this.props.onClose();
  57     }
  58 }