src/components/column-selector/column-selector.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 { WithStyles, StyleRulesCallback, withStyles, IconButton, Paper, List, Checkbox, ListItemText, ListItem } from '@material-ui/core';
   7 import MenuIcon from "@material-ui/icons/Menu";
   8 import { DataColumn } from '../data-table/data-column';
   9 import { Popover } from "../popover/popover";
  10 import { IconButtonProps } from '@material-ui/core/IconButton';
  11 import { DataColumns } from '../data-table/data-table';
  12 import { ArvadosTheme } from "~/common/custom-theme";
  13
  14 interface ColumnSelectorDataProps {
  15     columns: DataColumns<any>;
  16     onColumnToggle: (column: DataColumn<any>) => void;
  17 }
  18
  19 type CssRules = "checkbox";
  20
  21 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  22     checkbox: {
  23         width: 24,
  24         height: 24
  25     }
  26 });
  27
  28 export type ColumnSelectorProps = ColumnSelectorDataProps & WithStyles<CssRules>;
  29
  30 export const ColumnSelector = withStyles(styles)(
  31     ({ columns, onColumnToggle, classes }: ColumnSelectorProps) =>
  32     <Popover triggerComponent={ColumnSelectorTrigger}>
  33         <Paper>
  34             <List dense>
  35                 {columns
  36                     .filter(column => column.configurable)
  37                     .map((column, index) =>
  38                         <ListItem
  39                             button
  40                             key={index}
  41                             onClick={() => onColumnToggle(column)}>
  42                             <Checkbox
  43                                 disableRipple
  44                                 color="primary"
  45                                 checked={column.selected}
  46                                 className={classes.checkbox} />
  47                             <ListItemText>
  48                                 {column.name}
  49                             </ListItemText>
  50                         </ListItem>
  51                     )}
  52             </List>
  53         </Paper>
  54     </Popover>
  55 );
  56
  57 export const ColumnSelectorTrigger = (props: IconButtonProps) =>
  58     <IconButton {...props}>
  59         <MenuIcon />
  60     </IconButton>;