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 classNames = ClassNames('CanvasPanelTray', {'-with-transitions': !document.body.classList.contains('resizing')});
  20         function onClickToggleOpenClose(event) {
  21                 if (event.defaultPrevented) return;
  22                 event.preventDefault();
  23                 // don't toggle if the user was resizing
  24                 if (!uiTransient.isResizing) {
  25                         CanvasPanelTrayActions.toggleOpenClose();
  26                 }
  27                 event.target.removeEventListener('mousemove', onMouseMove, true);
  28         }
  29         function onMouseDown(event) {
  30                 uiTransient.isResizing = false;
  31                 event.target.addEventListener('mousemove', onMouseMove, true);
  32         }
  33         function onMouseMove() {
  34                 uiTransient.isResizing = ResizableManager.isResizing();
  35         }
  36         // note 25px is the height of the h1
  37         const isOpen = style.height > 25;
  38         return (
  39                 <div className={classNames} data-resizable="top" data-resizable-handle-offset="4" style={style}>
  40                         <h1 data-open-close-icon={isOpen ? 'open' : 'closed'} onMouseDownCapture={onMouseDown} onClick={onClickToggleOpenClose}>Forwarding Graphs</h1>
  41                         <div className="tray-body">
  42                                 {props.children}
  43                         </div>
  44                 </div>
  45         );
  46 }