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