import React , { useEffect , useState , useCallback } from 'react' ; import { SelectOption , SelectChangeHandler } from './select' ; interface Refs { headerRef : React . MutableRefObject < HTMLElement | null > ; popoverRef : React . MutableRefObject < HTMLElement | null > ; } export const useSelectLogic = ( onChange = ( ) => { } , { headerRef , popoverRef } , disabled ) => { const [ optionsListVisible , __setOptionsListVisible ] = useState ( false ) ; const onOptionClick = ( option ) => { onChange ( option ) ; setOptionsListVisible ( false ) ; } ; const setOptionsListVisible = useCallback ( ( isVisible ) => { if ( ! disabled ) { __setOptionsListVisible ( isVisible ) ; } } , [ disabled ] ) ; useEffect ( ( ) => { /**
         * Alert if clicked on outside of element
         */ const handleClickOutside = ( event ) => { if ( headerRef . current && popoverRef . current && ! headerRef . current . contains ( event . target as Node ) && ! popoverRef . current . contains ( event . target as Node ) ) { setOptionsListVisible ( false ) ; } } ; document . addEventListener ( "mousedown" , handleClickOutside ) ; return ( ) => { document . removeEventListener ( "mousedown" , handleClickOutside ) ; } ; } , [ headerRef , popoverRef , setOptionsListVisible ] ) ; return { onOptionClick , optionsListVisible , setOptionsListVisible } ; } ;