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