@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
188 lines • 9.99 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _typeof from "@babel/runtime/helpers/typeof";
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, useMemo, useRef } from "react";
var baseListConfigurationSettings = {
position: "relative",
display: "flex",
minHeight: "1.69rem",
gap: "10px",
marginTop: "0.69rem"
};
var HUDListItem = /*#__PURE__*/React.memo(function HUDListItem(_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$cellConfiguratio = _ref.cellConfigurationSettings,
cellConfigurationSettings = _ref$cellConfiguratio === void 0 ? {} : _ref$cellConfiguratio,
onCellDoubleClick = _ref.onCellDoubleClick,
renderCellStable = _ref.renderCellStable,
onCellRightClick = _ref.onCellRightClick,
onCellHover = _ref.onCellHover,
onCellClick = _ref.onCellClick,
setHoveredIndex = _ref.setHoveredIndex,
setClickedIndex = _ref.setClickedIndex,
transitionDuration = _ref.transitionDuration,
hovered = _ref.hovered,
clicked = _ref.clicked,
index = _ref.index,
item = _ref.item;
var baseCellStyle = useMemo(function () {
return {
userSelect: "none",
cursor: "pointer",
transition: "all ".concat(transitionDuration, " ease")
};
}, [transitionDuration]);
var computedStyle = useMemo(function () {
var cellBase = _typeof(cellConfigurationSettings) === "object" ? cellConfigurationSettings : typeof cellConfigurationSettings === "function" ? cellConfigurationSettings(item, index) : {};
var idxSpecific = indexSpecificConfigurationSettings && indexSpecificConfigurationSettings[index] ? indexSpecificConfigurationSettings[index] : {};
var hoverBase = hovered ? _typeof(hoverAnimationConfigurationSettings) === "object" ? hoverAnimationConfigurationSettings : typeof hoverAnimationConfigurationSettings === "function" ? hoverAnimationConfigurationSettings(index) : {} : {};
var hoverIdx = hovered && indexSpecificHoverConfigurationSettings ? indexSpecificHoverConfigurationSettings[index] || {} : {};
var clickBase = clicked ? _typeof(clickAnimationConfigurationSettings) === "object" ? clickAnimationConfigurationSettings : typeof clickAnimationConfigurationSettings === "function" ? clickAnimationConfigurationSettings(index) : {} : {};
var clickIdx = clicked && indexSpecificClickConfigurationSettings ? indexSpecificClickConfigurationSettings[index] || {} : {};
return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, baseCellStyle), cellBase), idxSpecific), hoverBase), hoverIdx), clickBase), clickIdx);
}, [indexSpecificHoverConfigurationSettings, indexSpecificClickConfigurationSettings, hoverAnimationConfigurationSettings, clickAnimationConfigurationSettings, indexSpecificConfigurationSettings, cellConfigurationSettings, baseCellStyle, hovered, clicked, index, item]);
var handleContextMenu = function handleContextMenu(event) {
event.preventDefault();
if (onCellRightClick) {
onCellRightClick(item, index);
}
};
var handleDoubleClick = function handleDoubleClick() {
if (onCellDoubleClick) {
onCellDoubleClick(item, index);
}
};
var handleMouseEnter = function handleMouseEnter() {
setHoveredIndex(index);
if (onCellHover) {
onCellHover(item, index, true);
}
};
var handleMouseLeave = function handleMouseLeave() {
setHoveredIndex(null);
if (onCellHover) {
onCellHover(item, index, false);
}
};
var handleClick = function handleClick() {
setClickedIndex(index);
if (onCellClick) {
onCellClick(item, index);
}
};
return /*#__PURE__*/React.createElement("div", {
style: computedStyle,
onContextMenu: handleContextMenu,
onDoubleClick: handleDoubleClick,
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
onClick: handleClick
}, renderCellStable(item, index, hovered ? index : null, clicked ? index : null));
});
function HUDList(_ref2) {
var _ref2$indexSpecificHo = _ref2.indexSpecificHoverConfigurationSettings,
indexSpecificHoverConfigurationSettings = _ref2$indexSpecificHo === void 0 ? {} : _ref2$indexSpecificHo,
_ref2$indexSpecificCl = _ref2.indexSpecificClickConfigurationSettings,
indexSpecificClickConfigurationSettings = _ref2$indexSpecificCl === void 0 ? {} : _ref2$indexSpecificCl,
_ref2$hoverAnimationC = _ref2.hoverAnimationConfigurationSettings,
hoverAnimationConfigurationSettings = _ref2$hoverAnimationC === void 0 ? {} : _ref2$hoverAnimationC,
_ref2$clickAnimationC = _ref2.clickAnimationConfigurationSettings,
clickAnimationConfigurationSettings = _ref2$clickAnimationC === void 0 ? {} : _ref2$clickAnimationC,
_ref2$indexSpecificCo = _ref2.indexSpecificConfigurationSettings,
indexSpecificConfigurationSettings = _ref2$indexSpecificCo === void 0 ? {} : _ref2$indexSpecificCo,
_ref2$listConfigurati = _ref2.listConfigurationSettings,
listConfigurationSettings = _ref2$listConfigurati === void 0 ? {} : _ref2$listConfigurati,
_ref2$cellConfigurati = _ref2.cellConfigurationSettings,
cellConfigurationSettings = _ref2$cellConfigurati === void 0 ? {} : _ref2$cellConfigurati,
_ref2$keyExtractor = _ref2.keyExtractor,
keyExtractor = _ref2$keyExtractor === void 0 ? function (item, index) {
return index;
} : _ref2$keyExtractor,
onCellDoubleClick = _ref2.onCellDoubleClick,
onCellRightClick = _ref2.onCellRightClick,
onCellHover = _ref2.onCellHover,
onCellClick = _ref2.onCellClick,
renderCell = _ref2.renderCell,
_ref2$transitionDurat = _ref2.transitionDuration,
transitionDuration = _ref2$transitionDurat === void 0 ? "0.369s" : _ref2$transitionDurat,
_ref2$initiallyClicke = _ref2.initiallyClicked,
initiallyClicked = _ref2$initiallyClicke === void 0 ? -1 : _ref2$initiallyClicke,
_ref2$listType = _ref2.listType,
listType = _ref2$listType === void 0 ? "vertical" : _ref2$listType,
items = _ref2.items;
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
hoveredIndex = _useState2[0],
setHoveredIndex = _useState2[1];
var _useState3 = useState(null),
_useState4 = _slicedToArray(_useState3, 2),
clickedIndex = _useState4[0],
setClickedIndex = _useState4[1];
var renderCellRef = useRef(renderCell);
var flexDirection = useMemo(function () {
switch (listType) {
case "horizontal":
return "row";
case "vertical":
default:
return "column";
}
}, [listType]);
var containerStyle = useMemo(function () {
return _objectSpread(_objectSpread(_objectSpread({}, baseListConfigurationSettings), listConfigurationSettings), {}, {
flexDirection: flexDirection
});
}, [listConfigurationSettings, flexDirection]);
useEffect(function () {
renderCellRef.current = renderCell;
}, [renderCell]);
useEffect(function () {
if (initiallyClicked < 0) {
return;
}
if (!items || !items[initiallyClicked]) {
return;
}
setClickedIndex(initiallyClicked);
}, [initiallyClicked, items]);
return /*#__PURE__*/React.createElement("div", {
style: containerStyle
}, items.map(function (item, index) {
return /*#__PURE__*/React.createElement(HUDListItem, {
key: keyExtractor(item, index),
indexSpecificHoverConfigurationSettings: indexSpecificHoverConfigurationSettings,
indexSpecificClickConfigurationSettings: indexSpecificClickConfigurationSettings,
hoverAnimationConfigurationSettings: hoverAnimationConfigurationSettings,
clickAnimationConfigurationSettings: clickAnimationConfigurationSettings,
indexSpecificConfigurationSettings: indexSpecificConfigurationSettings,
cellConfigurationSettings: cellConfigurationSettings,
renderCellStable: function renderCellStable(it, idx, h, c) {
return renderCellRef.current ? renderCellRef.current(it, idx, h, c) : it;
},
onCellDoubleClick: onCellDoubleClick,
onCellRightClick: onCellRightClick,
onCellHover: onCellHover,
onCellClick: onCellClick,
setHoveredIndex: setHoveredIndex,
setClickedIndex: setClickedIndex,
transitionDuration: transitionDuration,
hovered: hoveredIndex === index,
clicked: clickedIndex === index,
index: index,
item: item
});
}));
}
;
export default HUDList;