@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
174 lines • 10.3 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["tableOfContentsSubSectionContainerConfigurationSettings", "tableOfContentsSectionContainerConfigurationSettings", "tableOfContentsSubSectionConfigurationSettings", "tableOfContentsContainerConfigurationSettings", "tableOfContentsSectionConfigurationSettings", "subSectionDividerCellConfigurationSettings", "subSectionCellIconConfigurationSettings", "sectionCellIconConfigurationSettings", "subSectionCellActivatedColor", "subSectionCellColor", "sectionCellActivatedColor", "sectionCellColor", "displaySubSectionCellDivider", "displayIconsOnCurrent", "subSectionCellAction", "sectionCellAction", "headings"];
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 HUDIcon from "./HUDIcon.js";
function HUDTableOfContents(hudTableOfContentsConfigurationSettings) {
var _hudTableOfContentsCo = hudTableOfContentsConfigurationSettings.tableOfContentsSubSectionContainerConfigurationSettings,
tableOfContentsSubSectionContainerConfigurationSettings = _hudTableOfContentsCo === void 0 ? {} : _hudTableOfContentsCo,
_hudTableOfContentsCo2 = hudTableOfContentsConfigurationSettings.tableOfContentsSectionContainerConfigurationSettings,
tableOfContentsSectionContainerConfigurationSettings = _hudTableOfContentsCo2 === void 0 ? {} : _hudTableOfContentsCo2,
_hudTableOfContentsCo3 = hudTableOfContentsConfigurationSettings.tableOfContentsSubSectionConfigurationSettings,
tableOfContentsSubSectionConfigurationSettings = _hudTableOfContentsCo3 === void 0 ? {} : _hudTableOfContentsCo3,
_hudTableOfContentsCo4 = hudTableOfContentsConfigurationSettings.tableOfContentsContainerConfigurationSettings,
tableOfContentsContainerConfigurationSettings = _hudTableOfContentsCo4 === void 0 ? {} : _hudTableOfContentsCo4,
_hudTableOfContentsCo5 = hudTableOfContentsConfigurationSettings.tableOfContentsSectionConfigurationSettings,
tableOfContentsSectionConfigurationSettings = _hudTableOfContentsCo5 === void 0 ? {} : _hudTableOfContentsCo5,
_hudTableOfContentsCo6 = hudTableOfContentsConfigurationSettings.subSectionDividerCellConfigurationSettings,
subSectionDividerCellConfigurationSettings = _hudTableOfContentsCo6 === void 0 ? {} : _hudTableOfContentsCo6,
_hudTableOfContentsCo7 = hudTableOfContentsConfigurationSettings.subSectionCellIconConfigurationSettings,
subSectionCellIconConfigurationSettings = _hudTableOfContentsCo7 === void 0 ? {} : _hudTableOfContentsCo7,
_hudTableOfContentsCo8 = hudTableOfContentsConfigurationSettings.sectionCellIconConfigurationSettings,
sectionCellIconConfigurationSettings = _hudTableOfContentsCo8 === void 0 ? {} : _hudTableOfContentsCo8,
_hudTableOfContentsCo9 = hudTableOfContentsConfigurationSettings.subSectionCellActivatedColor,
subSectionCellActivatedColor = _hudTableOfContentsCo9 === void 0 ? "#8245bf" : _hudTableOfContentsCo9,
_hudTableOfContentsCo10 = hudTableOfContentsConfigurationSettings.subSectionCellColor,
subSectionCellColor = _hudTableOfContentsCo10 === void 0 ? "#1a3133" : _hudTableOfContentsCo10,
_hudTableOfContentsCo11 = hudTableOfContentsConfigurationSettings.sectionCellActivatedColor,
sectionCellActivatedColor = _hudTableOfContentsCo11 === void 0 ? "#8C42D6" : _hudTableOfContentsCo11,
_hudTableOfContentsCo12 = hudTableOfContentsConfigurationSettings.sectionCellColor,
sectionCellColor = _hudTableOfContentsCo12 === void 0 ? "#1a1269" : _hudTableOfContentsCo12,
_hudTableOfContentsCo13 = hudTableOfContentsConfigurationSettings.displaySubSectionCellDivider,
displaySubSectionCellDivider = _hudTableOfContentsCo13 === void 0 ? false : _hudTableOfContentsCo13,
_hudTableOfContentsCo14 = hudTableOfContentsConfigurationSettings.displayIconsOnCurrent,
displayIconsOnCurrent = _hudTableOfContentsCo14 === void 0 ? false : _hudTableOfContentsCo14,
subSectionCellAction = hudTableOfContentsConfigurationSettings.subSectionCellAction,
sectionCellAction = hudTableOfContentsConfigurationSettings.sectionCellAction,
headings = hudTableOfContentsConfigurationSettings.headings,
rest = _objectWithoutProperties(hudTableOfContentsConfigurationSettings, _excluded);
var _useState = useState(""),
_useState2 = _slicedToArray(_useState, 2),
activeId = _useState2[0],
setActiveId = _useState2[1];
var scrollToElement = function scrollToElement(id) {
var _document$getElementB;
(_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 || _document$getElementB.scrollIntoView({
behavior: "smooth"
});
setActiveId(id);
};
var renderSections = function renderSections(sections) {
var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
return /*#__PURE__*/React.createElement("ul", {
style: _objectSpread({
paddingLeft: "".concat(20 * level, "px")
}, tableOfContentsSubSectionContainerConfigurationSettings)
}, sections.map(function (section) {
return /*#__PURE__*/React.createElement(React.Fragment, {
key: section.id
}, section.subsections && level > 0 && /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
background: "rgba(147, 147, 147, 0.169)",
height: "0.0069rem",
width: "calc(91.69%)",
marginTop: "0.469rem"
}, subSectionDividerCellConfigurationSettings)
}), /*#__PURE__*/React.createElement("li", {
style: _objectSpread({
display: "flex",
flexDirection: "row",
alignItems: "center",
transition: "background 0.369s, scale 0.369s ease-in-out, color 0.369s ease-in",
cursor: "pointer",
borderRadius: "5px",
background: activeId === section.id ? "#e9ecef" : "transparent",
color: activeId === section.id ? subSectionCellActivatedColor : subSectionCellColor,
scale: activeId === section.id ? "0.769" : "0.569",
padding: "5px 10px",
margin: "5px 0"
}, tableOfContentsSubSectionConfigurationSettings),
onClick: function onClick() {
scrollToElement(section.id);
if (subSectionCellAction) {
subSectionCellAction(section.id);
}
}
}, displayIconsOnCurrent && activeId === section.id && section.icon ? /*#__PURE__*/React.createElement(HUDIcon, {
iconConfigurationSettings: _objectSpread({
scale: "1.169",
marginRight: "1.169rem"
}, subSectionCellIconConfigurationSettings),
color: section.iconColor ? section.iconColor : "black",
name: section.icon
}) : !displayIconsOnCurrent && section.icon ? /*#__PURE__*/React.createElement(HUDIcon, {
iconConfigurationSettings: _objectSpread({
scale: "1.169",
marginRight: "1.169rem"
}, subSectionCellIconConfigurationSettings),
color: section.iconColor ? section.iconColor : "black",
name: section.icon
}) : /*#__PURE__*/React.createElement(React.Fragment, null), section.title), section.subsections && renderSections(section.subsections, level + 1));
}));
};
useEffect(function () {
var observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
setActiveId(entry.target.id);
}
});
}, {
rootMargin: "-50% 0px -50% 0px",
threshold: 0.569
});
var registerSectionsForObserver = function registerSectionsForObserver(sections) {
sections.forEach(function (section) {
var element = document.getElementById(section.id);
if (element) observer.observe(element);
if (section.subsections) {
registerSectionsForObserver(section.subsections);
}
});
};
registerSectionsForObserver(headings);
return function () {
return observer.disconnect();
};
}, [headings]);
return /*#__PURE__*/React.createElement("nav", _extends({
style: _objectSpread({
position: "fixed",
overflowY: "auto",
maxHeight: "69%",
width: "247.69px",
background: "#f9f9f9",
boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.15)",
borderRadius: "5px",
padding: "15px",
top: "20%",
left: "0"
}, tableOfContentsContainerConfigurationSettings)
}, rest), /*#__PURE__*/React.createElement("ul", {
style: _objectSpread({
listStyle: "none",
padding: "0"
}, tableOfContentsSectionContainerConfigurationSettings)
}, headings.map(function (heading) {
return /*#__PURE__*/React.createElement("li", {
key: heading.id,
style: _objectSpread({
transition: "background 0.369s, color 0.169s ease-in",
cursor: "pointer",
borderRadius: "0.569rem",
background: activeId === heading.id ? "#e9ecef" : "transparent",
fontWeight: "569",
color: activeId === heading.id ? sectionCellActivatedColor : sectionCellColor,
padding: "10px",
margin: "10px 0"
}, tableOfContentsSectionConfigurationSettings),
onClick: function onClick() {
scrollToElement(heading.id);
if (sectionCellAction) {
sectionCellAction(heading.id);
}
}
}, renderSections(headings));
})));
}
;
export default HUDTableOfContents;