import React from 'react' ; import ReactDOM from 'react-dom' ; import { Subscription } from 'rxjs' ; import { Embeddable , EmbeddableInput , IContainer , EmbeddableOutput , } from '../../../../src/plugins/embeddable/public' ; import { MultiTaskTodoEmbeddableComponent } from './multi_task_todo_component' ; export const MULTI_TASK_TODO_EMBEDDABLE = 'MULTI_TASK_TODO_EMBEDDABLE' ; export interface MultiTaskTodoInput extends EmbeddableInput { tasks : string [ ] ; icon ? : string ; search ? : string ; title : string ; } export interface MultiTaskTodoOutput extends EmbeddableOutput { hasMatch : boolean ; } function getHasMatch ( tasks , title ? , search ? ) { if ( search === undefined || search === '' ) return false ; if ( title && title . match ( search ) ) return true ; const match = tasks . find ( ( task ) => task . match ( search ) ) ; if ( match ) return true ; return false ; } function getOutput ( input ) { const hasMatch = getHasMatch ( input . tasks , input . title , input . search ) ; return { hasMatch } ; } export class MultiTaskTodoEmbeddable extends Embeddable < MultiTaskTodoInput , MultiTaskTodoOutput > { public readonly type = MULTI_TASK_TODO_EMBEDDABLE ; private subscription : Subscription ; private node ? : HTMLElement ; constructor ( initialInput , parent ? ) { super ( initialInput , getOutput ( initialInput ) , parent ) ; this . subscription = this . getInput$ ( ) . subscribe ( ( ) => { this . updateOutput ( getOutput ( this . input ) ) ; } ) ; } public render ( node ) { if ( this . node ) { ReactDOM . unmountComponentAtNode ( this . node ) ; } this . node = node ; ReactDOM . render ( < MultiTaskTodoEmbeddableComponent embeddable = { this } / > , node ) ; } public reload ( ) { } public destroy ( ) { super . destroy ( ) ; this . subscription . unsubscribe ( ) ; if ( this . node ) { ReactDOM . unmountComponentAtNode ( this . node ) ; } } }