import React , { FC , useRef , useLayoutEffect , useState } from 'react' ; import { Observable } from 'rxjs' ; import { MountPoint , UnmountCallback } from '../../../types' ; interface HeaderActionMenuProps { actionMenu$ : Observable < MountPoint | undefined > ; } export const HeaderActionMenu = ( { actionMenu$ } ) => { const [ mounter , setMounter ] = useState < { mount : MountPoint | undefined ; } > ( { mount : undefined } ) ; useLayoutEffect ( ( ) => { const s = actionMenu$ . subscribe ( ( value ) => { setMounter ( { mount : value } ) ; } ) ; return ( ) => s . unsubscribe ( ) ; } , [ actionMenu$ ] ) ; const elementRef = useRef < HTMLDivElement > ( null ) ; const unmountRef = useRef < UnmountCallback | null > ( null ) ; useLayoutEffect ( ( ) => { if ( unmountRef . current ) { unmountRef . current ( ) ; unmountRef . current = null ; } if ( mounter . mount && elementRef . current ) { try { unmountRef . current = mounter . mount ( elementRef . current ) ; } catch ( e ) { console . error ( e ) ; } } } , [ mounter ] ) ; return < div data - test - subj = "headerAppActionMenu" ref = { elementRef } / > ; } ;