Building a Multiple Select Picker Component in React

Introduction:

In this blog post, we will explore how to create a versatile and reusable component called "MultipleFilterSelectPicker" using React. This component provides a user-friendly interface for selecting multiple filter options from a list. We will dive into the code and discuss its functionality step by step.

src

Getting Started:

To begin, let's examine the code for the "MultipleFilterSelectPicker" component:

src

import React from 'react';
import { Button, CheckPicker, Checkbox } from 'rsuite';

const footerStyles = {
    padding: '10px 2px',
    borderTop: '1px solid #e5e5e5',
    display: "flex",
    justifyContent: "space-between",
    marginRight: 10,
};

const MultipleFilterSelectPicker = ({ searchedEmail, pickerData, pickerValue, placeholder, handleFilterOption, setSelectedPicker, filterOptionParams, resetSelectedFilters, setSelectedFilter, readOnly, leadStageValue, from, setPageNumber, onChange, groupBy, setSelectedLeadStageLabel, loading, onOpen, placement, style }) => {
    const picker = React.useRef();

    const allValue = pickerData.map(item => item.value);

    const handleCheckAll = (value, checked) => {
        setSelectedPicker(checked ? allValue : []);
        if (onChange) {
            handleFilterOption && handleFilterOption(checked, allValue, leadStageValue);
            setSelectedLeadStageLabel && setSelectedLeadStageLabel([]);
        } else {
            const filterObj = filterOptionParams[2];
            filterObj[filterOptionParams[0]][filterOptionParams[1]] = checked ? allValue : [];
            handleFilterOption && handleFilterOption(filterObj);
        }
    };

    return (
        <CheckPicker
            placement={placement}
            onOpen={onOpen}
            loading={loading}
            readOnly={readOnly}
            disabled={searchedEmail?.length ? true : false}
            groupBy={groupBy}
            style={style}
            onChange={(value) => {
                if (onChange) {
                    onChange(value, leadStageValue);
                    setSelectedLeadStageLabel && setSelectedLeadStageLabel([]);
                } else {
                    if (filterOptionParams) {
                        const filterObj = filterOptionParams[2];
                        filterObj[filterOptionParams[0]][filterOptionParams[1]] = value;
                        handleFilterOption && handleFilterOption(filterObj);
                    }
                    if (resetSelectedFilters) {
                        resetSelectedFilters();
                    }
                    setSelectedPicker(value);
                    setSelectedFilter && setSelectedFilter("");
                    setPageNumber && setPageNumber(1);
                    setSelectedLeadStageLabel && setSelectedLeadStageLabel([]);
                    if (from === "lead-stage") {
                        const filterObj = { lead_stage_label: {} };
                        filterObj["lead_stage_label"]["lead_stage_label_name"] = [];
                        handleFilterOption && handleFilterOption(filterObj);
                    }
                }
            }}
            data={pickerData}
            placeholder={placeholder}
            value={pickerValue}
            defaultValue={pickerValue}
            className="select-picker"
            ref={picker}
            renderExtraFooter={() => (
                <div style={footerStyles} >
                    <Checkbox
                        checked={pickerValue?.length === allValue?.length && pickerValue?.length !== 0}
                        onChange={handleCheckAll}
                    >
                        Select all
                    </Checkbox>

                    <Button
                        appearance="primary"
                        size="sm"
                        onClick={() => {
                            picker.current.close();
                        }}
                    >
                        Close
                    </Button>
                </div>
            )}
        />
    );
};

export default MultipleFilterSelectPicker;

Explanation:

The "MultipleFilterSelectPicker" component is a functional component defined using the arrow function syntax. It takes several props as input, including searchedEmail, pickerData, pickerValue, placeholder, and various callback functions.
Inside the component, we define a constant picker using the useRef hook. This reference will be used to access the underlying CheckPicker component.
We create an array allValue by extracting the value property from each item in pickerData. This array is used to determine the selected state of the "Select all" checkbox.
The handleCheckAll function is responsible for handling the "Select all" checkbox state changes. It updates the selected picker values and triggers the appropriate callback functions.
The component renders a CheckPicker component from the rsuite library, which provides the main functionality for selecting multiple filter options.
Various props are passed to the CheckPicker component, including placement, onOpen, loading, readOnly, disabled, groupBy, style, onChange, data, placeholder, value, defaultValue, and className.
The renderExtraFooter prop allows us to customize the footer section of the CheckPicker. We add a Checkbox component to select all options and a Button component to close the picker.
The onChange event handler is responsible for updating the selected picker values, triggering callback functions, and handling specific cases based on the from prop value.

src

Conclusion:

In this blog post, we explored how to build a powerful and flexible "MultipleFilterSelectPicker" component using React. We walked through the code and discussed its various functionalities, including handling checkbox states, updating selected values, and triggering callback functions. By understanding this component, you can enhance your React applications with an intuitive interface for selecting multiple filter options.