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} /> ); }

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} /> ); }

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