SelectedFilters creates a selectable filter UI view displaying the current selected values from other components. This component is useful for improving selection accessibility of other components.
- displaying all the user selected facet filters together in the main view area for better accessibility.
- building mobile responsive views where it is not practical to show all the UI components in the main view.
true. When set to
true, displays an additional button to clear all the filters
'Clear All'. Sets the label for the clear all button.
Can be used to set a title
When set to true and clearAll functionality is utilised, then it would set the filter's value to its default set value(the
defaultValue prop) instead of null/ undefined.
It is a map of
componentId to the component's value which would be used to set the component's value when
clearAll action gets called. For example, the following configuration would reset the
Nora Roberts on
'AuthorFilter': ['Nora Roberts']
allows defining a list of component IDs, which would reset their values when
clearAll action gets triggered.
The following example instructs the
SelectedFilters component to not reset the
searchbox component's value when
clearAll button is clicked by the user.
clearAllBlacklistComponentsprop has priority over
resetToDefaultprops which means component would retain its current value and would ignore the values defined in
Most ReactiveSearch filter components have a prop
showFilter (defaults to
true) which can be used to control whether the component's selected state appears in the SelectedFilters component. There is also a
filterLabel prop which controls how that component is displayed.
filterLabelprop updates are only reflected if the underlying query of the associated component has changed.
As an example, check MultiList usage to see how
filterLabel can be used.
Provides access to the current selected values. This enables you to retrieve the selected filters and current search state in a convenient way.
a callback function which will be called when a particular filter(value) has been removed from the selected filters, provides the
SelectedFilters component supports
innerClass prop with the following keys:
Read more about it here.
SelectedFilters component can be extended to customize the look and feel with
<selected-filters className="custom-class" />
CSS class to be injected on the component container.
- slot ( Default Slot )
Enables custom rendering for SelectedFilters component. It provides an object as a param which contains all the props needed to render the custom selected-filters, including the functions to clear and update the component values. You can find the example at here.
It accepts an object with these properties:
componentIds which have got
Objectmap of components' Ids and their updated values.
Function - () => voidfunction to clear all selected filters.
Function - (String) => voidfunction to clear a selected filter's value. It takes the
componentIdas a param.
Function - (String, Any) => voidfunction to set a component's value. It takes the
value(to set) as parameters.
Function - (Array<String>) => voidfunction to reset values of the selected filters to their default values. It accepts an Array of componentIds to avoid resetting their values.