FilterBar

Result

Loading...

Live Editor

function ManagedFilter() { const [filters, setFilters] = React.useState([ <NumberFilter id="number-filter" filterName="Number Filter" />, ]); return ( <FilterBar id="filter-bar" addFilterOptions={[{ label: 'New Number Filter' }]} onAddFilterClick={({ label }) => { setFilters([...filters, <NumberFilter id="number-filter" filterName={label} />]); }} > {filters} </FilterBar> ); }

function ManagedFilter() {
    const [filters, setFilters] = React.useState([
        <NumberFilter id="number-filter" filterName="Number Filter" />,
    ]);

    return (
        <FilterBar
            id="filter-bar"
            addFilterOptions={[{ label: 'New Number Filter' }]}
            onAddFilterClick={({ label }) => {
                setFilters([...filters, <NumberFilter id="number-filter" filterName={label} />]);
            }}
        >
            {filters}
        </FilterBar>
    );
}

Creating dynamic filters

You can store the filter props and type in state to generate dynamic Filters that will be used within a FilterBar.

Result

Loading...

Live Editor

const singleSelectOptions = [ { label: 'Option 1', value: '1', }, { label: 'Option 2', value: '2', }, { label: 'Option 3', value: '3', }, ]; const accountTypeOptions = [ { label: 'Roth IRA', value: 'roth-ira', }, { label: '401k', value: '401k', }, { label: 'Checking', value: 'checking', }, { label: '403b', value: '403b', }, { label: 'Mortgage', value: 'mortgage', }, { label: 'Savings', value: 'savings', }, ]; const foodMenuOptions = [ { label: 'Meat', id: 'Meat' }, { label: 'Treats', id: 'Treats' }, { id: 'Fruit', label: 'Fruit', children: [ { label: 'Apple', id: 'Apple', }, { label: 'Banana', id: 'Banana', }, { label: 'Cantaloupe', id: 'Cantaloupe', }, ], }, { id: 'Vegetables', label: 'Vegetables', children: [ { label: 'Spinach', id: 'Spinach', }, { label: 'Kale', id: 'Kale', }, ], }, { id: 'Cheese', label: 'Cheese', children: [ { label: 'Mozzarella', id: 'Mozzarella', }, { label: 'Gouda', id: 'Gouda', }, { label: 'Stilton', id: 'Stilton', }, { label: 'Cheddar', id: 'Cheddar', }, { label: 'String', id: 'String', }, ], }, ]; const NUMBER_TYPE = 'Number Filter'; const SINGLE_SELECT_TYPE = 'Single Select Filter'; const ACCOUNT_TYPE = 'Account Type'; const FOOD_TYPE = 'Food Menu'; const DATE_TYPE = 'Date Range'; const filterComponents = { [NUMBER_TYPE]: NumberFilter, [SINGLE_SELECT_TYPE]: SingleSelectFilter, [ACCOUNT_TYPE]: MultiSelectFilter, [FOOD_TYPE]: CollapsibleMultiSelectFilter, [DATE_TYPE]: DateRangeFilter, }; const ManagedFilterBar = (props) => { const [filters, setFilters] = useState([]); const [addFilterOptions, setAddFilterOptions] = useState({ [NUMBER_TYPE]: false, [SINGLE_SELECT_TYPE]: false, [ACCOUNT_TYPE]: false, [FOOD_TYPE]: false, [DATE_TYPE]: false, }); const removeFilter = (id, type) => { setFilters((currentFilters) => currentFilters.filter(({ filterProps }) => filterProps.id !== id), ); setAddFilterOptions((currentAddFilterOptions) => ({ ...currentAddFilterOptions, [type]: false, })); }; const addFilter = (type) => { const id = crypto.randomUUID(); let filterProps = { id, removable: true, filterName: type, onRemove: () => removeFilter(id, type), }; if (type === SINGLE_SELECT_TYPE) { filterProps.options = singleSelectOptions; } else if (type === ACCOUNT_TYPE) { filterProps.options = accountTypeOptions; } else if (type === FOOD_TYPE) { filterProps.options = foodMenuOptions; } else if (type === DATE_TYPE) { filterProps.minYear = 2000; filterProps.maxYear = 2010; } setFilters([...filters, { filterProps, type }]); setAddFilterOptions({ ...addFilterOptions, [type]: true, }); }; return ( <FilterBar addFilterOptions={Object.keys(addFilterOptions).map((filterOption) => ({ label: filterOption, disabled: addFilterOptions[filterOption], }))} onAddFilterClick={(filter) => { addFilter(filter.label); }} id="dynamic-filters" > <SingleSelectFilter removable={false} filterName="Non removable single select" options={[ { label: 'Option1', value: 'o1' }, { label: 'Option2', value: 'o2' }, ]} id="non-removable-single-select" /> <MultiSelectFilter removable={false} filterName="Non removable multi select" options={[ { label: 'Option1', value: 'o1' }, { label: 'Option2', value: 'o2' }, ]} id="non-removable-multi-select" /> {filters.map(({ filterProps, type }) => { const Component = filterComponents[type]; return <Component {...filterProps} key={filterProps.id} />; })} </FilterBar> ); }; render(<ManagedFilterBar />);

