import React from 'react' ; import ReactDOM from 'react-dom' ; import { Subscription } from 'rxjs' ; import { Embeddable , EmbeddableInput , IContainer , EmbeddableOutput , } from '../../../../src/plugins/embeddable/public' ; import { TodoEmbeddableComponent } from './todo_component' ; export const TODO_EMBEDDABLE = 'TODO_EMBEDDABLE' ; export interface TodoInput extends EmbeddableInput { task : string ; icon ? : string ; search ? : string ; } export interface TodoOutput extends EmbeddableOutput { hasMatch : boolean ; } function getOutput ( input ) { return { hasMatch : input . search ? Boolean ( input . task . match ( input . search ) || ( input . title && input . title . match ( input . search ) ) ) : true , } ; } export class TodoEmbeddable extends Embeddable < TodoInput , TodoOutput > { public readonly type = 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 ) { this . node = node ; if ( this . node ) { ReactDOM . unmountComponentAtNode ( this . node ) ; } ReactDOM . render ( < TodoEmbeddableComponent embeddable = { this } / > , node ) ; } /**
     * Not relevant.
     */ public reload ( ) { } public destroy ( ) { super . destroy ( ) ; this . subscription . unsubscribe ( ) ; if ( this . node ) { ReactDOM . unmountComponentAtNode ( this . node ) ; } } }