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 670afa95e415dc693830f0b9e5d87dc2f91e3729..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
@@ -139,7 +139,15 @@ export const DataTableFiltersPopover = withStyles(styles)(
                             mutuallyExclusive={this.props.mutuallyExclusive}
                             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"
                         <CardActions>
                             <Button
                                 color="primary"


@@ -156,6 +164,7 @@ export const DataTableFiltersPopover = withStyles(styles)(
                                 Cancel
                             </Button>
                         </CardActions >
                                 Cancel
                             </Button>
                         </CardActions >

+                        }

                     </Card>
                 </Popover>
             </>;
                     </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 d964012dcefa348a7182660bca2e9d27985a5675..be08743eefa507768de0570debebaabbd0fc8887 100644 (file)
--- 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}
             render={renderItem}
             showSelection
             useRadioButtons={this.props.mutuallyExclusive}

-            toggleItemRadioButton={this.toggleRadioButtonFilter}

             disableRipple
             onContextMenu={noop}
             disableRipple
             onContextMenu={noop}

-            toggleItemActive={noop}
+            toggleItemActive={this.props.mutuallyExclusive ? this.toggleRadioButtonFilter : noop}

             toggleItemOpen={this.toggleOpen}
             toggleItemSelection={this.toggleFilter}
         />;
             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.
      */
      * 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.
         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 67858e9b59b3ae077f692a5d975eb38019407348..76fbf011eb3face1a3bffe266db9b55e7fe1781e 100644 (file)
--- 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).
     /**
      * 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;
      */
     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)(
 }
 
 export const Tree = withStyles(styles)(


@@ -151,8 +145,7 @@ export const Tree = withStyles(styles)(
                                 <Radio
                                     checked={it.selected}
                                     className={classes.checkbox}
                                 <Radio
                                     checked={it.selected}
                                     className={classes.checkbox}

-                                    color="primary"
-                                    onChange={this.handleRadioButtonChange(it)} />}
+                                    color="primary" />}

                             <div className={renderContainer}>
                                 {render(it, level)}
                             </div>
                             <div className={renderContainer}>
                                 {render(it, level)}
                             </div>


@@ -207,16 +200,6 @@ export const Tree = withStyles(styles)(
                 : undefined;
         }
 
                 : 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);
         handleToggleItemOpen = (item: TreeItem<T>) => (event: React.MouseEvent<HTMLElement>) => {
             event.stopPropagation();
             this.props.toggleItemOpen(event, item);