@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
187 lines • 8.59 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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 } from "react";
import { Fade } from "react-awesome-reveal";
import HUDIcon from "./HUDIcon.js";
function HUDTabularSidePanel(hudTabularSidePanelConfigurationSettings) {
var _hudTabularSidePanelC = hudTabularSidePanelConfigurationSettings.tabularSidePanelContainerContentConfigurationSettings,
tabularSidePanelContainerContentConfigurationSettings = _hudTabularSidePanelC === void 0 ? {} : _hudTabularSidePanelC,
_hudTabularSidePanelC2 = hudTabularSidePanelConfigurationSettings.tabularSidePanelButtonContainerConfigurationSettings,
tabularSidePanelButtonContainerConfigurationSettings = _hudTabularSidePanelC2 === void 0 ? {} : _hudTabularSidePanelC2,
_hudTabularSidePanelC3 = hudTabularSidePanelConfigurationSettings.tabularSidePanelButtonConfigurationSettings,
tabularSidePanelButtonConfigurationSettings = _hudTabularSidePanelC3 === void 0 ? {} : _hudTabularSidePanelC3,
_hudTabularSidePanelC4 = hudTabularSidePanelConfigurationSettings.tabularSidePanelHeaderConfigurationSettings,
tabularSidePanelHeaderConfigurationSettings = _hudTabularSidePanelC4 === void 0 ? {} : _hudTabularSidePanelC4,
_hudTabularSidePanelC5 = hudTabularSidePanelConfigurationSettings.tabularSidePanelConfigurationSettings,
tabularSidePanelConfigurationSettings = _hudTabularSidePanelC5 === void 0 ? {} : _hudTabularSidePanelC5,
_hudTabularSidePanelC6 = hudTabularSidePanelConfigurationSettings.tabButtonHoverColor,
tabButtonHoverColor = _hudTabularSidePanelC6 === void 0 ? "rgba(255, 255, 255, 0.069)" : _hudTabularSidePanelC6,
_hudTabularSidePanelC7 = hudTabularSidePanelConfigurationSettings.tabButtonColor,
tabButtonColor = _hudTabularSidePanelC7 === void 0 ? "#ddd" : _hudTabularSidePanelC7,
_hudTabularSidePanelC8 = hudTabularSidePanelConfigurationSettings.tabLabelHoverColor,
tabLabelHoverColor = _hudTabularSidePanelC8 === void 0 ? "rgba(177.69, 137, 255, 1)" : _hudTabularSidePanelC8,
_hudTabularSidePanelC9 = hudTabularSidePanelConfigurationSettings.tabLabelColor,
tabLabelColor = _hudTabularSidePanelC9 === void 0 ? "white" : _hudTabularSidePanelC9,
tabButtonAction = hudTabularSidePanelConfigurationSettings.tabButtonAction,
onButtonHovered = hudTabularSidePanelConfigurationSettings.onButtonHovered,
_hudTabularSidePanelC10 = hudTabularSidePanelConfigurationSettings.buttons,
buttons = _hudTabularSidePanelC10 === void 0 ? [] : _hudTabularSidePanelC10,
_hudTabularSidePanelC11 = hudTabularSidePanelConfigurationSettings.open,
open = _hudTabularSidePanelC11 === void 0 ? true : _hudTabularSidePanelC11,
children = hudTabularSidePanelConfigurationSettings.children,
header = hudTabularSidePanelConfigurationSettings.header;
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
hoverIndex = _useState2[0],
setHoverIndex = _useState2[1];
var _useState3 = useState(open),
_useState4 = _slicedToArray(_useState3, 2),
visible = _useState4[0],
setVisible = _useState4[1];
var sidePanelContainerContentStyle = _objectSpread({
position: "relative",
display: "flex",
flexDirection: "column",
padding: "10px",
marginLeft: "1rem"
}, tabularSidePanelContainerContentConfigurationSettings);
var sidePanelHeaderStyle = _objectSpread({
position: "relative",
display: "flex",
justfiyContent: "center",
height: "auto",
width: "auto",
paddingRight: "0.69rem"
}, tabularSidePanelHeaderConfigurationSettings);
var sidePanelStyle = _objectSpread({
position: "relative",
display: "flex",
flexDirection: "column",
justifyContent: "flex-start",
alignItems: "flex-start",
transition: "left 0.369s ease-in-out",
background: "#f4f4f4",
height: "100vh",
width: "37px",
marginLeft: visible ? 0 : "-50px",
marginTop: 0
}, tabularSidePanelConfigurationSettings);
var buttonContainerConfigurationSettings = _objectSpread({
overflowY: "auto",
height: "calc(100vh - 20px)",
width: "100%",
paddingRight: "0.69rem"
}, tabularSidePanelButtonContainerConfigurationSettings);
var handleButtonConfigurationSettings = function handleButtonConfigurationSettings(hovered) {
return _objectSpread({
position: "relative",
display: "flex",
justifyContent: "center",
alignItems: "center",
overflowX: "hidden",
overflowY: "auto",
transition: "all 0.369s ease",
cursor: "pointer",
textAlign: "center",
background: hovered ? tabButtonHoverColor : tabButtonColor,
borderRadius: "0rem 0.569rem 0.569rem 0rem",
border: "none",
width: hovered ? "100%" : "50px",
padding: hovered ? "12.69px 5px" : "10px 3px",
marginBottom: "5px",
marginRight: "5px",
marginLeft: "0px",
marginTop: "5px"
}, tabularSidePanelButtonConfigurationSettings);
};
var handleMouseOver = function handleMouseOver(e, expanded) {
if (!expanded) {
e.target.style.width = "100%";
e.target.children[1].style.display = "initial";
}
};
var handleMouseOut = function handleMouseOut(e, expanded) {
if (!expanded) {
e.target.style.width = "50px";
e.target.children[1].style.display = "none";
}
};
useEffect(function () {
if (buttons.length <= 0) {
setVisible(false);
}
return function () {};
}, [buttons]);
return /*#__PURE__*/React.createElement("div", {
style: {
position: "relative",
display: "flex",
flexDirection: "row",
gap: "10px"
}
}, /*#__PURE__*/React.createElement("div", {
style: {
position: "fixed",
display: "flex",
flexDirection: "column",
left: 0
}
}, header ? /*#__PURE__*/React.createElement("div", {
style: sidePanelHeaderStyle
}, header) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement("div", {
style: sidePanelStyle
}, /*#__PURE__*/React.createElement(Fade, {
direction: "left",
duration: 469
}, /*#__PURE__*/React.createElement("div", {
className: "invisa-scroller",
style: buttonContainerConfigurationSettings
}, buttons.map(function (button, index) {
return /*#__PURE__*/React.createElement("div", {
key: index,
className: "invisa-scroller",
style: handleButtonConfigurationSettings(hoverIndex === index),
onMouseLeave: function onMouseLeave() {
setHoverIndex(null);
if (onButtonHovered) {
onButtonHovered(button, null);
}
},
onMouseEnter: function onMouseEnter() {
setHoverIndex(index);
if (onButtonHovered) {
onButtonHovered(button, index);
}
},
onClick: function onClick() {
if (button.hudAction) {
button.hudAction(button, index);
}
if (tabButtonAction) {
tabButtonAction(button, index);
}
}
}, /*#__PURE__*/React.createElement(HUDIcon, {
iconConfigurationSettings: {
transition: "color 0.569s ease-in-out",
scale: "0.69"
},
color: hoverIndex === index && button.hoverColor ? button.hoverColor : hoverIndex !== index && button.color ? button.color : "white",
name: button.icon
}), /*#__PURE__*/React.createElement("span", {
style: {
display: hoverIndex === index ? "initial" : "none",
transition: "color 0.569s ease-in-out",
fontSize: "1.169rem",
color: hoverIndex === index ? tabLabelHoverColor : tabLabelColor,
marginLeft: "0.369rem"
}
}, button.label));
}))))), /*#__PURE__*/React.createElement("div", {
style: sidePanelContainerContentStyle
}, children));
}
;
export default HUDTabularSidePanel;