Filter List

Renders a list of filters with text inputs and a manage filters button which displays the component SearchableList

• Import

  import { FilterList } from '@smile/haring-react';
• Extends Stack Container Modal SearchableList
• Source View Source Code
• Package @smile/haring-react
• Storybook Storybook

Storybook Docs

Props

Name	Type	Default	Description
filters *	`IFilter[]	-	Array of filters
onActiveFiltersChange	((filters: IFilter[]) => void)	-	Callback function called when the confirm change button is clicked.
onSubmit	((activeFilters: IFilter[]) => void)	-	Callback function called when the submit button is clicked.
direction	"row" | "column"	"row"	Display orientation
filtersManageLabel	string	"Manage filters"	Label of filters manage button
manageFilterModalSearchPlaceholder	string	"Search in filters"	Placeholder of filter modal search
manageFilterModalSearchSubmit	string	"Confirm changes"	Label of confirm change button in modal
manageFilterModalTitle	string	"Manage filters"	Title of manage filter modal
modalProps	ModalProps	-	Props of Modal component
submitLabel	string	"Filter"	Submit button label

IFilter

Attribute	Type	Description
active	boolean	Define if filter is active
component	ReactElement	component element
id	number | string	identifier
label	string	Label value