1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import React from 'react';
20 } from '@material-ui/core';
21 import classnames from 'classnames';
22 import { DefaultTransformOrigin } from 'components/popover/helpers';
23 import { createTree } from 'models/tree';
24 import { DataTableFilters, DataTableFiltersTree } from './data-table-filters-tree';
25 import { getNodeDescendants } from 'models/tree';
26 import debounce from 'lodash/debounce';
28 export type CssRules = 'root' | 'icon' | 'iconButton' | 'active' | 'checkbox';
30 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
33 display: 'inline-flex',
34 justifyContent: 'flex-start',
35 flexDirection: 'inherit',
38 color: theme.palette.text.primary,
41 color: theme.palette.text.primary,
45 color: theme.palette.text.primary,
58 color: theme.palette.text.primary,
72 export interface DataTableFilterProps {
74 filters: DataTableFilters;
75 onChange?: (filters: DataTableFilters) => void;
78 * When set to true, only one filter can be selected at a time.
80 mutuallyExclusive?: boolean;
83 * By default `all` filters selection means that label should be grayed out.
84 * Use `none` when label is supposed to be grayed out when no filter is selected.
86 defaultSelection?: SelectionMode;
89 interface DataTableFilterState {
90 anchorEl?: HTMLElement;
91 filters: DataTableFilters;
92 prevFilters: DataTableFilters;
95 export const DataTableFiltersPopover = withStyles(styles)(
96 class extends React.Component<DataTableFilterProps & WithStyles<CssRules>, DataTableFilterState> {
97 state: DataTableFilterState = {
99 filters: createTree(),
100 prevFilters: createTree(),
102 icon = React.createRef<HTMLElement>();
104 componentWillUnmount(): void {
105 this.submit.cancel();
109 const { name, classes, defaultSelection = SelectionMode.ALL, children } = this.props;
110 const isActive = getNodeDescendants('')(this.state.filters).some((f) => (defaultSelection === SelectionMode.ALL ? !f.selected : f.selected));
113 <Tooltip disableFocusListener title='Filters'>
114 <ButtonBase className={classnames([classes.root, { [classes.active]: isActive }])} component='span' onClick={this.open} disableRipple>
116 <IconButton component='span' classes={{ root: classes.iconButton }} tabIndex={-1}>
117 <i className={classnames(['fas fa-filter', classes.icon])} data-fa-transform='shrink-3' ref={this.icon} />
122 anchorEl={this.state.anchorEl}
123 open={!!this.state.anchorEl}
124 anchorOrigin={DefaultTransformOrigin}
125 transformOrigin={DefaultTransformOrigin}
130 <Typography variant='caption'>{name}</Typography>
132 <DataTableFiltersTree filters={this.state.filters} mutuallyExclusive={this.props.mutuallyExclusive} onChange={this.onChange} />
134 {this.props.mutuallyExclusive || (
136 <Button color='primary' variant='outlined' size='small' onClick={this.close}>
148 static getDerivedStateFromProps(props: DataTableFilterProps, state: DataTableFilterState): DataTableFilterState {
149 return props.filters !== state.prevFilters ? { ...state, filters: props.filters, prevFilters: props.filters } : state;
153 this.setState({ anchorEl: this.icon.current || undefined });
156 onChange = (filters) => {
157 this.setState({ filters });
158 if (this.props.mutuallyExclusive) {
159 // Mutually exclusive filters apply immediately
160 const { onChange } = this.props;
166 // Non-mutually exclusive filters are debounced
171 submit = debounce(() => {
172 const { onChange } = this.props;
174 onChange(this.state.filters);
179 this.setState((prev) => ({