packageDocumentation module import * as React from "react" ; import * as ReactDOM from "react-dom" ; import { Dialog , DialogProps } from "./Dialog" ; public export interface GlobalDialogProps extends DialogProps { identifier ? : string ; } public export interface GlobalDialogState { parentDocument : Document | null ; } public export class GlobalDialog extends React . Component < GlobalDialogProps , GlobalDialogState > { private _container ? : HTMLDivElement ; public override readonly state : GlobalDialogState = { parentDocument : null } ; constructor ( props ) { super ( props ) ; } private _handleRefSet = ( popupDiv ) => { const parentDocument = popupDiv ?. ownerDocument ?? null ; if ( parentDocument ) { this . _container = parentDocument . createElement ( "div" ) ; this . _container . id = this . props . identifier !== undefined ? `dialog-${ this . props . identifier }` : "core-dialog" ; let rt = parentDocument . getElementById ( "core-dialog-root" ) as HTMLDivElement ; if ( ! rt ) { rt = parentDocument . createElement ( "div" ) ; rt . id = "core-dialog-root" ; parentDocument . body . appendChild ( rt ) ; } rt . appendChild ( this . _container ) ; this . setState ( { parentDocument } ) ; } } ; public override componentWillUnmount ( ) { if ( this . _container && this . _container . parentElement ) { this . _container . parentElement . removeChild ( this . _container ) ; } } public override render ( ) { const { identifier , ... props } = this . props ; return ( < div ref = { this . _handleRefSet } > { this . state . parentDocument && ReactDOM . createPortal ( < Dialog { ... props } / > , this . state . parentDocument . body ) } < /div>); } }