All files / src/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: () => {}
};