skyquake/plugins/composer/src/src/components/CanvasPanelTray.js

   1 /**
   2  * Created by onvelocity on 2/4/16.
   3  */
   4 'use strict';
   5 import React from 'react'
   6 import ClassNames from 'classnames'
   7 import ResizableManager from '../libraries/ResizableManager'
   8 import CanvasPanelTrayActions from '../actions/CanvasPanelTrayActions'
   9 import '../styles/CanvasPanelTray.scss'
  10 const uiTransient = {
  11         isResizing: false
  12 };
  13 export default function (props) {
  14         const style = {
  15                 height: Math.max(0, props.layout.bottom),
  16                 right: props.layout.right,
  17                 display: props.show ? false : 'none'
  18         };
  19     const PANEL = {
  20         FORWARD: 'forwarding',
  21         PARAMETER: 'parameter'
  22     }
  23         const classNames = ClassNames('CanvasPanelTray', {'-with-transitions': !document.body.classList.contains('resizing')});
  24         function onClickToggleOpenClose(event) {
  25                 if (event.defaultPrevented) return;
  26                 event.preventDefault();
  27                 // don't toggle if the user was resizing
  28                 if (!uiTransient.isResizing) {
  29                         CanvasPanelTrayActions.toggleOpenClose(event);
  30                 }
  31                 event.target.removeEventListener('mousemove', onMouseMove, true);
  32         }
  33         function onMouseDown(event) {
  34                 uiTransient.isResizing = false;
  35                 event.target.addEventListener('mousemove', onMouseMove, true);
  36         }
  37         function onMouseMove() {
  38                 uiTransient.isResizing = ResizableManager.isResizing();
  39         }
  40         // note 25px is the height of the h1
  41         const isOpen = style.height > 25;
  42         return (
  43                 <div className={classNames} data-resizable="top" data-resizable-handle-offset="4" style={style}>
  44             <div  className="CanvasPanelTray-buttons" onClick={onClickToggleOpenClose}>
  45                 <button
  46                     style={{flex: '1 1 auto'}}
  47                     className={ClassNames({'-selected': props.displayedPanel === PANEL.FORWARD})}
  48                     onMouseDownCapture={onMouseDown}
  49                     data-event={PANEL.FORWARD}>
  50                     Forwarding Graphs
  51                 </button>
  52
  53                 <button
  54                     style={{flex: '1 1 auto', borderLeft: '1px solid white'}}
  55                     className={ClassNames({'-selected': props.displayedPanel === PANEL.PARAMETER})}
  56                     onMouseDownCapture={onMouseDown}
  57                     data-event={PANEL.PARAMETER}>
  58                         Config Parameter Map
  59                 </button>
  60                 <div  data-open-close-icon={isOpen ? 'open' : 'closed'}  style={{flex: '0 1', width: '40px', height: '25px', cursor: 'pointer'}} data-event='arrow'>
  61
  62                 </div>
  63             </div>
  64                         <div className="tray-body">
  65                                 {props.children}
  66                         </div>
  67                 </div>
  68         );
  69 }