All files / src/contexts DropdownContext.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, {
  createContext,
  useContext,
  useState,
  useEffect,
  useRef,
  ReactNode,
} from "react";
 
type DropdownContextType = {
  isOpen: boolean;
  toggle: () => void;
  dropdownRef: React.RefObject<HTMLDivElement>;
  registerRef: (ref: React.RefObject<HTMLElement>) => void;
};
 
const DropdownContext = createContext<DropdownContextType | undefined>(
  undefined,
);
 
export const DropdownProvider = ({ children }: { children: ReactNode }) => {
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const dropdownRef = useRef<HTMLDivElement>(null);
  const additionalRefs = useRef<React.RefObject<HTMLElement>[]>([]);
 
  const toggle = () => setIsOpen((prev) => !prev);
  const close = () => setIsOpen(false);
 
  const registerRef = (ref: React.RefObject<HTMLElement>) => {
    additionalRefs.current.push(ref);
  };
 
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      const refsToCheck = [dropdownRef, ...additionalRefs.current];
      const isClickOutside = refsToCheck
        .filter((e) => e?.current)
        .every(
          (ref) => ref.current && !ref.current.contains(event.target as Node),
        );
 
      Iif (isClickOutside) {
        close();
      }
    };
 
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);
 
  return (
    <DropdownContext.Provider
      value={{ isOpen, toggle, dropdownRef, registerRef }}>
      {children}
    </DropdownContext.Provider>
  );
};
 
export const useDropdownContext = () => {
  const context = useContext(DropdownContext);
  Iif (!context) {
    throw new Error(
      "useDropdownContext must be used within a DropdownProvider",
    );
  }
  return context;
};