content: import React from 'react';
  
  /* usage
   import Msg from './ReactDialogBoxes';
  
  
   <Msg ref={msg => {this.msg = msg;}}/>
  
  
   this.msg.alert('header', 'text' [,'buttonText']).then(() => {
       // code
   });
  
   this.msg.confirm('header', 'text' [, 'okButtonText', 'cancelButtonText']).then(result => {
       // code
   });
  
   this.msg.prompt(
       text: '',
       [promptPlaceholder: '',]
       [okButtonText: '',]
       [cancelButtonText: '']
   ).then(result => {
          // code
   });
  
   this.msg.showLoader(['Text to show']); // default is "Loading..."
   this.msg.hideLoader();
  
  
   */
  
  export default class ReactDialogBoxes extends React.Component {
      constructor (props) {
          super(props);
  
          this._defaultOkButtonText = 'Ok';
          this._defaultCancelButtonText = 'Cancel';
          this._defaultLoaderText = 'Loading...';
  
          this.state = {
              type: 'alert',  // other types: confirm, prompt, loader
              isVisible: false,
              messageText: 'Hello!',
              sendData: null,
              okButtonText: this._defaultOkButtonText,
              cancelButtonText: this._defaultCancelButtonText,
              promptValue: ''
          };
  
  
          this.alert = this.alert.bind(this);
          this.confirm = this.confirm.bind(this);
          this.prompt = this.prompt.bind(this);
          this._okHandler = this._okHandler.bind(this);
          this._cancelHandler = this._cancelHandler.bind(this);
          this._promptHandler = this._promptHandler.bind(this);
          this.showLoader = this.showLoader.bind(this);
          this.hideLoader = this.hideLoader.bind(this);
      }
  
      alert (text, okButtonText) {
          this.setState({
              type: 'alert',
              isVisible: true,
              messageText: text,
              okButtonText: okButtonText || this._defaultOkButtonText
          });
  
          return new Promise((res, rej) => {
                  this.setState({
                  sendData: res
              });
      });
      }
  
      confirm (text, okButtonText, cancelButtonText) {
          this.setState({
              type: 'confirm',
              isVisible: true,
              messageText: text,
              okButtonText: okButtonText || this._defaultOkButtonText,
              cancelButtonText: cancelButtonText || this._defaultCancelButtonText
          });
  
          return new Promise((res, rej) => {
                  this.setState({
                  sendData: res
              });
      });
      }
  
      prompt (
          text,
          okButtonText,
          cancelButtonText,
          promptPlaceholder
      ) {
          this.setState({
              type: 'prompt',
              isVisible: true,
              messageText: text,
              okButtonText: okButtonText || this._defaultOkButtonText,
              cancelButtonText: cancelButtonText || this._defaultCancelButtonText,
              promptPlaceholder: promptPlaceholder || ''
          });
  
          return new Promise((res, rej) => {
                  this.setState({
                  sendData: res
              });
      });
      }
  
      _okHandler () {
          this.setState({
              isVisible: false,
              okButtonText: this._defaultOkButtonText
          });
          if (this.state.type === 'prompt') {
              this.state.sendData(this.state.promptValue);
          } else {
              this.state.sendData(true);
          }
      }
  
      _cancelHandler () {
          this.setState({
              isVisible: false,
              okButtonText: this._defaultOkButtonText,
              cancelButtonText: this._defaultCancelButtonText
          });
          this.state.sendData(false);
      }
  
      _promptHandler (ev) {
          this.setState({
              promptValue: ev.target.value
          });
      }
  
      showLoader (loaderText) {
          this.setState({
              type: 'loader',
              isVisible: true,
              messageText: loaderText || this._defaultLoaderText
          });
      }
  
      hideLoader () {
          this.setState({
              type: 'loader',
              isVisible: false,
              messageText: ''
          });
      }
  
      _renderAlertButtons () {
          return (<button className="_okButton"
          onClick={this._okHandler}
      >
          {this.state.okButtonText}
      </button>);
      }
  
      _renderConfirmButtons () {
          return (<div className="_confirmButtons">
              <button className="_okButton"
          onClick={this._okHandler}
      >
          {this.state.okButtonText}
      </button>
          <button className="_cancelButton"
          onClick={this._cancelHandler}
      >
          {this.state.cancelButtonText}
      </button>
          </div>);
      }
  
      _renderPrompt () {
          return (<div className="_promptWrapper">
              <div className="_prompt">
              <input type="text"
          className="_promptInput"
          placeholder={this.state.promptPlaceholder}
          onChange={this._promptHandler}
          value={this.promptValue}
      />
      </div>
  
          <button className="_okButton"
          onClick={this._okHandler}
      >
          {this.state.okButtonText}
      </button>
          <button className="_cancelButton"
          onClick={this._cancelHandler}
      >
          {this.state.cancelButtonText}
      </button>
  
          </div>);
      }
  
      render () {
          return (<div className="ReactDialogBoxes">
              {this.state.isVisible &&
                  <div className="_container">
                      <div className="_background"/>
                      <div className="_message">
                          {this.state.messageText &&
                              <p className="_text">
                                      {this.state.messageText}
                              </p>
                          }
                          {this.state.type === 'alert' &&
                              this._renderAlertButtons()
                          }
  
                          {this.state.type === 'confirm' &&
                              this._renderConfirmButtons()
                          }
  
                          {this.state.type === 'prompt' &&
                              this._renderPrompt()
                          }
                      </div>
                  </div>
              }
          </div>);
      }
  }
  