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>
</>;
render={renderItem}
showSelection
useRadioButtons={this.props.mutuallyExclusive}
- toggleItemRadioButton={this.toggleRadioButtonFilter}
disableRipple
onContextMenu={noop}
- toggleItemActive={noop}
+ toggleItemActive={this.props.mutuallyExclusive ? this.toggleRadioButtonFilter : noop}
toggleItemOpen={this.toggleOpen}
toggleItemSelection={this.toggleFilter}
/>;
* 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.
/**
* 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;
-
- /**
- * 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)(
<Radio
checked={it.selected}
className={classes.checkbox}
- color="primary"
- onChange={this.handleRadioButtonChange(it)} />}
+ color="primary" />}
<div className={renderContainer}>
{render(it, level)}
</div>
: 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);