@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
397 lines • 22.6 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
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, useMemo } from "react";
import { Debounce } from "../HUDManagers/HUDUniversalHUDUtilityManager.js";
import HUDIcon from "./HUDIcon.js";
function HUDGroupedList(_ref) {
var _ref$groupedListSecti = _ref.groupedListSectionHeaderContainerHoverConfigurationSettings,
groupedListSectionHeaderContainerHoverConfigurationSettings = _ref$groupedListSecti === void 0 ? {} : _ref$groupedListSecti,
_ref$groupedListSecti2 = _ref.groupedListSectionFooterContainerHoverConfigurationSettings,
groupedListSectionFooterContainerHoverConfigurationSettings = _ref$groupedListSecti2 === void 0 ? {} : _ref$groupedListSecti2,
_ref$groupedListSecti3 = _ref.groupedListSectionCollapseButtonHoverConfigurationSettings,
groupedListSectionCollapseButtonHoverConfigurationSettings = _ref$groupedListSecti3 === void 0 ? {} : _ref$groupedListSecti3,
_ref$groupedListSecti4 = _ref.groupedListSectionHeaderContainerConfigurationSettings,
groupedListSectionHeaderContainerConfigurationSettings = _ref$groupedListSecti4 === void 0 ? {} : _ref$groupedListSecti4,
_ref$groupedListSecti5 = _ref.groupedListSectionFooterContainerConfigurationSettings,
groupedListSectionFooterContainerConfigurationSettings = _ref$groupedListSecti5 === void 0 ? {} : _ref$groupedListSecti5,
_ref$groupedListSecti6 = _ref.groupedListSectionCollapseButtonConfigurationSettings,
groupedListSectionCollapseButtonConfigurationSettings = _ref$groupedListSecti6 === void 0 ? {} : _ref$groupedListSecti6,
_ref$groupedListSecti7 = _ref.groupedListSectionContainerHoverConfigurationSettings,
groupedListSectionContainerHoverConfigurationSettings = _ref$groupedListSecti7 === void 0 ? {} : _ref$groupedListSecti7,
_ref$groupedListSecti8 = _ref.groupedListSectionContentHoverConfigurationSettings,
groupedListSectionContentHoverConfigurationSettings = _ref$groupedListSecti8 === void 0 ? {} : _ref$groupedListSecti8,
_ref$groupedListSecti9 = _ref.groupedListSectionContainerConfigurationSettings,
groupedListSectionContainerConfigurationSettings = _ref$groupedListSecti9 === void 0 ? {} : _ref$groupedListSecti9,
_ref$groupedListSecti10 = _ref.groupedListSectionContentConfigurationSettings,
groupedListSectionContentConfigurationSettings = _ref$groupedListSecti10 === void 0 ? {} : _ref$groupedListSecti10,
_ref$groupedListConta = _ref.groupedListContainerConfigurationSettings,
groupedListContainerConfigurationSettings = _ref$groupedListConta === void 0 ? {} : _ref$groupedListConta,
_ref$groupedListSecti11 = _ref.groupedListSectionConfigurationSettings,
groupedListSectionConfigurationSettings = _ref$groupedListSecti11 === void 0 ? {} : _ref$groupedListSecti11,
_ref$groupedListSecti12 = _ref.groupedListSectionHeaderContainerConfigurations,
groupedListSectionHeaderContainerConfigurations = _ref$groupedListSecti12 === void 0 ? {} : _ref$groupedListSecti12,
_ref$groupedListSecti13 = _ref.groupedListSectionFooterContainerConfigurations,
groupedListSectionFooterContainerConfigurations = _ref$groupedListSecti13 === void 0 ? {} : _ref$groupedListSecti13,
_ref$groupedListSecti14 = _ref.groupedListSectionCollapseButtonConfigurations,
groupedListSectionCollapseButtonConfigurations = _ref$groupedListSecti14 === void 0 ? {} : _ref$groupedListSecti14,
_ref$groupedListSecti15 = _ref.groupedListSectionContainerConfigurations,
groupedListSectionContainerConfigurations = _ref$groupedListSecti15 === void 0 ? {} : _ref$groupedListSecti15,
_ref$groupedListSecti16 = _ref.groupedListSectionConfigurations,
groupedListSectionConfigurations = _ref$groupedListSecti16 === void 0 ? {} : _ref$groupedListSecti16,
_ref$groupedListSecti17 = _ref.groupedListSectionCollapsedButtonIconHoverColor,
groupedListSectionCollapsedButtonIconHoverColor = _ref$groupedListSecti17 === void 0 ? "rgba(147.69, 147.69, 147.69, 1)" : _ref$groupedListSecti17,
_ref$groupedListSecti18 = _ref.groupedListSectionCollapsedButtonIconColor,
groupedListSectionCollapsedButtonIconColor = _ref$groupedListSecti18 === void 0 ? "rgba(115.69, 115.69, 115.69, 1)" : _ref$groupedListSecti18,
_ref$groupedListSecti19 = _ref.groupedListSectionCollapsedButtonIcon,
groupedListSectionCollapsedButtonIcon = _ref$groupedListSecti19 === void 0 ? "plus" : _ref$groupedListSecti19,
_ref$groupedListSecti20 = _ref.groupedListSectionCollapseButtonIcon,
groupedListSectionCollapseButtonIcon = _ref$groupedListSecti20 === void 0 ? "minus" : _ref$groupedListSecti20,
renderSectionHeader = _ref.renderSectionHeader,
renderSectionFooter = _ref.renderSectionFooter,
renderCell = _ref.renderCell,
_ref$snappingDebounce = _ref.snappingDebounce,
snappingDebounce = _ref$snappingDebounce === void 0 ? 13.69 : _ref$snappingDebounce,
_ref$snapping = _ref.snapping,
snapping = _ref$snapping === void 0 ? true : _ref$snapping,
_ref$stickyHeaders = _ref.stickyHeaders,
stickyHeaders = _ref$stickyHeaders === void 0 ? false : _ref$stickyHeaders,
_ref$collapsibleSecti = _ref.collapsibleSections,
collapsibleSections = _ref$collapsibleSecti === void 0 ? false : _ref$collapsibleSecti,
collapseButtonRenderer = _ref.collapseButtonRenderer,
_ref$onSectionCollaps = _ref.onSectionCollapseButtonClicked,
onSectionCollapseButtonClicked = _ref$onSectionCollaps === void 0 ? null : _ref$onSectionCollaps,
_ref$onSectionHovered = _ref.onSectionHovered,
onSectionHovered = _ref$onSectionHovered === void 0 ? null : _ref$onSectionHovered,
_ref$onGroupingUpdate = _ref.onGroupingUpdate,
onGroupingUpdate = _ref$onGroupingUpdate === void 0 ? null : _ref$onGroupingUpdate,
_ref$onItemSelected = _ref.onItemSelected,
onItemSelected = _ref$onItemSelected === void 0 ? null : _ref$onItemSelected,
_ref$onItemHovered = _ref.onItemHovered,
onItemHovered = _ref$onItemHovered === void 0 ? null : _ref$onItemHovered,
_ref$groupingInterval = _ref.groupingInterval,
groupingInterval = _ref$groupingInterval === void 0 ? null : _ref$groupingInterval,
_ref$groupingRules = _ref.groupingRules,
groupingRules = _ref$groupingRules === void 0 ? [] : _ref$groupingRules,
_ref$sortingRules = _ref.sortingRules,
sortingRules = _ref$sortingRules === void 0 ? [] : _ref$sortingRules,
_ref$searchTerm = _ref.searchTerm,
searchTerm = _ref$searchTerm === void 0 ? "" : _ref$searchTerm,
_ref$headerFilterKeys = _ref.headerFilterKeys,
headerFilterKeys = _ref$headerFilterKeys === void 0 ? [] : _ref$headerFilterKeys,
_ref$itemFilterKeys = _ref.itemFilterKeys,
itemFilterKeys = _ref$itemFilterKeys === void 0 ? [] : _ref$itemFilterKeys,
customHeaderFilter = _ref.customHeaderFilter,
customItemFilter = _ref.customItemFilter,
_ref$layout = _ref.layout,
layout = _ref$layout === void 0 ? "vertical" : _ref$layout,
_ref$data = _ref.data,
data = _ref$data === void 0 ? [] : _ref$data;
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
collapseButtonHover = _useState2[0],
setCollapseButtonHover = _useState2[1];
var _useState3 = useState({}),
_useState4 = _slicedToArray(_useState3, 2),
collapsedSections = _useState4[0],
setCollapsedSections = _useState4[1];
var _useState5 = useState(null),
_useState6 = _slicedToArray(_useState5, 2),
sectionItemHover = _useState6[0],
setSectionItemHover = _useState6[1];
var _useState7 = useState(null),
_useState8 = _slicedToArray(_useState7, 2),
sectionHover = _useState8[0],
setSectionHover = _useState8[1];
var _useState9 = useState([]),
_useState10 = _slicedToArray(_useState9, 2),
groupedData = _useState10[0],
setGroupedData = _useState10[1];
var containerRef = useRef(null);
var sectionRefs = useRef([]);
var handleToggleCollapse = function handleToggleCollapse(sectionIndex) {
setCollapsedSections(function (prev) {
return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, sectionIndex, !prev[sectionIndex]));
});
};
var applyGroupingRules = function applyGroupingRules() {
if (!groupingRules.length) {
setGroupedData(data);
return;
}
var groupedData = groupingRules.reduce(function (groups, rule) {
var matchedItems = data.filter(rule.condition);
if (matchedItems.length > 0) {
groups.push({
header: _objectSpread({
title: rule.title,
description: rule.description,
icon: rule.icon || undefined
}, rule.headerMetadata || {}),
items: matchedItems.map(function (item) {
return _objectSpread(_objectSpread({}, item), rule.itemMetadata || {});
}),
footer: _objectSpread({
totalItems: matchedItems.length,
note: rule.footerNote ? rule.footerNote(matchedItems) : "Total items in ".concat(rule.title)
}, rule.footerMetadata || {})
});
}
return groups;
}, []);
groupedData = applySortingRules(groupedData);
setGroupedData(groupedData);
if (onGroupingUpdate) {
onGroupingUpdate(groupedData);
}
};
var applySortingRules = function applySortingRules(groupedData) {
if (!sortingRules.length) {
return groupedData;
}
return groupedData.map(function (group) {
var sortedItems = _toConsumableArray(group.items);
sortingRules.forEach(function (rule) {
sortedItems.sort(function (a, b) {
var valueA = rule.getValue(a);
var valueB = rule.getValue(b);
if (valueA < valueB) {
return rule.order === "asc" ? -1 : 1;
}
if (valueA > valueB) {
return rule.order === "asc" ? 1 : -1;
}
return 0;
});
});
return _objectSpread(_objectSpread({}, group), {}, {
items: sortedItems
});
}).sort(function (a, b) {
var _iterator = _createForOfIteratorHelper(sortingRules),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var rule = _step.value;
var valueA = rule.getValue(a.header);
var valueB = rule.getValue(b.header);
if (valueA < valueB) {
return rule.order === "asc" ? -1 : 1;
}
if (valueA > valueB) {
return rule.order === "asc" ? 1 : -1;
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return 0;
});
};
var filteredData = useMemo(function () {
return groupedData.filter(function (section) {
var matchesHeader = customHeaderFilter ? customHeaderFilter(section.header, searchTerm) : headerFilterKeys.some(function (key) {
var _section$header;
return (_section$header = section.header) === null || _section$header === void 0 || (_section$header = _section$header[key]) === null || _section$header === void 0 ? void 0 : _section$header.toString().toLowerCase().includes(searchTerm.toLowerCase());
});
var filteredItems = section.items.filter(function (item) {
return customItemFilter ? customItemFilter(item, searchTerm) : itemFilterKeys.some(function (key) {
var _item$key;
return item === null || item === void 0 || (_item$key = item[key]) === null || _item$key === void 0 ? void 0 : _item$key.toString().toLowerCase().includes(searchTerm.toLowerCase());
});
});
section.filteredItems = filteredItems;
return matchesHeader || filteredItems.length > 0;
});
}, [groupedData, searchTerm, customHeaderFilter, headerFilterKeys, customItemFilter, itemFilterKeys]);
useEffect(function () {
applyGroupingRules();
}, [data, groupingRules]);
useEffect(function () {
if (!groupingInterval) {
return;
}
var intervalID = setInterval(function () {
applyGroupingRules();
}, groupingInterval);
return function () {
clearInterval(intervalID);
};
}, [groupingInterval, data, groupingRules]);
useEffect(function () {
if (!snapping || !containerRef.current) return;
var stopPropagation = function stopPropagation(e) {
return e.stopPropagation();
};
var lastScrollTop = containerRef.current.scrollTop;
var lastSnappedIndex = null;
var debouncedScroll = Debounce(function () {
var container = containerRef.current;
var containerRect = container.getBoundingClientRect();
var currentScrollTop = container.scrollTop;
var scrollingDown = currentScrollTop > lastScrollTop;
lastScrollTop = currentScrollTop;
var closestDistance = Infinity;
var closestSection = null;
var closestIndex = null;
sectionRefs.current.some(function (section, index) {
if (!section) {
return false;
}
var rect = section.getBoundingClientRect();
var distance = Math.abs(rect.top - containerRect.top);
var backwardScroll = !scrollingDown && rect.bottom <= containerRect.bottom;
var forwardScroll = scrollingDown && rect.top >= containerRect.top;
if (distance < closestDistance && (forwardScroll || backwardScroll || index === lastSnappedIndex)) {
closestDistance = distance;
closestSection = section;
closestIndex = index;
return true;
}
return false;
});
if (closestSection && closestIndex !== lastSnappedIndex) {
lastSnappedIndex = closestIndex;
var scrollTop = closestSection.offsetTop - container.offsetTop + container.scrollTop;
container.scrollTo({
behavior: "smooth",
top: scrollTop
});
}
}, snappingDebounce);
var handleScroll = function handleScroll(e) {
stopPropagation(e);
debouncedScroll();
};
var container = containerRef.current;
container.addEventListener("scroll", handleScroll);
return function () {
container.removeEventListener("scroll", handleScroll);
};
}, [snapping, layout, snappingDebounce]);
return /*#__PURE__*/React.createElement("div", {
ref: containerRef,
style: _objectSpread({
position: "relative",
display: layout === "horizontal" ? "flex" : "block",
overflow: "auto",
overscrollBehavior: "contain",
scrollSnapType: snapping ? layout === "horizontal" ? "x mandatory" : "y mandatory" : "none",
border: "1px solid #ddd",
borderRadius: "10px",
background: "#f5f5f5",
maxHeight: "100vh",
padding: "10px"
}, groupedListContainerConfigurationSettings)
}, filteredData.map(function (section, index) {
return /*#__PURE__*/React.createElement("div", _extends({
key: index,
ref: function ref(el) {
return sectionRefs.current[index] = el;
},
className: "hud-section",
style: _objectSpread(_objectSpread({
overflow: "hidden",
scrollSnapAlign: snapping ? "start" : "none",
borderRadius: "8px",
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
background: "#fff",
marginBottom: "15px"
}, groupedListSectionContainerConfigurationSettings), sectionHover === index && groupedListSectionContainerHoverConfigurationSettings ? groupedListSectionContainerHoverConfigurationSettings : {}),
onMouseLeave: function onMouseLeave() {
setSectionHover(null);
if (onSectionHovered) {
onSectionHovered(null, index);
}
},
onMouseEnter: function onMouseEnter() {
setSectionHover(index);
if (onSectionHovered) {
onSectionHovered(section, index);
}
}
}, groupedListSectionContainerConfigurations), renderSectionHeader && /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread(_objectSpread({
position: stickyHeaders ? "sticky" : "relative",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
fontWeight: "bold",
background: "#f8f9fa",
zIndex: 10,
padding: "10px 15px",
top: stickyHeaders ? 0 : "auto"
}, groupedListSectionHeaderContainerConfigurationSettings), sectionHover === index && groupedListSectionHeaderContainerHoverConfigurationSettings ? groupedListSectionHeaderContainerHoverConfigurationSettings : {})
}, groupedListSectionHeaderContainerConfigurations), renderSectionHeader(section.header, section, index), collapsibleSections && (collapseButtonRenderer ? collapseButtonRenderer({
isCollapsed: collapsedSections[index],
onToggle: function onToggle() {
return handleToggleCollapse(index);
}
}) : /*#__PURE__*/React.createElement(HUDIcon, _extends({
iconConfigurationSettings: _objectSpread(_objectSpread({
transition: "all 0.369s ease-out",
cursor: "pointer",
background: "transparent"
}, groupedListSectionCollapseButtonConfigurationSettings), (collapseButtonHover === index || collapsedSections[index]) && groupedListSectionCollapseButtonHoverConfigurationSettings ? groupedListSectionCollapseButtonHoverConfigurationSettings : {}),
color: collapseButtonHover === index || collapsedSections[index] ? groupedListSectionCollapsedButtonIconHoverColor : groupedListSectionCollapsedButtonIconColor,
name: collapsedSections[index] ? groupedListSectionCollapsedButtonIcon : groupedListSectionCollapseButtonIcon,
onMouseLeave: function onMouseLeave() {
setCollapseButtonHover(null);
},
onMouseEnter: function onMouseEnter() {
setCollapseButtonHover(index);
},
onClick: function onClick() {
handleToggleCollapse(index);
if (onSectionCollapseButtonClicked) {
onSectionCollapseButtonClicked(index, !collapsedSections[index]);
}
}
}, groupedListSectionCollapseButtonConfigurations)))), !collapsedSections[index] && /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: layout === "horizontal" ? "flex" : "block",
gap: "10px",
padding: "10px 15px"
}, groupedListSectionConfigurationSettings)
}, groupedListSectionConfigurations), section.filteredItems.map(function (item, itemIndex) {
return renderCell ? /*#__PURE__*/React.createElement("div", _defineProperty(_defineProperty({
key: itemIndex,
style: _objectSpread(_objectSpread({
borderRadius: "6px",
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
background: "#e9ecef",
padding: "10px"
}, groupedListSectionContentConfigurationSettings), sectionItemHover === itemIndex && groupedListSectionContentHoverConfigurationSettings ? groupedListSectionContentHoverConfigurationSettings : {}),
onMouseLeave: function onMouseLeave() {
setSectionItemHover(null);
onItemHovered && onItemHovered(null, section, itemIndex);
}
}, "onMouseLeave", function onMouseLeave() {
setSectionItemHover(itemIndex);
onItemHovered && onItemHovered(item, section, itemIndex);
}), "onClick", function onClick() {
onItemSelected && onItemSelected(item, section);
}), renderCell(item, itemIndex, section)) : /*#__PURE__*/React.createElement("div", {
key: itemIndex,
style: groupedListSectionContentConfigurationSettings
}, JSON.stringify(item));
})), renderSectionFooter && /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread(_objectSpread({
fontStyle: "italic",
fontSize: "14px",
background: "#f8f9fa",
padding: "10px 15px"
}, groupedListSectionFooterContainerConfigurationSettings), sectionHover === index && groupedListSectionFooterContainerHoverConfigurationSettings ? groupedListSectionFooterContainerHoverConfigurationSettings : {})
}, groupedListSectionFooterContainerConfigurations), renderSectionFooter(section.footer, section, index)));
}));
}
;
export default HUDGroupedList;