[ARVADOS-WORKBENCH2] updated: 1.1.4-100-g39eac67
Git user
git at public.curoverse.com
Mon Jun 18 11:09:44 EDT 2018
Summary of changes:
src/components/data-explorer/context-menu.tsx | 67 ++++++++++++++++
src/components/data-explorer/data-explorer.tsx | 105 +++++++++++--------------
src/components/popover/helpers.ts | 24 ++++++
3 files changed, 139 insertions(+), 57 deletions(-)
create mode 100644 src/components/data-explorer/context-menu.tsx
create mode 100644 src/components/popover/helpers.ts
via 39eac675b7a8977d6dbb3a5815eba2bbbffe1645 (commit)
from 6f12d4bae0571b94ade65f0c0a1423056c8dc253 (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 39eac675b7a8977d6dbb3a5815eba2bbbffe1645
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Mon Jun 18 17:09:27 2018 +0200
Implement basic context menu
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
new file mode 100644
index 0000000..7ac8f61
--- /dev/null
+++ b/src/components/data-explorer/context-menu.tsx
@@ -0,0 +1,67 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+import * as React from "react";
+import { Popover, List, ListItem, ListItemIcon, ListItemText, Divider } from "@material-ui/core";
+import { DefaultTransformOrigin } from "../popover/helpers";
+
+export interface ContextMenuProps {
+ anchorEl?: HTMLElement;
+ onClose: () => void;
+}
+
+export const ContextMenu: React.SFC<ContextMenuProps> = ({ anchorEl, onClose, children }) =>
+ <Popover
+ anchorEl={anchorEl}
+ open={Boolean(anchorEl)}
+ onClose={onClose}
+ transformOrigin={DefaultTransformOrigin}
+ anchorOrigin={DefaultTransformOrigin}>
+ <Actions />
+ </Popover>;
+
+const Actions: React.SFC = () =>
+ <List dense>
+ {[{
+ icon: "fas fa-users",
+ label: "Share"
+ },
+ {
+ icon: "fas fa-sign-out-alt",
+ label: "Move to"
+ },
+ {
+ icon: "fas fa-star",
+ label: "Add to favourite"
+ },
+ {
+ icon: "fas fa-edit",
+ label: "Rename"
+ },
+ {
+ icon: "fas fa-copy",
+ label: "Make a copy"
+ },
+ {
+ icon: "fas fa-download",
+ label: "Download"
+ }].map((props, index) => <Action {...props} key={index} />)}
+ < Divider />
+ <Action icon="fas fa-trash-alt" label="Remove" />
+ </List>;
+
+interface ActionProps {
+ icon: string;
+ label: string;
+}
+
+const Action: React.SFC<ActionProps> = (props) =>
+ <ListItem button>
+ <ListItemIcon>
+ <i className={props.icon} />
+ </ListItemIcon>
+ <ListItemText>
+ {props.label}
+ </ListItemText>
+ </ListItem>;
+
diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 9aeb28a..20727a7 100644
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -3,23 +3,31 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { DataTable, DataTableProps, DataColumn, ColumnSelector } from "../../components/data-table";
-import { Typography, Grid, ListItem, Divider, List, ListItemIcon, ListItemText, Paper, Toolbar } from '@material-ui/core';
-import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
+import { DataTable, DataColumn, ColumnSelector } from "../../components/data-table";
+import { Typography, Grid, Paper, Toolbar } from '@material-ui/core';
+import IconButton from '@material-ui/core/IconButton';
import MoreVertIcon from "@material-ui/icons/MoreVert";
-import Popover from '../popover/popover';
import { formatFileSize, formatDate } from '../../common/formatters';
import { DataItem } from './data-item';
+import { mockAnchorFromMouseEvent } from '../popover/helpers';
+import { ContextMenu } from './context-menu';
interface DataExplorerProps {
items: DataItem[];
onItemClick: (item: DataItem) => void;
}
-type DataExplorerState = Pick<DataTableProps<DataItem>, "columns">;
+interface DataExplorerState {
+ columns: Array<DataColumn<DataItem>>;
+ contextMenu: {
+ anchorEl?: HTMLElement;
+ item?: DataItem;
+ };
+}
class DataExplorer extends React.Component<DataExplorerProps, DataExplorerState> {
state: DataExplorerState = {
+ contextMenu: {},
columns: [
{
name: "Name",
@@ -44,7 +52,7 @@ class DataExplorer extends React.Component<DataExplorerProps, DataExplorerState>
{
name: "File size",
selected: true,
- render: (item) => renderFileSize(item.fileSize)
+ render: item => renderFileSize(item.fileSize)
},
{
name: "Last modified",
@@ -56,13 +64,14 @@ class DataExplorer extends React.Component<DataExplorerProps, DataExplorerState>
selected: true,
configurable: false,
renderHeader: () => null,
- render: renderItemActions
+ render: item => this.renderActions(item)
}
]
};
render() {
return <Paper>
+ <ContextMenu {...this.state.contextMenu} onClose={this.closeContextMenu} />
<Toolbar>
<Grid container justify="flex-end">
<ColumnSelector
@@ -72,7 +81,8 @@ class DataExplorer extends React.Component<DataExplorerProps, DataExplorerState>
</Toolbar>
<DataTable
columns={this.state.columns}
- items={this.props.items} />
+ items={this.props.items}
+ onRowContextMenu={this.openItemMenuOnRowClick} />
<Toolbar />
</Paper>;
}
@@ -101,6 +111,36 @@ class DataExplorer extends React.Component<DataExplorerProps, DataExplorerState>
</Grid>
</Grid>
+ renderActions = (item: DataItem) =>
+ <Grid container justify="flex-end">
+ <IconButton onClick={event => this.openItemMenuOnActionsClick(event, item)}>
+ <MoreVertIcon />
+ </IconButton>
+ </Grid>
+
+ openItemMenuOnRowClick = (event: React.MouseEvent<HTMLElement>, item: DataItem) => {
+ event.preventDefault();
+ this.setState({
+ contextMenu: {
+ anchorEl: mockAnchorFromMouseEvent(event),
+ item
+ }
+ });
+ }
+
+ openItemMenuOnActionsClick = (event: React.MouseEvent<HTMLElement>, item: DataItem) => {
+ this.setState({
+ contextMenu: {
+ anchorEl: event.currentTarget,
+ item
+ }
+ });
+ }
+
+ closeContextMenu = () => {
+ this.setState({ contextMenu: {} });
+ }
+
}
const renderIcon = (dataItem: DataItem) => {
@@ -139,53 +179,4 @@ const renderStatus = (status?: string) =>
{status || "-"}
</Typography>;
-const renderItemActions = () =>
- <Grid container justify="flex-end">
- <Popover triggerComponent={ItemActionsTrigger}>
- <List dense>
- {[{
- icon: "fas fa-users",
- label: "Share"
- },
- {
- icon: "fas fa-sign-out-alt",
- label: "Move to"
- },
- {
- icon: "fas fa-star",
- label: "Add to favourite"
- },
- {
- icon: "fas fa-edit",
- label: "Rename"
- },
- {
- icon: "fas fa-copy",
- label: "Make a copy"
- },
- {
- icon: "fas fa-download",
- label: "Download"
- }].map(renderAction)}
- < Divider />
- {renderAction({ icon: "fas fa-trash-alt", label: "Remove" })}
- </List>
- </Popover>
- </Grid>;
-
-const renderAction = (action: { label: string, icon: string }, index?: number) =>
- <ListItem button key={index}>
- <ListItemIcon>
- <i className={action.icon} />
- </ListItemIcon>
- <ListItemText>
- {action.label}
- </ListItemText>
- </ListItem>;
-
-const ItemActionsTrigger: React.SFC<IconButtonProps> = (props) =>
- <IconButton {...props}>
- <MoreVertIcon />
- </IconButton>;
-
export default DataExplorer;
diff --git a/src/components/popover/helpers.ts b/src/components/popover/helpers.ts
new file mode 100644
index 0000000..13f74a6
--- /dev/null
+++ b/src/components/popover/helpers.ts
@@ -0,0 +1,24 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { PopoverOrigin } from "@material-ui/core/Popover";
+
+export const mockAnchorFromMouseEvent = (event: React.MouseEvent<HTMLElement>) => {
+ const el = document.createElement('div');
+ const clientRect = {
+ left: event.clientX,
+ right: event.clientX,
+ top: event.clientY,
+ bottom: event.clientY,
+ width: 0,
+ height: 0
+ };
+ el.getBoundingClientRect = () => clientRect;
+ return el;
+};
+
+export const DefaultTransformOrigin: PopoverOrigin = {
+ vertical: "top",
+ horizontal: "right",
+};
\ No newline at end of file
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list