import * as React from 'react' ; import styles from './Dialog.module.scss' ; export interface DialogProps { open : boolean ; onOpen ? : ( ) => void ; onClose ? : ( ) => void ; } export const DialogContext = React . createContext ( { closeDialog : ( ) => { } } ) ; const Dialog = props => { const [ open , setOpen ] = React . useState ( props . open ) ; const triggerClose = ( ) => { setOpen ( false ) ; if ( props . onClose ) { props . onClose ( ) ; } } ; const triggerOpen = ( ) => { setOpen ( true ) ; if ( props . onOpen ) { props . onOpen ( ) ; } } ; React . useEffect ( ( ) => { if ( props . open ) { triggerOpen ( ) ; } else { triggerClose ( ) ; } } , [ props . open ] ) ; return ( < div className = { `${ styles . root } ${ open ? styles . open : styles . close }` } > < div className = { styles . background } > < div className = { styles . modal } > < DialogContext . Provider value = { { closeDialog : triggerClose } } > { props . children } < /DialogContext.Provider> < /div> < /div> < /div>); } ; export default Dialog ;