@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
179 lines • 8.64 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 HUDToolTip from "./HUDToolTip.js";
import HUDIcon from "./HUDIcon.js";
var actionBarContainerContentConfigurationSettings = {
position: "fixed",
display: "flex",
flexDirection: "column",
justfiyContent: "center",
width: "auto",
padding: "12.69px",
bottom: "2.69rem"
};
var actionBarHeaderConfigurationSettings = {
position: "relative",
display: "flex",
justfiyContent: "center",
height: "auto",
width: "auto",
paddingRight: "0.69rem"
};
var actionBarConfigurationSettings = {
position: "relative",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
transition: "all 0.369s ease-in-out",
boxShadow: "inset 0 0 12.69px rgba(0, 0, 0, 0.469)",
borderRadius: "5.69rem",
background: "rgba(27, 27, 27, 1)",
height: "4.269rem",
width: "auto",
paddingBottom: "0.69rem",
paddingRight: "1.269rem",
paddingLeft: "1.269rem",
paddingTop: "0.69rem"
};
var buttonContainerConfigurationSettings = {
position: "relative",
display: "flex",
justifyContent: "center",
overflowX: "auto",
height: "calc(100%)",
width: "calc(100%)",
marginBottom: "0.269rem",
marginTop: "0.269rem"
};
function HUDActionBar(hudActionBarConfigurationSettings) {
var _hudActionBarConfigur = hudActionBarConfigurationSettings.hudActionBarContainerConfigurationSettings,
hudActionBarContainerConfigurationSettings = _hudActionBarConfigur === void 0 ? {} : _hudActionBarConfigur,
_hudActionBarConfigur2 = hudActionBarConfigurationSettings.hudActionBarButtonContainerConfigurationSettings,
hudActionBarButtonContainerConfigurationSettings = _hudActionBarConfigur2 === void 0 ? {} : _hudActionBarConfigur2,
_hudActionBarConfigur3 = hudActionBarConfigurationSettings.hudActionBarButtonLabelConfigurationSettings,
hudActionBarButtonLabelConfigurationSettings = _hudActionBarConfigur3 === void 0 ? {} : _hudActionBarConfigur3,
_hudActionBarConfigur4 = hudActionBarConfigurationSettings.hudActionBarButtonConfigurationSettings,
hudActionBarButtonConfigurationSettings = _hudActionBarConfigur4 === void 0 ? {} : _hudActionBarConfigur4,
_hudActionBarConfigur5 = hudActionBarConfigurationSettings.hudActionBarHeaderConfigurationSettings,
hudActionBarHeaderConfigurationSettings = _hudActionBarConfigur5 === void 0 ? {} : _hudActionBarConfigur5,
_hudActionBarConfigur6 = hudActionBarConfigurationSettings.hudActionBarBodyConfigurationSettings,
hudActionBarBodyConfigurationSettings = _hudActionBarConfigur6 === void 0 ? {} : _hudActionBarConfigur6,
_hudActionBarConfigur7 = hudActionBarConfigurationSettings.buttonHoverColor,
buttonHoverColor = _hudActionBarConfigur7 === void 0 ? "rgba(255, 255, 255, 0.069)" : _hudActionBarConfigur7,
_hudActionBarConfigur8 = hudActionBarConfigurationSettings.buttonColor,
buttonColor = _hudActionBarConfigur8 === void 0 ? "#ddd" : _hudActionBarConfigur8,
_hudActionBarConfigur9 = hudActionBarConfigurationSettings.buttonLabelBackgroundColor,
buttonLabelBackgroundColor = _hudActionBarConfigur9 === void 0 ? "white" : _hudActionBarConfigur9,
_hudActionBarConfigur10 = hudActionBarConfigurationSettings.buttonLabelHoverColor,
buttonLabelHoverColor = _hudActionBarConfigur10 === void 0 ? "rgba(177.69, 137, 255, 1)" : _hudActionBarConfigur10,
_hudActionBarConfigur11 = hudActionBarConfigurationSettings.buttonLabelColor,
buttonLabelColor = _hudActionBarConfigur11 === void 0 ? "white" : _hudActionBarConfigur11,
buttonAction = hudActionBarConfigurationSettings.buttonAction,
onButtonHovered = hudActionBarConfigurationSettings.onButtonHovered,
_hudActionBarConfigur12 = hudActionBarConfigurationSettings.buttons,
buttons = _hudActionBarConfigur12 === void 0 ? [] : _hudActionBarConfigur12,
setActionBarVisible = hudActionBarConfigurationSettings.setActionBarVisible,
_hudActionBarConfigur13 = hudActionBarConfigurationSettings.actionBarVisible,
actionBarVisible = _hudActionBarConfigur13 === void 0 ? true : _hudActionBarConfigur13,
header = hudActionBarConfigurationSettings.header;
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
hoverIndex = _useState2[0],
setHoverIndex = _useState2[1];
var _useState3 = useState(actionBarVisible),
_useState4 = _slicedToArray(_useState3, 2),
visible = _useState4[0],
setVisible = _useState4[1];
var handleButtonConfigurationSettings = function handleButtonConfigurationSettings(hovered) {
return _objectSpread({
position: "relative",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
transition: "all 0.369s ease",
cursor: "pointer",
textAlign: "center",
background: hovered ? buttonHoverColor : buttonColor,
borderRadius: "1.269rem",
border: "none",
scale: hovered ? "1.069" : "1",
width: "auto",
padding: "15.69px",
marginRight: "5px",
marginLeft: "5px"
}, hudActionBarButtonConfigurationSettings);
};
var mergedActionBarStyles = {
barButtonContainer: _objectSpread(_objectSpread({}, buttonContainerConfigurationSettings), hudActionBarButtonContainerConfigurationSettings),
barContainer: _objectSpread(_objectSpread({}, actionBarContainerContentConfigurationSettings), hudActionBarContainerConfigurationSettings),
barHeader: _objectSpread(_objectSpread({}, actionBarHeaderConfigurationSettings), hudActionBarHeaderConfigurationSettings),
bar: _objectSpread(_objectSpread({}, actionBarConfigurationSettings), hudActionBarBodyConfigurationSettings)
};
useEffect(function () {
if (buttons.length <= 0) {
setVisible(false);
}
return function () {};
}, [buttons]);
return /*#__PURE__*/React.createElement("div", {
style: mergedActionBarStyles.barContainer
}, /*#__PURE__*/React.createElement("div", {
style: mergedActionBarStyles.bar
}, /*#__PURE__*/React.createElement(Fade, {
direction: "left",
duration: 469
}, /*#__PURE__*/React.createElement("div", {
style: mergedActionBarStyles.buttonContainer
}, buttons.map(function (button, index) {
return /*#__PURE__*/React.createElement(HUDToolTip, {
toolTipConfigurationStyle: _objectSpread({
display: hoverIndex === index ? "initial" : "none",
transition: "color 0.569s ease-in-out",
fontSize: "1.069rem",
borderRadius: "1.269rem",
background: buttonLabelBackgroundColor,
color: hoverIndex === index ? buttonLabelHoverColor : buttonLabelColor,
paddingRight: "1.269rem",
paddingLeft: "1.269rem",
marginBottom: "1.69rem"
}, hudActionBarButtonLabelConfigurationSettings),
text: button.label
}, /*#__PURE__*/React.createElement(HUDIcon, {
key: index,
iconConfigurationSettings: handleButtonConfigurationSettings(hoverIndex === index),
color: hoverIndex === index && button.hoverColor ? button.hoverColor : hoverIndex !== index && button.color ? button.color : "white",
name: button.icon,
onMouseLeave: function onMouseLeave() {
setHoverIndex(null);
if (onButtonHovered) {
onButtonHovered(button, null);
}
return;
},
onMouseEnter: function onMouseEnter() {
setHoverIndex(index);
if (onButtonHovered) {
onButtonHovered(button, index);
}
return;
},
onClick: function onClick() {
if (button.hudAction) {
button.hudAction(button, index);
}
if (buttonAction) {
buttonAction(button, index);
}
return;
}
}));
})))));
}
;
export default HUDActionBar;