Overlay index.tsx

28.57% Statements 4/14

0% Branches 0/5

0% Functions 0/4

28.57% Lines 4/14

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  
1x
1x
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
  /* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useRef } from "react";
import styles from "./index.module.css";
 
const Overlay = (props) => {
  const { children, visible, close } = props;
  const overlayRef = useRef<HTMLDivElement>(null);
 
  useEffect(() => {
    const handleClickOutside = (event) => {
      Iif (overlayRef?.current && !overlayRef?.current?.contains(event.target)) {
        close();
      }
    };
 
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [overlayRef]);
 
  return (
    <>
      {visible && (
        <div className={styles.overlay}>
          <div ref={overlayRef} className={styles.children}>
            {children}
          </div>
        </div>
      )}
    </>
  );
};
 
export default Overlay;