Create popover component, replace popover in columns configurator

Feature #13601

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/components/data-explorer/columns-configurator/columns-configurator.tsx b/src/components/data-explorer/columns-configurator/columns-configurator.tsx
index 5a3fb014b003b36172526afad7926918adeedf00..a46d2243e5c6534a8027b7a4cdd4ec60063b9aaf 100644 (file)
--- a/src/components/data-explorer/columns-configurator/columns-configurator.tsx
+++ b/src/components/data-explorer/columns-configurator/columns-configurator.tsx
@@ -3,70 +3,46 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { WithStyles, StyleRulesCallback, Theme, withStyles, IconButton, Popover, Paper, List, Checkbox, ListItemText, ListItem, Typography, ListSubheader } from '@material-ui/core';
+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 } 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;
 }
 
-
-class ColumnsConfigurator extends React.Component<ColumnsConfiguratorProps & WithStyles<CssRules>> {
-
-    state = {
-        anchorEl: undefined
-    };
-
-    transformOrigin: PopoverOrigin = {
-        vertical: "top",
-        horizontal: "right",
-    };
-
-    render() {
-        const { columns, onColumnToggle, classes } = this.props;
-        return (
-            <>
-                <IconButton onClick={this.handleClick}><MenuIcon /></IconButton>
-                <Popover
-                    anchorEl={this.state.anchorEl}
-                    open={Boolean(this.state.anchorEl)}
-                    onClose={this.handleClose}
-                    transformOrigin={this.transformOrigin}
-                    anchorOrigin={this.transformOrigin}
-                >
-                    <Paper>
-                        <List dense>
-                            <ListSubheader>
-                                Configure table columns
+const ColumnsConfigurator: React.SFC<ColumnsConfiguratorProps & WithStyles<CssRules>> = ({ columns, onColumnToggle, classes }) => {
+    return (
+        <Popover triggerComponent={ColumnsConfiguratorTrigger}>
+            <Paper>
+                <List dense>
+                    <ListSubheader>
+                        Configure table columns
                             </ListSubheader>
-                            {
-                                columns.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>
-            </>
-        );
-    }
-
-    handleClose = () => {
-        this.setState({ anchorEl: undefined });
-    }
-
-    handleClick = (event: React.MouseEvent<HTMLElement>) => {
-        this.setState({ anchorEl: event.currentTarget });
-    }
-
-}
+                    {
+                        columns.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";
 

diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
new file mode 100644 (file)
index 0000000..b7e082b
--- /dev/null
+++ b/src/components/popover/popover.tsx
@@ -0,0 +1,53 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { Popover as MaterialPopover } from '@material-ui/core';
+
+import { PopoverOrigin } from '@material-ui/core/Popover';
+
+export interface PopoverProps {
+    triggerComponent: React.ComponentType<{ onClick: (event: React.MouseEvent<any>) => void }>;
+}
+
+
+class Popover extends React.Component<PopoverProps> {
+
+    state = {
+        anchorEl: undefined
+    };
+
+    transformOrigin: PopoverOrigin = {
+        vertical: "top",
+        horizontal: "right",
+    };
+
+    render() {
+        return (
+            <>
+                <this.props.triggerComponent onClick={this.handleClick} />
+                <MaterialPopover
+                    anchorEl={this.state.anchorEl}
+                    open={Boolean(this.state.anchorEl)}
+                    onClose={this.handleClose}
+                    transformOrigin={this.transformOrigin}
+                    anchorOrigin={this.transformOrigin}
+                >
+                    {this.props.children}
+                </MaterialPopover>
+            </>
+        );
+    }
+
+    handleClose = () => {
+        this.setState({ anchorEl: undefined });
+    }
+
+    handleClick = (event: React.MouseEvent<any>) => {
+        this.setState({ anchorEl: event.currentTarget });
+    }
+
+}
+
+export default Popover;