@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
233 lines • 10.2 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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, { useState, useEffect, useRef, useMemo, useCallback } from "react";
var baseListConfigurationSettings = {
position: "relative",
display: "flex",
flexDirection: "column",
overflow: "auto",
boxSizing: "border-box",
height: "100%",
width: "100%"
};
function HUDVirtualList(_ref) {
var _ref$indexSpecificHov = _ref.indexSpecificHoverConfigurationSettings,
indexSpecificHoverConfigurationSettings = _ref$indexSpecificHov === void 0 ? {} : _ref$indexSpecificHov,
_ref$indexSpecificCli = _ref.indexSpecificClickConfigurationSettings,
indexSpecificClickConfigurationSettings = _ref$indexSpecificCli === void 0 ? {} : _ref$indexSpecificCli,
_ref$hoverAnimationCo = _ref.hoverAnimationConfigurationSettings,
hoverAnimationConfigurationSettings = _ref$hoverAnimationCo === void 0 ? {} : _ref$hoverAnimationCo,
_ref$clickAnimationCo = _ref.clickAnimationConfigurationSettings,
clickAnimationConfigurationSettings = _ref$clickAnimationCo === void 0 ? {} : _ref$clickAnimationCo,
_ref$indexSpecificCon = _ref.indexSpecificConfigurationSettings,
indexSpecificConfigurationSettings = _ref$indexSpecificCon === void 0 ? {} : _ref$indexSpecificCon,
_ref$listConfiguratio = _ref.listConfigurationSettings,
listConfigurationSettings = _ref$listConfiguratio === void 0 ? {} : _ref$listConfiguratio,
_ref$cellConfiguratio = _ref.cellConfigurationSettings,
cellConfigurationSettings = _ref$cellConfiguratio === void 0 ? {} : _ref$cellConfiguratio,
onCellDoubleClick = _ref.onCellDoubleClick,
onCellRightClick = _ref.onCellRightClick,
onCellHover = _ref.onCellHover,
onCellClick = _ref.onCellClick,
renderCell = _ref.renderCell,
_ref$fallbackCellVirt = _ref.fallbackCellVirtualHeight,
fallbackCellVirtualHeight = _ref$fallbackCellVirt === void 0 ? 40 : _ref$fallbackCellVirt,
_ref$transitionDurati = _ref.transitionDuration,
transitionDuration = _ref$transitionDurati === void 0 ? "0.369s" : _ref$transitionDurati,
_ref$initiallyClicked = _ref.initiallyClicked,
initiallyClicked = _ref$initiallyClicked === void 0 ? -1 : _ref$initiallyClicked,
_ref$listType = _ref.listType,
listType = _ref$listType === void 0 ? "vertical" : _ref$listType,
_ref$overscan = _ref.overscan,
overscan = _ref$overscan === void 0 ? 3 : _ref$overscan,
_ref$gap = _ref.gap,
gap = _ref$gap === void 0 ? 10 : _ref$gap,
items = _ref.items;
var _useState = useState({
start: 0,
end: 20
}),
_useState2 = _slicedToArray(_useState, 2),
visibleRange = _useState2[0],
setVisibleRange = _useState2[1];
var _useState3 = useState(null),
_useState4 = _slicedToArray(_useState3, 2),
hoveredIndex = _useState4[0],
setHoveredIndex = _useState4[1];
var _useState5 = useState(null),
_useState6 = _slicedToArray(_useState5, 2),
clickedIndex = _useState6[0],
setClickedIndex = _useState6[1];
var _useState7 = useState({}),
_useState8 = _slicedToArray(_useState7, 2),
cellHeights = _useState8[0],
setCellHeights = _useState8[1];
var scrollRef = useRef(null);
var cellRefs = useRef({});
var verticalList = useMemo(function () {
return listType === "vertical";
}, [listType]);
var updateVisibleRange = function updateVisibleRange() {
if (!scrollRef.current) return;
var viewSize = verticalList ? scrollRef.current.clientHeight : scrollRef.current.clientWidth;
var scrollPos = verticalList ? scrollRef.current.scrollTop : scrollRef.current.scrollLeft;
var end = items.length - 1;
var offset = 0;
var start = 0;
for (var i = 0; i < items.length; i++) {
var size = cellHeights[i] || fallbackCellVirtualHeight;
var inView = offset + size >= scrollPos && offset <= scrollPos + viewSize;
if (inView) {
start = Math.max(0, i - overscan);
break;
}
offset += size + gap;
}
offset = 0;
for (var _i = 0; _i < items.length; _i++) {
var _size = cellHeights[_i] || fallbackCellVirtualHeight;
var _inView = offset >= scrollPos && offset <= scrollPos + viewSize;
if (_inView) {
end = Math.min(items.length - 1, _i + overscan);
}
offset += _size + gap;
}
setVisibleRange({
start: start,
end: end
});
};
var updateCellHeight = useCallback(function (index, node) {
if (node) {
var measured = verticalList ? node.getBoundingClientRect().height : node.getBoundingClientRect().width;
setCellHeights(function (prev) {
if (prev[index] === measured) return prev;
return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, index, measured));
});
}
}, [verticalList]);
var handleRightClick = function handleRightClick(item, index, event) {
event.preventDefault();
if (onCellRightClick) {
onCellRightClick(item, index);
}
};
var handleDoubleClick = function handleDoubleClick(item, index) {
if (onCellDoubleClick) {
onCellDoubleClick(item, index);
}
};
var handleMouseEnter = function handleMouseEnter(item, index) {
setHoveredIndex(index);
if (onCellHover) {
onCellHover(item, index, true);
}
};
var handleMouseLeave = function handleMouseLeave(item, index) {
setHoveredIndex(null);
if (onCellHover) {
onCellHover(item, index, false);
}
};
var handleClick = function handleClick(item, index) {
setClickedIndex(index);
if (onCellClick) {
onCellClick(item, index);
}
};
var visibleItems = useMemo(function () {
return items.slice(visibleRange.start, visibleRange.end + 1);
}, [items, visibleRange]);
var scrollOffset = useMemo(function () {
var scrollO = 0;
for (var i = 0; i < visibleRange.start; i++) {
scrollO += (cellHeights[i] || fallbackCellVirtualHeight) + gap;
}
return scrollO;
}, [cellHeights, visibleRange, fallbackCellVirtualHeight, gap]);
var totalScrollArea = useMemo(function () {
return function () {
var total = 0;
for (var i = 0; i < items.length; i++) {
total += cellHeights[i] || fallbackCellVirtualHeight;
}
return total + (items.length - 1) * gap;
}();
}, [items.length, cellHeights, fallbackCellVirtualHeight]);
useEffect(function () {
var ref = scrollRef.current;
if (!ref) {
return;
}
updateVisibleRange();
ref.addEventListener("scroll", updateVisibleRange);
return function () {
return ref.removeEventListener("scroll", updateVisibleRange);
};
}, [cellHeights]);
useEffect(function () {
if (initiallyClicked >= 0 && items[initiallyClicked]) {
handleClick(items[initiallyClicked], initiallyClicked);
}
}, [initiallyClicked]);
return /*#__PURE__*/React.createElement("div", {
ref: scrollRef,
style: _objectSpread(_objectSpread(_objectSpread({}, baseListConfigurationSettings), listConfigurationSettings), {}, {
flexDirection: verticalList ? "column" : "row",
overflowY: verticalList ? "auto" : "hidden",
overflowX: verticalList ? "hidden" : "auto"
})
}, /*#__PURE__*/React.createElement("div", {
style: {
position: "relative",
boxSizing: "border-box",
height: verticalList ? "".concat(totalScrollArea, "px") : "100%",
width: verticalList ? "100%" : "".concat(totalScrollArea, "px")
}
}, /*#__PURE__*/React.createElement("div", {
style: {
position: "absolute",
display: "flex",
flexDirection: verticalList ? "column" : "row",
transform: verticalList ? "translateY(".concat(scrollOffset, "px)") : "translateX(".concat(scrollOffset, "px)"),
height: !verticalList ? "100%" : undefined,
width: verticalList ? "calc(100% - 45px)" : undefined,
gap: gap
}
}, visibleItems.map(function (item, visibleIndex) {
var index = visibleRange.start + visibleIndex;
return /*#__PURE__*/React.createElement("div", {
key: index,
ref: function ref(node) {
cellRefs.current[index] = node;
updateCellHeight(index, node);
},
style: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
pointerEvents: "auto",
userSelect: "none",
cursor: "pointer",
transition: "all ".concat(transitionDuration, " ease"),
width: verticalList ? "100%" : "auto"
}, cellConfigurationSettings), indexSpecificConfigurationSettings[index] || {}), hoveredIndex === index ? hoverAnimationConfigurationSettings : {}), hoveredIndex === index && indexSpecificHoverConfigurationSettings[index] || {}), clickedIndex === index ? clickAnimationConfigurationSettings : {}), clickedIndex === index && indexSpecificClickConfigurationSettings[index] || {}),
onContextMenu: function onContextMenu(e) {
return handleRightClick(item, index, e);
},
onDoubleClick: function onDoubleClick() {
return handleDoubleClick(item, index);
},
onMouseEnter: function onMouseEnter() {
return handleMouseEnter(item, index);
},
onMouseLeave: function onMouseLeave() {
return handleMouseLeave(item, index);
},
onClick: function onClick() {
return handleClick(item, index);
}
}, renderCell ? renderCell(item, index, hoveredIndex, clickedIndex) : item);
}))));
}
;
export default HUDVirtualList;