import React from 'react' ; import ReactDOM from 'react-dom' ; import { I18nProvider } from '@kbn/i18n-react' ; import { EuiWrappingPopover } from '@elastic/eui' ; import { CoreStart } from 'src/core/public' ; import { OptionsMenu } from './options' ; import { KibanaThemeProvider } from '../../services/kibana_react' ; let isOpen = false ; const container = document . createElement ( 'div' ) ; const onClose = ( ) => { ReactDOM . unmountComponentAtNode ( container ) ; isOpen = false ; } ; export interface ShowOptionsPopoverProps { anchorElement : HTMLElement ; useMargins : boolean ; onUseMarginsChange : ( useMargins : boolean ) => void ; syncColors : boolean ; onSyncColorsChange : ( syncColors : boolean ) => void ; hidePanelTitles : boolean ; onHidePanelTitlesChange : ( hideTitles : boolean ) => void ; theme$ : CoreStart [ 'theme' ] [ 'theme$' ] ; } export function showOptionsPopover ( { anchorElement , useMargins , onUseMarginsChange , hidePanelTitles , onHidePanelTitlesChange , syncColors , onSyncColorsChange , theme$ , } ) { if ( isOpen ) { onClose ( ) ; return ; } isOpen = true ; document . body . appendChild ( container ) ; const element = ( < I18nProvider > < KibanaThemeProvider theme$ = { theme$ } > < EuiWrappingPopover id = "popover" button = { anchorElement } isOpen = { true } closePopover = { onClose } > < OptionsMenu useMargins = { useMargins } onUseMarginsChange = { onUseMarginsChange } hidePanelTitles = { hidePanelTitles } onHidePanelTitlesChange = { onHidePanelTitlesChange } syncColors = { syncColors } onSyncColorsChange = { onSyncColorsChange } / > < /EuiWrappingPopover> < /KibanaThemeProvider> < /I18nProvider>); ReactDOM . render ( element , container ) ; }