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