@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
158 lines • 8.26 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["closeButtonConfigurationSettings", "animationConfigurationSettings", "backDropConfigurationSettings", "headerConfigurationSettings", "modalConfigurationSettings", "contentConfigurationSettings", "footerConfigurationSettings", "closeButtonHoverColor", "closeButtonColor", "closeOnBackdropClick", "displayCloseButton", "position", "onClose", "open", "headerContent", "footerContent", "children"];
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 from "react";
import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import HUDIcon from "./HUDIcon.js";
var defaultStyles = {
backdrop: {
position: "fixed",
display: "flex",
justifyContent: "center",
alignItems: "center",
backgroundColor: "rgba(0, 0, 0, 0.569)",
backdropFilter: "blur(2px)",
zIndex: 1269,
bottom: 0,
right: 0,
left: 0,
top: 0
},
modal: {
position: "relative",
borderRadius: "1rem",
backgroundColor: "white",
height: "369px",
width: "500px",
padding: "20px",
zIndex: 1000,
margin: "auto"
},
header: {
display: "flex",
justifyContent: "flex-end"
},
closeButton: {
cursor: "pointer",
background: "none",
border: "none",
fontSize: "1.2rem"
},
content: {
position: "relative",
display: "flex",
overflowY: "auto",
flexDirection: "column",
marginTop: "20px"
},
footer: {
position: "relative",
display: "flex",
marginTop: "20px"
}
};
function HUDModal(hudModalConfigurationSettings) {
var _hudModalConfiguratio = hudModalConfigurationSettings.closeButtonConfigurationSettings,
closeButtonConfigurationSettings = _hudModalConfiguratio === void 0 ? {} : _hudModalConfiguratio,
_hudModalConfiguratio2 = hudModalConfigurationSettings.animationConfigurationSettings,
animationConfigurationSettings = _hudModalConfiguratio2 === void 0 ? {} : _hudModalConfiguratio2,
_hudModalConfiguratio3 = hudModalConfigurationSettings.backDropConfigurationSettings,
backDropConfigurationSettings = _hudModalConfiguratio3 === void 0 ? {} : _hudModalConfiguratio3,
_hudModalConfiguratio4 = hudModalConfigurationSettings.headerConfigurationSettings,
headerConfigurationSettings = _hudModalConfiguratio4 === void 0 ? {} : _hudModalConfiguratio4,
_hudModalConfiguratio5 = hudModalConfigurationSettings.modalConfigurationSettings,
modalConfigurationSettings = _hudModalConfiguratio5 === void 0 ? {} : _hudModalConfiguratio5,
_hudModalConfiguratio6 = hudModalConfigurationSettings.contentConfigurationSettings,
contentConfigurationSettings = _hudModalConfiguratio6 === void 0 ? {} : _hudModalConfiguratio6,
_hudModalConfiguratio7 = hudModalConfigurationSettings.footerConfigurationSettings,
footerConfigurationSettings = _hudModalConfiguratio7 === void 0 ? {} : _hudModalConfiguratio7,
_hudModalConfiguratio8 = hudModalConfigurationSettings.closeButtonHoverColor,
closeButtonHoverColor = _hudModalConfiguratio8 === void 0 ? "rgba(127, 127, 127, 1)" : _hudModalConfiguratio8,
_hudModalConfiguratio9 = hudModalConfigurationSettings.closeButtonColor,
closeButtonColor = _hudModalConfiguratio9 === void 0 ? "rgba(0, 0, 0, 1)" : _hudModalConfiguratio9,
_hudModalConfiguratio10 = hudModalConfigurationSettings.closeOnBackdropClick,
closeOnBackdropClick = _hudModalConfiguratio10 === void 0 ? true : _hudModalConfiguratio10,
_hudModalConfiguratio11 = hudModalConfigurationSettings.displayCloseButton,
displayCloseButton = _hudModalConfiguratio11 === void 0 ? true : _hudModalConfiguratio11,
_hudModalConfiguratio12 = hudModalConfigurationSettings.position,
position = _hudModalConfiguratio12 === void 0 ? "center" : _hudModalConfiguratio12,
onClose = hudModalConfigurationSettings.onClose,
_hudModalConfiguratio13 = hudModalConfigurationSettings.open,
open = _hudModalConfiguratio13 === void 0 ? false : _hudModalConfiguratio13,
headerContent = hudModalConfigurationSettings.headerContent,
footerContent = hudModalConfigurationSettings.footerContent,
children = hudModalConfigurationSettings.children,
rest = _objectWithoutProperties(hudModalConfigurationSettings, _excluded);
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
closeButtonHover = _useState2[0],
setCloseButtonHover = _useState2[1];
var modalVariants = {
hidden: _objectSpread({
opacity: 0,
scale: 0.469
}, animationConfigurationSettings === null || animationConfigurationSettings === void 0 ? void 0 : animationConfigurationSettings.hidden),
visible: _objectSpread({
opacity: 1,
scale: 1
}, animationConfigurationSettings === null || animationConfigurationSettings === void 0 ? void 0 : animationConfigurationSettings.visible)
};
var mergedConfigurationSettings = {
backdrop: _objectSpread(_objectSpread({}, defaultStyles.backdrop), backDropConfigurationSettings),
modal: _objectSpread(_objectSpread({}, defaultStyles.modal), modalConfigurationSettings),
header: _objectSpread(_objectSpread({}, defaultStyles.header), headerConfigurationSettings),
closeButton: _objectSpread(_objectSpread({}, defaultStyles.closeButton), closeButtonConfigurationSettings),
content: _objectSpread(_objectSpread({}, defaultStyles.content), contentConfigurationSettings),
footer: _objectSpread(_objectSpread({}, defaultStyles.footer), footerConfigurationSettings)
};
return /*#__PURE__*/React.createElement(AnimatePresence, null, open && /*#__PURE__*/React.createElement(motion.div, {
style: _objectSpread(_objectSpread({}, mergedConfigurationSettings.backdrop), {}, {
backgroundColor: open ? "rgba(0, 0, 0, 0.569)" : "rgba(0, 0, 0, 0)",
backdropFilter: open ? "blur(2px)" : "blur(0px)"
}),
initial: "hidden",
animate: "visible",
exit: "hidden",
variants: modalVariants,
onClick: closeOnBackdropClick ? onClose : undefined
}, /*#__PURE__*/React.createElement(motion.div, {
style: _objectSpread(_objectSpread({}, mergedConfigurationSettings.modal), {}, {
margin: position === "center" ? "auto" : "initial"
}),
variants: modalVariants,
onClick: function onClick(e) {
e.stopPropagation();
}
}, /*#__PURE__*/React.createElement("div", {
className: "invisa-scroller",
style: mergedConfigurationSettings.header
}, displayCloseButton ? /*#__PURE__*/React.createElement(HUDIcon, {
iconConfigurationSettings: _objectSpread({
transition: "scale 0.369s ease, color 0.369s ease",
scale: closeButtonHover ? "1.069" : "1"
}, mergedConfigurationSettings.closeButton),
color: closeButtonHover ? closeButtonHoverColor : closeButtonColor,
name: "fa-close",
onMouseLeave: function onMouseLeave() {
setCloseButtonHover(false);
return;
},
onMouseEnter: function onMouseEnter() {
setCloseButtonHover(true);
return;
},
onClick: onClose
}) : /*#__PURE__*/React.createElement(React.Fragment, null), headerContent), /*#__PURE__*/React.createElement("div", {
className: "invisa-scroller",
style: mergedConfigurationSettings.content
}, children), /*#__PURE__*/React.createElement("div", {
className: "invisa-scroller",
style: mergedConfigurationSettings.footer
}, footerContent))));
}
;
export default HUDModal;