import * as React from "react" ; import * as ReactDOM from "react-dom" ; import { DialogBase } from "./DialogBase" ; export class MessageBox extends DialogBase { public message : string ; private options : MessageBoxOptions ; constructor ( options ) { super ( ) ; this . options = { ... DefaultMessageBoxOptions , ... options } ; } protected render ( ) { const props = { okButtonLabel : this . options . okButtonLabel , cancelButtonLabel : this . options . cancelButtonLabel , hideCancelButton : this . options . hideCancelButton , message : this . message } ; const element = React . createElement ( MessageBoxPanel , props ) ; ReactDOM . render ( element , this . el , ( ) => { this . init ( ) ; } ) ; } protected init ( ) { super . init ( ) ; } /** Static method for displaying a simple message. */ public static show ( message ) { const mb = new MessageBox ( { hideCancelButton : true } ) ; mb . message = message ; return mb . showDialog ( ) ; } /** Static method for asking the user a yes/no question. OK/Cancel buttons are relabeled to Yes/No. */ public static ask ( title , message ) { const mb = new MessageBox ( { okButtonLabel : "Yes" , cancelButtonLabel : "No" } ) ; mb . message = message ; return mb . showDialog ( ) ; } } export interface MessageBoxOptions { hideCancelButton ? : boolean ; okButtonLabel ? : string ; cancelButtonLabel ? : string ; } const DefaultMessageBoxOptions = { hideCancelButton : false , okButtonLabel : 'OK' , cancelButtonLabel : 'Cancel' } ; interface MessageBoxPanelProps { message : string ; hideCancelButton : boolean ; okButtonLabel : string ; cancelButtonLabel : string ; } function MessageBoxPanel ( props ) { const cancelButton = props . hideCancelButton ? null : < button type = "button" className = "cancel-button" > { props . cancelButtonLabel } < /button>; return ( < div className = "message-box" > < div className = "message-box-message" > { props . message } < /div> < div className = "button-panel" > < button type = "button" className = "ok-button default-button" > { props . okButtonLabel } < /button> { cancelButton } < /div> < /div>); }