Merge branch 'master' into 13885-refactor-and-unify-icons-on-tree-component

[arvados.git] / src / components / context-menu / context-menu.tsx

diff --git a/src/components/context-menu/context-menu.tsx b/src/components/context-menu/context-menu.tsx
index 67fbb826f2cb1184df1df0c8ae1a38f17e3f9c80..95bbeafb4f23774c4a358b19282a60120375f751 100644 (file)
--- a/src/components/context-menu/context-menu.tsx
+++ b/src/components/context-menu/context-menu.tsx
@@ -7,8 +7,9 @@ import { DefaultTransformOrigin } from "../popover/helpers";
 import { IconType } from "../icon/icon";
 
 export interface ContextMenuItem {
-    name: string | React.ComponentType;
-    icon: React.ComponentType<any>;
+    name?: string | React.ComponentType;
+    icon?: IconType;
+    component?: React.ComponentType<any>;
 }
 
 export type ContextMenuItemGroup = ContextMenuItem[];
@@ -16,16 +17,17 @@ 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}
@@ -38,14 +40,16 @@ export class ContextMenu extends React.PureComponent<ContextMenuProps> {
                                 button
                                 key={actionIndex}
                                 onClick={() => onItemClick(item)}>
-                                <ListItemIcon>
-                                    <item.icon />
-                                </ListItemIcon>
-                                <ListItemText>
-                                    {typeof item.name === "string"
-                                        ? item.name
-                                        : <item.name />}
-                                </ListItemText>
+                                {item.icon &&
+                                    <ListItemIcon>
+                                        <item.icon />
+                                    </ListItemIcon>}
+                                {item.name &&
+                                    <ListItemText>
+                                        {item.name}
+                                    </ListItemText>}
+                                {item.component &&
+                                    <item.component />}
                             </ListItem>)}
                         {groupIndex < items.length - 1 && <Divider />}
                     </React.Fragment>)}