[ARVADOS-WORKBENCH2] updated: 1.1.4-229-g0c8dea6
Git user
git at public.curoverse.com
Mon Jul 9 05:57:46 EDT 2018
Summary of changes:
src/components/data-explorer/data-explorer.tsx | 58 ++--------------------
src/components/data-table/data-table.tsx | 15 ++++--
.../data-explorer/data-explorer.tsx | 11 ++--
src/views/project-panel/project-panel.tsx | 30 +----------
src/views/workbench/workbench.tsx | 57 +++++++++++++++++++--
5 files changed, 74 insertions(+), 97 deletions(-)
via 0c8dea6be6e43f6331655cbf916946e5750b5aa9 (commit)
from ef5638d48d3df04d37c80baace632e743d3e5102 (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 0c8dea6be6e43f6331655cbf916946e5750b5aa9
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Mon Jul 9 11:57:30 2018 +0200
Move context menu to workbench component
Feature #13694
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index ce285fa..c8f6fb8 100644
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -5,7 +5,6 @@
import * as React from 'react';
import { Grid, Paper, Toolbar, StyleRulesCallback, withStyles, Theme, WithStyles, TablePagination, IconButton } from '@material-ui/core';
import MoreVertIcon from "@material-ui/icons/MoreVert";
-import ContextMenu, { ContextMenuActionGroup, ContextMenuAction } from "../../components/context-menu/context-menu";
import ColumnSelector from "../../components/column-selector/column-selector";
import DataTable, { DataColumns, DataItem } from "../../components/data-table/data-table";
import { mockAnchorFromMouseEvent } from "../../components/popover/helpers";
@@ -17,7 +16,6 @@ interface DataExplorerProps<T> {
items: T[];
itemsAvailable: number;
columns: DataColumns<T>;
- contextActions: ContextMenuActionGroup[];
searchValue: string;
rowsPerPage: number;
rowsPerPageOptions?: number[];
@@ -25,7 +23,7 @@ interface DataExplorerProps<T> {
onSearch: (value: string) => void;
onRowClick: (item: T) => void;
onColumnToggle: (column: DataColumn<T>) => void;
- onContextAction: (action: ContextMenuAction, item: T) => void;
+ onContextMenu: (event: React.MouseEvent<HTMLElement>, item: T) => void;
onSortToggle: (column: DataColumn<T>) => void;
onFiltersChange: (filters: DataTableFilterItem[], column: DataColumn<T>) => void;
onChangePage: (page: number) => void;
@@ -34,25 +32,10 @@ interface DataExplorerProps<T> {
closeContextMenu: () => void;
}
-interface DataExplorerState<T> {
- contextMenu: {
- anchorEl?: HTMLElement;
- item?: T;
- };
-}
-
-class DataExplorer<T extends DataItem> extends React.Component<DataExplorerProps<T> & WithStyles<CssRules>, DataExplorerState<T>> {
- state: DataExplorerState<T> = {
- contextMenu: {}
- };
+class DataExplorer<T extends DataItem> extends React.Component<DataExplorerProps<T> & WithStyles<CssRules>> {
render() {
return <Paper>
- <ContextMenu
- anchorEl={this.state.contextMenu.anchorEl}
- actions={this.props.contextActions}
- onActionClick={this.callAction}
- onClose={this.closeContextMenu} />
<Toolbar className={this.props.classes.toolbar}>
<Grid container justify="space-between" wrap="nowrap" alignItems="center">
<div className={this.props.classes.searchBox}>
@@ -69,7 +52,7 @@ class DataExplorer<T extends DataItem> extends React.Component<DataExplorerProps
columns={[...this.props.columns, this.contextMenuColumn]}
items={this.props.items}
onRowClick={(_, item: T) => this.props.onRowClick(item)}
- onRowContextMenu={this.openContextMenu}
+ onContextMenu={this.props.onContextMenu}
onFiltersChange={this.props.onFiltersChange}
onSortToggle={this.props.onSortToggle} />
<Toolbar>
@@ -89,29 +72,6 @@ class DataExplorer<T extends DataItem> extends React.Component<DataExplorerProps
</Paper>;
}
- openContextMenu = (event: React.MouseEvent<HTMLElement>, item: T) => {
- event.preventDefault();
- event.stopPropagation();
- this.setState({
- contextMenu: {
- anchorEl: mockAnchorFromMouseEvent(event),
- item
- }
- });
- }
-
- closeContextMenu = () => {
- this.setState({ contextMenu: {} });
- }
-
- callAction = (action: ContextMenuAction) => {
- const { item } = this.state.contextMenu;
- this.closeContextMenu();
- if (item) {
- this.props.onContextAction(action, item);
- }
- }
-
changePage = (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => {
this.props.onChangePage(page);
}
@@ -122,21 +82,11 @@ class DataExplorer<T extends DataItem> extends React.Component<DataExplorerProps
renderContextMenuTrigger = (item: T) =>
<Grid container justify="flex-end">
- <IconButton onClick={event => this.openContextMenuTrigger(event, item)}>
+ <IconButton onClick={event => this.props.onContextMenu(event, item)}>
<MoreVertIcon />
</IconButton>
</Grid>
- openContextMenuTrigger = (event: React.MouseEvent<HTMLElement>, item: T) => {
- event.preventDefault();
- this.setState({
- contextMenu: {
- anchorEl: event.currentTarget,
- item
- }
- });
- }
-
contextMenuColumn = {
name: "Actions",
selected: true,
diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index 5372128..854b322 100644
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -15,7 +15,7 @@ export interface DataTableProps<T> {
items: T[];
columns: DataColumns<T>;
onRowClick: (event: React.MouseEvent<HTMLTableRowElement>, item: T) => void;
- onRowContextMenu: (event: React.MouseEvent<HTMLTableRowElement>, item: T) => void;
+ onContextMenu: (event: React.MouseEvent<HTMLElement>, item: T) => void;
onSortToggle: (column: DataColumn<T>) => void;
onFiltersChange: (filters: DataTableFilterItem[], column: DataColumn<T>) => void;
}
@@ -23,7 +23,8 @@ export interface DataTableProps<T> {
class DataTable<T extends DataItem> extends React.Component<DataTableProps<T> & WithStyles<CssRules>> {
render() {
const { items, classes } = this.props;
- return <div className={classes.tableContainer}>
+ return <div
+ className={classes.tableContainer}>
<Table>
<TableHead>
<TableRow>
@@ -40,7 +41,7 @@ class DataTable<T extends DataItem> extends React.Component<DataTableProps<T> &
renderHeadCell = (column: DataColumn<T>, index: number) => {
const { name, key, renderHeader, filters, sortDirection } = column;
const { onSortToggle, onFiltersChange } = this.props;
- return <TableCell key={key || index} style={{width: column.width, minWidth: column.width}}>
+ return <TableCell key={key || index} style={{ width: column.width, minWidth: column.width }}>
{renderHeader ?
renderHeader() :
filters
@@ -68,12 +69,12 @@ class DataTable<T extends DataItem> extends React.Component<DataTableProps<T> &
}
renderBodyRow = (item: T, index: number) => {
- const { onRowClick, onRowContextMenu } = this.props;
+ const { onRowClick, onContextMenu } = this.props;
return <TableRow
hover
key={item.key}
onClick={event => onRowClick && onRowClick(event, item)}
- onContextMenu={event => onRowContextMenu && onRowContextMenu(event, item)}>
+ onContextMenu={this.handleRowContextMenu(item)}>
{this.mapVisibleColumns((column, index) => (
<TableCell key={column.key || index}>
{column.render(item)}
@@ -86,6 +87,10 @@ class DataTable<T extends DataItem> extends React.Component<DataTableProps<T> &
return this.props.columns.filter(column => column.selected).map(fn);
}
+ handleRowContextMenu = (item: T) =>
+ (event: React.MouseEvent<HTMLElement>) =>
+ this.props.onContextMenu(event, item)
+
}
type CssRules = "tableBody" | "tableContainer" | "noItemsInfo";
diff --git a/src/views-components/data-explorer/data-explorer.tsx b/src/views-components/data-explorer/data-explorer.tsx
index f89bc65..2864cef 100644
--- a/src/views-components/data-explorer/data-explorer.tsx
+++ b/src/views-components/data-explorer/data-explorer.tsx
@@ -14,15 +14,14 @@ import { ContextMenuAction, ContextMenuActionGroup } from "../../components/cont
interface Props {
id: string;
- contextActions: ContextMenuActionGroup[];
onRowClick: (item: any) => void;
- onContextAction: (action: ContextMenuAction, item: any) => void;
+ onContextMenu: (event: React.MouseEvent<HTMLElement>, item: any) => void;
}
-const mapStateToProps = (state: RootState, { id, contextActions }: Props) =>
+const mapStateToProps = (state: RootState, { id }: Props) =>
getDataExplorer(state.dataExplorer, id);
-const mapDispatchToProps = (dispatch: Dispatch, { id, contextActions, onRowClick, onContextAction }: Props) => ({
+const mapDispatchToProps = (dispatch: Dispatch, { id, onRowClick, onContextMenu }: Props) => ({
onSearch: (searchValue: string) => {
dispatch(actions.SET_SEARCH_VALUE({ id, searchValue }));
},
@@ -47,11 +46,9 @@ const mapDispatchToProps = (dispatch: Dispatch, { id, contextActions, onRowClick
dispatch(actions.SET_ROWS_PER_PAGE({ id, rowsPerPage }));
},
- contextActions,
-
onRowClick,
- onContextAction
+ onContextMenu
});
export default connect(mapStateToProps, mapDispatchToProps)(DataExplorer);
diff --git a/src/views/project-panel/project-panel.tsx b/src/views/project-panel/project-panel.tsx
index cb24788..569a565 100644
--- a/src/views/project-panel/project-panel.tsx
+++ b/src/views/project-panel/project-panel.tsx
@@ -37,6 +37,7 @@ type ProjectPanelProps = {
currentItemId: string,
onItemClick: (item: ProjectPanelItem) => void,
onItemRouteChange: (itemId: string) => void,
+ onContextMenu: (event: React.MouseEvent<HTMLElement>, item: ProjectPanelItem) => void;
handleCreationDialogOpen: () => void;
handleCreationDialogClose: () => void;
isCreationDialogOpen: boolean;
@@ -67,9 +68,8 @@ class ProjectPanel extends React.Component<ProjectPanelProps, DataExplorerState<
</div>
<DataExplorer
id={PROJECT_PANEL_ID}
- contextActions={contextMenuActions}
onRowClick={this.props.onItemClick}
- onContextAction={this.executeAction}
+ onContextMenu={this.props.onContextMenu}
openContextMenu={this.openContextMenu}
closeContextMenu={this.closeContextMenu} />;
</div>;
@@ -255,32 +255,6 @@ export const columns: DataColumns<ProjectPanelItem, ProjectPanelFilter> = [{
width: "150px"
}];
-const contextMenuActions = [[{
- icon: "fas fa-plus fa-fw",
- name: "New project"
-}, {
- icon: "fas fa-users fa-fw",
- name: "Share"
-}, {
- icon: "fas fa-sign-out-alt fa-fw",
- name: "Move to"
-}, {
- icon: "fas fa-star fa-fw",
- name: "Add to favourite"
-}, {
- icon: "fas fa-edit fa-fw",
- name: "Rename"
-}, {
- icon: "fas fa-copy fa-fw",
- name: "Make a copy"
-}, {
- icon: "fas fa-download fa-fw",
- name: "Download"
-}], [{
- icon: "fas fa-trash-alt fa-fw",
- name: "Remove"
-}
-]];
export default withStyles(styles)(
connect((state: RootState) => ({ currentItemId: state.projects.currentItemId }))(
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 0226dc9..57f0898 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -30,6 +30,8 @@ import ProjectPanel from "../project-panel/project-panel";
import { sidePanelData } from '../../store/side-panel/side-panel-reducer';
import DetailsPanel from '../../views-components/details-panel/details-panel';
import { ArvadosTheme } from '../../common/custom-theme';
+import ContextMenu from '../../components/context-menu/context-menu';
+import { mockAnchorFromMouseEvent } from '../../components/popover/helpers';
const drawerWidth = 240;
const appBarHeight = 100;
@@ -93,6 +95,9 @@ interface NavMenuItem extends MainAppBarMenuItem {
}
interface WorkbenchState {
+ contextMenu: {
+ anchorEl?: HTMLElement;
+ };
isCreationDialogOpen: boolean;
anchorEl: any;
searchText: string;
@@ -106,6 +111,9 @@ interface WorkbenchState {
class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
state = {
+ contextMenu: {
+ anchorEl: undefined
+ },
isCreationDialogOpen: false,
anchorEl: null,
searchText: "",
@@ -168,6 +176,16 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
this.setState({ isCreationDialogOpen: false });
}
+ openContextMenu = (event: React.MouseEvent<HTMLElement>, item: any) => {
+ event.preventDefault();
+ this.setState({ contextMenu: { anchorEl: mockAnchorFromMouseEvent(event) } });
+ console.log(item);
+ }
+
+ closeContextMenu = () => {
+ this.setState({ contextMenu: {} });
+ }
+
render() {
const path = getTreePath(this.props.projects, this.props.currentProjectId);
const breadcrumbs = path.map(item => ({
@@ -216,10 +234,15 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
<Route path="/projects/:id" render={this.renderProjectPanel} />
</Switch>
</div>
- <DetailsPanel
- isOpened={this.state.isDetailsPanelOpened}
+ <DetailsPanel
+ isOpened={this.state.isDetailsPanelOpened}
onCloseDrawer={this.mainAppBarActions.onDetailsPanelToggle} />
</main>
+ <ContextMenu
+ anchorEl={this.state.contextMenu.anchorEl}
+ actions={contextMenuActions}
+ onActionClick={console.log}
+ onClose={this.closeContextMenu} />
</div>
);
}
@@ -227,12 +250,40 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
renderProjectPanel = (props: RouteComponentProps<{ id: string }>) => <ProjectPanel
onItemRouteChange={itemId => this.props.dispatch<any>(setProjectItem(itemId, ItemMode.ACTIVE))}
onItemClick={item => this.props.dispatch<any>(setProjectItem(item.uuid, ItemMode.ACTIVE))}
+ onContextMenu={this.openContextMenu}
handleCreationDialogOpen={this.handleCreationDialogOpen}
handleCreationDialogClose={this.handleCreationDialogClose}
isCreationDialogOpen={this.state.isCreationDialogOpen}
{...props} />
-
+
+}
+
+const contextMenuActions = [[{
+ icon: "fas fa-plus fa-fw",
+ name: "New project"
+}, {
+ icon: "fas fa-users fa-fw",
+ name: "Share"
+}, {
+ icon: "fas fa-sign-out-alt fa-fw",
+ name: "Move to"
+}, {
+ icon: "fas fa-star fa-fw",
+ name: "Add to favourite"
+}, {
+ icon: "fas fa-edit fa-fw",
+ name: "Rename"
+}, {
+ icon: "fas fa-copy fa-fw",
+ name: "Make a copy"
+}, {
+ icon: "fas fa-download fa-fw",
+ name: "Download"
+}], [{
+ icon: "fas fa-trash-alt fa-fw",
+ name: "Remove"
}
+]];
export default connect<WorkbenchDataProps>(
(state: RootState) => ({
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list