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 React from 'react';
   6 import { WithStyles, StyleRulesCallback, withStyles, IconButton, Paper, List, Checkbox, ListItemText, ListItem, Tooltip } 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, any>;
  16     onColumnToggle: (column: DataColumn<any, any>) => void;
  17     className?: string;
  18 }
  19
  20 type CssRules = "checkbox" | "listItem" | "listItemText";
  21
  22 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  23     checkbox: {
  24         width: 24,
  25         height: 24
  26     },
  27     listItem: {
  28         padding: 0
  29     },
  30     listItemText: {
  31         paddingTop: '0.2rem'
  32     }
  33 });
  34
  35 export type ColumnSelectorProps = ColumnSelectorDataProps & WithStyles<CssRules>;
  36
  37 export const ColumnSelector = withStyles(styles)(
  38     ({ columns, onColumnToggle, classes }: ColumnSelectorProps) =>
  39         <Popover triggerComponent={ColumnSelectorTrigger}>
  40             <Paper>
  41                 <List dense>
  42                     {columns
  43                         .filter(column => column.configurable)
  44                         .map((column, index) =>
  45                             <ListItem
  46                                 button
  47                                 key={index}
  48                                 className={classes.listItem}
  49                                 onClick={() => onColumnToggle(column)}>
  50                                 <Checkbox
  51                                     disableRipple
  52                                     color="primary"
  53                                     checked={column.selected}
  54                                     className={classes.checkbox} />
  55                                 <ListItemText
  56                                     className={classes.listItemText}>
  57                                     {column.name}
  58                                 </ListItemText>
  59                             </ListItem>
  60                         )}
  61                 </List>
  62             </Paper>
  63         </Popover>
  64 );
  65
  66 export const ColumnSelectorTrigger = (props: IconButtonProps) =>
  67     <Tooltip disableFocusListener title="Select columns">
  68         <IconButton {...props}>
  69             <MenuIcon aria-label="Select columns" />
  70         </IconButton>
  71     </Tooltip>;