src/components/data-explorer/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
   8 export interface ContextMenuProps {
   9     anchorEl?: HTMLElement;
  10     onClose: () => void;
  11 }
  12
  13 export const ContextMenu: React.SFC<ContextMenuProps> = ({ anchorEl, onClose, children }) =>
  14     <Popover
  15         anchorEl={anchorEl}
  16         open={Boolean(anchorEl)}
  17         onClose={onClose}
  18         transformOrigin={DefaultTransformOrigin}
  19         anchorOrigin={DefaultTransformOrigin}>
  20         <Actions />
  21     </Popover>;
  22
  23 const Actions: React.SFC = () =>
  24     <List dense>
  25         {[{
  26             icon: "fas fa-users",
  27             label: "Share"
  28         },
  29         {
  30             icon: "fas fa-sign-out-alt",
  31             label: "Move to"
  32         },
  33         {
  34             icon: "fas fa-star",
  35             label: "Add to favourite"
  36         },
  37         {
  38             icon: "fas fa-edit",
  39             label: "Rename"
  40         },
  41         {
  42             icon: "fas fa-copy",
  43             label: "Make a copy"
  44         },
  45         {
  46             icon: "fas fa-download",
  47             label: "Download"
  48         }].map((props, index) => <Action {...props} key={index} />)}
  49         < Divider />
  50         <Action icon="fas fa-trash-alt" label="Remove" />
  51     </List>;
  52
  53 interface ActionProps {
  54     icon: string;
  55     label: string;
  56 }
  57
  58 const Action: React.SFC<ActionProps> = (props) =>
  59     <ListItem button>
  60         <ListItemIcon>
  61             <i className={props.icon} />
  62         </ListItemIcon>
  63         <ListItemText>
  64             {props.label}
  65         </ListItemText>
  66     </ListItem>;
  67