Extend column with headerRender and configurable properties, apply these properties

[arvados-workbench2.git] / src / components / data-explorer / columns-configurator / columns-configurator.tsx

diff --git a/src/components/data-explorer/columns-configurator/columns-configurator.tsx b/src/components/data-explorer/columns-configurator/columns-configurator.tsx
index e0680e98bd28e104142451b25d4bcd8c6ab1220c..c729ca8d52753c1cb52513e5a9c2bebcac7b4c59 100644 (file)
--- a/src/components/data-explorer/columns-configurator/columns-configurator.tsx
+++ b/src/components/data-explorer/columns-configurator/columns-configurator.tsx
@@ -3,72 +3,53 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { WithStyles, StyleRulesCallback, Theme, withStyles, IconButton, Popover, Paper, List, Checkbox, ListItemText, ListItem } from '@material-ui/core';
-import ColumnsIcon from "@material-ui/icons/ViewWeek";
-import { Column } from '../column';
+import { WithStyles, StyleRulesCallback, Theme, withStyles, IconButton, Paper, List, Checkbox, ListItemText, ListItem, Typography, ListSubheader } from '@material-ui/core';
+import MenuIcon from "@material-ui/icons/Menu";
+import { Column, isColumnConfigurable } from '../column';
 import { PopoverOrigin } from '@material-ui/core/Popover';
+import Popover from "../../popover/popover";
+import { IconButtonProps } from '@material-ui/core/IconButton';
 
 export interface ColumnsConfiguratorProps {
     columns: Array<Column<any>>;
-    onColumnToggle: (column: Column<any>) => void
+    onColumnToggle: (column: Column<any>) => void;
 }
 
-
-class ColumnsConfigurator extends React.Component<ColumnsConfiguratorProps & WithStyles<CssRules>> {
-
-    state = {
-        anchorEl: undefined
-    }
-
-    transformOrigin: PopoverOrigin = {
-        vertical: "top",
-        horizontal: "right",
-    }
-
-    render() {
-        const { columns, onColumnToggle } = this.props;
-        return (
-            <>
-                <IconButton onClick={this.handleClick}><ColumnsIcon /></IconButton>
-                <Popover
-                    anchorEl={this.state.anchorEl}
-                    open={Boolean(this.state.anchorEl)}
-                    onClose={this.handleClose}
-                    transformOrigin={this.transformOrigin}
-                    anchorOrigin={this.transformOrigin}
-                >
-                    <Paper>
-                        <List>
-                            {
-                                columns.map((column, index) => (
-                                    <ListItem dense key={index} button onClick={() => onColumnToggle(column)}>
-                                        <Checkbox disableRipple color="primary" checked={column.selected}/>
-                                        <ListItemText>{column.header}</ListItemText>
-                                    </ListItem>
-
-                                ))
-                            }
-                        </List>
-                    </Paper>
-                </Popover>
-            </>
-        );
-    }
-
-    handleClose = () => {
-        this.setState({ anchorEl: undefined });
-    }
-
-    handleClick = (event: React.MouseEvent<HTMLElement>) => {
-        this.setState({ anchorEl: event.currentTarget });
-    }
-
-}
-
-type CssRules = "root";
+const ColumnsConfigurator: React.SFC<ColumnsConfiguratorProps & WithStyles<CssRules>> = ({ columns, onColumnToggle, classes }) => {
+    return (
+        <Popover triggerComponent={ColumnsConfiguratorTrigger}>
+            <Paper>
+                <List dense>
+                    {
+                        columns
+                            .filter(isColumnConfigurable)
+                            .map((column, index) => (
+                                <ListItem key={index} button onClick={() => onColumnToggle(column)}>
+                                    <Checkbox disableRipple color="primary" checked={column.selected} className={classes.checkbox} />
+                                    <ListItemText>{column.header}</ListItemText>
+                                </ListItem>
+                            ))
+                    }
+                </List>
+            </Paper>
+        </Popover>
+    );
+};
+
+const ColumnsConfiguratorTrigger: React.SFC<IconButtonProps> = (props) => (
+    <IconButton {...props}>
+        <MenuIcon />
+    </IconButton>
+);
+
+type CssRules = "root" | "checkbox";
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
-    root: {}
+    root: {},
+    checkbox: {
+        width: 24,
+        height: 24
+    }
 });
 
 export default withStyles(styles)(ColumnsConfigurator);