// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { DataTable, DataTableProps, Column, ColumnsConfigurator } from "../../components/data-table";
-import { Typography, Grid, ListItem, Divider, List, ListItemIcon, ListItemText } 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';
-
-export interface DataItem {
- name: string;
- type: string;
- owner: string;
- lastModified: string;
- fileSize?: number;
- status?: string;
-}
+import { formatFileSize, formatDate } from '../../common/formatters';
+import { DataItem } from './data-item';
+import { mockAnchorFromMouseEvent } from '../popover/helpers';
+import { ContextMenu, ContextMenuActions } from './context-menu';
interface DataExplorerProps {
items: DataItem[];
onItemClick: (item: DataItem) => void;
+ contextMenuActions: ContextMenuActions;
}
-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: [
{
- header: "Name",
+ name: "Name",
selected: true,
- render: item => (
- <Grid
- container
- alignItems="center"
- wrap="nowrap"
- spacing={16}
- onClick={() => this.props.onItemClick(item)}
- >
- <Grid item>
- {renderIcon(item)}
- </Grid>
- <Grid item>
- <Typography color="primary">
- {item.name}
- </Typography>
- </Grid>
- </Grid>
- )
+ render: item => this.renderName(item)
},
{
- header: "Status",
+ name: "Status",
selected: true,
- render: item => (
- <Typography noWrap align="center">
- {item.status || "-"}
- </Typography>
- )
+ render: item => renderStatus(item.status)
},
{
- header: "Type",
+ name: "Type",
selected: true,
- render: item => (
- <Typography noWrap>
- {item.type}
- </Typography>
- )
+ render: item => renderType(item.type)
},
{
- header: "Owner",
+ name: "Owner",
selected: true,
- render: item => (
- <Typography noWrap color="primary">
- {item.owner}
- </Typography>
- )
+ render: item => renderOwner(item.owner)
},
{
- header: "File size",
+ name: "File size",
selected: true,
- render: ({ fileSize }) => (
- <Typography noWrap>
- {typeof fileSize === "number" ? formatFileSize(fileSize) : "-"}
- </Typography>
- )
+ render: item => renderFileSize(item.fileSize)
},
{
- header: "Last modified",
+ name: "Last modified",
selected: true,
- render: item => (
- <Typography noWrap>
- {formatDate(item.lastModified)}
- </Typography>
- )
+ render: item => renderDate(item.lastModified)
},
{
- header: "Actions",
- key: "Actions",
+ name: "Actions",
selected: true,
configurable: false,
- renderHeader: () => (
- <Grid container justify="flex-end">
- <ColumnsConfigurator
- columns={this.state.columns}
- onColumnToggle={this.toggleColumn}
- />
- </Grid>
- ),
- render: item => (
- <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>
- )
+ renderHeader: () => null,
+ render: item => this.renderActions(item)
}
]
};
render() {
- return (
+ return <Paper>
+ <ContextMenu
+ {...this.state.contextMenu}
+ onClose={this.closeContextMenu}
+ actions={this.props.contextMenuActions} />
+ <Toolbar>
+ <Grid container justify="flex-end">
+ <ColumnSelector
+ columns={this.state.columns}
+ onColumnToggle={this.toggleColumn} />
+ </Grid>
+ </Toolbar>
<DataTable
columns={this.state.columns}
items={this.props.items}
- />
- );
+ onRowContextMenu={this.openItemMenuOnRowClick} />
+ <Toolbar />
+ </Paper>;
}
- toggleColumn = (column: Column<DataItem>) => {
+ toggleColumn = (column: DataColumn<DataItem>) => {
const index = this.state.columns.indexOf(column);
const columns = this.state.columns.slice(0);
columns.splice(index, 1, { ...column, selected: !column.selected });
this.setState({ columns });
}
-}
-const formatDate = (isoDate: string) => {
- const date = new Date(isoDate);
- return date.toLocaleString();
-};
+ renderName = (item: DataItem) =>
+ <Grid
+ container
+ alignItems="center"
+ wrap="nowrap"
+ spacing={16}
+ onClick={() => this.props.onItemClick(item)}>
+ <Grid item>
+ {renderIcon(item)}
+ </Grid>
+ <Grid item>
+ <Typography color="primary">
+ {item.name}
+ </Typography>
+ </Grid>
+ </Grid>
-const formatFileSize = (size: number) => {
- switch (true) {
- case size > 1000000000000:
- return `${size / 1000000000000} TB`;
- case size > 1000000000:
- return `${size / 1000000000} GB`;
- case size > 1000000:
- return `${size / 1000000} MB`;
- case size > 1000:
- return `${size / 1000} KB`;
- default:
- return `${size} B`;
+ 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
+ }
+ });
}
-};
-const renderIcon = (DataItem: DataItem) => {
- switch (DataItem.type) {
+ openItemMenuOnActionsClick = (event: React.MouseEvent<HTMLElement>, item: DataItem) => {
+ this.setState({
+ contextMenu: {
+ anchorEl: event.currentTarget,
+ item
+ }
+ });
+ }
+
+ closeContextMenu = () => {
+ this.setState({ contextMenu: {} });
+ }
+
+}
+
+const renderIcon = (dataItem: DataItem) => {
+ switch (dataItem.type) {
case "arvados#group":
return <i className="fas fa-folder fa-lg" />;
case "arvados#groupList":
}
};
-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>
-);
+const renderDate = (date: string) =>
+ <Typography noWrap>
+ {formatDate(date)}
+ </Typography>;
+
+const renderFileSize = (fileSize?: number) =>
+ <Typography noWrap>
+ {formatFileSize(fileSize)}
+ </Typography>;
+
+const renderOwner = (owner: string) =>
+ <Typography noWrap color="primary">
+ {owner}
+ </Typography>;
+
+const renderType = (type: string) =>
+ <Typography noWrap>
+ {type}
+ </Typography>;
+
+const renderStatus = (status?: string) =>
+ <Typography noWrap align="center">
+ {status || "-"}
+ </Typography>;
export default DataExplorer;
projects / arvados.git / blobdiff