@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
259 lines • 13.5 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 = ["notificationMessageLabelConfigurationSettings", "notificationCloseButtonConfigurationSettings", "notificationPositionsConfigurationSettings", "notificationBackdropConfigurationSettings", "notificationBaseConfigurationSettings", "iconConfigurationSettings", "initialAnimationStateConfiguration", "animationStateConfiguration", "exitAnimationStateConfiguration", "notificationDurationBarColor", "notificationDurationPercentageLabelConfigurationSettings", "notificationDurationBarBackgroundConfigurationSettings", "notificationDurationBarContainerConfigurationSettings", "notificationDurationBarConfigurationSettings", "displayPercentageWithinNotificationDurationBar", "displayNotificationDuration", "displayPercentage", "motionDirection", "position", "iconColor", "iconName", "duration", "type", "onClose", "soundUrl", "enableBlur", "message"];
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";
import { motion, AnimatePresence } from "framer-motion";
import HUDProgressBar from "./HUDProgressBar.js";
import HUDIcon from "./HUDIcon.js";
function HUDNotification(hudNotificationConfigurationSettings) {
var _hudNotificationConfi = hudNotificationConfigurationSettings.notificationMessageLabelConfigurationSettings,
notificationMessageLabelConfigurationSettings = _hudNotificationConfi === void 0 ? {} : _hudNotificationConfi,
_hudNotificationConfi2 = hudNotificationConfigurationSettings.notificationCloseButtonConfigurationSettings,
notificationCloseButtonConfigurationSettings = _hudNotificationConfi2 === void 0 ? {} : _hudNotificationConfi2,
_hudNotificationConfi3 = hudNotificationConfigurationSettings.notificationPositionsConfigurationSettings,
notificationPositionsConfigurationSettings = _hudNotificationConfi3 === void 0 ? {} : _hudNotificationConfi3,
_hudNotificationConfi4 = hudNotificationConfigurationSettings.notificationBackdropConfigurationSettings,
notificationBackdropConfigurationSettings = _hudNotificationConfi4 === void 0 ? {} : _hudNotificationConfi4,
_hudNotificationConfi5 = hudNotificationConfigurationSettings.notificationBaseConfigurationSettings,
notificationBaseConfigurationSettings = _hudNotificationConfi5 === void 0 ? {} : _hudNotificationConfi5,
_hudNotificationConfi6 = hudNotificationConfigurationSettings.iconConfigurationSettings,
iconConfigurationSettings = _hudNotificationConfi6 === void 0 ? {} : _hudNotificationConfi6,
_hudNotificationConfi7 = hudNotificationConfigurationSettings.initialAnimationStateConfiguration,
initialAnimationStateConfiguration = _hudNotificationConfi7 === void 0 ? {
opacity: 0
} : _hudNotificationConfi7,
_hudNotificationConfi8 = hudNotificationConfigurationSettings.animationStateConfiguration,
animationStateConfiguration = _hudNotificationConfi8 === void 0 ? {
opacity: 1,
transition: {
type: "spring",
stiffness: 260,
damping: 20
}
} : _hudNotificationConfi8,
_hudNotificationConfi9 = hudNotificationConfigurationSettings.exitAnimationStateConfiguration,
exitAnimationStateConfiguration = _hudNotificationConfi9 === void 0 ? {
opacity: 0,
transition: {
duration: 0.5
}
} : _hudNotificationConfi9,
_hudNotificationConfi10 = hudNotificationConfigurationSettings.notificationDurationBarColor,
notificationDurationBarColor = _hudNotificationConfi10 === void 0 ? "rgba(147.69, 147.69, 169.69, 1)" : _hudNotificationConfi10,
_hudNotificationConfi11 = hudNotificationConfigurationSettings.notificationDurationPercentageLabelConfigurationSettings,
notificationDurationPercentageLabelConfigurationSettings = _hudNotificationConfi11 === void 0 ? {} : _hudNotificationConfi11,
_hudNotificationConfi12 = hudNotificationConfigurationSettings.notificationDurationBarBackgroundConfigurationSettings,
notificationDurationBarBackgroundConfigurationSettings = _hudNotificationConfi12 === void 0 ? {} : _hudNotificationConfi12,
_hudNotificationConfi13 = hudNotificationConfigurationSettings.notificationDurationBarContainerConfigurationSettings,
notificationDurationBarContainerConfigurationSettings = _hudNotificationConfi13 === void 0 ? {} : _hudNotificationConfi13,
_hudNotificationConfi14 = hudNotificationConfigurationSettings.notificationDurationBarConfigurationSettings,
notificationDurationBarConfigurationSettings = _hudNotificationConfi14 === void 0 ? {} : _hudNotificationConfi14,
_hudNotificationConfi15 = hudNotificationConfigurationSettings.displayPercentageWithinNotificationDurationBar,
displayPercentageWithinNotificationDurationBar = _hudNotificationConfi15 === void 0 ? false : _hudNotificationConfi15,
_hudNotificationConfi16 = hudNotificationConfigurationSettings.displayNotificationDuration,
displayNotificationDuration = _hudNotificationConfi16 === void 0 ? false : _hudNotificationConfi16,
_hudNotificationConfi17 = hudNotificationConfigurationSettings.displayPercentage,
displayPercentage = _hudNotificationConfi17 === void 0 ? false : _hudNotificationConfi17,
_hudNotificationConfi18 = hudNotificationConfigurationSettings.motionDirection,
motionDirection = _hudNotificationConfi18 === void 0 ? "vertical" : _hudNotificationConfi18,
_hudNotificationConfi19 = hudNotificationConfigurationSettings.position,
position = _hudNotificationConfi19 === void 0 ? "top" : _hudNotificationConfi19,
_hudNotificationConfi20 = hudNotificationConfigurationSettings.iconColor,
iconColor = _hudNotificationConfi20 === void 0 ? "" : _hudNotificationConfi20,
_hudNotificationConfi21 = hudNotificationConfigurationSettings.iconName,
iconName = _hudNotificationConfi21 === void 0 ? "fa-info-circle" : _hudNotificationConfi21,
_hudNotificationConfi22 = hudNotificationConfigurationSettings.duration,
duration = _hudNotificationConfi22 === void 0 ? 3000 : _hudNotificationConfi22,
_hudNotificationConfi23 = hudNotificationConfigurationSettings.type,
type = _hudNotificationConfi23 === void 0 ? "info" : _hudNotificationConfi23,
onClose = hudNotificationConfigurationSettings.onClose,
soundUrl = hudNotificationConfigurationSettings.soundUrl,
_hudNotificationConfi24 = hudNotificationConfigurationSettings.enableBlur,
enableBlur = _hudNotificationConfi24 === void 0 ? false : _hudNotificationConfi24,
message = hudNotificationConfigurationSettings.message,
rest = _objectWithoutProperties(hudNotificationConfigurationSettings, _excluded);
var _useState = useState(100),
_useState2 = _slicedToArray(_useState, 2),
durationRemaining = _useState2[0],
setDurationRemaining = _useState2[1];
var _useState3 = useState(true),
_useState4 = _slicedToArray(_useState3, 2),
visible = _useState4[0],
setVisible = _useState4[1];
var positionStyles = _objectSpread({
top: {
top: "7.69%",
left: "50%",
transform: "translateX(-50%)"
},
bottom: {
bottom: "7.69%",
right: null,
left: "50%",
top: null,
transform: "translateX(-50%)"
},
"top-right": {
top: "7.69%",
right: "3.69%",
transform: "translateX(0%)"
},
"bottom-right": {
bottom: "7.69%",
right: "3.69%",
left: null,
top: null,
transform: "translateX(0%)"
},
"bottom-left": {
bottom: "7.69%",
right: null,
left: "3.69%",
top: null,
transform: "translateX(0%)"
}
}, notificationPositionsConfigurationSettings);
var animationConfig = {
vertical: {
initial: _objectSpread(_objectSpread({}, initialAnimationStateConfiguration), {}, {
y: position.includes("top") ? "-100%" : "100%"
}),
animate: animationStateConfiguration,
exit: _objectSpread(_objectSpread({}, exitAnimationStateConfiguration), {}, {
y: position.includes("top") ? "-100%" : "100%"
})
},
horizontal: {
initial: _objectSpread(_objectSpread({}, initialAnimationStateConfiguration), {}, {
x: position.includes("right") ? "100%" : "-100%"
}),
animate: _objectSpread(_objectSpread({}, animationStateConfiguration), {}, {
x: "0%"
}),
exit: _objectSpread(_objectSpread({}, exitAnimationStateConfiguration), {}, {
x: position.includes("right") ? "100%" : "-100%"
})
}
};
var styles = {
base: _objectSpread(_objectSpread({
position: "fixed",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "space-between",
transform: "translateX(-50%)",
borderRadius: "5px",
fontWeight: "bold",
background: type === "info" ? "#d9edf7" : "#f2dede",
color: type === "info" ? "#31708f" : "#a94442",
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
minWidth: "300px",
width: "auto",
zIndex: 1000,
top: "7.69%",
right: "3.69%",
padding: "10px 20px",
marginBottom: "10px"
}, positionStyles[position]), notificationBaseConfigurationSettings),
backdrop: _objectSpread({
position: "fixed",
backgroundColor: "rgba(0,0,0,0.3)",
backdropFilter: enableBlur ? "blur(5px)" : "none",
zIndex: 999,
top: 0,
left: 0,
right: 0,
bottom: 0
}, notificationBackdropConfigurationSettings),
closeBtn: _objectSpread({
border: "none",
background: "transparent",
fontSize: "16px",
cursor: "pointer",
marginLeft: "20px"
}, notificationCloseButtonConfigurationSettings)
};
useEffect(function () {
if (soundUrl) {
var audio = new Audio(soundUrl);
audio.play();
}
var startTime = Date.now();
var durationInterval = setInterval(function () {
var elapsed = Date.now() - startTime;
var updatedDuration = Math.max(0, 100 - elapsed / duration * 100);
setDurationRemaining(updatedDuration);
if (updatedDuration === 0) {
clearInterval(durationInterval);
}
}, 100);
var notificationTimer = setTimeout(function () {
if (onClose) {
onClose();
}
setVisible(false);
}, duration + 100);
return function () {
clearTimeout(notificationTimer);
clearInterval(durationInterval);
};
}, [duration, soundUrl]);
return /*#__PURE__*/React.createElement(AnimatePresence, null, visible && /*#__PURE__*/React.createElement(React.Fragment, null, enableBlur && /*#__PURE__*/React.createElement("div", {
style: styles.backdrop
}), /*#__PURE__*/React.createElement(motion.div, {
style: styles.base,
variants: animationConfig[motionDirection],
initial: "initial",
animate: "animate",
exit: "exit"
}, /*#__PURE__*/React.createElement("div", {
style: {
display: "flex",
alignItems: "center",
justifyContent: "space-between"
}
}, iconName !== "" ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(HUDIcon, {
iconConfigurationSettings: _objectSpread({
marginRight: "0.69rem"
}, iconConfigurationSettings),
color: iconColor,
name: iconName
})) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement("span", {
style: notificationMessageLabelConfigurationSettings
}, message), /*#__PURE__*/React.createElement(HUDIcon, {
name: "fa-close",
iconConfigurationSettings: styles.closeBtn,
onClick: function onClick() {
if (onClose) {
onClose();
}
setVisible(false);
}
})), displayNotificationDuration ? /*#__PURE__*/React.createElement("div", {
style: {
position: "relative",
display: "flex",
alignItems: "left",
height: "auto",
width: "calc(100%)"
}
}, /*#__PURE__*/React.createElement(HUDProgressBar, {
progressPercentageLabelConfigurationSettings: notificationDurationPercentageLabelConfigurationSettings,
progressBarBackgroundConfigurationSettings: _objectSpread({
marginBottom: "0.269rem"
}, notificationDurationBarBackgroundConfigurationSettings),
progressBarContainerConfigurationSettings: notificationDurationBarContainerConfigurationSettings,
progressBarConfigurationSettings: _objectSpread({
backgroundColor: notificationDurationBarColor
}, notificationDurationBarConfigurationSettings),
displayPercentageWithinBar: displayPercentageWithinNotificationDurationBar,
displayPercentage: displayPercentage,
currentPercentage: durationRemaining
})) : /*#__PURE__*/React.createElement(React.Fragment, null))));
}
;
export default HUDNotification;