@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
123 lines • 6.04 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 } from "react";
var baseListConfigurationSettings = {
position: "relative",
display: "flex",
minHeight: "1.69rem",
gap: "10px",
marginTop: "0.69rem"
};
function HUDList(_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,
_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,
onCellDoubleClick = _ref.onCellDoubleClick,
onCellRightClick = _ref.onCellRightClick,
onCellHover = _ref.onCellHover,
onCellClick = _ref.onCellClick,
renderCell = _ref.renderCell,
items = _ref.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 getFlexDirection = function getFlexDirection() {
switch (listType) {
case "horizontal":
return "row";
case "vertical":
default:
return "column";
}
};
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 handleClick = function handleClick(item, index) {
setClickedIndex(index);
if (onCellClick) {
onCellClick(item, index);
}
};
var handleMouseLeave = function handleMouseLeave(item, index) {
setHoveredIndex(null);
if (onCellHover) {
onCellHover(item, index, false);
}
};
useEffect(function () {
if (initiallyClicked < 0 || !items[initiallyClicked]) {
return;
}
handleClick(items[initiallyClicked], initiallyClicked);
}, [initiallyClicked]);
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread(_objectSpread(_objectSpread({}, baseListConfigurationSettings), listConfigurationSettings), {}, {
flexDirection: getFlexDirection()
})
}, items.map(function (item, index) {
return /*#__PURE__*/React.createElement("div", {
key: index,
style: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
userSelect: "none",
cursor: "pointer",
transition: "all ".concat(transitionDuration, " ease")
}, cellConfigurationSettings), indexSpecificConfigurationSettings && indexSpecificConfigurationSettings[index]), hoveredIndex === index ? hoverAnimationConfigurationSettings : {}), hoveredIndex === index && indexSpecificHoverConfigurationSettings ? indexSpecificHoverConfigurationSettings[index] : {}), clickedIndex === index ? clickAnimationConfigurationSettings : {}), clickedIndex === index && indexSpecificClickConfigurationSettings ? indexSpecificClickConfigurationSettings[index] : {}),
onContextMenu: function onContextMenu(event) {
return handleRightClick(item, index, event);
},
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 HUDList;