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'
20 FORWARD
: 'forwarding',
21 PARAMETER
: 'parameter'
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
);
31 event
.target
.removeEventListener('mousemove', onMouseMove
, true);
33 function onMouseDown(event
) {
34 uiTransient
.isResizing
= false;
35 event
.target
.addEventListener('mousemove', onMouseMove
, true);
37 function onMouseMove() {
38 uiTransient
.isResizing
= ResizableManager
.isResizing();
40 // note 25px is the height of the h1
41 const isOpen
= style
.height
> 25;
43 <div className
={classNames
} data
-resizable
="top" data
-resizable
-handle
-offset
="4" style
={style
}>
44 <div className
="CanvasPanelTray-buttons" onClick
={onClickToggleOpenClose
}>
46 style
={{flex
: '1 1 auto'}}
47 className
={ClassNames({'-selected': props
.displayedPanel
=== PANEL
.FORWARD
})}
48 onMouseDownCapture
={onMouseDown
}
49 data
-event
={PANEL
.FORWARD
}>
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
}>
60 <div data
-open
-close
-icon
={isOpen
? 'open' : 'closed'} style
={{flex
: '0 1', width
: '40px', height
: '25px', cursor
: 'pointer'}} data
-event
='arrow'>
64 <div className
="tray-body">