X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/25216cc7acedc987c26a159f0b640210c0ef101e..54805dd83a984d4e34bb35146d2505bac12bc1d0:/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 15136f38..b5187866 100644
--- a/src/components/data-table-filters/data-table-filters-popover.tsx
+++ b/src/components/data-table-filters/data-table-filters-popover.tsx
@@ -2,7 +2,7 @@
//
// SPDX-License-Identifier: AGPL-3.0
-import * as React from "react";
+import React, { useEffect } from "react";
import {
WithStyles,
withStyles,
@@ -23,6 +23,7 @@ import { DefaultTransformOrigin } from "components/popover/helpers";
import { createTree } from 'models/tree';
import { DataTableFilters, DataTableFiltersTree } from "./data-table-filters-tree";
import { getNodeDescendants } from 'models/tree';
+import debounce from "lodash/debounce";
export type CssRules = "root" | "icon" | "iconButton" | "active" | "checkbox";
@@ -127,7 +128,7 @@ export const DataTableFiltersPopover = withStyles(styles)(
open={!!this.state.anchorEl}
anchorOrigin={DefaultTransformOrigin}
transformOrigin={DefaultTransformOrigin}
- onClose={this.cancel}>
+ onClose={this.close}>
@@ -137,36 +138,21 @@ export const DataTableFiltersPopover = withStyles(styles)(
{
- this.setState({ filters });
- if (this.props.mutuallyExclusive) {
- const { onChange } = this.props;
- if (onChange) {
- onChange(filters);
- }
- this.setState({ anchorEl: undefined });
- }
- }} />
+ onChange={this.onChange} />
{this.props.mutuallyExclusive ||
-
}
+
>;
}
@@ -180,25 +166,43 @@ export const DataTableFiltersPopover = withStyles(styles)(
this.setState({ anchorEl: this.icon.current || undefined });
}
- submit = () => {
+ onChange = (filters) => {
+ this.setState({ filters });
+ if (this.props.mutuallyExclusive) {
+ // Mutually exclusive filters apply immediately
+ const { onChange } = this.props;
+ if (onChange) {
+ onChange(filters);
+ }
+ this.close();
+ } else {
+ // Non-mutually exclusive filters are debounced
+ this.submit();
+ }
+ }
+
+ submit = debounce (() => {
const { onChange } = this.props;
if (onChange) {
onChange(this.state.filters);
}
- this.setState({ anchorEl: undefined });
- }
+ }, 1000);
+
+ MountHandler = () => {
+ useEffect(() => {
+ return () => {
+ this.submit.cancel();
+ }
+ },[]);
+ return null;
+ };
- cancel = () => {
+ close = () => {
this.setState(prev => ({
...prev,
- filters: prev.prevFilters,
anchorEl: undefined
}));
}
- setFilters = (filters: DataTableFilters) => {
- this.setState({ filters });
- }
-
}
);