dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/dialog/Dialog.jsx

   1
   2
   3 import React from 'react';
   4
   5 import Icon from '../icons/Icon';
   6 import iconQuestion from '../../../../../../res/ecomp/asdc/sequencer/sprites/icon/question.svg';
   7 import iconExclaim from '../../../../../../res/ecomp/asdc/sequencer/sprites/icon/exclaim.svg';
   8 import iconInfo from '../../../../../../res/ecomp/asdc/sequencer/sprites/icon/info.svg';
   9 import iconEdit from '../../../../../../res/ecomp/asdc/sequencer/sprites/icon/edit.svg';
  10 import iconClose from '../../../../../../res/ecomp/asdc/sequencer/sprites/icon/close.svg';
  11
  12 /**
  13  * Multi-purpose dialog. Rendered into the page on initialization, and then
  14  * configured, shown and hidden as required.
  15  */
  16 export default class Dialog extends React.Component {
  17
  18   // ///////////////////////////////////////////////////////////////////////////////////////////////
  19
  20   /**
  21    * Construct view.
  22    */
  23   constructor(props, context) {
  24
  25     super(props, context);
  26
  27     this.MODE = {
  28       INFO: {
  29         icon: 'asdcs-icon-info',
  30         heading: 'Information',
  31       },
  32       ERROR: {
  33         icon: 'asdcs-icon-exclaim',
  34         heading: 'Error',
  35       },
  36       EDIT: {
  37         icon: 'asdcs-icon-edit',
  38         heading: 'Edit',
  39         edit: true,
  40         confirm: true,
  41       },
  42       CONFIRM: {
  43         icon: 'asdcs-icon-question',
  44         heading: 'Confirm',
  45         confirm: true,
  46       },
  47     };
  48
  49     this.state = {
  50       mode: this.MODE.INFO,
  51       message: '',
  52       text: '',
  53       visible: false,
  54     };
  55
  56     // Bindings.
  57
  58     this.onClickOK = this.onClickOK.bind(this);
  59     this.onClickCancel = this.onClickCancel.bind(this);
  60     this.onChangeText = this.onChangeText.bind(this);
  61     this.showConfirmDialog = this.showConfirmDialog.bind(this);
  62     this.showInfoDialog = this.showInfoDialog.bind(this);
  63     this.showEditDialog = this.showEditDialog.bind(this);
  64     this.showErrorDialog = this.showErrorDialog.bind(this);
  65     this.showDialog = this.showDialog.bind(this);
  66
  67   }
  68
  69   // ///////////////////////////////////////////////////////////////////////////////////////////////
  70
  71   /**
  72    * Show info dialog.
  73    * @param message info message.
  74    */
  75   showInfoDialog(message) {
  76     this.showDialog(this.MODE.INFO, { message });
  77   }
  78
  79   // ///////////////////////////////////////////////////////////////////////////////////////////////
  80
  81   /**
  82    * Show error dialog.
  83    * @param message error message.
  84    */
  85   showErrorDialog(message) {
  86     this.showDialog(this.MODE.ERROR, { message });
  87   }
  88
  89   // ///////////////////////////////////////////////////////////////////////////////////////////////
  90
  91   /**
  92    * Show edit dialog.
  93    * @param message dialog message.
  94    * @param text current edit text.
  95    * @param callback callback function to be invoked on OK.
  96    */
  97   showEditDialog(message, text, callback) {
  98     this.showDialog(this.MODE.EDIT, { message, text, callback });
  99   }
 100
 101   // ///////////////////////////////////////////////////////////////////////////////////////////////
 102
 103   /**
 104    * Show confirmation dialog.
 105    * @param message dialog message.
 106    * @param callback callback function to be invoked on OK.
 107    */
 108   showConfirmDialog(message, callback) {
 109     this.showDialog(this.MODE.CONFIRM, { message, callback });
 110   }
 111
 112   // ///////////////////////////////////////////////////////////////////////////////////////////////
 113
 114   /**
 115    * Handle buttonclick.
 116    */
 117   onClickOK() {
 118     this.props.application.hideOverlay();
 119     this.setState({ visible: false });
 120     if (this.callback) {
 121
 122       // So far the only thing we can return is edit text, but send it back
 123       // as properties to allow for future return values.
 124
 125       this.callback({ text: this.state.text });
 126     }
 127   }
 128
 129   // ///////////////////////////////////////////////////////////////////////////////////////////////
 130
 131   /**
 132    * Handle buttonclick.
 133    */
 134   onClickCancel() {
 135     this.props.application.hideOverlay();
 136     this.setState({ visible: false });
 137   }
 138
 139   // ///////////////////////////////////////////////////////////////////////////////////////////////
 140
 141   /**
 142    * Handle text changes.
 143    * @param event update event.
 144    */
 145   onChangeText(event) {
 146     this.setState({ text: event.target.value });
 147   }
 148
 149   // ///////////////////////////////////////////////////////////////////////////////////////////////
 150
 151   /**
 152    * Show dialog in specified configuration.
 153    * @param mode dialog mode.
 154    * @param args dialog parameters, varying slightly by dialog type.
 155    * @private
 156    */
 157   showDialog(mode, args) {
 158     this.props.application.showOverlay();
 159     this.callback = args.callback;
 160     this.setState({
 161       mode,
 162       visible: true,
 163       message: args.message || '',
 164       text: args.text || '',
 165     });
 166   }
 167
 168   // ///////////////////////////////////////////////////////////////////////////////////////////////
 169
 170   /**
 171    * Render dialog into the page, initially hidden.
 172    */
 173   render() {
 174
 175     const dialogClass = (this.state.visible) ? '' : 'asdcs-hidden';
 176     const cancelClass = (this.callback) ? '' : 'asdcs-hidden';
 177     const textClass = (this.state.mode === this.MODE.EDIT) ? '' : 'asdcs-hidden';
 178
 179     return (
 180       <div className={`asdcs-dialog ${dialogClass}`}>
 181         <div className="asdcs-dialog-header">{this.state.mode.heading}</div>
 182         <div className="asdcs-dialog-close" onClick={this.onClickCancel} >
 183           <Icon glyph={iconClose} className={this.MODE.CONFIRM.icon} />
 184         </div>
 185         <div className={`asdcs-dialog-icon ${this.state.mode.icon}`}>
 186           <Icon glyph={iconQuestion} className={this.MODE.CONFIRM.icon} />
 187           <Icon glyph={iconExclaim} className={this.MODE.ERROR.icon} />
 188           <Icon glyph={iconInfo} className={this.MODE.INFO.icon} />
 189           <Icon glyph={iconEdit} className={this.MODE.EDIT.icon} />
 190         </div>
 191         <div className="asdcs-dialog-message">
 192           {this.state.message}
 193         </div>
 194         <div className={`asdcs-dialog-text ${textClass}`}>
 195           <textarea
 196             maxLength="255"
 197             value={this.state.text}
 198             onChange={this.onChangeText}
 199           />
 200         </div>
 201         <div className="asdcs-dialog-buttonbar">
 202           <button
 203             className={`asdcs-dialog-button-cancel ${cancelClass}`}
 204             onClick={this.onClickCancel}
 205           >
 206             Cancel
 207           </button>
 208           <button
 209             className="asdcs-dialog-button-ok"
 210             onClick={this.onClickOK}
 211           >
 212             OK
 213           </button>
 214         </div>
 215       </div>
 216     );
 217   }
 218 }
 219
 220 Dialog.propTypes = {
 221   application: React.PropTypes.object.isRequired,
 222 };