One particular type of toolbar item is called the ToolbarFilter. When used, selected filters are displayed in chip groups below the toolbar. Placing any ToolbarFilter inside of a toggle group makes the toolbar responsive.
Using a ToolbarFilter requires three properties:
First is a managed array of selected filters called chips as strings or ReactNodes.
An onDelete callback function to be executed whenever the user deletes a selected filter chip.
A categoryName which will be used to label the chip group.
1) Define the required onDelete function to be passed to each ToolbarFilter.
Add the function to the ToolbarDemoApp class. Make sure to add it below the onSelect function definition in the ToolbarDemoApp class.
The onDelete callback function is executed whenever the user deletes a selected filter chip.
onDelete = (type = "", id = "") => {
if (type) {
this.setState((prevState) => {
prevState.filters[type.toLowerCase()] = prevState.filters[type.toLowerCase()].filter(s => s !== id);
return {
filters: prevState.filters,
}
});
} else {
this.setState({
filters: {
name: [],
risk: [],
status: [],
}
})
}
};
2) Locate the following three ToolbarItems inside the ToolbarToggleGroup:
<ToolbarItem variant="search-filter">
<Input value="" id="step2Input" ariaLabel="Step 2 input" />
</ToolbarItem>
<ToolbarGroup variant="filter-group">
<ToolbarItem>
<CheckboxSelect
onSelect={this.onSelect}
type="Status"
selections={filters.status}
options={statusOptions}
/>
</ToolbarItem>
<ToolbarItem>
<CheckboxSelect
onSelect={this.onSelect}
type="Risk"
selections={filters.risk}
options={riskOptions}
/>
</ToolbarItem>
</ToolbarGroup>
3) Replace each of the three ToolbarItems inside the ToolbarToggleGroup with a ToolbarFilter.
4) Pass an appropriate label as the categoryName property to each ToolbarFilter.
The categoryName is a required property of ToolbarFilter. After completing step 4 and before completing step 5, there will be an error indicating that the categoryName property is missing from ToolbarFilter.
a) For the first ToolbarFilter (containing a text input) add the property categoryName="Name".
b) For the second ToolbarFilter (containing the status filter) add the property categoryName="Status".
c) For the third ToolbarFilter (containing the risk filter) add the property categoryName="Risk".
Once completed, the contents of the ToolbarToggleGroup should appear as follows:
<ToolbarFilter>
<Input id="searchInput" search={this.onSearch} ariaLabel="Search input" />
</ToolbarFilter>
<ToolbarGroup variant="filter-group">
<ToolbarFilter>
<CheckboxSelect
onSelect={this.onSelect}
type="Status"
selections={filters.status}
options={statusOptions}
/>
</ToolbarFilter>
<ToolbarFilter>
<CheckboxSelect
onSelect={this.onSelect}
type="Risk"
selections={filters.risk}
options={riskOptions}
/>
</ToolbarFilter>
</ToolbarGroup>
5) Add a chips property to each of the ToolbarFilter components.
Each of the ToolbarFilter components requires a chips property. In this case, the state managed filters array's properties can serve as the chips property for each ToolbarFilter.
a) For the first ToolbarFilter (containing a text input) add the property chips={filters.name}.
b) For the second ToolbarFilter (containing the status filter) add the property chips={filters.status}.
c) For the third ToolbarFilter (containing the risk filter) add the property chips={filters.risk}.
6) Pass the onDelete function as the deleteChip property to each ToolbarFilter.
Once steps 4, 5, and 6 are completed, the contents of the ToolbarToggleGroup should appear as follows:
<ToolbarFilter chips={filters.name} deleteChip={this.onDelete} categoryName="Name">
<Input id="searchInput" search={this.onSearch} ariaLabel="Search input" />
</ToolbarFilter>
<ToolbarGroup variant="filter-group">
<ToolbarFilter chips={filters.status} deleteChip={this.onDelete} categoryName="Status">
<CheckboxSelect
onSelect={this.onSelect}
type="Status"
selections={filters.status}
options={statusOptions}
/>
</ToolbarFilter>
<ToolbarFilter chips={filters.risk} deleteChip={this.onDelete} categoryName="Risk">
<CheckboxSelect
onSelect={this.onSelect}
type="Risk"
selections={filters.risk}
options={riskOptions}
/>
</ToolbarFilter>
</ToolbarGroup>
7) Experiment with two optional properties passed to Toolbar.
Two properties can be optionally added to the top-level Toolbar component when using a ToolbarFilter.
a) Pass a clearAllFilters event handler to Toolbar.
A 'Clear All Filters' action will appear alongside the applied filters chip groups.
b) Pass a collapseListedFiltersBreakpoint is passed to Toolbar.
The chip groups will collapse to a summary message at the passed in breakpoint, making the applied filters chip groups more responsive.
Add the following code to the Toolbar to see optional properties in action.
clearAllFilters={this.onDelete} collapseListedFiltersBreakpoint="xl"
Note: Take some time to experiment with the toolbar to see how it responds to changes in viewport size and the number of filters applied.
At smaller viewport widths, a responsive collapsed view of the toolbar and applied filters should be visible.
