@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
196 lines • 7.81 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
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, { useEffect, useRef, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { HUDUniversalHUDUtilityManager } from "../HUDManagers/HUDUniversalHUDUtilityManager.js";
var HUDToaster = function HUDToaster(_ref) {
var _ref$containerConfigu = _ref.containerConfigurationSettings,
containerConfigurationSettings = _ref$containerConfigu === void 0 ? {} : _ref$containerConfigu,
_ref$contentConfigura = _ref.contentConfigurationSettings,
contentConfigurationSettings = _ref$contentConfigura === void 0 ? {} : _ref$contentConfigura,
_ref$itemConfiguratio = _ref.itemConfigurationSettings,
itemConfigurationSettings = _ref$itemConfiguratio === void 0 ? {} : _ref$itemConfiguratio,
_ref$listConfiguratio = _ref.listConfiguration,
listConfiguration = _ref$listConfiguratio === void 0 ? {} : _ref$listConfiguratio,
_ref$toasterHeight = _ref.toasterHeight,
toasterHeight = _ref$toasterHeight === void 0 ? "169px" : _ref$toasterHeight,
_ref$listHeight = _ref.listHeight,
listHeight = _ref$listHeight === void 0 ? "569px" : _ref$listHeight,
_ref$hoverDelay = _ref.hoverDelay,
hoverDelay = _ref$hoverDelay === void 0 ? 500 : _ref$hoverDelay,
_ref$listMode = _ref.listMode,
listMode = _ref$listMode === void 0 ? false : _ref$listMode,
onRestore = _ref.onRestore,
items = _ref.items;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isExpanded = _useState2[0],
setIsExpanded = _useState2[1];
var _useState3 = useState(null),
_useState4 = _slicedToArray(_useState3, 2),
hoveredItem = _useState4[0],
setHoveredItem = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
isListMode = _useState6[0],
setIsListMode = _useState6[1];
var handleMouseLeave = function handleMouseLeave() {
setIsListMode(false);
};
var toasterRef = HUDUniversalHUDUtilityManager.CheckMouseLeftComponentRef(handleMouseLeave);
var handleRestoreClick = function handleRestoreClick(windowId) {
onRestore(windowId);
if (!listMode) {
setIsExpanded(false);
}
return;
};
var handleMouseEnterItem = function handleMouseEnterItem(itemId, index) {
setHoveredItem(itemId);
if (index === 0) {
setIsListMode(true);
}
return;
};
var handleMouseLeaveItem = function handleMouseLeaveItem() {
setHoveredItem(null);
return;
};
useEffect(function () {
if (toasterRef.current) {
var timer;
var handleMouseEnterFirstItem = function handleMouseEnterFirstItem() {
if (!listMode) {
timer = setTimeout(function () {
setIsExpanded(true);
}, hoverDelay);
setTimeout(function () {
setIsListMode(true);
}, hoverDelay);
}
};
var handleMouseLeaveToaster = function handleMouseLeaveToaster(e) {
if (!toasterRef.current.contains(e.relatedTarget)) {
clearTimeout(timer);
setIsExpanded(false);
setIsListMode(false);
}
};
var toasterElement = toasterRef.current;
toasterElement.addEventListener("mouseleave", handleMouseLeaveToaster);
return function () {
toasterElement.removeEventListener("mouseleave", handleMouseLeaveToaster);
};
}
}, [hoverDelay, listMode]);
if (items.length === 0) return null;
return /*#__PURE__*/React.createElement("div", _extends({
ref: toasterRef,
id: "hud-toaster",
className: "hud-scroller",
style: _objectSpread({
position: "fixed",
display: "flex",
flexDirection: "column-reverse",
alignItems: "flex-end",
msOverflowStyle: "none",
scrollbarWidth: "none",
overflowY: isListMode ? "auto" : undefined,
perspective: "1000px",
height: isListMode && items.length <= 4 && items.length > 0 ? "".concat(items.length * 140, "px") : isListMode && items.length > 4 ? listHeight : toasterHeight,
width: "269px",
zIndex: 1000,
paddingRight: "27px",
paddingLeft: "5px",
bottom: 40,
right: 40
}, containerConfigurationSettings)
}, listConfiguration), /*#__PURE__*/React.createElement(AnimatePresence, null, items.map(function (item, index) {
return /*#__PURE__*/React.createElement(motion.div, {
key: item.id,
initial: {
opacity: 0,
y: 0
},
animate: {
opacity: 1,
scale: hoveredItem === item.id ? 1.069 : 1,
zIndex: hoveredItem === item.id ? items.length + 1 : items.length - index,
y: !isListMode && hoveredItem === item.id && index !== 0 ? -index * 27 : isListMode ? -index * 140 : -index * 8.269,
x: hoveredItem === item.id && index === 0 ? -15 : hoveredItem === item.id && index !== 0 ? 27 : 0
},
exit: {
opacity: 0,
y: 50
},
transition: {
duration: 0.469,
ease: "easeInOut"
},
style: _objectSpread({
position: "absolute",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
overflow: "hidden",
cursor: "pointer",
transformOrigin: "bottom center",
textAlign: "center",
borderRadius: "8px",
border: "1px solid rgba(255, 255, 255, 0.2)",
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.5)",
backgroundColor: "rgba(43, 46, 54, 0.95)",
height: "127px",
width: "227px",
padding: "3.69px",
bottom: 0,
right: 0,
left: 30
}, itemConfigurationSettings),
onMouseLeave: handleMouseLeaveItem,
onMouseEnter: function onMouseEnter() {
return handleMouseEnterItem(item.id, index);
},
onClick: function onClick(e) {
e.stopPropagation();
handleRestoreClick(item.id);
}
}, /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative",
display: "flex",
overflow: "hidden",
borderRadius: "8px",
backgroundColor: "rgba(255, 255, 255, 0.1)",
padding: "3.69px"
}, contentConfigurationSettings)
}, /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative",
display: "flex",
overflow: "hidden",
borderRadius: "8px",
backgroundColor: "rgba(255, 255, 255, 0.1)",
padding: "3.69px"
}, contentConfigurationSettings)
}, typeof item.content === "string" ? /*#__PURE__*/React.createElement("div", {
style: {
height: "100%",
width: "100%"
},
dangerouslySetInnerHTML: {
__html: item.content
}
}) : /*#__PURE__*/React.createElement("div", {
style: {
height: "100%",
width: "100%"
}
}, item.content))));
})));
};
export default HUDToaster;