import React , { FC , useEffect , useRef , useState } from 'react' ; import { createPortal } from 'react-dom' ; import createCache from '@emotion/cache' ; import { CacheProvider } from '@emotion/react' ; import { useDialogContext , useDialogDispatch , } from './TranslationDialogContextProvider' ; export const NewWindow = ( props ) => { const newWindow = useRef ( null ) ; const [ popup , setPopup ] = useState < Window > ( null ) ; const dispatch = useDialogDispatch ( ) ; const container = useDialogContext ( ( c ) => c . container ) ; const setContainer = ( el ) => { dispatch ( { type : 'SET_CONTAINER' , payload : el } ) ; } ; const onClose = ( ) => { dispatch ( { type : 'ON_CLOSE' } ) ; } ; useEffect ( ( ) => { const div = document . createElement ( 'div' ) ; div . style . width = '100vw' ; div . style . height = '100vh' ; div . style . position = 'relative' ; setContainer ( div ) ; } , [ ] ) ; useEffect ( ( ) => { if ( container ) { const win = window . open ( '' , '' , 'width=600,height=600,left=200,top=200' ) ; win . document . title = 'Tolgee - Translate Text' ; if ( ! win . document ) { alert ( 'Please allow popups to open new window.' ) ; } newWindow . current = win ; win . document . body . style . margin = '0px' ; win . document . body . appendChild ( container ) ; const onExit = ( ) => { setContainer ( null ) ; win . close ( ) ; onClose ( ) ; } ; win . onbeforeunload = ( ) => { setContainer ( null ) ; onClose ( ) ; } ; const onKeyDown = ( e ) => { if ( e . key === 'Escape' ) { onExit ( ) ; } } ; const onBeforeUnload = ( ) => { onExit ( ) ; } ; win . document . addEventListener ( 'keydown' , onKeyDown , true ) ; window . addEventListener ( 'beforeunload' , onBeforeUnload , true ) ; setPopup ( win ) ; return ( ) => { win . document . removeEventListener ( 'keydown' , onKeyDown , true ) ; window . removeEventListener ( 'beforeunload' , onBeforeUnload , true ) ; setContainer ( null ) ; newWindow . current . close ( ) ; setPopup ( null ) ; } ; } } , [ container ] ) ; const styleCache = React . useMemo ( ( ) => { const head = popup ?. document . head ; return createCache ( { key : 'external' , container : head , } ) ; } , [ popup ] ) ; return container ? createPortal ( < CacheProvider value = { styleCache } > { props . children } < /CacheProvider>, container) : null ; } ;