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