import * as React from 'react' ; import * as ReactDOM from 'react-dom' ; import './ui.css' ; declare function require ( path ) ; class App extends React . Component { textbox : HTMLInputElement ; countRef = ( element ) => { if ( element ) element . value = '5' ; this . textbox = element ; } ; onCreate = ( ) => { const count = parseInt ( this . textbox . value , 10 ) ; parent . postMessage ( { pluginMessage : { type : 'create-rectangles' , count } } , '*' ) ; } ; onCancel = ( ) => { parent . postMessage ( { pluginMessage : { type : 'cancel' } } , '*' ) ; } ; render ( ) { return < div > < img src = { require ( './logo.svg' ) } /> < h2 > Rectangle Creator < /h2> < p > Count : < input ref = { this . countRef } /></p > < button id = "create" onClick = { this . onCreate } > Create < /button> < button onClick = { this . onCancel } > Cancel < /button> < /div>; } } ReactDOM . render ( < App />, document.getElementById('react-page'));