glide-design-system/src/lib/components/multi-select/MultiSelect.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React, { useState, useRef, useEffect } from "react";
import Classes from "./MultiSelect.module.css";
import SelectField from "./SelectField";

const MultiSelect = ({
  onChange,
  value,
  options,
  placeholder,
  style,
  className,
  label,
  required,
  name,
}) => {
  const [isFocused, setIsFocused] = useState(false);
  const [showOptions, setShowOptions] = useState(false);
  const [checkedData, setCheckedData] = useState([]);
  const [unslectedOptions, setUnselectedItems] = useState();
  const [values, setValue] = useState(value);
  const [select, setSelect] = useState([options]);
  const componentRef = useRef(null);

  const handleFocus = () => {
    setIsFocused(true);
  };

  const handleClick = () => {
    setIsFocused(true);
    setShowOptions(!showOptions);
    document.getElementById("options-list").style.display = "block";
  };

  useEffect(() => {
    onChangeHandler();
    const handleClickOutside = (event) => {
      if (
        componentRef.current &&
        !componentRef.current.contains(event.target)
      ) {
        setIsFocused(false);
        setShowOptions(false);
        document.getElementById("options-list").style.display = "none";
      }
    };

    document.addEventListener("mousedown", handleClickOutside);

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [unslectedOptions, values, checkedData]);
  const cancelOption = (option, value) => {
    setUnselectedItems(option); // Assuming setUnselectedItems is the setter function for unslectedOptions state

    if (unslectedOptions !== "All") {
      const updatedCheckedData = checkedData?.filter((optionss) => {
        return optionss?.value !== option;
      });

      // Update checkedData state with the filtered data
      setCheckedData(updatedCheckedData);
    }
  };

  const onChangeHandler = () => {
    if (unslectedOptions !== "All") {
      let data = [];
      checkedData?.map((option) => {
        data?.push(option?.value);
      });
      onChange(data);
    }
  };
  const combinedStyles = {
    display: "flex",
    height: "100%",
    justifyContent: "space-between",

    ...style,
  };

  return (
    <div ref={componentRef} style={{ marginBottom: "10px", height: "auto" }}>
      <div>
        <p className={Classes.headers}>
          {label ? label : "Multi Select"}
          {required && <span className={Classes.required}>*</span>}
        </p>
      </div>
      <div
        style={combinedStyles}
        onFocus={handleFocus}
        onClick={handleClick}
        className={`${
          !className ? Classes.parentmMultiselectContainer : className
        } ${isFocused ? Classes.focused : ""}`}>
        {checkedData?.length !== 0 ? (
          <div className={Classes.field} name={name ? name : ""}>
            <div className={Classes.options}>
              {checkedData?.map((option) => {
                return (
                  <div style={{ display: "flex" }}>
                    <div className={Classes.optionTextField}>
                      {option?.label}
                      <span
                        style={{
                          fontSize: "15px",
                          textAlign: "center",
                          marginTop: "3px",
                          cursor: "pointer",
                        }}
                        onClick={() => {
                          cancelOption(option?.value);
                        }}
                        className="material-symbols-outlined">
                        close
                      </span>
                    </div>
                  </div>
                );
              })}
            </div>
            <div>
              <span
                style={{
                  fontSize: "23px",
                  textAlign: "center",
                  marginTop: "4px",
                  cursor: "pointer",
                  display: "flex",
                  justifyContent: "flex-end",
                }}
                onClick={() => {
                  setUnselectedItems("All");
                  setValue([]);
                }}
                class="material-symbols-outlined">
                close
              </span>
            </div>
          </div>
        ) : (
          <p className={Classes.placeHolderStyle}>{placeholder}</p>
        )}
      </div>

      <div
        id="options-list"
        className={Classes.optionsContainer}
        style={{
          border: "1px solid #ddd",
          position: "absolute",
          borderRadius: "5px",
          display: "none",
        }}>
        <SelectField
          checkedData={checkedData}
          setCheckedData={setCheckedData}
          options={options}
          onChange={onChange}
          unslectedOptions={unslectedOptions}
          setUnselectedItems={setUnselectedItems}
          cancelOption={cancelOption}
          style={style}
        />
      </div>
    </div>
  );
};

export default MultiSelect;