15768: selected list passes into popover functions Arvados-DCO-1.1-Signed-off-by...

diff --git a/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx b/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
index 6f41b6dae9d2bbaf5e919938b01fecfa7be17569..cd9071a3e3ce0d79c697fecb71ac05dad3bc8ce6 100644 (file)
--- a/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
+++ b/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
@@ -25,12 +25,10 @@ import { getNodeDescendants } from 'models/tree';
 import debounce from 'lodash/debounce';
 import { green, grey } from '@material-ui/core/colors';
 
-export type CssRules = 'root' | 'icon' | 'iconButton' | 'active' | 'checkbox';
+export type CssRules = 'root' | 'icon' | 'iconButton' | 'option';
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     root: {
-        // border: '1px dashed green',
-        margin: 0,
         borderRadius: '7px',
         '&:hover': {
             backgroundColor: grey[200],
@@ -39,14 +37,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
             color: theme.palette.text.primary,
         },
     },
-    active: {
-        color: theme.palette.text.primary,
-        '& $iconButton': {
-            opacity: 1,
-        },
-    },
     icon: {
-        // border: '1px solid red',
         cursor: 'pointer',
         fontSize: 20,
         userSelect: 'none',
@@ -60,20 +51,28 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         padding: 1,
         paddingBottom: 5,
     },
-    checkbox: {
-        width: 24,
-        height: 24,
+    option: {
+        // border: '1px dashed green',
+        cursor: 'pointer',
+        display: 'flex',
+        padding: '3px 20px',
+        fontSize: '0.875rem',
+        alignItems: 'center',
+        '&:hover': {
+            backgroundColor: 'rgba(0, 0, 0, 0.08)',
+        },
     },
 });
 
-enum SelectionMode {
-    ALL = 'all',
-    NONE = 'none',
-}
+export type DataTableMultiselectOption = {
+    name: string;
+    fn: (checkedList) => void;
+};
 
 export interface DataTableMultiselectProps {
     name: string;
-    options: string[];
+    options: DataTableMultiselectOption[];
+    checkedList: Record<string, boolean>;
 }
 
 interface DataTableFMultiselectPopState {
@@ -88,7 +87,7 @@ export const DataTableMultiselectPopover = withStyles(styles)(
         icon = React.createRef<HTMLElement>();
 
         render() {
-            const { name, classes, children, options } = this.props;
+            const { name, classes, children, options, checkedList } = this.props;
             return (
                 <>
                     <Tooltip disableFocusListener title='Multiselect Actions'>
@@ -108,9 +107,14 @@ export const DataTableMultiselectPopover = withStyles(styles)(
                     >
                         <Card>
                             <CardContent>
-                                <Typography variant='caption'>{'OPTIONS'}</Typography>
+                                <Typography variant='caption'>{'Options'}</Typography>
                             </CardContent>
-                            {options.length && options.map((option, i) => <div key={i}>{option}</div>)}
+                            {options.length &&
+                                options.map((option, i) => (
+                                    <div key={i} className={classes.option} onClick={() => option.fn(checkedList)}>
+                                        {option.name}
+                                    </div>
+                                ))}
                             <CardActions>
                                 <Button color='primary' variant='outlined' size='small' onClick={this.close}>
                                     Close

diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index 4be9d547914630d142bab6bf09c0f1313464f518..b36d546e420599bed92e23d1418fab3d7689cb65 100644 (file)
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -29,6 +29,7 @@ import { SvgIconProps } from '@material-ui/core/SvgIcon';
 import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
 import { createTree } from 'models/tree';
 import arraysAreCongruent from 'validators/arrays-are-congruent';
+import { DataTableMultiselectOption } from '../data-table-multiselect-popover/data-table-multiselect-popover';
 
 export type DataColumns<I, R> = Array<DataColumn<I, R>>;
 
@@ -129,6 +130,12 @@ type DataTableState = {
 
 type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
 
+const multiselectOptions: DataTableMultiselectOption[] = [
+    { name: 'First Option', fn: (checkedList) => console.log('one', checkedList) },
+    { name: 'Second Option', fn: (checkedList) => console.log('two', checkedList) },
+    { name: 'Third Option', fn: (checkedList) => console.log('three', checkedList) },
+];
+
 export const DataTable = withStyles(styles)(
     class Component<T> extends React.Component<DataTableProps<T>> {
         state: DataTableState = {
@@ -186,7 +193,6 @@ export const DataTable = withStyles(styles)(
             const newCheckedList = { ...checkedList };
             newCheckedList[uuid] = !checkedList[uuid];
             this.setState({ checkedList: newCheckedList });
-            // console.log(newCheckedList);
         };
 
         handleInvertSelect = (): void => {
@@ -238,9 +244,9 @@ export const DataTable = withStyles(styles)(
                             <input type='checkbox' className={classes.checkBox} checked={this.state.isSelected} onChange={this.handleSelectorSelect}></input>
                         </Tooltip>
                         <DataTableMultiselectPopover
-                            name={`${name} filters`}
-                            // mutuallyExclusive={column.mutuallyExclusiveFilters}
-                            options={['one', 'two', 'three']}
+                            name={`multiselect options`}
+                            options={multiselectOptions}
+                            checkedList={this.state.checkedList}
                         ></DataTableMultiselectPopover>
                     </div>
                 </TableCell>