"use strict" ;
const React = require ( "react" ) ;
const throttleit = require ( "throttleit" ) ;
const classnames = require ( "classnames" ) ;
const Window = require ( "../window" ) ;
module . exports = function Sidebar ( { elementRef , side , windows , onMouseOver , onMouseOut , highlight , onStartMove , onStartBottomResize , onClose , onFocus , onRecalculateWindowPosition , onWindowRef } ) {
let [ onScroll , setOnScroll ] = React . useState ( null ) ;
React . useEffect ( ( ) => {
onScroll = throttleit ( ( ) => {
windows . forEach ( ( window _ ) => {
onRecalculateWindowPosition ( window _ . id ) ;
} ) ;
} , 100 ) ;
/* NOTE: Lazy initializer */
setOnScroll ( ( ) => {
return onScroll ;
} ) ;
} , [ windows ] ) ;
function onMouseOverHandler ( event ) {
onMouseOver ( event , side ) ;
}
function onMouseOutHandler ( event ) {
onMouseOut ( event , side ) ;
}
function trackRef ( windowId ) {
return function ( ref ) {
onWindowRef ( windowId , ref ) ;
if ( ref != null ) {
onRecalculateWindowPosition ( windowId ) ;
}
} ;
}
return (
< div ref = { elementRef } className = { classnames ( "sidebar" , ` side- ${ side } ` , { highlight : highlight } ) } onMouseOver = { onMouseOverHandler } onMouseOut = { onMouseOutHandler } onScroll = { onScroll } >
{ windows . map ( ( window _ ) => {
let windowStyle = {
width : window _ . width ,
height : window _ . height ,
/* The below is a bit of a hack to ensure that a being-dragged window always displays with coordinates absolute to the page, not relative to the sidebar. */
position : ( window _ . isMoving ) ? "fixed" : "static"
} ;
let handlers = {
onTitleMouseDown : ( event ) => {
onStartMove ( window _ , event ) ;
} ,
onResizerMouseDown : ( event ) => {
onStartBottomResize ( window _ , event ) ;
} ,
onMouseDown : ( ) => {
onFocus ( window _ ) ;
} ,
onClose : ( ) => {
onClose ( window _ ) ;
}
} ;
return (
< Window.Window elementRef = { trackRef ( window _ . id ) } key = { window _ . id } style = { windowStyle } window = { window _ } resizeDirection = "vertical" { ...handlers } / >
) ;
} ) }
< / div >
) ;
} ;