Add onContextMenu props to breadcrumbs
authorMichal Klobukowski <michal.klobukowski@contractors.roche.com>
Mon, 9 Jul 2018 10:55:23 +0000 (12:55 +0200)
committerMichal Klobukowski <michal.klobukowski@contractors.roche.com>
Mon, 9 Jul 2018 10:55:23 +0000 (12:55 +0200)
Feature #13694

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

src/components/breadcrumbs/breadcrumbs.tsx
src/views-components/main-app-bar/main-app-bar.tsx
src/views/workbench/workbench.tsx

index 41f71981e57eea29d54064f5888c78961f283f89..4868e137f9f6b11065bdd2dbfaf3d3ff4ac642da 100644 (file)
@@ -14,9 +14,10 @@ export interface Breadcrumb {
 interface BreadcrumbsProps {
     items: Breadcrumb[];
     onClick: (breadcrumb: Breadcrumb) => void;
+    onContextMenu: (event: React.MouseEvent<HTMLElement>, breadcrumb: Breadcrumb) => void;
 }
 
-const Breadcrumbs: React.SFC<BreadcrumbsProps & WithStyles<CssRules>> = ({ classes, onClick, items }) => {
+const Breadcrumbs: React.SFC<BreadcrumbsProps & WithStyles<CssRules>> = ({ classes, onClick, onContextMenu, items }) => {
     return <Grid container alignItems="center" wrap="nowrap">
         {
             items.map((item, index) => {
@@ -28,12 +29,11 @@ const Breadcrumbs: React.SFC<BreadcrumbsProps & WithStyles<CssRules>> = ({ class
                                 color="inherit"
                                 className={isLastItem ? classes.currentItem : classes.item}
                                 onClick={() => onClick(item)}
-                            >
+                                onContextMenu={event => onContextMenu(event, item)}>
                                 <Typography
                                     noWrap
                                     color="inherit"
-                                    className={classes.label}
-                                >
+                                    className={classes.label}>
                                     {item.label}
                                 </Typography>
                             </Button>
index 1230e3b7db60abe9901db66fa28a310a6737c804..d2082395125e740e1cff707293d4e7f8d081740b 100644 (file)
@@ -35,6 +35,7 @@ export interface MainAppBarActionProps {
     onSearch: (searchText: string) => void;
     onBreadcrumbClick: (breadcrumb: Breadcrumb) => void;
     onMenuItemClick: (menuItem: MainAppBarMenuItem) => void;
+    onContextMenu: (event: React.MouseEvent<HTMLElement>, breadcrumb: Breadcrumb) => void;
     onDetailsPanelToggle: () => void;
 }
 
@@ -70,7 +71,10 @@ export const MainAppBar: React.SFC<MainAppBarProps> = (props) => {
         </Toolbar>
         <Toolbar >
             {
-                props.user && <Breadcrumbs items={props.breadcrumbs} onClick={props.onBreadcrumbClick} />
+                props.user && <Breadcrumbs
+                    items={props.breadcrumbs}
+                    onClick={props.onBreadcrumbClick}
+                    onContextMenu={props.onContextMenu} />
             }
             <IconButton color="inherit" onClick={props.onDetailsPanelToggle}>
                 <InfoIcon />
index 57f0898977cbf6177fa4dda62fbbdf579145f16e..3b8b00e219e9dc4f50ce9be641a5fb712e9cff26 100644 (file)
@@ -156,6 +156,9 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
         onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action(),
         onDetailsPanelToggle: () => {
             this.setState(prev => ({ isDetailsPanelOpened: !prev.isDetailsPanelOpened }));
+        },
+        onContextMenu: (event: React.MouseEvent<HTMLElement>, breadcrumb: Breadcrumb) => {
+            this.openContextMenu(event, breadcrumb);
         }
     };