[ARVADOS-WORKBENCH2] updated: 1.1.4-101-g9526227

Git user git at public.curoverse.com
Mon Jun 18 11:52:23 EDT 2018


Summary of changes:
 src/components/data-explorer/context-menu.tsx  | 77 ++++++++++++++++++++------
 src/components/data-explorer/data-explorer.tsx |  8 ++-
 src/views/data-explorer/data-explorer.tsx      | 12 ++++
 3 files changed, 78 insertions(+), 19 deletions(-)

       via  95262273a85a2002a9f614c045fe6b907ddcc106 (commit)
      from  39eac675b7a8977d6dbb3a5815eba2bbbffe1645 (commit)

Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.


commit 95262273a85a2002a9f614c045fe6b907ddcc106
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date:   Mon Jun 18 17:52:06 2018 +0200

    Implement context menu actions
    
    Feature #13634
    
    Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>

diff --git a/src/components/data-explorer/context-menu.tsx b/src/components/data-explorer/context-menu.tsx
index 7ac8f61..879214b 100644
--- a/src/components/data-explorer/context-menu.tsx
+++ b/src/components/data-explorer/context-menu.tsx
@@ -4,64 +4,107 @@
 import * as React from "react";
 import { Popover, List, ListItem, ListItemIcon, ListItemText, Divider } from "@material-ui/core";
 import { DefaultTransformOrigin } from "../popover/helpers";
+import { DataItem } from "./data-item";
 
+export type ContextMenuAction = (item: DataItem) => void;
+export interface ContextMenuActions {
+    onShare: ContextMenuAction;
+    onMoveTo: ContextMenuAction;
+    onAddToFavourite: ContextMenuAction;
+    onRename: ContextMenuAction;
+    onCopy: ContextMenuAction;
+    onDownload: ContextMenuAction;
+    onRemove: ContextMenuAction;
+}
 export interface ContextMenuProps {
     anchorEl?: HTMLElement;
-    onClose: () => void;
+    item?: DataItem;
+    onClose: VoidFunction;
+    actions: ContextMenuActions;
 }
 
-export const ContextMenu: React.SFC<ContextMenuProps> = ({ anchorEl, onClose, children }) =>
+export const ContextMenu: React.SFC<ContextMenuProps> = ({ anchorEl, onClose, actions, item }) =>
     <Popover
         anchorEl={anchorEl}
         open={Boolean(anchorEl)}
         onClose={onClose}
         transformOrigin={DefaultTransformOrigin}
         anchorOrigin={DefaultTransformOrigin}>
-        <Actions />
+        <Actions {...{ actions, item, onClose }} />
     </Popover>;
 
-const Actions: React.SFC = () =>
+interface ActionsProps {
+    actions: ContextMenuActions;
+    item?: DataItem;
+    onClose: VoidFunction;
+}
+
+const Actions: React.SFC<ActionsProps> = ({ actions, item, onClose }) =>
     <List dense>
         {[{
             icon: "fas fa-users",
-            label: "Share"
+            label: "Share",
+            onClick: actions.onShare
         },
         {
             icon: "fas fa-sign-out-alt",
-            label: "Move to"
+            label: "Move to",
+            onClick: actions.onMoveTo
         },
         {
             icon: "fas fa-star",
-            label: "Add to favourite"
+            label: "Add to favourite",
+            onClick: actions.onAddToFavourite
         },
         {
             icon: "fas fa-edit",
-            label: "Rename"
+            label: "Rename",
+            onClick: actions.onRename
         },
         {
             icon: "fas fa-copy",
-            label: "Make a copy"
+            label: "Make a copy",
+            onClick: actions.onCopy
         },
         {
             icon: "fas fa-download",
-            label: "Download"
-        }].map((props, index) => <Action {...props} key={index} />)}
+            label: "Download",
+            onClick: actions.onDownload
+        }].map((props, index) =>
+            <Action
+                item={item}
+                onClose={onClose}
+                key={index}
+                {...props} />)}
         < Divider />
-        <Action icon="fas fa-trash-alt" label="Remove" />
+        <Action
+            icon="fas fa-trash-alt"
+            label="Remove"
+            item={item}
+            onClose={onClose}
+            onClick={actions.onRemove} />
     </List>;
 
 interface ActionProps {
+    onClick: ContextMenuAction;
+    item?: DataItem;
     icon: string;
     label: string;
+    onClose: VoidFunction;
 }
 
-const Action: React.SFC<ActionProps> = (props) =>
-    <ListItem button>
+const Action: React.SFC<ActionProps> = ({ onClick, onClose, item, icon, label }) =>
+    <ListItem button onClick={() => {
+        if (item) {
+            onClick(item);
+            onClose();
+        }
+    }}>
         <ListItemIcon>
-            <i className={props.icon} />
+            <i className={icon} />
         </ListItemIcon>
         <ListItemText>
-            {props.label}
+            {label}
         </ListItemText>
-    </ListItem>;
+    </ListItem >;
 
diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 20727a7..96e259f 100644
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -10,11 +10,12 @@ import MoreVertIcon from "@material-ui/icons/MoreVert";
 import { formatFileSize, formatDate } from '../../common/formatters';
 import { DataItem } from './data-item';
 import { mockAnchorFromMouseEvent } from '../popover/helpers';
-import { ContextMenu } from './context-menu';
+import { ContextMenu, ContextMenuActions } from './context-menu';
 
 interface DataExplorerProps {
     items: DataItem[];
     onItemClick: (item: DataItem) => void;
+    contextMenuActions: ContextMenuActions;
 }
 
 interface DataExplorerState {
@@ -71,7 +72,10 @@ class DataExplorer extends React.Component<DataExplorerProps, DataExplorerState>
 
     render() {
         return <Paper>
-            <ContextMenu {...this.state.contextMenu} onClose={this.closeContextMenu} />
+            <ContextMenu
+                {...this.state.contextMenu}
+                onClose={this.closeContextMenu}
+                actions={this.props.contextMenuActions} />
             <Toolbar>
                 <Grid container justify="flex-end">
                     <ColumnSelector
diff --git a/src/views/data-explorer/data-explorer.tsx b/src/views/data-explorer/data-explorer.tsx
index 5f17b63..bb19a26 100644
--- a/src/views/data-explorer/data-explorer.tsx
+++ b/src/views/data-explorer/data-explorer.tsx
@@ -13,6 +13,7 @@ import { push } from 'react-router-redux';
 import projectActions from "../../store/project/project-action";
 import { DataExplorer, DataItem } from '../../components/data-explorer';
 import { TreeItem } from '../../components/tree/tree';
+import { ContextMenuActions } from '../../components/data-explorer/context-menu';
 
 interface DataExplorerViewDataProps {
     projects: ProjectState;
@@ -35,10 +36,21 @@ class DataExplorerView extends React.Component<DataExplorerViewProps, DataExplor
             <DataExplorer
                 items={projectItems.map(mapTreeItem)}
                 onItemClick={this.goToProject}
+                contextMenuActions={this.contextMenuActions}
             />
         );
     }
 
+    contextMenuActions: ContextMenuActions = {
+        onAddToFavourite: console.log,
+        onCopy: console.log,
+        onDownload: console.log,
+        onMoveTo: console.log,
+        onRemove: console.log,
+        onRename: console.log,
+        onShare: console.log
+    };
+
     goToProject = (project: MappedProjectItem) => {
         this.props.dispatch(push(`/project/${project.uuid}`));
         this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(project.uuid));

-----------------------------------------------------------------------


hooks/post-receive
-- 




More information about the arvados-commits mailing list