From: Lucas Di Pentima <lucas@di-pentima.com.ar>
Date: Tue, 3 Mar 2020 21:45:05 +0000 (-0300)
Subject: 15951: Makes 'mutually exclusive' filter dialog auto-submit selection on click.
X-Git-Tag: 2.1.0~36^2~4
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/fbbd14b6916d6936fd5513834c56d6fd00ece7d8

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

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas@di-pentima.com.ar>
---

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 670afa95..30b98d33 100644
--- a/src/components/data-table-filters/data-table-filters-popover.tsx
+++ b/src/components/data-table-filters/data-table-filters-popover.tsx
@@ -139,7 +139,15 @@ export const DataTableFiltersPopover = withStyles(styles)(
                             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"
@@ -156,6 +164,7 @@ export const DataTableFiltersPopover = withStyles(styles)(
                                 Cancel
                             </Button>
                         </CardActions >
+                        }
                     </Card>
                 </Popover>
             </>;
diff --git a/src/components/data-table-filters/data-table-filters-tree.tsx b/src/components/data-table-filters/data-table-filters-tree.tsx
index d964012d..be08743e 100644
--- a/src/components/data-table-filters/data-table-filters-tree.tsx
+++ b/src/components/data-table-filters/data-table-filters-tree.tsx
@@ -37,10 +37,9 @@ export class DataTableFiltersTree extends React.Component<DataTableFilterProps>
             render={renderItem}
             showSelection
             useRadioButtons={this.props.mutuallyExclusive}
-            toggleItemRadioButton={this.toggleRadioButtonFilter}
             disableRipple
             onContextMenu={noop}
-            toggleItemActive={noop}
+            toggleItemActive={this.props.mutuallyExclusive ? this.toggleRadioButtonFilter : noop}
             toggleItemOpen={this.toggleOpen}
             toggleItemSelection={this.toggleFilter}
         />;
@@ -50,7 +49,7 @@ export class DataTableFiltersTree extends React.Component<DataTableFilterProps>
      * Handler for when a tree item is toggled via a radio button.
      * Ensures mutual exclusivity among filter tree items.
      */
-    toggleRadioButtonFilter = (item: TreeItem<DataTableFilterItem>) => {
+    toggleRadioButtonFilter = (_: any, item: TreeItem<DataTableFilterItem>) => {
         const { onChange = noop } = this.props;
 
         // If the filter is already selected, do nothing.
diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx
index 67858e9b..76fbf011 100644
--- a/src/components/tree/tree.tsx
+++ b/src/components/tree/tree.tsx
@@ -98,15 +98,9 @@ export interface TreeProps<T> {
     /**
      * When set to true use radio buttons instead of checkboxes for item selection.
      * This does not guarantee radio group behavior (i.e item mutual exclusivity).
-     * Any item selection logic must be done in the toggleItemRadioButton callback prop.
+     * Any item selection logic must be done in the toggleItemActive callback prop.
      */
     useRadioButtons?: boolean;
-
-    /**
-     * Called when selection of an item in the tree is toggled via a radio button.
-     * Use this callback prop to implement any selection logic (i.e item mutual exclusivity).
-     */
-    toggleItemRadioButton?: (item: TreeItem<T>) => void;
 }
 
 export const Tree = withStyles(styles)(
@@ -151,8 +145,7 @@ export const Tree = withStyles(styles)(
                                 <Radio
                                     checked={it.selected}
                                     className={classes.checkbox}
-                                    color="primary"
-                                    onChange={this.handleRadioButtonChange(it)} />}
+                                    color="primary" />}
                             <div className={renderContainer}>
                                 {render(it, level)}
                             </div>
@@ -207,16 +200,6 @@ export const Tree = withStyles(styles)(
                 : undefined;
         }
 
-        handleRadioButtonChange = (item: TreeItem<T>) => {
-            const { toggleItemRadioButton } = this.props;
-            return toggleItemRadioButton
-                ? (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {
-                    event.stopPropagation();
-                    toggleItemRadioButton(item);
-                }
-                : undefined;
-        }
-
         handleToggleItemOpen = (item: TreeItem<T>) => (event: React.MouseEvent<HTMLElement>) => {
             event.stopPropagation();
             this.props.toggleItemOpen(event, item);