gerrit.onap Code Review - sdc.git/blob

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