@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
398 lines • 15.8 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["children", "screens", "bodyConfigurationSettings"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useState, useEffect, useRef, useCallback } from "react";
import HUDScrollContainer from "./HUDScrollContainer.js";
var baseStyles = {
container: {
display: "flex",
flexDirection: "column",
fontFamily: "Arial, sans-serif",
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)",
backgroundColor: "#2a2d37",
color: "#ffffff",
height: "100%"
},
header: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
fontSize: "1.5em",
fontWeight: "bold",
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
borderBottom: "2px solid #444",
backgroundColor: "#1f1f1f",
color: "#00bcd4",
padding: "20px"
},
splitContainer: {
position: "relative",
display: "flex",
flex: 1,
flexWrap: "wrap",
backgroundColor: "#2a2d37",
padding: "10px"
},
screen: {
position: "relative",
flexShrink: 0,
overflow: "auto",
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.269)",
border: "1px solid #444",
borderRadius: "10px",
backgroundColor: "#333",
padding: "10px",
margin: "10px"
},
resizeHandle: {
position: "absolute",
backgroundColor: "#00bcd4",
height: "10px",
width: "10px",
zIndex: 10
},
top: {
cursor: "ns-resize",
transform: "translateX(-50%)",
left: "50%",
top: "-5px"
},
bottom: {
cursor: "ns-resize",
transform: "translateX(-50%)",
bottom: "-5px",
left: "50%"
},
left: {
cursor: "ew-resize",
transform: "translateY(-50%)",
left: "-5px",
top: "50%"
},
right: {
cursor: "ew-resize",
transform: "translateY(-50%)",
right: "-5px",
top: "50%"
},
topLeft: {
cursor: "nwse-resize",
left: "-5px",
top: "-5px"
},
topRight: {
cursor: "nesw-resize",
right: "-5px",
top: "-5px"
},
bottomLeft: {
cursor: "nesw-resize",
bottom: "-5px",
left: "-5px"
},
bottomRight: {
cursor: "nwse-resize",
bottom: "-5px",
right: "-5px"
},
sidePanel: {
display: "flex",
flexDirection: "column",
boxShadow: "2px 0 4px rgba(0, 0, 0, 0.1)",
borderRight: "2px solid #444",
backgroundColor: "#1f1f1f",
minWidth: "150px",
padding: "10px"
},
button: {
cursor: "pointer",
transition: "background-color 0.3s ease",
border: "none",
borderRadius: "5px",
backgroundColor: "#00bcd4",
color: "#fff",
padding: "10px 20px",
margin: "5px 0"
},
buttonHover: {
backgroundColor: "#0097a7"
}
};
var mergeStyles = function mergeStyles(base, custom) {
return _objectSpread(_objectSpread({}, base), custom);
};
var HUDLayoutManagerContainer = function HUDLayoutManagerContainer(_ref) {
var children = _ref.children,
_ref$containerConfigu = _ref.containerConfigurationSettings,
containerConfigurationSettings = _ref$containerConfigu === void 0 ? {} : _ref$containerConfigu;
return /*#__PURE__*/React.createElement("div", {
style: mergeStyles(baseStyles.container, containerConfigurationSettings)
}, children);
};
var HUDLayoutManagerHeader = function HUDLayoutManagerHeader(_ref2) {
var children = _ref2.children,
_ref2$headerConfigura = _ref2.headerConfigurationSettings,
headerConfigurationSettings = _ref2$headerConfigura === void 0 ? {} : _ref2$headerConfigura;
return /*#__PURE__*/React.createElement("header", {
style: mergeStyles(baseStyles.header, headerConfigurationSettings)
}, children);
};
var HUDLayoutManagerBody = function HUDLayoutManagerBody(_ref3) {
var children = _ref3.children,
_ref3$screens = _ref3.screens,
screens = _ref3$screens === void 0 ? [] : _ref3$screens,
_ref3$bodyConfigurati = _ref3.bodyConfigurationSettings,
bodyConfigurationSettings = _ref3$bodyConfigurati === void 0 ? {} : _ref3$bodyConfigurati,
rest = _objectWithoutProperties(_ref3, _excluded);
var defaultSizes = new Array(React.Children.count(children)).fill({
height: 100,
width: 100 / React.Children.count(children)
});
var _useState = useState(screens.length === React.Children.count(children) ? screens : defaultSizes),
_useState2 = _slicedToArray(_useState, 2),
sizes = _useState2[0],
setSizes = _useState2[1];
var _useState3 = useState(null),
_useState4 = _slicedToArray(_useState3, 2),
draggingIndex = _useState4[0],
setDraggingIndex = _useState4[1];
var _useState5 = useState(null),
_useState6 = _slicedToArray(_useState5, 2),
dragDirection = _useState6[0],
setDragDirection = _useState6[1];
var _useState7 = useState([]),
_useState8 = _slicedToArray(_useState7, 2),
hiddenScreens = _useState8[0],
setHiddenScreens = _useState8[1];
var _useState9 = useState(false),
_useState10 = _slicedToArray(_useState9, 2),
dragging = _useState10[0],
setDragging = _useState10[1];
var containerRef = useRef(null);
var _hideScreen = function hideScreen(index) {
setHiddenScreens([].concat(_toConsumableArray(hiddenScreens), [index]));
};
var showScreen = function showScreen(index) {
setHiddenScreens(hiddenScreens.filter(function (i) {
return i !== index;
}));
};
var handleMouseMove = useCallback(function (e) {
if (!dragging || draggingIndex === null) {
return;
}
var containerHeight = containerRef.current.offsetHeight;
var containerWidth = containerRef.current.offsetWidth;
var newSizes = _toConsumableArray(sizes);
switch (dragDirection) {
case "ew-resize":
var newWidth = e.clientX / containerWidth * 100;
if (newWidth > 10 && newWidth < 90) {
newSizes[draggingIndex] = _objectSpread(_objectSpread({}, newSizes[draggingIndex]), {}, {
width: newWidth
});
}
break;
case "ns-resize":
var newHeight = e.clientY / containerHeight * 100;
if (newHeight > 10 && newHeight < 90) {
newSizes[draggingIndex] = _objectSpread(_objectSpread({}, newSizes[draggingIndex]), {}, {
height: newHeight
});
}
break;
case "nwse-resize":
case "nesw-resize":
var newCornerHeight = e.clientY / containerHeight * 100;
var newCornerWidth = e.clientX / containerWidth * 100;
if (newCornerWidth > 10 && newCornerWidth < 90 && newCornerHeight > 10 && newCornerHeight < 90) {
newSizes[draggingIndex] = {
width: newCornerWidth,
height: newCornerHeight
};
}
break;
default:
break;
}
setSizes(newSizes);
}, [dragging, draggingIndex, dragDirection, sizes]);
var handleMouseUp = useCallback(function () {
setDraggingIndex(null);
setDragDirection(null);
setDragging(false);
}, []);
useEffect(function () {
if (dragging) {
document.addEventListener("mousemove", handleMouseMove);
document.addEventListener("mouseup", handleMouseUp);
} else {
document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp);
}
return function () {
document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp);
};
}, [dragging, handleMouseMove, handleMouseUp]);
var renderScreens = function renderScreens() {
var screenComponents = [];
React.Children.forEach(children, function (child, index) {
if (hiddenScreens.includes(index)) {
return;
}
var _child$props = child.props,
_child$props$outerScr = _child$props.outerScreenConfigurationSettings,
outerScreenConfigurationSettings = _child$props$outerScr === void 0 ? {} : _child$props$outerScr,
_child$props$resizeHa = _child$props.resizeHandleStyles,
resizeHandleStyles = _child$props$resizeHa === void 0 ? {} : _child$props$resizeHa,
_child$props$draggabl = _child$props.draggable,
draggable = _child$props$draggabl === void 0 ? false : _child$props$draggabl;
var _sizes$index = sizes[index],
width = _sizes$index.width,
height = _sizes$index.height;
screenComponents.push( /*#__PURE__*/React.createElement("div", {
key: index,
style: _objectSpread(_objectSpread({}, baseStyles.screen), {}, {
height: typeof height !== "string" ? "".concat(height, "%") : "".concat(height),
width: typeof width !== "string" ? "".concat(width, "%") : "".concat(width)
}, outerScreenConfigurationSettings)
}, /*#__PURE__*/React.cloneElement(child, {
hideScreen: function hideScreen() {
return _hideScreen(index);
},
draggable: draggable
}), draggable && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
style: _objectSpread(_objectSpread(_objectSpread({}, baseStyles.resizeHandle), baseStyles.right), resizeHandleStyles.right),
onMouseDown: function onMouseDown() {
setDragging(true);
setDraggingIndex(index);
setDragDirection("ew-resize");
}
}), /*#__PURE__*/React.createElement("div", {
style: _objectSpread(_objectSpread(_objectSpread({}, baseStyles.resizeHandle), baseStyles.left), resizeHandleStyles.left),
onMouseDown: function onMouseDown() {
setDragging(true);
setDraggingIndex(index - 1);
setDragDirection("ew-resize");
}
}), /*#__PURE__*/React.createElement("div", {
style: _objectSpread(_objectSpread(_objectSpread({}, baseStyles.resizeHandle), baseStyles.top), resizeHandleStyles.top),
onMouseDown: function onMouseDown() {
setDragging(true);
setDraggingIndex(index);
setDragDirection("ns-resize");
}
}), /*#__PURE__*/React.createElement("div", {
style: _objectSpread(_objectSpread(_objectSpread({}, baseStyles.resizeHandle), baseStyles.bottom), resizeHandleStyles.bottom),
onMouseDown: function onMouseDown() {
setDragging(true);
setDraggingIndex(index);
setDragDirection("ns-resize");
}
}), /*#__PURE__*/React.createElement("div", {
style: _objectSpread(_objectSpread(_objectSpread({}, baseStyles.resizeHandle), baseStyles.topLeft), resizeHandleStyles.topLeft),
onMouseDown: function onMouseDown() {
setDragging(true);
setDraggingIndex(index);
setDragDirection("nwse-resize");
}
}), /*#__PURE__*/React.createElement("div", {
style: _objectSpread(_objectSpread(_objectSpread({}, baseStyles.resizeHandle), baseStyles.topRight), resizeHandleStyles.topRight),
onMouseDown: function onMouseDown() {
setDragging(true);
setDraggingIndex(index);
setDragDirection("nesw-resize");
}
}), /*#__PURE__*/React.createElement("div", {
style: _objectSpread(_objectSpread(_objectSpread({}, baseStyles.resizeHandle), baseStyles.bottomLeft), resizeHandleStyles.bottomLeft),
onMouseDown: function onMouseDown() {
setDragging(true);
setDraggingIndex(index);
setDragDirection("nesw-resize");
}
}), /*#__PURE__*/React.createElement("div", {
style: _objectSpread(_objectSpread(_objectSpread({}, baseStyles.resizeHandle), baseStyles.bottomRight), resizeHandleStyles.bottomRight),
onMouseDown: function onMouseDown() {
setDragging(true);
setDraggingIndex(index);
setDragDirection("nwse-resize");
}
}))));
});
return screenComponents;
};
var renderHiddenScreenButtons = function renderHiddenScreenButtons() {
return hiddenScreens.map(function (index) {
return /*#__PURE__*/React.createElement("button", {
key: index,
style: baseStyles.button,
onMouseEnter: function onMouseEnter(e) {
return e.target.style.backgroundColor = baseStyles.buttonHover.backgroundColor;
},
onMouseLeave: function onMouseLeave(e) {
return e.target.style.backgroundColor = baseStyles.button.backgroundColor;
},
onClick: function onClick() {
return showScreen(index);
}
}, "Show Screen ", index + 1);
});
};
return /*#__PURE__*/React.createElement("div", {
ref: containerRef,
style: {
display: "flex",
height: "100%"
}
}, hiddenScreens.length > 0 && /*#__PURE__*/React.createElement("div", {
style: baseStyles.sidePanel
}, renderHiddenScreenButtons()), /*#__PURE__*/React.createElement(HUDScrollContainer, _extends({
style: _objectSpread({}, mergeStyles(baseStyles.splitContainer, _objectSpread({
overflowY: "auto",
paddingBottom: "3.69rem"
}, bodyConfigurationSettings))),
trackColor: "transparent"
}, rest), renderScreens()));
};
var HUDLayoutManagerScreen = function HUDLayoutManagerScreen(_ref4) {
var children = _ref4.children,
_ref4$outerScreenConf = _ref4.outerScreenConfigurationSettings,
outerScreenConfigurationSettings = _ref4$outerScreenConf === void 0 ? {} : _ref4$outerScreenConf,
_ref4$innerScreenConf = _ref4.innerScreenConfigurationSettings,
innerScreenConfigurationSettings = _ref4$innerScreenConf === void 0 ? {} : _ref4$innerScreenConf,
_ref4$screenConfigura = _ref4.screenConfigurationSettings,
screenConfigurationSettings = _ref4$screenConfigura === void 0 ? {} : _ref4$screenConfigura,
hideScreen = _ref4.hideScreen,
_ref4$showHideButton = _ref4.showHideButton,
showHideButton = _ref4$showHideButton === void 0 ? false : _ref4$showHideButton,
customHideButton = _ref4.customHideButton,
_ref4$resizeHandleSty = _ref4.resizeHandleStyles,
resizeHandleStyles = _ref4$resizeHandleSty === void 0 ? {} : _ref4$resizeHandleSty;
return /*#__PURE__*/React.createElement("div", {
style: mergeStyles(innerScreenConfigurationSettings, screenConfigurationSettings)
}, showHideButton && /*#__PURE__*/React.createElement("div", {
style: {
position: "absolute",
top: 10,
right: 10
}
}, customHideButton ? ( /*#__PURE__*/React.cloneElement(customHideButton, {
onClick: hideScreen
})) : /*#__PURE__*/React.createElement("button", {
style: baseStyles.button,
onMouseEnter: function onMouseEnter(e) {
return e.target.style.backgroundColor = baseStyles.buttonHover.backgroundColor;
},
onMouseLeave: function onMouseLeave(e) {
return e.target.style.backgroundColor = baseStyles.button.backgroundColor;
},
onClick: hideScreen
}, "Hide")), children);
};
export { HUDLayoutManagerContainer, HUDLayoutManagerHeader, HUDLayoutManagerBody, HUDLayoutManagerScreen };