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

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