2 * Created by onvelocity on 2/4/16.
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'
13 export default function (props
) {
15 height
: Math
.max(0, props
.layout
.bottom
),
16 right
: props
.layout
.right
,
17 display
: props
.show
? false : 'none'
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();
27 event
.target
.removeEventListener('mousemove', onMouseMove
, true);
29 function onMouseDown(event
) {
30 uiTransient
.isResizing
= false;
31 event
.target
.addEventListener('mousemove', onMouseMove
, true);
33 function onMouseMove() {
34 uiTransient
.isResizing
= ResizableManager
.isResizing();
36 // note 25px is the height of the h1
37 const isOpen
= style
.height
> 25;
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">