contexts TypingDropdownMultipleContext.tsx

0% Statements 0/40

0% Branches 0/13

0% Functions 0/9

0% Lines 0/36

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97

import {
  createContext,
  useContext,
  useState,
  useEffect,
  KeyboardEvent,
} from "react";
import useDropdown from "../../../../hooks/common/useDropdown";
import {
  TypingDropdownMultipleContextType,
  TypingDropdownMultipleProviderProps,
} from "../types";
 
const TypingDropdownMultipleContext = createContext<
  TypingDropdownMultipleContextType | undefined
>(undefined);
 
export const TypingDropdownMultipleProvider = ({
  children,
  value: selectedValues,
  handleChange,
  options,
}: TypingDropdownMultipleProviderProps) => {
  const [values, setValues] = useState<string[]>(selectedValues ?? [""]);
  const [value, setValue] = useState<string>("");
  const { dropdownRef, handleSelect, isOpen, setIsOpen, toggle } =
    useDropdown(handleValueChange);
  const [filteredOptions, setFilteredOptions] = useState<any[]>(options ?? []);
 
  const handleDelete = (index: number) => {
    const newValues = values.filter((_, i) => i !== index);
    setValues(newValues);
    handleChange(JSON.stringify(newValues));
  };
 
  const handleStringChange = (val: string) => {
    setValue(val);
    setIsOpen(true);
  };
 
  function handleValueChange(val: string) {
    Iif (!val.trim() || values.includes(val)) return;
    const newValues = [...values, val];
    setValues(newValues);
    handleChange(JSON.stringify(newValues));
  }
 
  useEffect(() => {
    Iif (!values) {
      setFilteredOptions(options!);
      return;
    }
    const filtered = options?.filter((option: any) =>
      option?.label?.toLowerCase().includes(value?.toLowerCase()),
    );
    setFilteredOptions(filtered!);
  }, [value, options]);
 
  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    Iif (e.key === "Backspace") {
      Iif (value.trim().length === 0 && values.length > 0) {
        handleDelete(values.length - 1);
      }
    }
  };
 
  return (
    <TypingDropdownMultipleContext.Provider
      value={{
        values,
        handleDelete,
        dropdownRef,
        handleStringChange,
        handleValueChange,
        value,
        filteredOptions,
        handleSelect,
        isOpen,
        toggle,
        setValue,
        handleKeyDown,
      }}>
      {children}
    </TypingDropdownMultipleContext.Provider>
  );
};
 
export const useTypingDropdownMultipleContext = () => {
  const context = useContext(TypingDropdownMultipleContext);
  Iif (!context) {
    throw new Error(
      "useTypingDropdownMultipleContext must be used within a DropdownProvider",
    );
  }
  return context;
};