glide-design-system/src/lib/components/multi-select/SelectField.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";

const SelectField = ({
  options,
  setCheckedData,
  value,
  unslectedOptions,
  setUnselectedItems,
  checkedData,
  cancelOption,
  onChange,s
}) => {
  const checkBoxRefs = useRef([]);
  const selectAllRef = useRef();
  const [hovered, setHovered] = useState(null);
  const [code, setCode] = useState("");
  const [checkedItems, setCheckedItems] = useState();
  const [searchItems, setSearchItems] = useState(null);
  const [state, setState] = useState();
  const [filteredData, setFilterdData] = useState(options);
  const addSelectAll = { value: "Select All", label: "Select All" };
  const selectFields = [addSelectAll, ...options];

  useEffect(() => {
    if (unslectedOptions === "All") {
      setCheckedItems([]);
      setCheckedData([]);
      onChange([])
    }
    const matchedOption = [];
    if (value && !unslectedOptions) {
      options?.forEach((option) => {
        if (option?.value && value?.includes(option.value)) {
          matchedOption.push(option);
        }
      });
      setCheckedData(matchedOption);
      setCheckedItems(value);
    } else if (unslectedOptions !== "All") {

      const data = [];

      checkedData?.forEach((option) => {
        if (option?.value && option?.value !== unslectedOptions) {
          matchedOption.push(option);
          setCheckedData(matchedOption);
        }
        checkedItems?.forEach((option) => {
          if (option !== unslectedOptions &&option!==data?.includes(option) ) {
            data.push(option);
          }
        });
      });

      setCheckedItems(data);
    } else if (unslectedOptions === "All") {
      setUnselectedItems('al')
      setCheckedItems([]);
      setCheckedData([]);
      // onChange("");
    }
    checkBoxRefs.current = Array(selectFields?.length)
      .fill()
      .map((_, i) => checkBoxRefs?.current[i] || React.createRef());
  }, [
    selectFields?.length,
    options?.length,
    filteredData?.length,
    unslectedOptions,
  ]);


  const selectField = (index) => {
    checkBoxRefs?.current[index]?.current?.click();
  };

  const onCheckboxChange = (event, option, lable) => {
    const isChecked = event?.target?.checked;
    let updatedItems;
    if (option === "Select All") {
      if (isChecked) {
        setCheckedData(filteredData?.map((option) => option));
        updatedItems = filteredData?.map((option) => option?.value);
        setCheckedItems(filteredData?.map((option) => option?.value));
      } else {
        setCheckedItems([]);
        setCheckedData([]);
      }
      if (updatedItems?.includes("Select All")) {
        // onChange(updatedItems?.slice(1));
      } else {
        // onChange(updatedItems);
      }
    } else {
      setCheckedData((prevItems) => {
        
        if (isChecked) {
          updatedItems = [...prevItems, lable];
        } else {
          updatedItems = prevItems?.filter(
            (item) => item?.value !== lable?.value
          );
        }
        if (updatedItems.includes("Select All")) {
        }
        const allItemsChecked = filteredData.every((item) =>
          updatedItems.includes(item.value)
        );

        if (allItemsChecked) {
        } else {
          updatedItems = updatedItems.filter((item) => item !== "Select All");
        }
        if (updatedItems?.includes("Select All")) {
          // onChange(updatedItems?.slice(1));
        } else {
          // onChange(updatedItems);
        }
        return updatedItems;
      });

      setCheckedItems((prevItems) => {

        if (isChecked) {
          updatedItems = [...prevItems, option];
        } else {
          updatedItems = prevItems?.filter((item) => item !== option);
        }
        if (updatedItems.includes("Select All")) {
        }
        const allItemsChecked = filteredData.every((item) =>
          updatedItems.includes(item.value)
        );

        if (allItemsChecked) {
        } else {
          updatedItems = updatedItems.filter((item) => item !== "Select All");
        }
        if (updatedItems?.includes("Select All")) {
          // onChange(updatedItems?.slice(1));
        } else {
          // onChange(updatedItems);
        }
        
        return updatedItems;
      });
    }
  };

  const searchItemsHandler = (e, options) => {
    
    setSearchItems(e?.target?.value);
    let filteredOptions;
    const searchLower = e?.target?.value?.toLowerCase();
    filteredOptions = options?.filter((option) => {
      return option?.label?.toLowerCase()?.includes(searchLower);
    });
    setFilterdData(filteredOptions);
    return filteredOptions;
  };

  //   function containsOptions(options, searchItems) {

  //     if (!searchItems) {
  //       return options;
  //     }
  //     const searchLower = searchItems?.toLowerCase();
  //     const filteredOptions = options?.filter((option) => {
  //       return option?.label?.toLowerCase()?.includes(searchLower);
  //     });
  //     setFilterdData(filteredOptions)
  //     return filteredOptions;
  //   }

  const selectAllHandler = () => {
    selectAllRef?.current.click();
  };
  
useEffect(()=>
{
  setFilterdData(options)
},[options])

  return (
    <div>
      <div style={{ borderBottom: "1px solid #D7D7D7" }}>
        <input
          style={{
            marginLeft: "10px",
            border: "none",
            outline: "none",
            width: "auto",
            minHeight: "30px",
            alignSelf: "center",
          }}
          placeholder="Search..."
          onFocus={(e) => (e.target.style.border = "none")}
          onBlur={(e) => (e.target.style.borderBottom = "none")}
          type="text"
          onChange={(e) => {
            searchItemsHandler(e, options);
          }}
          value={searchItems}
        />
      </div>
      {filteredData?.length !== 0  && !searchItems && (
        <div
          style={{
            display: "flex",
            gap: "4px",
            alignItems: "center",
            cursor: "pointer",
            // Add transition for smooth effect
          }}
          onMouseEnter={(e) => (e.target.style.backgroundColor = "#F3F3F3")} // Change background color on hover
          onMouseLeave={(e) => (e.target.style.backgroundColor = "transparent")} // Revert back to initial color on mouse leave
        >
          <input
            value={"Select All"}
            ref={selectAllRef}
            style={{ marginLeft: "10px" }}
            type="checkbox"
            onChange={(e) => {
              onCheckboxChange(e, "Select All");
            }}
            checked={checkedItems?.length === filteredData?.length}
          />
          <div
            onClick={selectAllHandler}
            style={{ marginTop: "3px", width: "100%" }}>
            Select All
          </div>
        </div>
      )}
      {filteredData?.length !== 0 ? (
        filteredData?.map((option, index) => {
          return (
            <div key={index} value={option.code}>
              <div
                className={`${Classes.countryCodeContainer} ${
                  hovered === index
                    ? Classes.optionColorHover
                    : Classes.optionColorNotHover
                } `}
                onMouseEnter={() => setHovered(index)}
                onMouseLeave={() => setHovered(null)}>
                <div
                  style={{
                    width: "100%",
                    display: "flex",
                    alignContent: "center",
                    cursor: "pointer",
                    transition: "ease-in-out",
                  }}
                  className={
                    option?.value === code
                      ? Classes.optionsListSelected
                      : Classes.optionsListUnselected
                  }>
                  <input
                    ref={checkBoxRefs?.current[index]}
                    type="checkbox"
                    id={option?.id}
                    //   name={name}
                    value={option?.value}
                    // checked={
                    //   checkedItems?.includes(option?.value) &&
                    //   option?.value !== unslectedOptions
                    // }
                    checked={checkedItems?.includes(option?.value)}
                    onChange={(e) => {
                      onCheckboxChange(e, option?.value, option);
                    }}
                  />
                  <div
                    style={{ width: "100%", margin: "4px" }}
                    onClick={() => {
                      selectField(index);
                    }}
                    htmlFor={option?.value}>
                    {option?.label}
                  </div>
                </div>
              </div>
            </div>
          );
        })
      ) : (
        <div
          style={{
            textAlign: "center",
            paddingTop: "8px",
            paddingBottom: "8px",
            color: "black",
          }}>
          No options
        </div>
      )}
    </div>
  );
};

export default SelectField;