15951: Makes 'mutually exclusive' filter dialog auto-submit selection on click.

[arvados.git] / src / components / data-table-filters / data-table-filters-popover.tsx

diff --git a/src/components/data-table-filters/data-table-filters-popover.tsx b/src/components/data-table-filters/data-table-filters-popover.tsx
index dbe8d97085a2521cee1192f882ee4468dfc727bc..30b98d338d1d74329bfd3b6610fead156c6ee951 100644 (file)
--- a/src/components/data-table-filters/data-table-filters-popover.tsx
+++ b/src/components/data-table-filters/data-table-filters-popover.tsx
@@ -47,8 +47,11 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         },
     },
     icon: {
-        userSelect: "none",
-        fontSize: 'small'
+        fontSize: 12,
+        userSelect: 'none',
+        width: 16,
+        height: 15,
+        marginTop: 1
     },
     iconButton: {
         color: theme.palette.text.primary,
@@ -70,6 +73,11 @@ export interface DataTableFilterProps {
     filters: DataTableFilters;
     onChange?: (filters: DataTableFilters) => void;
 
+    /**
+     * When set to true, only one filter can be selected at a time.
+     */
+    mutuallyExclusive?: boolean;
+
     /**
      * By default `all` filters selection means that label should be grayed out.
      * Use `none` when label is supposed to be grayed out when no filter is selected.
@@ -107,7 +115,7 @@ export const DataTableFiltersPopover = withStyles(styles)(
                         onClick={this.open}
                         disableRipple>
                         {children}
-                        <IconButton component='span' classes={{root: classes.iconButton}}>
+                        <IconButton component='span' classes={{ root: classes.iconButton }} tabIndex={-1}>
                             <i className={classnames(["fas fa-filter", classes.icon])}
                                 data-fa-transform="shrink-3"
                                 ref={this.icon} />
@@ -128,7 +136,18 @@ export const DataTableFiltersPopover = withStyles(styles)(
                         </CardContent>
                         <DataTableFiltersTree
                             filters={this.state.filters}
-                            onChange={filters => this.setState({ filters })} />
+                            mutuallyExclusive={this.props.mutuallyExclusive}
+                            onChange={filters => {
+                                this.setState({ filters });
+                                if (this.props.mutuallyExclusive) {
+                                    const { onChange } = this.props;
+                                    if (onChange) {
+                                        onChange(filters);
+                                    }
+                                    this.setState({ anchorEl: undefined });
+                                }
+                            }} />
+                        {this.props.mutuallyExclusive ||
                         <CardActions>
                             <Button
                                 color="primary"
@@ -145,6 +164,7 @@ export const DataTableFiltersPopover = withStyles(styles)(
                                 Cancel
                             </Button>
                         </CardActions >
+                        }
                     </Card>
                 </Popover>
             </>;