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