@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
414 lines (412 loc) • 16.6 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, useRef, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Rnd } from "react-rnd";
import hudEventManager from "../HUDManagers/HUDEventManager.js";
import { useHUDWindow } from "./HUDWindowProvider.js";
import HUDIcon from "./HUDIcon.js";
var defaultStyles = {
container: {
overflow: "hidden",
transition: "scale 0.3s ease, opacity 0.99s ease",
borderRadius: "16px",
border: "2px solid rgba(255, 255, 255, 0.2)",
boxShadow: "0 12px 24px rgba(0, 0, 0, 0.9)",
backgroundColor: "#1E2025"
},
header: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
cursor: "move",
borderBottom: "1px solid rgba(255, 255, 255, 0.3)",
backgroundColor: "#2B2E36",
color: "#fff",
padding: "15px 25px"
},
viewport: {
flex: 1,
overflowY: "auto",
padding: "20px"
},
footer: {
position: "absolute",
borderTop: "1px solid rgba(255, 255, 255, 0.3)",
backgroundColor: "#2B2E36",
color: "#fff",
width: "100%",
padding: "15px 25px",
bottom: 0
},
icon: {
cursor: "pointer",
transition: "transform 0.2s ease-in-out, color 0.2s ease-in-out",
fontSize: "20px"
},
iconHover: {
transform: "scale(1.1)"
}
};
function HUDWindow(_ref) {
var _ref$maximizeButtonCo = _ref.maximizeButtonConfigurationSettings,
maximizeButtonConfigurationSettings = _ref$maximizeButtonCo === void 0 ? {} : _ref$maximizeButtonCo,
_ref$minimizeButtonCo = _ref.minimizeButtonConfigurationSettings,
minimizeButtonConfigurationSettings = _ref$minimizeButtonCo === void 0 ? {} : _ref$minimizeButtonCo,
_ref$closeButtonConfi = _ref.closeButtonConfigurationSettings,
closeButtonConfigurationSettings = _ref$closeButtonConfi === void 0 ? {} : _ref$closeButtonConfi,
_ref$containerConfigu = _ref.containerConfigurationSettings,
containerConfigurationSettings = _ref$containerConfigu === void 0 ? {} : _ref$containerConfigu,
_ref$viewportConfigur = _ref.viewportConfigurationSettings,
viewportConfigurationSettings = _ref$viewportConfigur === void 0 ? {} : _ref$viewportConfigur,
_ref$contentConfigura = _ref.contentConfigurationSettings,
contentConfigurationSettings = _ref$contentConfigura === void 0 ? {} : _ref$contentConfigura,
_ref$headerConfigurat = _ref.headerConfigurationSettings,
headerConfigurationSettings = _ref$headerConfigurat === void 0 ? {} : _ref$headerConfigurat,
_ref$footerConfigurat = _ref.footerConfigurationSettings,
footerConfigurationSettings = _ref$footerConfigurat === void 0 ? {} : _ref$footerConfigurat,
_ref$minimizeAnimatio = _ref.minimizeAnimation,
minimizeAnimation = _ref$minimizeAnimatio === void 0 ? {
opacity: 0,
scale: 0.8
} : _ref$minimizeAnimatio,
_ref$closeAnimation = _ref.closeAnimation,
closeAnimation = _ref$closeAnimation === void 0 ? {
opacity: 0,
scale: 0.8
} : _ref$closeAnimation,
_ref$maximizeAnimatio = _ref.maximizeAnimation,
maximizeAnimation = _ref$maximizeAnimatio === void 0 ? {
opacity: 1,
scale: 1
} : _ref$maximizeAnimatio,
_ref$animationDuratio = _ref.animationDuration,
animationDuration = _ref$animationDuratio === void 0 ? 0.3 : _ref$animationDuratio,
_ref$initialHeight = _ref.initialHeight,
initialHeight = _ref$initialHeight === void 0 ? 699 : _ref$initialHeight,
_ref$initialWidth = _ref.initialWidth,
initialWidth = _ref$initialWidth === void 0 ? 869 : _ref$initialWidth,
_ref$minHeight = _ref.minHeight,
minHeight = _ref$minHeight === void 0 ? 169 : _ref$minHeight,
_ref$minWidth = _ref.minWidth,
minWidth = _ref$minWidth === void 0 ? 269 : _ref$minWidth,
_ref$zIndex = _ref.zIndex,
zIndex = _ref$zIndex === void 0 ? 999 : _ref$zIndex,
_ref$maximizeButtonIc = _ref.maximizeButtonIconMaximized,
maximizeButtonIconMaximized = _ref$maximizeButtonIc === void 0 ? "window-restore" : _ref$maximizeButtonIc,
_ref$maximizeButtonIc2 = _ref.maximizeButtonIcon,
maximizeButtonIcon = _ref$maximizeButtonIc2 === void 0 ? "window-maximize" : _ref$maximizeButtonIc2,
maximizeButtonIconMaximizedSVG = _ref.maximizeButtonIconMaximizedSVG,
maximizeButtonIconSVG = _ref.maximizeButtonIconSVG,
_ref$maximizeButtonMa = _ref.maximizeButtonMaximizedIconColor,
maximizeButtonMaximizedIconColor = _ref$maximizeButtonMa === void 0 ? "rgba(237, 237, 237, 0.69)" : _ref$maximizeButtonMa,
_ref$maximizeButtonIc3 = _ref.maximizeButtonIconColor,
maximizeButtonIconColor = _ref$maximizeButtonIc3 === void 0 ? "rgba(237, 237, 237, 0.69)" : _ref$maximizeButtonIc3,
_ref$minimizeButtonIc = _ref.minimizeButtonIcon,
minimizeButtonIcon = _ref$minimizeButtonIc === void 0 ? "window-minimize" : _ref$minimizeButtonIc,
_ref$minimizeButtonIc2 = _ref.minimizeButtonIconColor,
minimizeButtonIconColor = _ref$minimizeButtonIc2 === void 0 ? "rgba(237, 237, 237, 0.69)" : _ref$minimizeButtonIc2,
_ref$closeButtonIcon = _ref.closeButtonIcon,
closeButtonIcon = _ref$closeButtonIcon === void 0 ? "close" : _ref$closeButtonIcon,
closeButtonIconSVG = _ref.closeButtonIconSVG,
_ref$closeButtonIconC = _ref.closeButtonIconColor,
closeButtonIconColor = _ref$closeButtonIconC === void 0 ? "rgba(237, 237, 237, 0.69)" : _ref$closeButtonIconC,
_ref$maximizeButtonHo = _ref.maximizeButtonHoverColor,
maximizeButtonHoverColor = _ref$maximizeButtonHo === void 0 ? "rgba(255, 255, 255, 0.869)" : _ref$maximizeButtonHo,
_ref$minimizeButtonHo = _ref.minimizeButtonHoverColor,
minimizeButtonHoverColor = _ref$minimizeButtonHo === void 0 ? "rgba(255, 255, 255, 0.869)" : _ref$minimizeButtonHo,
_ref$closeButtonHover = _ref.closeButtonHoverColor,
closeButtonHoverColor = _ref$closeButtonHover === void 0 ? "rgba(255, 255, 255, 0.869)" : _ref$closeButtonHover,
_ref$isFooterVisible = _ref.isFooterVisible,
isFooterVisible = _ref$isFooterVisible === void 0 ? true : _ref$isFooterVisible,
_ref$isIndependent = _ref.isIndependent,
isIndependent = _ref$isIndependent === void 0 ? false : _ref$isIndependent,
minimizedContent = _ref.minimizedContent,
headerContent = _ref.headerContent,
footerContent = _ref.footerContent,
children = _ref.children,
onClose = _ref.onClose,
onFocus = _ref.onFocus,
id = _ref.id;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isMaximized = _useState2[0],
setIsMaximized = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
isMinimized = _useState4[0],
setIsMinimized = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
windowClosing = _useState6[0],
setWindowClosing = _useState6[1];
var _useState7 = useState(false),
_useState8 = _slicedToArray(_useState7, 2),
windowClosed = _useState8[0],
setWindowClosed = _useState8[1];
var _useState9 = useState({
width: initialWidth,
height: initialHeight
}),
_useState10 = _slicedToArray(_useState9, 2),
windowSize = _useState10[0],
setWindowSize = _useState10[1];
var _useState11 = useState({
x: 100,
y: 100
}),
_useState12 = _slicedToArray(_useState11, 2),
position = _useState12[0],
setPosition = _useState12[1];
var _useState13 = useState({
width: initialWidth,
height: initialHeight
}),
_useState14 = _slicedToArray(_useState13, 2),
savedSize = _useState14[0],
setSavedSize = _useState14[1];
var _useState15 = useState({
x: 100,
y: 100
}),
_useState16 = _slicedToArray(_useState15, 2),
savedPosition = _useState16[0],
setSavedPosition = _useState16[1];
var _useState17 = useState("default"),
_useState18 = _slicedToArray(_useState17, 2),
animationType = _useState18[0],
setAnimationType = _useState18[1];
var _useState19 = useState(zIndex),
_useState20 = _slicedToArray(_useState19, 2),
localZIndex = _useState20[0],
setLocalZIndex = _useState20[1];
var _useState21 = useState(false),
_useState22 = _slicedToArray(_useState21, 2),
minimizeHover = _useState22[0],
setMinimizeHover = _useState22[1];
var _useState23 = useState(false),
_useState24 = _slicedToArray(_useState23, 2),
maximizeHover = _useState24[0],
setMaximizeHover = _useState24[1];
var _useState25 = useState(false),
_useState26 = _slicedToArray(_useState25, 2),
closeHover = _useState26[0],
setCloseHover = _useState26[1];
var _useHUDWindow = useHUDWindow(),
handleWindowRegister = _useHUDWindow.handleWindowRegister,
handleWindowUnregister = _useHUDWindow.handleWindowUnregister,
minimizeWindow = _useHUDWindow.minimizeWindow,
bringToFront = _useHUDWindow.bringToFront;
var isRestoring = useRef(false);
var windowContentRef = useRef();
var windowRef = useRef();
var handleMaximize = function handleMaximize() {
setMaximizeHover(false);
if (isMaximized) {
setAnimationType("maximize");
setWindowSize(savedSize);
setPosition(savedPosition);
} else {
setSavedSize(windowSize);
setSavedPosition(position);
setAnimationType("maximize");
setWindowSize({
width: window.innerWidth,
height: window.innerHeight
});
setPosition({
x: 0,
y: 0
});
}
setIsMaximized(!isMaximized);
return;
};
var handleMinimize = function handleMinimize() {
setMinimizeHover(false);
if (windowRef.current) {
var windowContent = windowContentRef.current.innerHTML;
minimizeWindow(id, minimizedContent ? minimizedContent : windowContent);
}
setAnimationType("minimize");
setIsMinimized(true);
return;
};
var handleClose = function handleClose() {
setCloseHover(false);
setAnimationType("close");
setWindowClosing(true);
setTimeout(function () {
if (onClose) onClose(id);
setWindowClosing(false);
setWindowClosed(true);
return;
}, animationDuration * 1000);
return;
};
var handleRestore = function handleRestore() {
if (!isRestoring.current) {
isRestoring.current = true; // Prevent multiple restores
setAnimationType("maximize");
setIsMinimized(false);
hudEventManager.emit("windowRestored", id); // Emit event
setTimeout(function () {
return isRestoring.current = false;
}, animationDuration * 1000); // Reset after animation
}
return;
};
var getAnimation = function getAnimation() {
switch (animationType) {
case "minimize":
return minimizeAnimation;
case "close":
return closeAnimation;
case "maximize":
return maximizeAnimation;
default:
return {
opacity: 1,
scale: 1
};
}
};
useEffect(function () {
var handleRestoreEvent = function handleRestoreEvent(windowId) {
if (windowId === id && isMinimized) {
handleRestore();
}
return;
};
hudEventManager.on("windowRestored", handleRestoreEvent);
return function () {
hudEventManager.off("windowRestored", handleRestoreEvent);
return;
};
}, [id, isMinimized]);
useEffect(function () {
handleWindowRegister(id, windowContentRef.current);
return function () {
handleWindowUnregister(id);
return;
};
}, [id, handleWindowRegister, handleWindowUnregister]);
if (windowClosed) return null;
if (isMinimized) return null;
return /*#__PURE__*/React.createElement(Rnd, {
ref: windowRef,
style: _objectSpread(_objectSpread({}, defaultStyles.container), {}, {
opacity: windowClosing ? 0 : 1,
scale: windowClosing ? 0 : 1,
zIndex: localZIndex
}, containerConfigurationSettings),
minHeight: minHeight,
minWidth: minWidth,
size: windowSize,
position: position,
bounds: "window",
dragHandleClassName: "hud-window-header",
enableResizing: !isMaximized,
onDragStop: function onDragStop(e, d) {
return setPosition({
x: d.x,
y: d.y
});
},
onResizeStop: function onResizeStop(e, direction, ref, delta, position) {
setWindowSize({
width: ref.style.width,
height: ref.style.height
});
setPosition({
x: position.x,
y: position.y
});
return;
},
onMouseDown: function onMouseDown() {
bringToFront(id, setLocalZIndex);
return;
}
}, /*#__PURE__*/React.createElement(AnimatePresence, null, /*#__PURE__*/React.createElement(motion.div, {
ref: windowContentRef,
key: id,
initial: {
opacity: 0,
scale: 0.8
},
animate: getAnimation(),
exit: {
opacity: 0,
scale: 0.8
},
transition: {
duration: animationDuration
},
style: _objectSpread({
height: "100%",
width: "100%"
}, contentConfigurationSettings)
}, /*#__PURE__*/React.createElement("div", {
className: "hud-window-header",
style: _objectSpread(_objectSpread({}, defaultStyles.header), headerConfigurationSettings)
}, /*#__PURE__*/React.createElement("div", {
style: {
fontWeight: "bold",
fontSize: "16px"
}
}, headerContent), /*#__PURE__*/React.createElement("div", {
style: {
display: "flex",
gap: "15px"
}
}, /*#__PURE__*/React.createElement(HUDIcon, {
iconConfigurationSettings: _objectSpread(_objectSpread(_objectSpread({}, defaultStyles.icon), {}, {
fontSize: "20px"
}, minimizeButtonConfigurationSettings), minimizeHover ? defaultStyles.iconHover : {}),
name: minimizeButtonIcon,
color: minimizeHover ? minimizeButtonHoverColor : minimizeButtonIconColor,
onMouseEnter: function onMouseEnter() {
return setMinimizeHover(true);
},
onMouseLeave: function onMouseLeave() {
return setMinimizeHover(false);
},
onClick: handleMinimize
}), /*#__PURE__*/React.createElement(HUDIcon, {
iconConfigurationSettings: _objectSpread(_objectSpread(_objectSpread({}, defaultStyles.icon), {}, {
fontSize: "20px"
}, maximizeButtonConfigurationSettings), maximizeHover ? defaultStyles.iconHover : {}),
name: isMaximized ? maximizeButtonIconMaximized : maximizeButtonIcon,
svg: isMaximized ? maximizeButtonIconMaximizedSVG : maximizeButtonIconSVG,
color: maximizeHover ? maximizeButtonHoverColor : isMaximized ? maximizeButtonMaximizedIconColor : maximizeButtonIconColor,
onMouseEnter: function onMouseEnter() {
return setMaximizeHover(true);
},
onMouseLeave: function onMouseLeave() {
return setMaximizeHover(false);
},
onClick: handleMaximize
}), /*#__PURE__*/React.createElement(HUDIcon, {
iconConfigurationSettings: _objectSpread(_objectSpread(_objectSpread({}, defaultStyles.icon), {}, {
fontSize: "20px"
}, closeButtonConfigurationSettings), closeHover ? defaultStyles.iconHover : {}),
name: closeButtonIcon,
svg: closeButtonIconSVG,
color: closeHover ? closeButtonHoverColor : closeButtonIconColor,
onMouseEnter: function onMouseEnter() {
return setCloseHover(true);
},
onMouseLeave: function onMouseLeave() {
return setCloseHover(false);
},
onClick: handleClose
}))), /*#__PURE__*/React.createElement("div", {
style: _objectSpread(_objectSpread({}, defaultStyles.viewport), viewportConfigurationSettings)
}, children), isFooterVisible && /*#__PURE__*/React.createElement("div", {
style: _objectSpread(_objectSpread({}, defaultStyles.footer), footerConfigurationSettings)
}, footerContent))));
}
export default HUDWindow;