[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