// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { DataTable, DataColumn, ColumnSelector } from "../../components/data-table";
+import { DataTable, DataColumn, ColumnSelector, toggleSortDirection, SortDirection, resetSortDirection } 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 TableSortLabel from '@material-ui/core/TableSortLabel';
import { formatFileSize, formatDate } from '../../common/formatters';
import { DataItem } from './data-item';
import { mockAnchorFromMouseEvent } from '../popover/helpers';
-import ContextMenu, { ContextMenuActionGroup } from '../context-menu/context-menu';
+import ContextMenu from '../context-menu/context-menu';
export interface DataExplorerContextActions {
onAddToFavourite: (dataIitem: DataItem) => void;
contextMenu: {
anchorEl?: HTMLElement;
item?: DataItem;
- actions: Array<ContextMenuActionGroup<DataItem>>;
};
}
class DataExplorer extends React.Component<DataExplorerProps, DataExplorerState> {
state: DataExplorerState = {
- contextMenu: {
- actions: [[{
- icon: "fas fa-users fa-fw",
- name: "Share",
- onClick: this.handleContextAction("onShare")
- }, {
- icon: "fas fa-sign-out-alt fa-fw",
- name: "Move to",
- onClick: this.handleContextAction("onMoveTo")
- }, {
- icon: "fas fa-star fa-fw",
- name: "Add to favourite",
- onClick: this.handleContextAction("onAddToFavourite")
- }, {
- icon: "fas fa-edit fa-fw",
- name: "Rename",
- onClick: this.handleContextAction("onRename")
- }, {
- icon: "fas fa-copy fa-fw",
- name: "Make a copy",
- onClick: this.handleContextAction("onCopy")
- }, {
- icon: "fas fa-download fa-fw",
- name: "Download",
- onClick: this.handleContextAction("onDownload")
- }], [{
- icon: "fas fa-trash-alt fa-fw",
- name: "Remove",
- onClick: this.handleContextAction("onRemove")
- }
- ]]
- },
+ contextMenu: {},
columns: [{
name: "Name",
selected: true,
+ sortDirection: "asc",
+ onSortToggle: () => this.toggleSort("Name"),
render: item => this.renderName(item)
}, {
name: "Status",
}, {
name: "Last modified",
selected: true,
+ onSortToggle: () => this.toggleSort("Last modified"),
render: item => renderDate(item.lastModified)
}, {
name: "Actions",
}]
};
+ contextMenuActions = [[{
+ icon: "fas fa-users fa-fw",
+ name: "Share",
+ onClick: this.handleContextAction("onShare")
+ }, {
+ icon: "fas fa-sign-out-alt fa-fw",
+ name: "Move to",
+ onClick: this.handleContextAction("onMoveTo")
+ }, {
+ icon: "fas fa-star fa-fw",
+ name: "Add to favourite",
+ onClick: this.handleContextAction("onAddToFavourite")
+ }, {
+ icon: "fas fa-edit fa-fw",
+ name: "Rename",
+ onClick: this.handleContextAction("onRename")
+ }, {
+ icon: "fas fa-copy fa-fw",
+ name: "Make a copy",
+ onClick: this.handleContextAction("onCopy")
+ }, {
+ icon: "fas fa-download fa-fw",
+ name: "Download",
+ onClick: this.handleContextAction("onDownload")
+ }], [{
+ icon: "fas fa-trash-alt fa-fw",
+ name: "Remove",
+ onClick: this.handleContextAction("onRemove")
+ }
+ ]];
+
render() {
return <Paper>
<ContextMenu
{...this.state.contextMenu}
+ actions={this.contextMenuActions}
onClose={this.closeContextMenu} />
<Toolbar>
<Grid container justify="flex-end">
openItemMenuOnRowClick = (event: React.MouseEvent<HTMLElement>, item: DataItem) => {
event.preventDefault();
- this.setContextMenuState({
- anchorEl: mockAnchorFromMouseEvent(event),
- item
+ this.setState({
+ contextMenu: {
+ anchorEl: mockAnchorFromMouseEvent(event),
+ item
+ }
});
}
openItemMenuOnActionsClick = (event: React.MouseEvent<HTMLElement>, item: DataItem) => {
- this.setContextMenuState({
- anchorEl: event.currentTarget,
- item
+ this.setState({
+ contextMenu: {
+ anchorEl: event.currentTarget,
+ item
+ }
});
}
closeContextMenu = () => {
- this.setContextMenuState({});
+ this.setState({ contextMenu: {} });
}
- setContextMenuState = (contextMenu: { anchorEl?: HTMLElement; item?: DataItem; }) => {
- this.setState(prev => ({ contextMenu: { ...contextMenu, actions: prev.contextMenu.actions } }));
+ handleContextAction(action: keyof DataExplorerContextActions) {
+ return (item: DataItem) => {
+ this.closeContextMenu();
+ this.props.contextActions[action](item);
+ };
}
- handleContextAction(action: keyof DataExplorerContextActions) {
- return (item: DataItem) => this.props.contextActions[action](item);
+ toggleSort = (columnName: string) => {
+ this.setState({
+ columns: this.state.columns.map((column, index) =>
+ column.name === columnName ? toggleSortDirection(column) : resetSortDirection(column))
+ });
}
}