filters: DataTableFilters;
onChange?: (filters: DataTableFilters) => void;
+ /**
+ * When set to true, only one filter can be selected at a time.
+ */
+ mutuallyExclusive?: boolean;
+
/**
* By default `all` filters selection means that label should be grayed out.
* Use `none` when label is supposed to be grayed out when no filter is selected.
: f.selected
);
return <>
- <Tooltip title='Filters'>
+ <Tooltip disableFocusListener title='Filters'>
<ButtonBase
className={classnames([classes.root, { [classes.active]: isActive }])}
component="span"
onClick={this.open}
disableRipple>
{children}
- <IconButton component='span' classes={{root: classes.iconButton}}>
+ <IconButton component='span' classes={{ root: classes.iconButton }} tabIndex={-1}>
<i className={classnames(["fas fa-filter", classes.icon])}
data-fa-transform="shrink-3"
ref={this.icon} />
</CardContent>
<DataTableFiltersTree
filters={this.state.filters}
- 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"
Cancel
</Button>
</CardActions >
+ }
</Card>
</Popover>
</>;