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

   1
   2
   3 import React from 'react';
   4
   5 import Icon from '../../../icons/Icon';
   6 import iconEdit from '../../../../../../../../res/ecomp/asdc/sequencer/sprites/icon/edit.svg';
   7
   8 /**
   9  * A hover-over popup. It shows notes, but perhaps will be put to other uses.
  10  * @param props React properties.
  11  * @returns {XML}
  12  * @constructor
  13  */
  14 export default class Popup extends React.Component {
  15
  16   // ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  17
  18   /**
  19    * Construct react view.
  20    * @param props element properties (of which there are none).
  21    * @param context react context.
  22    */
  23   constructor(props, context) {
  24     super(props, context);
  25     this.state = {
  26       top: 0,
  27       left: 0,
  28       visible: false,
  29       notes: '',
  30     };
  31   }
  32
  33   // ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  34
  35   /**
  36    * Render view.
  37    * @returns {XML}
  38    */
  39   render() {
  40
  41     // Build CSS + styles to position and configure popup.
  42
  43     let top = this.state.top;
  44     let left = this.state.left;
  45
  46     const popupHeight = 200;
  47     const popupWidth = 320;
  48
  49     let auxCssVertical = 'top';
  50     let auxCssHorizontal = 'left';
  51
  52     if (this.state.top > (window.innerHeight - popupHeight)) {
  53       top -= (popupHeight + 50);
  54       auxCssVertical = 'bottom';
  55     }
  56
  57     if (this.state.left > (window.innerWidth - popupWidth)) {
  58       left -= (popupWidth - 80);
  59       auxCssHorizontal = 'right';
  60     }
  61
  62     const auxCss = `asdcs-diagram-popup-${auxCssVertical}${auxCssHorizontal}`;
  63     const styles = {
  64       top,
  65       left,
  66       display: (this.state.visible ? 'block' : 'none'),
  67     };
  68
  69     // Render element.
  70
  71     let notes = this.state.notes || '';
  72     if (notes.length > 255) {
  73       notes = notes.substring(0, 255);
  74       notes = `${notes} ...`;
  75     }
  76
  77     return (
  78       <div className={`asdcs-diagram-popup ${auxCss}`} style={styles}>
  79         <div className="asdcs-diagram-popup-header">Notes</div>
  80         <div className="asdcs-diagram-popup-body">
  81           <div className="asdcs-icon-popup">
  82             <Icon glyph={iconEdit} />
  83           </div>
  84           <div className="asdcs-diagram-notes">
  85             <div className="asdcs-diagram-note">
  86               {notes}
  87             </div>
  88           </div>
  89         </div>
  90         <div className="asdcs-diagram-popup-footer"></div>
  91       </div>
  92     );
  93   }
  94 }