import * as React from 'react' ; import * as ReactDOM from 'react-dom' ; import { Button } from 'react-bootstrap' ; enum DialogButtons { Ok = 0 , OkCancel = 1 } type DialogProps = { onCancel ? ( ) : void ; onOk ? ( sender , args ) : void ; } ; type DialogState = { title : string ; type : DialogType ; description : string ; input : boolean ; placeholder : string ; buttons : DialogButtons ; show : boolean ; value : string ; } ; export enum DialogType { Info = 0 , Warning = 1 } /**
 * A simple dialog component to display a modal window
 */ export default class Dialog extends React . Component < DialogProps , DialogState > { private args : any ; private inputField : HTMLInputElement ; private buttonOk : Button ; constructor ( props ) { super ( props ) ; this . state = { show : false , type : DialogType . Info , value : '' , title : '' , placeholder : 'Please enter a value here' , description : '' , input : false , buttons : DialogButtons . OkCancel , } ; } param e private clickHander ( e ) { const button = ReactDOM . findDOMNode ( e . currentTarget ) as HTMLButtonElement ; switch ( button . name ) { case 'cancel' : if ( this . props . onCancel ) { this . props . onCancel ( ) ; } break ; case 'ok' : this . props . onOk ( button , this . args ) ; break ; } this . setState ( { show : false } ) ; } /**
     * create the buttons dependend on the given DialogButtons enum or dialog type (E.g. showInput, showMessage)
     */ private createButtons ( ) { switch ( this . state . buttons ) { default : case DialogButtons . Ok : return [ < Button key = "btnOk" name = "ok" ref = { i => ( this . buttonOk = i ) } bsStyle = "primary" onClick = { this . clickHander . bind ( this ) } > Ok < /Button>, ] ; case DialogButtons . OkCancel : return [ < Button key = "btnCancel" name = "cancel" onClick = { this . clickHander . bind ( this ) } > Cancel < /Button>, < Button key = "btnOk" name = "ok" onKeyDown = { this . handleKeyDown . bind ( this ) } ref = { i => ( this . buttonOk = i ) } style = { { marginLeft : '.3em' } } bsStyle = "primary" onClick = { this . clickHander . bind ( this ) } > Ok < /Button>, ] ; } } private handleChange ( e ) { this . setState ( { value : e . target . value } ) ; } private handleKeyDown ( e ) { if ( e . key === 'Enter' && ! ( e . currentTarget instanceof HTMLButtonElement ) ) { const buttonEl = ReactDOM . findDOMNode ( this . buttonOk ) as HTMLButtonElement ; buttonEl . click ( ) ; } else if ( e . key === 'Escape' ) { this . setState ( { show : false } ) ; } } public showMessage ( title , description , dialogType = DialogType . Info , args = undefined ) { this . setState ( { show : true , title , description , input : false , buttons : DialogButtons . Ok , type : dialogType } ) ; this . args = args ; } public showConfirm ( title , description , dialogType = DialogType . Info , args = undefined ) { this . setState ( { show : true , title , description , input : false , buttons : DialogButtons . OkCancel , type : dialogType } , ( ) => { const buttonEl = ReactDOM . findDOMNode ( this . buttonOk ) as HTMLButtonElement ; buttonEl . focus ( ) ; } ) ; this . args = args ; } public showInput ( title , description , placeholder = '' , dialogType = DialogType . Info , args = undefined ) { this . setState ( { show : true , input : true , title , description , placeholder , buttons : DialogButtons . OkCancel , type : dialogType , } , ( ) => { this . inputField . focus ( ) ; this . inputField . select ( ) ; } ) ; this . args = args ; } public getValue ( ) { return this . state . value ; } public getTypeIcon ( ) { switch ( this . state . type ) { default : case DialogType . Info : return `${ window [ 'extensionPath' ] }/resources/icons/misc/dialog-info.svg` ; case DialogType . Warning : return `${ window [ 'extensionPath' ] }/resources/icons/misc/dialog-warning.svg` ; } } public render ( ) { return ( < div id = "dialog" hidden = { ! this . state . show } > < div > < div className = "dialog-content" > < img src = { this . getTypeIcon ( ) } height = { 50 } / > < div style = { { flexGrow : 1 } } > < h4 > { this . state . title } < /h4> < div dangerouslySetInnerHTML = { { __html : this . state . description } } > < /div> < /div> < /div> < hr / > < div className = "dialog-footer" > < div > < input hidden = { ! this . state . input } ref = { i => ( this . inputField = i ) } className = { 'textInput' } type = "text" value = { this . state . value } onKeyDown = { this . handleKeyDown . bind ( this ) } onChange = { this . handleChange . bind ( this ) } placeholder = { this . state . placeholder } / > < /div> < div style = { { textAlign : 'right' } } > { this . createButtons ( ) } < /div> < /div> < /div> < /div>); } }