X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/9e4b7889a99ff2f76d8029aef3a85c4620178ba3..c1787278642d2ef02234ea27f94aaae9cdd52d40:/src/components/column-selector/column-selector.tsx

diff --git a/src/components/column-selector/column-selector.tsx b/src/components/column-selector/column-selector.tsx
index e2286b00..5e4b3397 100644
--- a/src/components/column-selector/column-selector.tsx
+++ b/src/components/column-selector/column-selector.tsx
@@ -3,24 +3,38 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { WithStyles, StyleRulesCallback, Theme, withStyles, IconButton, Paper, List, Checkbox, ListItemText, ListItem } from '@material-ui/core';
+import { WithStyles, StyleRulesCallback, withStyles, IconButton, Paper, List, Checkbox, ListItemText, ListItem } from '@material-ui/core';
 import MenuIcon from "@material-ui/icons/Menu";
-import { DataColumn, isColumnConfigurable } from '../data-table/data-column';
-import Popover from "../popover/popover";
+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";
 
-export interface ColumnSelectorProps {
-    columns: Array<DataColumn<any>>;
+interface ColumnSelectorDataProps {
+    columns: DataColumns<any>;
     onColumnToggle: (column: DataColumn<any>) => void;
 }
 
-const ColumnSelector: React.SFC<ColumnSelectorProps & WithStyles<CssRules>> = ({ columns, onColumnToggle, classes }) =>
+type CssRules = "checkbox";
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    checkbox: {
+        width: 24,
+        height: 24
+    }
+});
+
+export type ColumnSelectorProps = ColumnSelectorDataProps & WithStyles<CssRules>;
+
+export const ColumnSelector = withStyles(styles)(
+    ({ columns, onColumnToggle, classes }: ColumnSelectorProps) =>
     <Popover triggerComponent={ColumnSelectorTrigger}>
         <Paper>
             <List dense>
                 {columns
-                    .filter(isColumnConfigurable)
-                    .map((column, index) => (
+                    .filter(column => column.configurable)
+                    .map((column, index) =>
                         <ListItem
                             button
                             key={index}
@@ -34,23 +48,13 @@ const ColumnSelector: React.SFC<ColumnSelectorProps & WithStyles<CssRules>> = ({
                                 {column.name}
                             </ListItemText>
                         </ListItem>
-                    ))}
+                    )}
             </List>
         </Paper>
-    </Popover>;
+    </Popover>
+);
 
-export const ColumnSelectorTrigger: React.SFC<IconButtonProps> = (props) =>
+export const ColumnSelectorTrigger = (props: IconButtonProps) =>
     <IconButton {...props}>
         <MenuIcon />
     </IconButton>;
-
-type CssRules = "checkbox";
-
-const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
-    checkbox: {
-        width: 24,
-        height: 24
-    }
-});
-
-export default withStyles(styles)(ColumnSelector);
