X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/bbcdcd7b7582b43ca4853e436df383ff9dda465a..58800bbe6e474679dcfbc03735541a578280dd85:/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 80c79c39..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,
@@ -19,10 +19,11 @@ import {
IconButton
} from "@material-ui/core";
import classnames from "classnames";
-import { DefaultTransformOrigin } from "~/components/popover/helpers";
-import { createTree } from '~/models/tree';
+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 { 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 });
- }
-
}
);