@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
483 lines • 19.5 kB
JavaScript
import _toArray from "@babel/runtime/helpers/toArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["style", "children"];
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";
export function HUDLayout(_ref) {
var style = _ref.style,
children = _ref.children,
rest = _objectWithoutProperties(_ref, _excluded);
return /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
position: "relative",
display: "flex",
flexDirection: "column",
overflow: "hidden",
borderRadius: "10px",
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.5)",
background: "#1f1f1f",
width: "calc(100%)"
}, style)
}, rest), children);
}
;
export function HUDLayoutTopSection(_ref2) {
var children = _ref2.children,
style = _ref2.style;
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
padding: "20px",
backgroundColor: "#292929",
borderBottom: "1px solid #444",
display: "flex",
alignItems: "center",
justifyContent: "space-between"
}, style)
}, children);
}
;
export function HUDLayoutSideSection(_ref3) {
var children = _ref3.children,
ToggleButton = _ref3.toggleButton,
style = _ref3.style,
_ref3$showToggleButto = _ref3.showToggleButton,
showToggleButton = _ref3$showToggleButto === void 0 ? true : _ref3$showToggleButto;
var _useState = useState(true),
_useState2 = _slicedToArray(_useState, 2),
open = _useState2[0],
setOpen = _useState2[1];
var DefaultToggleButton = function DefaultToggleButton() {
return /*#__PURE__*/React.createElement("button", {
onClick: function onClick() {
return setOpen(!open);
},
style: {
cursor: "pointer",
borderRadius: "5px",
backgroundColor: "#f1c40f",
border: "none",
color: "#1f1f1f",
padding: "10px",
marginBottom: "10px"
}
}, open ? "Collapse" : "Expand");
};
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: open ? "flex" : "none",
flexDirection: "column",
overflow: "hidden",
transition: "width 0.3s ease, padding 0.3s ease",
borderRight: "1px solid #444",
backgroundColor: "#212121",
width: open ? "25%" : "0",
padding: open ? "20px" : "0"
}, style)
}, ToggleButton ? /*#__PURE__*/React.createElement(ToggleButton, {
isOpen: open,
toggle: function toggle() {
return setOpen(!open);
}
}) : showToggleButton ? /*#__PURE__*/React.createElement(DefaultToggleButton, null) : null, children);
}
;
export function HUDLayoutContentSection(_ref4) {
var children = _ref4.children,
style = _ref4.style;
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
flex: 1,
padding: "20px",
backgroundColor: "#1f1f1f",
transition: "padding 0.3s ease"
}, style)
}, children);
}
;
export function HUDLayoutMainSection(_ref5) {
var _ref5$sidePanelConfig = _ref5.sidePanelConfigurations,
sidePanelConfigurations = _ref5$sidePanelConfig === void 0 ? {} : _ref5$sidePanelConfig,
_ref5$contentConfigur = _ref5.contentConfigurations,
contentConfigurations = _ref5$contentConfigur === void 0 ? {} : _ref5$contentConfigur,
_ref5$showSidePanelSe = _ref5.showSidePanelSection,
showSidePanelSection = _ref5$showSidePanelSe === void 0 ? true : _ref5$showSidePanelSe,
sidePanel = _ref5.sidePanel,
contentPanel = _ref5.contentPanel,
ToggleButton = _ref5.toggleButton,
style = _ref5.style;
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
flex: 1
}, style)
}, showSidePanelSection ? /*#__PURE__*/React.createElement(HUDLayoutSideSection, _extends({
toggleButton: ToggleButton
}, sidePanelConfigurations), sidePanel) : null, /*#__PURE__*/React.createElement(HUDLayoutContentSection, contentConfigurations, contentPanel));
}
;
export function HUDLayoutSplitSection(_ref6) {
var leftPanel = _ref6.leftPanel,
rightPanel = _ref6.rightPanel,
leftStyle = _ref6.leftStyle,
rightStyle = _ref6.rightStyle,
style = _ref6.style;
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
flex: 1
}, style)
}, /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
flex: 1,
padding: "20px",
transition: "flex 0.3s ease, padding 0.3s ease"
}, leftStyle)
}, leftPanel), /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
flex: 1,
padding: "20px",
transition: "flex 0.3s ease, padding 0.3s ease"
}, rightStyle)
}, rightPanel));
}
;
export function HUDLayoutStackedSection(_ref7) {
var panels = _ref7.panels,
style = _ref7.style;
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
flexDirection: "column",
flex: 1
}, style)
}, panels.map(function (panel, index) {
return /*#__PURE__*/React.createElement("div", {
key: index,
style: {
flex: 1,
padding: "20px",
transition: "padding 0.3s ease"
}
}, panel);
}));
}
;
export function HUDLayoutGridSection(_ref8) {
var children = _ref8.children,
_ref8$columns = _ref8.columns,
columns = _ref8$columns === void 0 ? 2 : _ref8$columns,
_ref8$gap = _ref8.gap,
gap = _ref8$gap === void 0 ? "20px" : _ref8$gap,
style = _ref8.style;
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "grid",
gridTemplateColumns: "repeat(auto-fit, minmax(".concat(100 / columns, "%, 1fr))"),
gap: gap,
padding: "20px"
}, style)
}, children);
}
;
export function HUDLayoutHeroSection(_ref9) {
var leftContent = _ref9.leftContent,
rightContent = _ref9.rightContent,
style = _ref9.style;
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "40px",
backgroundColor: "#292929"
}, style)
}, /*#__PURE__*/React.createElement("div", {
style: {
flex: 1,
padding: "20px",
color: "#fff"
}
}, leftContent), /*#__PURE__*/React.createElement("div", {
style: {
flex: 1,
padding: "20px",
textAlign: "center"
}
}, rightContent));
}
;
export function HUDLayoutCenteredSection(_ref10) {
var children = _ref10.children,
style = _ref10.style;
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
width: "100%",
backgroundColor: "#212121"
}, style)
}, children);
}
;
export function HUDLayoutTabbedSection(_ref11) {
var _ref11$tabbedSectionA = _ref11.tabbedSectionActionBarContainerConfigurationSettings,
tabbedSectionActionBarContainerConfigurationSettings = _ref11$tabbedSectionA === void 0 ? {} : _ref11$tabbedSectionA,
_ref11$tabbedSectionC = _ref11.tabbedSectionContainerConfigurationSettings,
tabbedSectionContainerConfigurationSettings = _ref11$tabbedSectionC === void 0 ? {} : _ref11$tabbedSectionC,
_ref11$tabActionBarCo = _ref11.tabActionBarContainerConfigurationSettings,
tabActionBarContainerConfigurationSettings = _ref11$tabActionBarCo === void 0 ? {} : _ref11$tabActionBarCo,
_ref11$tabsContentCon = _ref11.tabsContentContainerConfigurationSettings,
tabsContentContainerConfigurationSettings = _ref11$tabsContentCon === void 0 ? {} : _ref11$tabsContentCon,
_ref11$tabContentCont = _ref11.tabContentContainerConfigurationSettings,
tabContentContainerConfigurationSettings = _ref11$tabContentCont === void 0 ? {} : _ref11$tabContentCont,
_ref11$tabButtonConta = _ref11.tabButtonContainerConfigurationSettings,
tabButtonContainerConfigurationSettings = _ref11$tabButtonConta === void 0 ? {} : _ref11$tabButtonConta,
_ref11$tabButtonLabel = _ref11.tabButtonLabelConfigurationSettings,
tabButtonLabelConfigurationSettings = _ref11$tabButtonLabel === void 0 ? {} : _ref11$tabButtonLabel,
_ref11$activeTabConfi = _ref11.activeTabConfigurationSettings,
activeTabConfigurationSettings = _ref11$activeTabConfi === void 0 ? {} : _ref11$activeTabConfi,
_ref11$headerConfigur = _ref11.headerConfigurationSettings,
headerConfigurationSettings = _ref11$headerConfigur === void 0 ? {} : _ref11$headerConfigur,
_ref11$tabConfigurati = _ref11.tabConfigurationSettings,
tabConfigurationSettings = _ref11$tabConfigurati === void 0 ? {} : _ref11$tabConfigurati,
_ref11$skipIntermedia = _ref11.skipIntermediateContent,
skipIntermediateContent = _ref11$skipIntermedia === void 0 ? true : _ref11$skipIntermedia,
_ref11$enableTransiti = _ref11.enableTransitions,
enableTransitions = _ref11$enableTransiti === void 0 ? true : _ref11$enableTransiti,
_ref11$tabPanSelectio = _ref11.tabPanSelection,
tabPanSelection = _ref11$tabPanSelectio === void 0 ? false : _ref11$tabPanSelectio,
_ref11$tabbedLoad = _ref11.tabbedLoad,
tabbedLoad = _ref11$tabbedLoad === void 0 ? true : _ref11$tabbedLoad,
_ref11$transitionDura = _ref11.transitionDuration,
transitionDuration = _ref11$transitionDura === void 0 ? "0.3s" : _ref11$transitionDura,
_ref11$actionBarConte = _ref11.actionBarContent,
actionBarContent = _ref11$actionBarConte === void 0 ? null : _ref11$actionBarConte,
_ref11$transitionDela = _ref11.transitionDelay,
transitionDelay = _ref11$transitionDela === void 0 ? "0s" : _ref11$transitionDela,
_ref11$tabTransitions = _ref11.tabTransitions,
tabTransitions = _ref11$tabTransitions === void 0 ? {} : _ref11$tabTransitions,
_ref11$selectedTab = _ref11.selectedTab,
selectedTab = _ref11$selectedTab === void 0 ? 0 : _ref11$selectedTab,
tabs = _ref11.tabs;
var _useState3 = useState(selectedTab),
_useState4 = _slicedToArray(_useState3, 2),
activeTabAnimation = _useState4[0],
setActiveTabAnimation = _useState4[1];
var _useState5 = useState(selectedTab),
_useState6 = _slicedToArray(_useState5, 2),
activeTab = _useState6[0],
setActiveTab = _useState6[1];
var _useState7 = useState(null),
_useState8 = _slicedToArray(_useState7, 2),
prevTab = _useState8[0],
setPrevTab = _useState8[1];
var _useState9 = useState([]),
_useState10 = _slicedToArray(_useState9, 2),
transitionQueue = _useState10[0],
setTransitionQueue = _useState10[1];
var _useState11 = useState(false),
_useState12 = _slicedToArray(_useState11, 2),
transitioningContent = _useState12[0],
setTransitioningContent = _useState12[1];
var _useState13 = useState(selectedTab),
_useState14 = _slicedToArray(_useState13, 2),
renderedTab = _useState14[0],
setRenderedTab = _useState14[1];
var animatingTabPanningSelection = useRef(false);
var selectedTabRef = useRef(selectedTab);
var handleTabChange = useCallback(function (targetTab) {
selectedTabRef.current = targetTab;
if (tabPanSelection && targetTab !== activeTab) {
var direction = targetTab > activeTab ? 1 : -1;
var intermediateTabs = [];
for (var i = activeTab + direction; i !== targetTab + direction; i += direction) {
intermediateTabs.push(i);
}
setTransitionQueue(intermediateTabs.concat(targetTab));
return;
}
startTransition(targetTab);
}, [tabPanSelection, activeTab]);
var startTransition = useCallback(function (targetTab) {
if (animatingTabPanningSelection.current) {
return;
}
animatingTabPanningSelection.current = true;
if (!skipIntermediateContent) {
setRenderedTab(targetTab);
}
setTransitioningContent(true);
setRenderedTab(selectedTabRef.current);
setActiveTab(selectedTabRef.current);
setActiveTabAnimation(targetTab);
setPrevTab(activeTab);
setTimeout(function () {
animatingTabPanningSelection.current = false;
setTransitioningContent(false);
}, parseFloat(transitionDuration) * 1000);
}, [selectedTabRef.current]);
var computeTransitionStyle = function computeTransitionStyle(active, tab) {
var exiting = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var duration = tab.transitionDuration || transitionDuration;
var delay = tab.transitionDelay || transitionDelay;
var direction = tab.transitionDirection || "left";
var type = tab.transitionType || "slide";
var axis = direction === "left" || direction === "right" ? "X" : "Y";
var offset = direction === "left" || direction === "up" ? "-100%" : direction === "right" || direction === "down" ? "100%" : "0%";
switch (type) {
case "fade":
return {
opacity: active ? 1 : 0,
transform: "translate(0, 0)",
transition: enableTransitions ? "opacity ".concat(duration, " ").concat(delay) : undefined
};
case "scale":
return {
opacity: active ? 1 : 0,
transform: active ? "scale(1)" : "scale(0.9)",
transition: enableTransitions ? "opacity ".concat(duration, " ").concat(delay, ", transform ").concat(duration, " ").concat(delay) : undefined
};
case "slide":
default:
return {
opacity: active ? 1 : 0,
transform: active ? "translate(0, 0)" : axis === "X" ? "translateX(".concat(offset, ")") : "translateY(".concat(offset, ")"),
transition: enableTransitions ? "opacity ".concat(duration, " ").concat(delay, ", transform ").concat(duration, " ").concat(delay) : undefined
};
}
};
useEffect(function () {
if (tabPanSelection && transitionQueue.length > 0 && !animatingTabPanningSelection.current) {
var _transitionQueue = _toArray(transitionQueue),
nextTab = _transitionQueue[0],
remainingQueue = _transitionQueue.slice(1);
setTransitionQueue(remainingQueue);
startTransition(nextTab);
}
}, [transitionQueue, animatingTabPanningSelection.current, tabPanSelection]);
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({}, tabbedSectionContainerConfigurationSettings)
}, /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
alignItems: "center",
justifyContent: "space-between",
backgroundColor: "#292929",
borderBottom: "1px solid #444"
}, headerConfigurationSettings)
}, /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
flexGrow: 1
}, tabButtonContainerConfigurationSettings)
}, tabs.map(function (tab, index) {
return /*#__PURE__*/React.createElement("div", {
key: index,
style: _objectSpread({
flex: 1,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "10px",
backgroundColor: activeTabAnimation === index ? "#1f1f1f" : "#292929",
color: "#f1c40f",
cursor: "pointer",
transition: enableTransitions ? "background-color ".concat(transitionDuration) : undefined
}, activeTabAnimation === index ? activeTabConfigurationSettings : tabConfigurationSettings),
onClick: function onClick() {
return handleTabChange(index);
}
}, /*#__PURE__*/React.createElement("span", {
style: _objectSpread({
flexGrow: 1
}, tabButtonLabelConfigurationSettings)
}, typeof tab.label === "function" ? tab.label() : tab.label), tab.tabbedActionBarContent && /*#__PURE__*/React.createElement("span", {
style: _objectSpread({
marginLeft: "10px"
}, tabActionBarContainerConfigurationSettings)
}, tab.tabbedActionBarContent));
})), actionBarContent && /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
alignItems: "center",
gap: "10px"
}, tabbedSectionActionBarContainerConfigurationSettings)
}, actionBarContent)), /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative",
overflow: "hidden",
padding: "20px",
backgroundColor: "#1f1f1f"
}, tabsContentContainerConfigurationSettings)
}, tabs.map(function (tab, index) {
var active = activeTab === index;
var exiting = prevTab === index;
if (tabPanSelection) {
var shouldRenderContent = index === renderedTab;
return /*#__PURE__*/React.createElement("div", {
key: index,
style: _objectSpread(_objectSpread({
position: "absolute",
top: 0,
left: 0,
width: "100%",
visibility: active || exiting ? "visible" : "hidden"
}, computeTransitionStyle(active, tab, exiting)), tabContentContainerConfigurationSettings)
}, shouldRenderContent && active && transitioningContent ? tab.openingComponent : shouldRenderContent && exiting && transitioningContent ? tab.exitingComponent : tab.content);
}
return /*#__PURE__*/React.createElement("div", {
key: index,
style: _objectSpread(_objectSpread({
position: "absolute",
top: 0,
left: 0,
width: "100%",
visibility: active || exiting ? "visible" : "hidden"
}, computeTransitionStyle(active, tab, exiting)), tabContentContainerConfigurationSettings)
}, active && transitioningContent ? tab.openingComponent : exiting && transitioningContent ? tab.exitingComponent : tab.content);
})));
}
;
export function HUDLayoutFooter(_ref12) {
var children = _ref12.children,
style = _ref12.style;
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
padding: "20px",
backgroundColor: "#292929",
borderTop: "1px solid #444",
textAlign: "center"
}, style)
}, children);
}
;
export function HUDLayoutResponsiveSections(_ref13) {
var panels = _ref13.panels,
style = _ref13.style;
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
flexWrap: "wrap",
justifyContent: "space-between",
gap: "20px"
}, style)
}, panels.map(function (panel, index) {
return /*#__PURE__*/React.createElement("div", {
key: index,
style: {
flex: "1 1 calc(50% - 20px)",
minWidth: "300px",
padding: "20px",
backgroundColor: "#1f1f1f",
borderRadius: "10px"
}
}, panel);
}));
}
;