Update ContextMenu to accept name and icon components
authorMichal Klobukowski <michal.klobukowski@contractors.roche.com>
Mon, 23 Jul 2018 21:47:31 +0000 (23:47 +0200)
committerMichal Klobukowski <michal.klobukowski@contractors.roche.com>
Mon, 23 Jul 2018 21:47:31 +0000 (23:47 +0200)
Feature #13784

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

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

index 2103a2a09c1211b1123ee8d93088fae8516cb9af..67fbb826f2cb1184df1df0c8ae1a38f17e3f9c80 100644 (file)
@@ -7,8 +7,8 @@ import { DefaultTransformOrigin } from "../popover/helpers";
 import { IconType } from "../icon/icon";
 
 export interface ContextMenuItem {
-    name: string;
-    icon: IconType;
+    name: string | React.ComponentType;
+    icon: React.ComponentType<any>;
 }
 
 export type ContextMenuItemGroup = ContextMenuItem[];
@@ -22,7 +22,7 @@ export interface ContextMenuProps {
 
 export class ContextMenu extends React.PureComponent<ContextMenuProps> {
     render() {
-        const { anchorEl, items, onClose, onItemClick} = this.props;
+        const { anchorEl, items, onClose, onItemClick } = this.props;
         return <Popover
             anchorEl={anchorEl}
             open={!!anchorEl}
@@ -39,10 +39,12 @@ export class ContextMenu extends React.PureComponent<ContextMenuProps> {
                                 key={actionIndex}
                                 onClick={() => onItemClick(item)}>
                                 <ListItemIcon>
-                                    <item.icon/>
+                                    <item.icon />
                                 </ListItemIcon>
                                 <ListItemText>
-                                    {item.name}
+                                    {typeof item.name === "string"
+                                        ? item.name
+                                        : <item.name />}
                                 </ListItemText>
                             </ListItem>)}
                         {groupIndex < items.length - 1 && <Divider />}