import { IconButtonProps } from '@material-ui/core/IconButton';
import { DataColumns } from '../data-table/data-table';
import { ArvadosTheme } from "common/custom-theme";
-import { ResourceName } from 'views-components/data-explorer/renderers';
interface ColumnSelectorDataProps {
- columns: DataColumns<any>;
- onColumnToggle: (column: DataColumn<any>) => void;
+ columns: DataColumns<any, any>;
+ onColumnToggle: (column: DataColumn<any, any>) => void;
className?: string;
}
-type CssRules = "checkbox";
+type CssRules = "checkbox" | "listItem" | "listItemText";
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
checkbox: {
width: 24,
height: 24
+ },
+ listItem: {
+ padding: 0
+ },
+ listItemText: {
+ paddingTop: '0.2rem'
}
});
export const ColumnSelector = withStyles(styles)(
({ columns, onColumnToggle, classes }: ColumnSelectorProps) =>
- {
-// // console.log('COLUMN_SELECTOR',columns)
-// columns = [...columns, {
-// name:'bananas',
-// selected: false,
-// configurable: true, filters:{}, render: (uuid)=><ResourceName uuid='bananas'/>
-// }
-// ]
-// //lisa
-// // console.log('COLUMN_SELECTOR',columns)
- return <Popover triggerComponent={ColumnSelectorTrigger}>
+ <Popover triggerComponent={ColumnSelectorTrigger}>
<Paper>
<List dense>
{columns
<ListItem
button
key={index}
+ className={classes.listItem}
onClick={() => onColumnToggle(column)}>
<Checkbox
disableRipple
color="primary"
checked={column.selected}
className={classes.checkbox} />
- <ListItemText>
+ <ListItemText
+ className={classes.listItemText}>
{column.name}
</ListItemText>
</ListItem>
)}
</List>
</Paper>
- </Popover>}
+ </Popover>
);
export const ColumnSelectorTrigger = (props: IconButtonProps) =>