const singleSelectOptions = [
    {
        label: 'Option 1',
        value: '1',
    },
    {
        label: 'Option 2',
        value: '2',
    },
    {
        label: 'Option 3',
        value: '3',
    },
];

const accountTypeOptions = [
    {
        label: 'Roth IRA',
        value: 'roth-ira',
    },
    {
        label: '401k',
        value: '401k',
    },
    {
        label: 'Checking',
        value: 'checking',
    },
    {
        label: '403b',
        value: '403b',
    },
    {
        label: 'Mortgage',
        value: 'mortgage',
    },
    {
        label: 'Savings',
        value: 'savings',
    },
];

const foodMenuOptions = [
    { label: 'Meat', id: 'Meat' },
    { label: 'Treats', id: 'Treats' },
    {
        id: 'Fruit',
        label: 'Fruit',
        children: [
            {
                label: 'Apple',
                id: 'Apple',
            },
            {
                label: 'Banana',
                id: 'Banana',
            },
            {
                label: 'Cantaloupe',
                id: 'Cantaloupe',
            },
        ],
    },
    {
        id: 'Vegetables',
        label: 'Vegetables',
        children: [
            {
                label: 'Spinach',
                id: 'Spinach',
            },
            {
                label: 'Kale',
                id: 'Kale',
            },
        ],
    },
    {
        id: 'Cheese',
        label: 'Cheese',
        children: [
            {
                label: 'Mozzarella',
                id: 'Mozzarella',
            },
            {
                label: 'Gouda',
                id: 'Gouda',
            },
            {
                label: 'Stilton',
                id: 'Stilton',
            },
            {
                label: 'Cheddar',
                id: 'Cheddar',
            },
            {
                label: 'String',
                id: 'String',
            },
        ],
    },
];

const NUMBER_TYPE = 'Number Filter';
const SINGLE_SELECT_TYPE = 'Single Select Filter';
const ACCOUNT_TYPE = 'Account Type';
const FOOD_TYPE = 'Food Menu';
const DATE_TYPE = 'Date Range';

const filterComponents = {
    [NUMBER_TYPE]: NumberFilter,
    [SINGLE_SELECT_TYPE]: SingleSelectFilter,
    [ACCOUNT_TYPE]: MultiSelectFilter,
    [FOOD_TYPE]: CollapsibleMultiSelectFilter,
    [DATE_TYPE]: DateRangeFilter,
};

const ManagedFilterBar = (props) => {
    const [filters, setFilters] = useState([]);
    const [addFilterOptions, setAddFilterOptions] = useState({
        [NUMBER_TYPE]: false,
        [SINGLE_SELECT_TYPE]: false,
        [ACCOUNT_TYPE]: false,
        [FOOD_TYPE]: false,
        [DATE_TYPE]: false,
    });

    const removeFilter = (id, type) => {
        setFilters((currentFilters) =>
            currentFilters.filter(({ filterProps }) => filterProps.id !== id),
        );

        setAddFilterOptions((currentAddFilterOptions) => ({
            ...currentAddFilterOptions,
            [type]: false,
        }));
    };

    const addFilter = (type) => {
        const id = crypto.randomUUID();
        let filterProps = {
            id,
            removable: true,
            filterName: type,
            onRemove: () => removeFilter(id, type),
        };

        if (type === SINGLE_SELECT_TYPE) {
            filterProps.options = singleSelectOptions;
        } else if (type === ACCOUNT_TYPE) {
            filterProps.options = accountTypeOptions;
        } else if (type === FOOD_TYPE) {
            filterProps.options = foodMenuOptions;
        } else if (type === DATE_TYPE) {
            filterProps.minYear = 2000;
            filterProps.maxYear = 2010;
        }

        setFilters([...filters, { filterProps, type }]);
        setAddFilterOptions({
            ...addFilterOptions,
            [type]: true,
        });
    };

    return (
        <FilterBar
            addFilterOptions={Object.keys(addFilterOptions).map((filterOption) => ({
                label: filterOption,
                disabled: addFilterOptions[filterOption],
            }))}
            onAddFilterClick={(filter) => {
                addFilter(filter.label);
            }}
            id="dynamic-filters"
        >
            <SingleSelectFilter
                removable={false}
                filterName="Non removable single select"
                options={[
                    { label: 'Option1', value: 'o1' },
                    { label: 'Option2', value: 'o2' },
                ]}
                id="non-removable-single-select"
            />
            <MultiSelectFilter
                removable={false}
                filterName="Non removable multi select"
                options={[
                    { label: 'Option1', value: 'o1' },
                    { label: 'Option2', value: 'o2' },
                ]}
                id="non-removable-multi-select"
            />

            {filters.map(({ filterProps, type }) => {
                const Component = filterComponents[type];
                return <Component {...filterProps} key={filterProps.id} />;
            })}
        </FilterBar>
    );
};

render(<ManagedFilterBar />);

Props