import { FC, useRef, useEffect, useCallback } from 'react' import Portal from '@reach/portal' import s from './Modal.module.css' import { Cross } from '@components/icons' import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks, } from 'body-scroll-lock' import FocusTrap from '@lib/focus-trap' interface Props { className?: string children?: any open?: boolean onClose: () => void onEnter?: () => void | null } const Modal: FC = ({ children, open, onClose, onEnter = null }) => { const ref = useRef() as React.MutableRefObject const handleKey = useCallback( (e: KeyboardEvent) => { if (e.key === 'Escape') { return onClose() } }, [onClose] ) useEffect(() => { if (ref.current) { if (open) { disableBodyScroll(ref.current) window.addEventListener('keydown', handleKey) } else { enableBodyScroll(ref.current) } } return () => { window.removeEventListener('keydown', handleKey) clearAllBodyScrollLocks() } }, [open, handleKey]) return ( {open ? (
{children}
) : null}
) } export default Modal