import { EuiFlyout } from '@elastic/eui' ; import React from 'react' ; import { render , unmountComponentAtNode } from 'react-dom' ; import { Subject } from 'rxjs' ; import { I18nStart } from '../../i18n' ; import { MountPoint } from '../../types' ; import { OverlayRef } from '../types' ; import { MountWrapper } from '../../utils' ; public class FlyoutRef implements OverlayRef { /**
     * An Promise that will resolve once this flyout is closed.
     *
     * Flyouts can close from user interaction, calling `close()` on the flyout
     * reference or another call to `openFlyout()` replacing your flyout.
     */ public readonly onClose : Promise < void > ; private closeSubject = new Subject < void > ( ) ; constructor ( ) { this . onClose = this . closeSubject . toPromise ( ) ; } /**
     * Closes the referenced flyout if it's still open which in turn will
     * resolve the `onClose` Promise. If the flyout had already been
     * closed this method does nothing.
     */ public close ( ) { if ( ! this . closeSubject . closed ) { this . closeSubject . next ( ) ; this . closeSubject . complete ( ) ; } return this . onClose ; } } public export interface OverlayFlyoutStart { param mount MountPoint - Mounts the children inside a flyout panel
     *  param options OverlayFlyoutOpenOptions - options for the flyout
     *  return { link open ( mount , options ? ) : OverlayRef ; } public export interface OverlayFlyoutOpenOptions { className ? : string ; closeButtonAriaLabel ? : string ; ownFocus ? : boolean ; 'data-test-subj' ? : string ; } interface StartDeps { i18n : I18nStart ; targetDomElement : Element ; } internal export class FlyoutService { private activeFlyout : FlyoutRef | null = null ; private targetDomElement : Element | null = null ; public start ( { i18n , targetDomElement } ) { this . targetDomElement = targetDomElement ; return { open : ( mount , options = { } ) : OverlayRef => { if ( this . activeFlyout ) { this . activeFlyout . close ( ) ; this . cleanupDom ( ) ; } const flyout = new FlyoutRef ( ) ; flyout . onClose . then ( ( ) => { if ( this . activeFlyout === flyout ) { this . cleanupDom ( ) ; } } ) ; this . activeFlyout = flyout ; render ( < i18n . Context > < EuiFlyout { ... options } onClose = { ( ) => flyout . close ( ) } > < MountWrapper mount = { mount } className = "osdOverlayMountWrapper" / > < /EuiFlyout> < /i18n.Context>, this.targetDomElement); return flyout ; } , } ; } private cleanupDom ( ) { if ( this . targetDomElement != null ) { unmountComponentAtNode ( this . targetDomElement ) ; this . targetDomElement . innerHTML = '' ; } this . activeFlyout = null ; } }