src/components/data-table/data-table.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { Table, TableBody, TableRow, TableCell, TableHead, TableSortLabel, StyleRulesCallback, Theme, WithStyles, withStyles } from '@material-ui/core';
   7 import { DataColumn, SortDirection } from './data-column';
   8 import { DataTableDefaultView } from '../data-table-default-view/data-table-default-view';
   9 import { DataTableFilters } from '../data-table-filters/data-table-filters-tree';
  10 import { DataTableFiltersPopover } from '../data-table-filters/data-table-filters-popover';
  11 import { countNodes } from '~/models/tree';
  12
  13 export type DataColumns<T> = Array<DataColumn<T>>;
  14
  15 export enum DataTableFetchMode {
  16     PAGINATED,
  17     INFINITE
  18 }
  19
  20 export interface DataTableDataProps<T> {
  21     items: T[];
  22     columns: DataColumns<T>;
  23     onRowClick: (event: React.MouseEvent<HTMLTableRowElement>, item: T) => void;
  24     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: T) => void;
  25     onRowDoubleClick: (event: React.MouseEvent<HTMLTableRowElement>, item: T) => void;
  26     onSortToggle: (column: DataColumn<T>) => void;
  27     onFiltersChange: (filters: DataTableFilters, column: DataColumn<T>) => void;
  28     extractKey?: (item: T) => React.Key;
  29     working?: boolean;
  30     defaultView?: React.ReactNode;
  31 }
  32
  33 type CssRules = "tableBody" | "root" | "content" | "noItemsInfo" | 'tableCell';
  34
  35 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
  36     root: {
  37         overflowX: 'auto',
  38         overflowY: 'hidden'
  39     },
  40     content: {
  41         display: 'inline-block',
  42         width: '100%'
  43     },
  44     tableBody: {
  45         background: theme.palette.background.paper
  46     },
  47     noItemsInfo: {
  48         textAlign: "center",
  49         padding: theme.spacing.unit
  50     },
  51     tableCell: {
  52         wordWrap: 'break-word'
  53     }
  54 });
  55
  56 type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
  57
  58 export const DataTable = withStyles(styles)(
  59     class Component<T> extends React.Component<DataTableProps<T>> {
  60         render() {
  61             const { items, classes } = this.props;
  62             return <div className={classes.root}>
  63                 <div className={classes.content}>
  64                     <Table>
  65                         <TableHead>
  66                             <TableRow>
  67                                 {this.mapVisibleColumns(this.renderHeadCell)}
  68                             </TableRow>
  69                         </TableHead>
  70                         <TableBody className={classes.tableBody}>
  71                             {items.map(this.renderBodyRow)}
  72                         </TableBody>
  73                     </Table>
  74                     {items.length === 0 && this.props.working !== undefined && !this.props.working && this.renderNoItemsPlaceholder()}
  75                 </div>
  76             </div>;
  77         }
  78
  79         renderNoItemsPlaceholder = () => {
  80             return this.props.defaultView
  81                 ? this.props.defaultView
  82                 : <DataTableDefaultView/>;
  83         }
  84
  85         renderHeadCell = (column: DataColumn<T>, index: number) => {
  86             const { name, key, renderHeader, filters, sortDirection } = column;
  87             const { onSortToggle, onFiltersChange } = this.props;
  88             return <TableCell key={key || index}>
  89                 {renderHeader ?
  90                     renderHeader() :
  91                     countNodes(filters) > 0
  92                         ? <DataTableFiltersPopover
  93                             name={`${name} filters`}
  94                             onChange={filters =>
  95                                 onFiltersChange &&
  96                                 onFiltersChange(filters, column)}
  97                             filters={filters}>
  98                             {name}
  99                         </DataTableFiltersPopover>
 100                         : sortDirection
 101                             ? <TableSortLabel
 102                                 active={sortDirection !== SortDirection.NONE}
 103                                 direction={sortDirection !== SortDirection.NONE ? sortDirection : undefined}
 104                                 onClick={() =>
 105                                     onSortToggle &&
 106                                     onSortToggle(column)}>
 107                                 {name}
 108                             </TableSortLabel>
 109                             : <span>
 110                                 {name}
 111                             </span>}
 112             </TableCell>;
 113         }
 114
 115         renderBodyRow = (item: T, index: number) => {
 116             const { onRowClick, onRowDoubleClick, extractKey, classes } = this.props;
 117             return <TableRow
 118                 hover
 119                 key={extractKey ? extractKey(item) : index}
 120                 onClick={event => onRowClick && onRowClick(event, item)}
 121                 onContextMenu={this.handleRowContextMenu(item)}
 122                 onDoubleClick={event => onRowDoubleClick && onRowDoubleClick(event, item)}>
 123                 {this.mapVisibleColumns((column, index) => (
 124                     <TableCell key={column.key || index} className={classes.tableCell}>
 125                         {column.render(item)}
 126                     </TableCell>
 127                 ))}
 128             </TableRow>;
 129         }
 130
 131         mapVisibleColumns = (fn: (column: DataColumn<T>, index: number) => React.ReactElement<any>) => {
 132             return this.props.columns.filter(column => column.selected).map(fn);
 133         }
 134
 135         handleRowContextMenu = (item: T) =>
 136             (event: React.MouseEvent<HTMLElement>) =>
 137                 this.props.onContextMenu(event, item)
 138
 139     }
 140 );