@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
367 lines • 21.1 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
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 from "react";
import { useState, useRef, useMemo, useLayoutEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import HUDIcon from "./HUDIcon.js";
function HUDTabContainer(_ref) {
var _tabs$, _orderedTabs$find;
var _ref$tabsContentConta = _ref.tabsContentContainerHorizontalInitialAnimationConfigurationSettings,
tabsContentContainerHorizontalInitialAnimationConfigurationSettings = _ref$tabsContentConta === void 0 ? {} : _ref$tabsContentConta,
_ref$tabsContentConta2 = _ref.tabsContentContainerHorizontalExitAnimationConfigurationSettings,
tabsContentContainerHorizontalExitAnimationConfigurationSettings = _ref$tabsContentConta2 === void 0 ? {} : _ref$tabsContentConta2,
_ref$tabsContentConta3 = _ref.tabsContentContainerAnimationTransitionConfigurationSettings,
tabsContentContainerAnimationTransitionConfigurationSettings = _ref$tabsContentConta3 === void 0 ? {} : _ref$tabsContentConta3,
_ref$tabsContentConta4 = _ref.tabsContentContainerHorizontalAnimationConfigurationSettings,
tabsContentContainerHorizontalAnimationConfigurationSettings = _ref$tabsContentConta4 === void 0 ? {} : _ref$tabsContentConta4,
_ref$tabsContentConta5 = _ref.tabsContentContainerInitialAnimationConfigurationSettings,
tabsContentContainerInitialAnimationConfigurationSettings = _ref$tabsContentConta5 === void 0 ? {} : _ref$tabsContentConta5,
_ref$tabsContentConta6 = _ref.tabsContentContainerExitAnimationConfigurationSettings,
tabsContentContainerExitAnimationConfigurationSettings = _ref$tabsContentConta6 === void 0 ? {} : _ref$tabsContentConta6,
_ref$tabsContentConta7 = _ref.tabsContentContainerAnimationConfigurationSettings,
tabsContentContainerAnimationConfigurationSettings = _ref$tabsContentConta7 === void 0 ? {} : _ref$tabsContentConta7,
_ref$tabsBarContentCo = _ref.tabsBarContentContainerConfigurationSettings,
tabsBarContentContainerConfigurationSettings = _ref$tabsBarContentCo === void 0 ? {} : _ref$tabsBarContentCo,
_ref$tabsContentConta8 = _ref.tabsContentContainerConfigurationSettings,
tabsContentContainerConfigurationSettings = _ref$tabsContentConta8 === void 0 ? {} : _ref$tabsContentConta8,
_ref$tabCloseButtonIc = _ref.tabCloseButtonIconConfigurationSettings,
tabCloseButtonIconConfigurationSettings = _ref$tabCloseButtonIc === void 0 ? {} : _ref$tabCloseButtonIc,
_ref$tabCloseButtonCo = _ref.tabCloseButtonConfigurationSettings,
tabCloseButtonConfigurationSettings = _ref$tabCloseButtonCo === void 0 ? {} : _ref$tabCloseButtonCo,
_ref$collapseButtonCo = _ref.collapseButtonConfigurationSettings,
collapseButtonConfigurationSettings = _ref$collapseButtonCo === void 0 ? {} : _ref$collapseButtonCo,
_ref$tabsContainerCon = _ref.tabsContainerConfigurationSettings,
tabsContainerConfigurationSettings = _ref$tabsContainerCon === void 0 ? {} : _ref$tabsContainerCon,
_ref$activeTabStyle = _ref.activeTabStyle,
activeTabStyle = _ref$activeTabStyle === void 0 ? {
background: "rgba(16, 21, 33, 0.69)",
color: "#ffffff",
fontWeight: "bold",
borderBottom: "2px solid #00bfff",
boxShadow: "inset 0 -2px 0 0 #00bfff"
} : _ref$activeTabStyle,
_ref$containerStyle = _ref.containerStyle,
containerStyle = _ref$containerStyle === void 0 ? {
background: "rgba(11, 15, 26, 0.269)",
color: "#cfd8dc",
border: "1px solid #1a1f2b",
boxShadow: "0 0 15px rgba(0, 153, 255, 0.2)",
fontFamily: "'Rajdhani', sans-serif"
} : _ref$containerStyle,
_ref$tabStyle = _ref.tabStyle,
tabStyle = _ref$tabStyle === void 0 ? {
transition: "color 200ms, background 200ms",
fontWeight: "500",
fontSize: "14px",
color: "#7f8fa6",
padding: "12px 18px"
} : _ref$tabStyle,
_ref$tabsBarContentCo2 = _ref.tabsBarContentContainerConfigurations,
tabsBarContentContainerConfigurations = _ref$tabsBarContentCo2 === void 0 ? {} : _ref$tabsBarContentCo2,
_ref$tabsContentConta9 = _ref.tabsContentContainerConfigurations,
tabsContentContainerConfigurations = _ref$tabsContentConta9 === void 0 ? {} : _ref$tabsContentConta9,
_ref$tabCloseButtonIc2 = _ref.tabCloseButtonIconConfigurations,
tabCloseButtonIconConfigurations = _ref$tabCloseButtonIc2 === void 0 ? {} : _ref$tabCloseButtonIc2,
_ref$tabsBarContainer = _ref.tabsBarContainerConfigurations,
tabsBarContainerConfigurations = _ref$tabsBarContainer === void 0 ? {} : _ref$tabsBarContainer,
_ref$tabCloseButtonCo2 = _ref.tabCloseButtonConfigurations,
tabCloseButtonConfigurations = _ref$tabCloseButtonCo2 === void 0 ? {} : _ref$tabCloseButtonCo2,
_ref$collapseButtonCo2 = _ref.collapseButtonConfigurations,
collapseButtonConfigurations = _ref$collapseButtonCo2 === void 0 ? {} : _ref$collapseButtonCo2,
_ref$tabsContainerCon2 = _ref.tabsContainerConfigurations,
tabsContainerConfigurations = _ref$tabsContainerCon2 === void 0 ? {} : _ref$tabsContainerCon2,
_ref$tabConfiguration = _ref.tabConfigurations,
tabConfigurations = _ref$tabConfiguration === void 0 ? {} : _ref$tabConfiguration,
_ref$onContainerColla = _ref.onContainerCollapse,
onContainerCollapse = _ref$onContainerColla === void 0 ? null : _ref$onContainerColla,
_ref$onTabsReorder = _ref.onTabsReorder,
onTabsReorder = _ref$onTabsReorder === void 0 ? null : _ref$onTabsReorder,
_ref$onTabChange = _ref.onTabChange,
onTabChange = _ref$onTabChange === void 0 ? null : _ref$onTabChange,
_ref$onTabClose = _ref.onTabClose,
onTabClose = _ref$onTabClose === void 0 ? null : _ref$onTabClose,
_ref$animationDuratio = _ref.animationDuration,
animationDuration = _ref$animationDuratio === void 0 ? 300 : _ref$animationDuratio,
_ref$iconOnlyMode = _ref.iconOnlyMode,
iconOnlyMode = _ref$iconOnlyMode === void 0 ? false : _ref$iconOnlyMode,
_ref$expandTabbedCont = _ref.expandTabbedContainerOnTabClick,
expandTabbedContainerOnTabClick = _ref$expandTabbedCont === void 0 ? true : _ref$expandTabbedCont,
_ref$initiallyCollaps = _ref.initiallyCollapsed,
initiallyCollapsed = _ref$initiallyCollaps === void 0 ? false : _ref$initiallyCollaps,
_ref$showCloseButtons = _ref.showCloseButtons,
showCloseButtons = _ref$showCloseButtons === void 0 ? false : _ref$showCloseButtons,
activeTabID = _ref.activeTabID,
_ref$tabs = _ref.tabs,
tabs = _ref$tabs === void 0 ? [] : _ref$tabs,
_ref$tabBarPosition = _ref.tabBarPosition,
tabBarPosition = _ref$tabBarPosition === void 0 ? "top" : _ref$tabBarPosition,
_ref$draggableTabs = _ref.draggableTabs,
draggableTabs = _ref$draggableTabs === void 0 ? true : _ref$draggableTabs;
var _useState = useState(activeTabID || ((_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.id) || null),
_useState2 = _slicedToArray(_useState, 2),
currentTab = _useState2[0],
setCurrentTab = _useState2[1];
var _useState3 = useState(tabBarPosition),
_useState4 = _slicedToArray(_useState3, 2),
computedPosition = _useState4[0],
setComputedPosition = _useState4[1];
var _useState5 = useState(initiallyCollapsed),
_useState6 = _slicedToArray(_useState5, 2),
collapsed = _useState6[0],
setCollapsed = _useState6[1];
var _useState7 = useState(function () {
return tabs.map(function (t) {
return t.id;
});
}),
_useState8 = _slicedToArray(_useState7, 2),
order = _useState8[0],
setOrder = _useState8[1];
var collapsedRef = useRef(initiallyCollapsed);
var dragFromIdRef = useRef(null);
var rootRef = useRef(null);
var side = computedPosition;
var horizontal = side === "top" || side === "bottom";
var barFirst = side === "top" || side === "left";
var orderedTabs = useMemo(function () {
var map = new Map(tabs.map(function (t) {
return [t.id, t];
}));
var seen = new Set();
var byState = order.map(function (id) {
return map.get(id);
}).filter(Boolean);
byState.forEach(function (t) {
return seen.add(t.id);
});
var rest = tabs.filter(function (t) {
return !seen.has(t.id);
});
return [].concat(_toConsumableArray(byState), _toConsumableArray(rest));
}, [tabs, order]);
var handleTabClick = function handleTabClick(id) {
setCurrentTab(id);
if (collapsedRef.current && expandTabbedContainerOnTabClick) {
toggleCollapse();
}
onTabChange === null || onTabChange === void 0 || onTabChange(id);
};
var handleCloseClick = function handleCloseClick(e, id) {
e.stopPropagation();
onTabClose === null || onTabClose === void 0 || onTabClose(id);
if (id === currentTab) {
var next = orderedTabs.find(function (t) {
return t.id !== id;
});
if (next) {
handleTabClick(next.id);
}
}
};
var toggleCollapse = function toggleCollapse() {
setCollapsed(function (pCollapsed) {
var currentCollapsed = !pCollapsed;
onContainerCollapse === null || onContainerCollapse === void 0 || onContainerCollapse(currentCollapsed);
collapsedRef.current = currentCollapsed;
return currentCollapsed;
});
};
var startDrag = function startDrag(e, id) {
if (!draggableTabs) {
return;
}
dragFromIdRef.current = id;
try {
e.dataTransfer.setData("text/plain", String(id));
} catch (_unused) {}
e.dataTransfer.effectAllowed = "move";
};
var onDragOverTab = function onDragOverTab(e) {
if (!draggableTabs) {
return;
}
e.preventDefault();
e.dataTransfer.dropEffect = "move";
};
var dropOnTab = function dropOnTab(e, targetID) {
if (!draggableTabs) {
return;
}
e.preventDefault();
var fromID = dragFromIdRef.current;
dragFromIdRef.current = null;
if (!fromID || fromID === targetID) {
return;
}
setOrder(function (prev) {
var next = prev.filter(function (id) {
return id !== fromID;
});
var idx = next.indexOf(targetID);
if (idx === -1) {
next.push(fromID);
} else {
var rect = e.currentTarget.getBoundingClientRect();
var before = horizontal ? e.clientX < rect.left + rect.width / 2 : e.clientY < rect.top + rect.height / 2;
var insertAt = before ? idx : idx + 1;
next.splice(insertAt, 0, fromID);
}
onTabsReorder === null || onTabsReorder === void 0 || onTabsReorder(next);
return next;
});
};
var TabsBar = /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: "flex",
flexDirection: horizontal ? "row" : "column",
alignItems: "stretch",
justifyContent: "space-between",
borderBottom: horizontal ? "1px solid #1e2633" : "none",
borderRight: !horizontal ? "1px solid #1e2633" : "none",
background: "#101521"
}, tabsContainerConfigurationSettings !== null && tabsContainerConfigurationSettings !== void 0 ? tabsContainerConfigurationSettings : {})
}, tabsBarContainerConfigurations !== null && tabsBarContainerConfigurations !== void 0 ? tabsBarContainerConfigurations : {}), /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: "flex",
flexDirection: horizontal ? "row" : "column",
background: "transparent"
}, tabsBarContentContainerConfigurationSettings !== null && tabsBarContentContainerConfigurationSettings !== void 0 ? tabsBarContentContainerConfigurationSettings : {})
}, tabsBarContentContainerConfigurations !== null && tabsBarContentContainerConfigurations !== void 0 ? tabsBarContentContainerConfigurations : {}), orderedTabs.map(function (tab) {
var closable = tab.closable !== false && showCloseButtons;
var activeTab = tab.id === currentTab;
return /*#__PURE__*/React.createElement("div", _extends({
key: tab.id,
draggable: draggableTabs,
style: _objectSpread(_objectSpread({
position: "relative",
display: "flex",
flexDirection: iconOnlyMode ? "column" : "row",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
transition: "all ".concat(animationDuration, "ms"),
minWidth: iconOnlyMode ? "48px" : undefined,
gap: iconOnlyMode ? "0px" : "6px",
padding: iconOnlyMode ? "10px" : tabStyle.padding
}, tabStyle || {}), activeTab ? activeTabStyle : {}),
onMouseLeave: function onMouseLeave(e) {
return e.currentTarget.style.color = activeTab ? "#ffffff" : tabStyle.color;
},
onMouseEnter: function onMouseEnter(e) {
return e.currentTarget.style.color = "#ffffff";
},
onDragStart: function onDragStart(e) {
return startDrag(e, tab.id);
},
onDrop: function onDrop(e) {
return dropOnTab(e, tab.id);
},
onDragOver: onDragOverTab,
onClick: function onClick() {
return handleTabClick(tab.id);
}
}, typeof tabConfigurations === "function" ? tabConfigurations === null || tabConfigurations === void 0 ? void 0 : tabConfigurations(tab) : tabConfigurations !== null && tabConfigurations !== void 0 ? tabConfigurations : {}), tab.titleLeft && /*#__PURE__*/React.createElement("div", null, tab.titleLeft), !iconOnlyMode && /*#__PURE__*/React.createElement("div", null, tab.title), tab.titleRight && /*#__PURE__*/React.createElement("div", null, tab.titleRight), closable && /*#__PURE__*/React.createElement("span", _extends({
style: _objectSpread({
cursor: "pointer",
fontSize: "12px",
color: "#999",
marginLeft: horizontal ? "8px" : "0px",
marginTop: horizontal ? "0px" : "6px"
}, typeof tabCloseButtonConfigurationSettings === "function" ? tabCloseButtonConfigurationSettings === null || tabCloseButtonConfigurationSettings === void 0 ? void 0 : tabCloseButtonConfigurationSettings(tab) : tabCloseButtonConfigurationSettings !== null && tabCloseButtonConfigurationSettings !== void 0 ? tabCloseButtonConfigurationSettings : {}),
onClick: function onClick(e) {
return handleCloseClick(e, tab.id);
}
}, typeof tabCloseButtonConfigurations === "function" ? tabCloseButtonConfigurations === null || tabCloseButtonConfigurations === void 0 ? void 0 : tabCloseButtonConfigurations(tab) : tabCloseButtonConfigurations !== null && tabCloseButtonConfigurations !== void 0 ? tabCloseButtonConfigurations : {}), /*#__PURE__*/React.createElement(HUDIcon, _extends({
iconConfigurationSettings: _objectSpread({
background: "transparent",
border: "none"
}, typeof tabCloseButtonIconConfigurationSettings === "function" ? tabCloseButtonIconConfigurationSettings === null || tabCloseButtonIconConfigurationSettings === void 0 ? void 0 : tabCloseButtonIconConfigurationSettings(tab) : tabCloseButtonIconConfigurationSettings !== null && tabCloseButtonIconConfigurationSettings !== void 0 ? tabCloseButtonIconConfigurationSettings : {}),
name: "times"
}, typeof tabCloseButtonIconConfigurations === "function" ? tabCloseButtonIconConfigurations === null || tabCloseButtonIconConfigurations === void 0 ? void 0 : tabCloseButtonIconConfigurations(tab) : tabCloseButtonIconConfigurations !== null && tabCloseButtonIconConfigurations !== void 0 ? tabCloseButtonIconConfigurations : {}))));
})), /*#__PURE__*/React.createElement(HUDIcon, _extends({
iconConfigurationSettings: _objectSpread({
background: "transparent",
cursor: "pointer",
fontSize: "16px",
border: "none",
color: "#7f8fa6",
padding: "8px"
}, collapseButtonConfigurationSettings !== null && collapseButtonConfigurationSettings !== void 0 ? collapseButtonConfigurationSettings : {}),
onClick: toggleCollapse,
name: side === "bottom" ? collapsed ? "chevron-up" : "chevron-down" : side === "left" ? collapsed ? "chevron-right" : "chevron-left" : side === "top" ? collapsed ? "chevron-up" : "chevron-right" : collapsed ? "chevron-left" : "chevron-right"
}, collapseButtonConfigurations !== null && collapseButtonConfigurations !== void 0 ? collapseButtonConfigurations : {})));
useLayoutEffect(function () {
if (tabBarPosition !== "auto") {
setComputedPosition(tabBarPosition);
return;
}
var el = rootRef.current;
if (!el) {
return;
}
var ro = new ResizeObserver(function (entries) {
var _entries$0$contentRec = entries[0].contentRect,
width = _entries$0$contentRec.width,
height = _entries$0$contentRec.height;
setComputedPosition(width >= height ? "top" : "left");
});
ro.observe(el);
return function () {
return ro.disconnect();
};
}, [tabBarPosition]);
return /*#__PURE__*/React.createElement("div", _extends({
ref: rootRef,
style: _objectSpread({
position: "relative",
display: "flex",
flexDirection: horizontal ? "column" : "row",
overflow: "hidden",
borderRadius: "12px",
height: "100%"
}, containerStyle !== null && containerStyle !== void 0 ? containerStyle : {})
}, tabsContainerConfigurations !== null && tabsContainerConfigurations !== void 0 ? tabsContainerConfigurations : {}), barFirst && TabsBar, /*#__PURE__*/React.createElement(AnimatePresence, {
initial: false
}, !collapsed && /*#__PURE__*/React.createElement(motion.div, _extends({
key: "tab-content",
initial: horizontal ? _objectSpread({
height: 0,
opacity: 0
}, tabsContentContainerHorizontalInitialAnimationConfigurationSettings !== null && tabsContentContainerHorizontalInitialAnimationConfigurationSettings !== void 0 ? tabsContentContainerHorizontalInitialAnimationConfigurationSettings : {}) : _objectSpread({
width: 0,
opacity: 0
}, tabsContentContainerInitialAnimationConfigurationSettings !== null && tabsContentContainerInitialAnimationConfigurationSettings !== void 0 ? tabsContentContainerInitialAnimationConfigurationSettings : {}),
animate: horizontal ? _objectSpread({
height: "auto",
opacity: 1
}, tabsContentContainerHorizontalAnimationConfigurationSettings !== null && tabsContentContainerHorizontalAnimationConfigurationSettings !== void 0 ? tabsContentContainerHorizontalAnimationConfigurationSettings : {}) : _objectSpread({
width: "auto",
opacity: 1
}, tabsContentContainerAnimationConfigurationSettings !== null && tabsContentContainerAnimationConfigurationSettings !== void 0 ? tabsContentContainerAnimationConfigurationSettings : {}),
exit: horizontal ? _objectSpread({
height: 0,
opacity: 0
}, tabsContentContainerHorizontalExitAnimationConfigurationSettings !== null && tabsContentContainerHorizontalExitAnimationConfigurationSettings !== void 0 ? tabsContentContainerHorizontalExitAnimationConfigurationSettings : {}) : _objectSpread({
width: 0,
opacity: 0
}, tabsContentContainerExitAnimationConfigurationSettings !== null && tabsContentContainerExitAnimationConfigurationSettings !== void 0 ? tabsContentContainerExitAnimationConfigurationSettings : {}),
transition: _objectSpread({
duration: animationDuration / 1000,
ease: "easeInOut"
}, tabsContentContainerAnimationTransitionConfigurationSettings !== null && tabsContentContainerAnimationTransitionConfigurationSettings !== void 0 ? tabsContentContainerAnimationTransitionConfigurationSettings : {}),
style: _objectSpread({
flexGrow: 1,
msOverflowStyle: "none",
scrollbarWidth: "none",
overflow: "auto",
padding: "0px"
}, tabsContentContainerConfigurationSettings !== null && tabsContentContainerConfigurationSettings !== void 0 ? tabsContentContainerConfigurationSettings : {})
}, tabsContentContainerConfigurations !== null && tabsContentContainerConfigurations !== void 0 ? tabsContentContainerConfigurations : {}), ((_orderedTabs$find = orderedTabs.find(function (tab) {
return tab.id === currentTab;
})) === null || _orderedTabs$find === void 0 ? void 0 : _orderedTabs$find.content) || null)), !barFirst && TabsBar);
}
export default HUDTabContainer;