import React , { useState } from 'react' ; import { EuiModalBody } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { OverlayStart } from 'kibana/public' ; import { EuiFieldText } from '@elastic/eui' ; import { EuiButton } from '@elastic/eui' ; import { toMountPoint } from '../../../../src/plugins/kibana_react/public' ; import { IContainer , EmbeddableFactoryDefinition , EmbeddableFactory , } from '../../../../src/plugins/embeddable/public' ; import { TodoEmbeddable , TODO_EMBEDDABLE , TodoInput , TodoOutput } from './todo_embeddable' ; function TaskInput ( { onSave } ) { const [ task , setTask ] = useState ( '' ) ; return ( < EuiModalBody > < EuiFieldText data - test - subj = "taskInputField" value = { task } placeholder = "Enter task here" onChange = { ( e ) => setTask ( e . target . value ) } /> < EuiButton data - test - subj = "createTodoEmbeddable" onClick = { ( ) => onSave ( task ) } > Save < /EuiButton> < /EuiModalBody>); } interface StartServices { openModal : OverlayStart [ 'openModal' ] ; } export type TodoEmbeddableFactory = EmbeddableFactory < TodoInput , TodoOutput , TodoEmbeddable > ; export class TodoEmbeddableFactoryDefinition implements EmbeddableFactoryDefinition < TodoInput , TodoOutput , TodoEmbeddable > { public readonly type = TODO_EMBEDDABLE ; constructor ( private getStartServices ) { } public async isEditable ( ) { return true ; } public async create ( initialInput , parent ? ) { return new TodoEmbeddable ( initialInput , parent ) ; } /**
     * This function is used when dynamically creating a new embeddable to add to a
     * container. Some input may be inherited from the container, but not all. This can be
     * used to collect specific embeddable input that the container will not provide, like
     * in this case, the task string.
     */ public getExplicitInput = async ( ) => { const { openModal } = await this . getStartServices ( ) ; return new Promise < { task : string ; } > ( ( resolve ) => { const onSave = ( task ) => resolve ( { task } ) ; const overlay = openModal ( toMountPoint ( < TaskInput onSave = { ( task ) => { onSave ( task ) ; overlay . close ( ) ; } } />)); } ) ; } ; public getDisplayName ( ) { return i18n . translate ( 'embeddableExamples.todo.displayName' , { defaultMessage : 'Todo item' , } ) ; } }