@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
305 lines (304 loc) • 17.1 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
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 _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useState } from "react";
import { Fade } from "react-awesome-reveal";
import HUDIcon from "./HUDIcon.js";
var styles = {
container: {
position: "relative",
display: "flex",
flexDirection: "column",
fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
textAlign: "left",
borderRadius: "0.69rem",
width: "1107px",
margin: "0 auto",
padding: "20px",
backgroundColor: "#f9f9f9",
color: "#333",
boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)"
},
section: {
position: "relative",
borderBottom: "1px solid #eee",
paddingBottom: "20px",
marginBottom: "30px"
},
subsection: {
position: "relative",
marginBottom: "15px"
},
codeBlock: {
position: "relative",
background: "#f4f4f4",
borderLeft: "5px solid #ccc",
padding: "10px",
overflowX: "auto",
marginTop: "10px",
marginBottom: "10px"
},
copyButton: {
position: "relative",
backgroundColor: "#4CAF50",
color: "white",
border: "none",
padding: "5px 10px",
borderRadius: "5px",
cursor: "pointer",
marginBottom: "1rem",
marginLeft: "10px",
marginTop: "1rem"
},
copyConfirmation: {
position: "relative",
color: "#4CAF50",
margin: "10px 0"
},
minimizeTab: {
position: "absolute",
cursor: "pointer",
border: "none",
backgroundColor: "#1a1010",
color: "white",
borderRadius: "12.69px",
height: "1.269rem",
width: "auto",
padding: "5px 10px"
},
table: {
position: "relative",
width: "100%",
borderCollapse: "collapse",
marginBottom: "20px"
},
th: {
position: "relative",
backgroundColor: "#f0f0f0",
border: "1px solid #ddd",
padding: "8px"
},
td: {
position: "relative",
border: "1px solid #ddd",
padding: "8px"
},
highlighted: {
background: "yellow"
}
};
function HUDDocumentation(documentationConfigurationSettings) {
var _documentationConfigu = documentationConfigurationSettings.documentationContainerConfigurationSettings,
documentationContainerConfigurationSettings = _documentationConfigu === void 0 ? {} : _documentationConfigu,
_documentationConfigu2 = documentationConfigurationSettings.documentationSectionConfigurationSettings,
documentationSectionConfigurationSettings = _documentationConfigu2 === void 0 ? {} : _documentationConfigu2,
_documentationConfigu3 = documentationConfigurationSettings.documentationSubSectionConfigurationSettings,
documentationSubSectionConfigurationSettings = _documentationConfigu3 === void 0 ? {} : _documentationConfigu3,
_documentationConfigu4 = documentationConfigurationSettings.documentationHighlightConfigurationSettings,
documentationHighlightConfigurationSettings = _documentationConfigu4 === void 0 ? {} : _documentationConfigu4,
_documentationConfigu5 = documentationConfigurationSettings.documentationCopyConfirmationConfigurationSettings,
documentationCopyConfirmationConfigurationSettings = _documentationConfigu5 === void 0 ? {} : _documentationConfigu5,
_documentationConfigu6 = documentationConfigurationSettings.documentationMinimizeTabButtonConfigurationSettings,
documentationMinimizeTabButtonConfigurationSettings = _documentationConfigu6 === void 0 ? {} : _documentationConfigu6,
_documentationConfigu7 = documentationConfigurationSettings.documentationCopyButtonConfigurationSettings,
documentationCopyButtonConfigurationSettings = _documentationConfigu7 === void 0 ? {} : _documentationConfigu7,
_documentationConfigu8 = documentationConfigurationSettings.documentationCodeBlockConfigurationSettings,
documentationCodeBlockConfigurationSettings = _documentationConfigu8 === void 0 ? {} : _documentationConfigu8,
_documentationConfigu9 = documentationConfigurationSettings.documentationTableConfigurationSettings,
documentationTableConfigurationSettings = _documentationConfigu9 === void 0 ? {} : _documentationConfigu9,
_documentationConfigu10 = documentationConfigurationSettings.documentationTHConfigurationSettings,
documentationTHConfigurationSettings = _documentationConfigu10 === void 0 ? {} : _documentationConfigu10,
_documentationConfigu11 = documentationConfigurationSettings.documentationTDConfigurationSettings,
documentationTDConfigurationSettings = _documentationConfigu11 === void 0 ? {} : _documentationConfigu11,
_documentationConfigu12 = documentationConfigurationSettings.minimizeTabPosition,
minimizeTabPosition = _documentationConfigu12 === void 0 ? "top-right" : _documentationConfigu12,
_documentationConfigu13 = documentationConfigurationSettings.displayMinimizeTabButton,
displayMinimizeTabButton = _documentationConfigu13 === void 0 ? true : _documentationConfigu13,
_documentationConfigu14 = documentationConfigurationSettings.copyButtonIcon,
copyButtonIcon = _documentationConfigu14 === void 0 ? "fa-copy" : _documentationConfigu14,
_documentationConfigu15 = documentationConfigurationSettings.copyButtonColor,
copyButtonColor = _documentationConfigu15 === void 0 ? "green" : _documentationConfigu15,
_documentationConfigu16 = documentationConfigurationSettings.revealAnimations,
revealAnimations = _documentationConfigu16 === void 0 ? true : _documentationConfigu16,
_documentationConfigu17 = documentationConfigurationSettings.highlightKeywords,
highlightKeywords = _documentationConfigu17 === void 0 ? [] : _documentationConfigu17,
sections = documentationConfigurationSettings.sections;
var _useState = useState(""),
_useState2 = _slicedToArray(_useState, 2),
copiedText = _useState2[0],
setCopiedText = _useState2[1];
var _useState3 = useState(true),
_useState4 = _slicedToArray(_useState3, 2),
visible = _useState4[0],
setVisible = _useState4[1];
var toggleVisibility = function toggleVisibility() {
setVisible(!visible);
return;
};
var copyToClipboard = /*#__PURE__*/function () {
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(text) {
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.prev = 0;
_context.next = 3;
return navigator.clipboard.writeText(text);
case 3:
setCopiedText(text);
setTimeout(function () {
return setCopiedText("");
}, 2000);
return _context.abrupt("return");
case 8:
_context.prev = 8;
_context.t0 = _context["catch"](0);
console.error("Did not copy...", _context.t0);
return _context.abrupt("return");
case 12:
case "end":
return _context.stop();
}
}, _callee, null, [[0, 8]]);
}));
return function copyToClipboard(_x) {
return _ref.apply(this, arguments);
};
}();
var highlightText = function highlightText(text) {
var codedText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var regex = new RegExp("(".concat(highlightKeywords.join("|"), ")"), codedText ? "g" : "gi");
return text.split(regex).map(function (part, index) {
return highlightKeywords.some(function (keyword) {
return codedText ? keyword === part : keyword === part;
}) ? /*#__PURE__*/React.createElement("span", {
key: index,
style: _objectSpread({
background: "yellow"
}, documentationHighlightConfigurationSettings)
}, part) : part;
});
};
var documentationStyles = {
container: _objectSpread(_objectSpread({}, styles.container), documentationContainerConfigurationSettings),
section: _objectSpread(_objectSpread({}, styles.section), documentationSectionConfigurationSettings),
subsection: _objectSpread(_objectSpread({}, styles.subsection), documentationSubSectionConfigurationSettings),
codeBlock: _objectSpread(_objectSpread({}, styles.codeBlock), documentationCodeBlockConfigurationSettings),
copyButton: _objectSpread(_objectSpread({}, styles.copyButton), documentationCopyButtonConfigurationSettings),
copyConfirmation: _objectSpread(_objectSpread({}, styles.copyConfirmation), documentationCopyConfirmationConfigurationSettings),
minimizeTab: _objectSpread(_objectSpread({}, styles.minimizeTab), {}, {
top: minimizeTabPosition.includes("top") ? "10px" : undefined,
right: minimizeTabPosition.includes("right") ? "10px" : undefined,
bottom: minimizeTabPosition.includes("bottom") ? "10px" : undefined,
left: minimizeTabPosition.includes("left") ? "10px" : undefined
}, documentationMinimizeTabButtonConfigurationSettings),
table: _objectSpread(_objectSpread({}, styles.table), documentationTableConfigurationSettings),
th: _objectSpread(_objectSpread({}, styles.th), documentationTHConfigurationSettings),
td: _objectSpread(_objectSpread({}, styles.td), documentationTDConfigurationSettings),
highlighted: _objectSpread(_objectSpread({}, styles.highlighted), documentationHighlightConfigurationSettings)
};
return /*#__PURE__*/React.createElement("div", {
style: documentationStyles.container
}, displayMinimizeTabButton ? /*#__PURE__*/React.createElement("button", {
style: _objectSpread(_objectSpread({}, documentationStyles.minimizeTab), {}, {
height: "auto",
zIndex: 869
}),
onClick: toggleVisibility
}, /*#__PURE__*/React.createElement(HUDIcon, {
name: visible ? "fa-chevron-left" : "fa-chevron-down",
iconConfigurationSettings: {
height: "1.269rem",
width: "auto"
}
})) : /*#__PURE__*/React.createElement(React.Fragment, null), sections.map(function (section, index) {
return /*#__PURE__*/React.createElement("div", {
key: index,
style: documentationStyles.section
}, /*#__PURE__*/React.createElement("h1", {
id: section.id
}, section.title), visible ? /*#__PURE__*/React.createElement(Fade, {
direction: "up",
duration: revealAnimations ? 469 : 0
}, /*#__PURE__*/React.createElement("p", null, highlightText(section.description))) : /*#__PURE__*/React.createElement(React.Fragment, null), section.subsections.map(function (sub, subIndex) {
return /*#__PURE__*/React.createElement("div", {
key: subIndex,
style: documentationStyles.subsection
}, /*#__PURE__*/React.createElement("h2", {
id: sub.id
}, sub.title), visible ? /*#__PURE__*/React.createElement(Fade, {
direction: "down",
duration: revealAnimations ? 469 : 0
}, /*#__PURE__*/React.createElement("p", null, highlightText(sub.content))) : /*#__PURE__*/React.createElement(React.Fragment, null), sub.code && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Fade, {
direction: "left",
duration: revealAnimations ? 269 : 0
}, /*#__PURE__*/React.createElement("pre", {
style: documentationStyles.codeBlock
}, highlightText(sub.code, true))), /*#__PURE__*/React.createElement(HUDIcon, {
name: copyButtonIcon,
color: copyButtonColor,
iconConfigurationStyle: _objectSpread({}, documentationStyles.copyButton),
onClick: function onClick() {
return copyToClipboard(sub.code);
}
}), copiedText && sub.code === copiedText && /*#__PURE__*/React.createElement("div", {
style: documentationStyles.copyConfirmation
}, "Code copied to clipboard!")), visible && sub.list ? /*#__PURE__*/React.createElement("ul", null, sub.list.map(function (item, listItemIndex) {
return /*#__PURE__*/React.createElement(Fade, {
direction: "down",
duration: revealAnimations ? 469 : 0
}, /*#__PURE__*/React.createElement("li", {
key: listItemIndex
}, highlightText(item)));
})) : /*#__PURE__*/React.createElement(React.Fragment, null), visible && sub.table ? /*#__PURE__*/React.createElement("table", {
style: documentationStyles.table
}, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, sub.table.headers.map(function (header, headerIndex) {
return /*#__PURE__*/React.createElement(Fade, {
direction: "down",
duration: revealAnimations ? 469 : 0
}, /*#__PURE__*/React.createElement("th", {
key: headerIndex,
style: documentationStyles.th
}, header));
}))), /*#__PURE__*/React.createElement("tbody", null, sub.table.rows.map(function (row, rowIndex) {
return /*#__PURE__*/React.createElement("tr", {
key: rowIndex
}, row.map(function (cell, cellIndex) {
return /*#__PURE__*/React.createElement(Fade, {
direction: "down",
duration: revealAnimations ? 469 : 0
}, /*#__PURE__*/React.createElement("td", {
key: cellIndex
}, highlightText(cell)));
}));
}))) : /*#__PURE__*/React.createElement(React.Fragment, null));
}));
}));
}
;
/*
* Allows for documentation of information by displaying the information in sections, sub-sections, lists, code views, tables, etc.
*
* @params
* @param {React.Props} documentationConfigurationSettings - Facilitates the HUDDocumentation component's settings.
* @param {Object} documentationConfigurationSettings.documentationContainerConfigurationSettings - Allows for adding / adjusting of the documenter's container style.
* @param {Object} documentationConfigurationSettings.documentationSectionConfigurationSettings - Allows for adding / adjusting of the documenter's section style.
* @param {Object} documentationConfigurationSettings.documentationSubSectionConfigurationSettings - Allows for adding / adjusting of the documenter's sub-section style.
* @param {Object} documentationConfigurationSettings.documentationHighlightConfigurationSettings - Allows for adding / adjusting of the documenter's highlight style.
* @param {Object} documentationConfigurationSettings.documentationCopyConfirmationConfigurationSettings - Allows for adding / adjusting of the documenter's copy confirmation style.
* @param {Object} documentationConfigurationSettings.documentationMinimizeTabButtonConfigurationSettings - Allows for adding / adjusting of the documenter's minimize tab button style.
* @param {Object} documentationConfigurationSettings.documentationCopyButtonConfigurationSettings - Allows for adding / adjusting of the documenter's copy button style.
* @param {Object} documentationConfigurationSettings.documentationCodeBlockConfigurationSettings - Allows for adding / adjusting of the documenter's code view style.
* @param {Object} documentationConfigurationSettings.documentationTableConfigurationSettings - Allows for adding / adjusting of the documenter's table style.
* @param {Object} documentationConfigurationSettings.documentationTHConfigurationSettings - Allows for adding / adjusting of the documenter's th style.
* @param {Object} documentationConfigurationSettings.documentationTDConfigurationSettings - Allows for adding / adjusting of the documenter's td style.
* @param {array} documentationConfigurationSettings.highlightKeywords - Tells the documenter to highlight the words listed in this list.
* @param {string} documentationConfigurationSettings.minimizeTabPosition - Allows the ability to position the minimize button in a desired location. (Left, Right, Bottom, Top, etc.).
* @param {boolean} documentationConfigurationSettings.revealAnimations - Allows the ability to display animations or not on display.
* @param {string} documentationConfigurationSettings.copyButtonColor - Changes the copy button's color.
* @param {string} documentationConfigurationSettings.copyButtonIcon - Changes the copy button's icon.
* @param {Object} documentationConfigurationSettings.sections - The display schema for the HUDDocumentation component.
*/
export default HUDDocumentation;