import { isNull } from 'lodash' ; import { RefObject , useCallback , useEffect , useState } from 'react' ; export default function useOutsideClick ( refs , enabled , onClickOutside ) { const [ isActive , setActive ] = useState ( false ) ; const isOutside = useCallback ( ( e ) => { const test = refs . map ( ( ref ) => { if ( isNull ( ref . current ) ) return true ; return ! ref . current . contains ( e . target as HTMLElement ) ; } ) ; return test . every ( Boolean ) ; } , [ refs ] ) ; const onEvent = useCallback ( ( e ) => { if ( isOutside ( e ) && enabled ) { setActive ( true ) ; onClickOutside ( e ) ; } } , [ isOutside , onClickOutside , enabled ] ) ; useEffect ( ( ) => { document . addEventListener ( 'mousedown' , onEvent ) ; return ( ) => { document . removeEventListener ( 'mousedown' , onEvent ) ; } ; } , [ refs , onClickOutside , onEvent ] ) ; return [ isActive ] ; }