utils OutsideClickHandler.tsx

8.33% Statements 1/12

0% Branches 0/4

0% Functions 0/5

8.33% Lines 1/12

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
75x
 
 
 
  /* eslint-disable react/prop-types */
 
import * as React from 'react';
import { Box } from '../Box';
 
export function OutsideClickHandler(props) {
  const { children, onOutsideClick } = props;
 
  const childNodeRef = React.useRef();
 
  const handleOutsideClick = React.useCallback(
    e => {
      // @ts-ignore
      const isDescendantOfRoot = childNodeRef.current && childNodeRef.current.contains(e.target);
      if (!isDescendantOfRoot) {
        onOutsideClick(e);
      }
    },
    [onOutsideClick]
  );
 
  React.useEffect(() => {
    window.addEventListener('click', handleOutsideClick);
    return () => {
      window.removeEventListener('click', handleOutsideClick);
    };
  });
 
  return <Box ref={childNodeRef}>{children}</Box>;
}
 
OutsideClickHandler.defaultProps = {
  children: <span />,
  onOutsideClick: () => {}
};