CollapsibleMultiSelectFilter

Functionally identical to the MultiSelectFilter, but enables collapse UI.

Result

Loading...

Live Editor

function Example() {
	const [filterOption, setFilterOption] = React.useState();

	return (
		<CollapsibleMultiSelectFilter
			id="demo-component-basic"
			filterName="Collapsible Multi Select Filter"
			options={[
				{ label: 'Up To Date', id: 'UpToDate' },
				{ label: 'Missing Credentials', id: 'MissingCredentials' },
				{
					label: 'Errors',
					id: 'Errors',
					children: [
						{ label: 'Disconnected', id: 'Disconnected' },
						{ label: 'Broken', id: 'Broken' },
					],
				},
				{
					label: 'Foo',
					id: 'Foo',
					children: [
						{ label: 'Bar', id: 'Bar' },
						{ label: 'Baz', id: 'Baz' },
					],
				},
			]}
			onApply={(event, { value }) => setFilterOption(value)}
			value={filterOption}
		/>
	);
}

Searchable

The searchable prop enables search UI within the filter that functions as an autocomplete.

Result

Loading...

Live Editor

function Example() {
	const [filterOption, setFilterOption] = React.useState();

	return (
		<CollapsibleMultiSelectFilter
			searchable
			id="demo-component-searchable"
			filterName="Multi Select Filter"
			options={[
				{ label: 'Up To Date', id: 'UpToDate' },
				{ label: 'Missing Credentials', id: 'MissingCredentials' },
				{
					label: 'Errors',
					id: 'Errors',
					children: [{ label: 'Disconnected', id: 'Disconnected' }],
				},
			]}
			onApply={(event, { value }) => setFilterOption(value)}
			value={filterOption}
		/>
	);
}

Analytics

The CollapsibleMultiSelectFilter component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'CollapsibleMultiSelectFilter',
	actions: {
		onApply: { type: 'COLLAPSIBLEMULTISELECTFILTER_APPLY', payload: 'Apply' },
	},
};

Props