You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
2.0 KiB
JavaScript
75 lines
2.0 KiB
JavaScript
"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>
|
|
);
|
|
};
|