import * as React from 'react' ; import ReactDom from 'react-dom' ; import { Box } from '@opentrons/components' ; type PortalLevel = 'page' | 'top' ; interface Props { children : React . ReactNode ; level : PortalLevel ; } interface State { hasRoot : boolean ; } interface PortalLevelInfo { id : string ; zIndex : number | string ; } const PORTAL_ROOT_PROPS_BY_LEVEL = { page : { id : '__otAppModalPortalRoot' , zIndex : 1 } , top : { id : '__otAppTopPortalRoot' , zIndex : 10 } , } ; const getPortalRoot = ( level ) : HTMLElement | null => ( global . document as HTMLDocument ) . getElementById ( PORTAL_ROOT_PROPS_BY_LEVEL [ level ] . id ) ; export function PortalRoot ( ) { return < Box { ... PORTAL_ROOT_PROPS_BY_LEVEL . page } / > ; } export function TopPortalRoot ( ) { return < Box { ... PORTAL_ROOT_PROPS_BY_LEVEL . top } / > ; } export class Portal extends React . Component < Props , State > { $root : Element | null | undefined ; static defaultProps : { level : PortalLevel ; } = { level : 'page' , } ; constructor ( props ) { super ( props ) ; this . $root = getPortalRoot ( props . level ) ; this . state = { hasRoot : ! ! this . $root } ; } componentDidMount ( ) { if ( ! this . $root ) { this . $root = getPortalRoot ( this . props . level ) ; this . setState ( { hasRoot : ! ! this . $root } ) ; } } render ( ) { if ( ! this . $root ) return null ; return ReactDom . createPortal ( this . props . children , this . $root ) ; } }