import React from 'react' ; import { render , unmountComponentAtNode } from 'react-dom' ; import { ExpressionRenderDefinition , IInterpreterRenderHandlers } from 'src/plugins/expressions' ; import { i18n } from '@kbn/i18n' ; import { Observable } from 'rxjs' ; import { CoreTheme } from 'kibana/public' ; import { CoreSetup } from '../../../../core/public' ; import { KibanaThemeProvider } from '../../../kibana_react/public' ; import { getElasticLogo , defaultTheme$ , isValidUrl } from '../../../presentation_util/public' ; import { ImageRendererConfig } from '../../common/types' ; const strings = { getDisplayName : ( ) => i18n . translate ( 'expressionImage.renderer.image.displayName' , { defaultMessage : 'Image' , } ) , getHelpDescription : ( ) => i18n . translate ( 'expressionImage.renderer.image.helpDescription' , { defaultMessage : 'Render an image' , } ) , } ; export const getImageRenderer = ( theme$ = defaultTheme$ ) => ( ) : ExpressionRenderDefinition < ImageRendererConfig > => ( { name : 'image' , displayName : strings . getDisplayName ( ) , help : strings . getHelpDescription ( ) , reuseDomNode : true , render : async ( domNode , config , handlers ) => { const { elasticLogo } = await getElasticLogo ( ) ; const dataurl = isValidUrl ( config . dataurl ?? '' ) ? config . dataurl : elasticLogo ; const style = { height : '100%' , backgroundImage : `url(${ dataurl })` , backgroundRepeat : 'no-repeat' , backgroundPosition : 'center center' , backgroundSize : config . mode as string , } ; handlers . onDestroy ( ( ) => { unmountComponentAtNode ( domNode ) ; } ) ; render ( < KibanaThemeProvider theme$ = { theme$ } > < div style = { style } / > < /KibanaThemeProvider>, domNode, () => handlers.done()); } , } ) ; export const imageRendererFactory = ( core ) => getImageRenderer ( core . theme . theme$ ) ;