common useDropdown.ts

0% Statements 0/18

0% Branches 0/3

0% Functions 0/6

0% Lines 0/18

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { useEffect, useRef, useState } from "react";
 
type UseDropdownReturnTypes = {
  isOpen: boolean;
  handleSelect: (
    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
    option: any,
  ) => void;
  dropdownRef: React.RefObject<HTMLDivElement>;
  toggle: () => void;
  setIsOpen: Function;
};
 
function useDropdown(
  handleChange: (id: string) => void,
): UseDropdownReturnTypes {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);
 
  const handleSelect = (
    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
    option: any,
  ) => {
    e.preventDefault();
    handleChange(option.id);
    setIsOpen(false);
  };
 
  const toggle = () => {
    setIsOpen(!isOpen);
  };
 
  useEffect(() => {
    const handleClickOutside = (event: any) => {
      Iif (
        dropdownRef?.current &&
        !dropdownRef?.current?.contains(event.target)
      ) {
        setIsOpen(false);
      }
    };
 
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [dropdownRef]);
 
  return {
    isOpen,
    handleSelect,
    dropdownRef,
    toggle,
    setIsOpen,
  };
}
 
export default useDropdown;