Merge branch '18874-merge-wb2'

[arvados.git] / services / workbench2 / src / components / column-selector / column-selector.tsx

diff --git a/services/workbench2/src/components/column-selector/column-selector.tsx b/services/workbench2/src/components/column-selector/column-selector.tsx
new file mode 100644 (file)
index 0000000..0eb1323
--- /dev/null
+++ b/services/workbench2/src/components/column-selector/column-selector.tsx
@@ -0,0 +1,71 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import React from 'react';
+import { WithStyles, StyleRulesCallback, withStyles, IconButton, Paper, List, Checkbox, ListItemText, ListItem, Tooltip } from '@material-ui/core';
+import MenuIcon from "@material-ui/icons/Menu";
+import { DataColumn } from '../data-table/data-column';
+import { Popover } from "../popover/popover";
+import { IconButtonProps } from '@material-ui/core/IconButton';
+import { DataColumns } from '../data-table/data-table';
+import { ArvadosTheme } from "common/custom-theme";
+
+interface ColumnSelectorDataProps {
+    columns: DataColumns<any, any>;
+    onColumnToggle: (column: DataColumn<any, any>) => void;
+    className?: string;
+}
+
+type CssRules = "checkbox" | "listItem" | "listItemText";
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    checkbox: {
+        width: 24,
+        height: 24
+    },
+    listItem: {
+        padding: 0
+    },
+    listItemText: {
+        paddingTop: '0.2rem'
+    }
+});
+
+export type ColumnSelectorProps = ColumnSelectorDataProps & WithStyles<CssRules>;
+
+export const ColumnSelector = withStyles(styles)(
+    ({ columns, onColumnToggle, classes }: ColumnSelectorProps) =>
+        <Popover triggerComponent={ColumnSelectorTrigger}>
+            <Paper>
+                <List dense>
+                    {columns
+                        .filter(column => column.configurable)
+                        .map((column, index) =>
+                            <ListItem
+                                button
+                                key={index}
+                                className={classes.listItem}
+                                onClick={() => onColumnToggle(column)}>
+                                <Checkbox
+                                    disableRipple
+                                    color="primary"
+                                    checked={column.selected}
+                                    className={classes.checkbox} />
+                                <ListItemText
+                                    className={classes.listItemText}>
+                                    {column.name}
+                                </ListItemText>
+                            </ListItem>
+                        )}
+                </List>
+            </Paper>
+        </Popover>
+);
+
+export const ColumnSelectorTrigger = (props: IconButtonProps) =>
+    <Tooltip disableFocusListener title="Select columns">
+        <IconButton {...props}>
+            <MenuIcon aria-label="Select columns" />
+        </IconButton>
+    </Tooltip>;