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: () => {} }; |