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 import { DataItem } from "./data-item";
   8
   9 export type ContextMenuAction = (item: DataItem) => void;
  10 export interface ContextMenuActions {
  11     onShare: ContextMenuAction;
  12     onMoveTo: ContextMenuAction;
  13     onAddToFavourite: ContextMenuAction;
  14     onRename: ContextMenuAction;
  15     onCopy: ContextMenuAction;
  16     onDownload: ContextMenuAction;
  17     onRemove: ContextMenuAction;
  18 }
  19 export interface ContextMenuProps {
  20     anchorEl?: HTMLElement;
  21     item?: DataItem;
  22     onClose: () => void;
  23     actions: ContextMenuActions;
  24 }
  25
  26 export const ContextMenu: React.SFC<ContextMenuProps> = ({ anchorEl, onClose, actions, item }) =>
  27     <Popover
  28         anchorEl={anchorEl}
  29         open={Boolean(anchorEl)}
  30         onClose={onClose}
  31         transformOrigin={DefaultTransformOrigin}
  32         anchorOrigin={DefaultTransformOrigin}>
  33         <Actions {...{ actions, item, onClose }} />
  34     </Popover>;
  35
  36 interface ActionsProps {
  37     actions: ContextMenuActions;
  38     item?: DataItem;
  39     onClose: () => void;
  40 }
  41
  42 const Actions: React.SFC<ActionsProps> = ({ actions, item, onClose }) =>
  43     <List dense>
  44         {[{
  45             icon: "fas fa-users",
  46             label: "Share",
  47             onClick: actions.onShare
  48         },
  49         {
  50             icon: "fas fa-sign-out-alt",
  51             label: "Move to",
  52             onClick: actions.onMoveTo
  53         },
  54         {
  55             icon: "fas fa-star",
  56             label: "Add to favourite",
  57             onClick: actions.onAddToFavourite
  58         },
  59         {
  60             icon: "fas fa-edit",
  61             label: "Rename",
  62             onClick: actions.onRename
  63         },
  64         {
  65             icon: "fas fa-copy",
  66             label: "Make a copy",
  67             onClick: actions.onCopy
  68         },
  69         {
  70             icon: "fas fa-download",
  71             label: "Download",
  72             onClick: actions.onDownload
  73         }].map((props, index) =>
  74             <Action
  75                 item={item}
  76                 onClose={onClose}
  77                 key={index}
  78                 {...props} />)}
  79         < Divider />
  80         <Action
  81             icon="fas fa-trash-alt"
  82             label="Remove"
  83             item={item}
  84             onClose={onClose}
  85             onClick={actions.onRemove} />
  86     </List>;
  87
  88 interface ActionProps {
  89     onClick: ContextMenuAction;
  90     item?: DataItem;
  91     icon: string;
  92     label: string;
  93     onClose: () => void;
  94 }
  95
  96 const Action: React.SFC<ActionProps> = ({ onClick, onClose, item, icon, label }) =>
  97     <ListItem button onClick={() => {
  98         if (item) {
  99             onClick(item);
 100             onClose();
 101         }
 102     }}>
 103         <ListItemIcon>
 104             <i className={icon} />
 105         </ListItemIcon>
 106         <ListItemText>
 107             {label}
 108         </ListItemText>
 109     </ListItem >;
 110