Form

Facet

A facet is a set of options used to filter a list of content items.

View source

Props

NameTypeDefaultDescription
facetrequiredIFacet
The attributes of this facet, see IFacet
facetRowsrequiredIFacet[]
A list of IFacet representing all the possible values of this facet
clearFacet(facet: string) => void
Callback function that runs when clicking on the unselect all rows button
  • facetthe name of this facet
clearFacetLabelstring
Tooltip on the button to unselect all rows of this facet
enableExclusionsboolean
Wheter to display the exclusion or not
excludeTooltipMessage(facetsRowName: string) => string
Function to format the tooltip on the exclusion button
  • facetsRowNamethe name of the facet that is being hovered
filterPlaceholderstring
The placerholder to display in the More values filter input
isOpenedboolean
Wheter the facet More dropdown is opened or not
keyKey
maxRowsToShownumber5
Maximum number for facet rows to show
maxTooltipLabelLengthnumber
Display the label in a tooltip if the length is greater than this number
moreLabelstring
The label to display on the More values button
onClearFacet(facet: string) => void
Callback function that runs when clicking on the unselect all button
  • facetthe name of this facet
onDestroy(facet: string) => void
Callback function that runs when this component unmounts
  • facetthe name of this facet
onRender(facet: string) => void
Callback function that runs when the component mounts
  • facetthe name of this facet
onToggleFacet(facet: string, facetRow: IFacet) => void
Callback function that runs when toggling a facet value
  • facetthe name of the facet
  • facetRowthe facet value being toggled
refLegacyRef<Facet>
selectedFacetRowsIFacet[]
A list of selected facets, see IFacet
toggleFacet(facet: string, facetRow: IFacet) => void
Callback function that runs when selecting or unselecting a facet row
  • facetthe name of this facet
  • facetRowthe name of the facet row being toggled
withReduxStatebooleantrue if using a connected component, false otherwise
Wheter this component is connected to the state or not

Examples

No guidelines exist for Facet yet.

Create guidelines