@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDUtilityNotification.js

The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton

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, { useState, useEffect, useRef, useMemo } from "react";
import { motion, AnimatePresence } from "framer-motion";
import HUDScrollContainer from "./HUDScrollContainer.js";
import HUDProgressBar from "./HUDProgressBar.js";
import HUDLoading from "./HUDLoading.js";
import HUDModal from "./HUDModal.js";
import HUDIcon from "./HUDIcon.js";
var baseNotificationConfigurationSettings = {
  completionContainer: {
    position: "fixed",
    overflow: "hidden",
    transition: "all 0.3s ease",
    borderRadius: "8px",
    backgroundColor: "transparent",
    color: "#333333",
    maxHeight: "90%",
    maxWidth: "90%",
    height: "269px",
    width: "320px",
    zIndex: 1269,
    padding: "20px"
  },
  container: {
    position: "fixed",
    overflow: "hidden",
    transition: "all 0.3s ease",
    boxShadow: "0 2px 15px rgba(0, 0, 0, 0.1)",
    border: "1px solid #dddddd",
    borderRadius: "8px",
    backgroundColor: "#ffffff",
    color: "#333333",
    maxHeight: "90%",
    maxWidth: "90%",
    width: "320px",
    zIndex: 1269,
    padding: "20px"
  },
  backdrop: {
    position: "fixed",
    backgroundColor: "rgba(0, 0, 0, 0.3)",
    backdropFilter: "blur(5px)",
    zIndex: 1069,
    bottom: 0,
    right: 0,
    left: 0,
    top: 0
  },
  content: {
    position: "relative",
    display: "flex",
    justifyContent: "center",
    flexDirection: "column",
    width: "calc(100%)"
  },
  header: {
    position: "relative",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: "15px"
  },
  title: {
    flex: 1,
    textAlign: "center",
    fontSize: "18px",
    fontWeight: "600",
    color: "#333",
    margin: "0 10px"
  },
  closeButton: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    cursor: "pointer",
    transition: "all 0.269s ease",
    fontSize: "20px",
    border: "none",
    borderRadius: "50%",
    background: "none",
    color: "#606060",
    padding: "0"
  },
  notificationIcon: {
    display: "flex",
    height: "50px",
    width: "50px",
    margin: "0 auto 10px"
  },
  icon: {
    height: "24px",
    width: "24px"
  },
  message: {
    position: "relative",
    display: "flex",
    textAlign: "center",
    overflow: "auto",
    wordWrap: "break-word",
    lineHeight: "1.5069",
    fontSize: "16px",
    maxHeight: "83.969px",
    width: "calc(91.69%)",
    margin: "10px auto"
  },
  showMoreButton: {
    display: "block",
    cursor: "pointer",
    fontWeight: "bold",
    border: "none",
    borderRadius: "5px",
    backgroundColor: "#2196f3",
    color: "#fff",
    padding: "10px 20px",
    margin: "10px auto"
  },
  footer: {
    position: "relative",
    display: "flex",
    justifyContent: "center",
    textAlign: "center",
    fontSize: "12px",
    color: "#655777",
    width: "calc(91.69%)",
    paddingBottom: "5px",
    margin: "10px auto"
  },
  modal: {
    display: "flex",
    flexDirection: "column",
    overflowY: "auto",
    borderRadius: "8px",
    height: "15.69rem",
    width: "auto",
    marginTop: "0rem"
  }
};
var getPositionStyles = function getPositionStyles(position) {
  var positions = {
    "top-left": {
      top: "20px",
      left: "20px",
      right: "auto",
      bottom: "auto"
    },
    "top-center": {
      top: "20px",
      left: "50%",
      transform: "translateX(-50%)",
      right: "auto",
      bottom: "auto"
    },
    "top-right": {
      top: "20px",
      left: "auto",
      right: "20px",
      bottom: "auto"
    },
    "bottom-left": {
      top: "auto",
      left: "20px",
      right: "auto",
      bottom: "20px"
    },
    "bottom-center": {
      top: "auto",
      left: "50%",
      transform: "translateX(-50%)",
      right: "auto",
      bottom: "20px"
    },
    "bottom-right": {
      top: "auto",
      left: "auto",
      right: "20px",
      bottom: "20px"
    },
    "center-left": {
      top: "50%",
      left: "20px",
      transform: "translateY(-50%)",
      right: "auto",
      bottom: "auto"
    },
    "center-right": {
      top: "50%",
      left: "auto",
      right: "20px",
      transform: "translateY(-50%)",
      bottom: "auto"
    },
    "center": {
      top: "50%",
      left: "50%",
      transform: "translate(-50%, -50%)",
      right: "auto",
      bottom: "auto"
    }
  };
  return positions[position] || positions["bottom-right"];
};
function HUDUtilityNotification(hudUtilityNotificationConfigurationSettings) {
  var _hudUtilityNotificati = hudUtilityNotificationConfigurationSettings.notificationCompletionContainerConfigurationSettings,
    notificationCompletionContainerConfigurationSettings = _hudUtilityNotificati === void 0 ? {} : _hudUtilityNotificati,
    _hudUtilityNotificati2 = hudUtilityNotificationConfigurationSettings.notificationNotificationIconConfigurationSettings,
    notificationNotificationIconConfigurationSettings = _hudUtilityNotificati2 === void 0 ? {} : _hudUtilityNotificati2,
    _hudUtilityNotificati3 = hudUtilityNotificationConfigurationSettings.notificationCloseButtonHoverConfigurationSettings,
    notificationCloseButtonHoverConfigurationSettings = _hudUtilityNotificati3 === void 0 ? {} : _hudUtilityNotificati3,
    _hudUtilityNotificati4 = hudUtilityNotificationConfigurationSettings.notificationShowMoreButtonConfigurationSettings,
    notificationShowMoreButtonConfigurationSettings = _hudUtilityNotificati4 === void 0 ? {} : _hudUtilityNotificati4,
    _hudUtilityNotificati5 = hudUtilityNotificationConfigurationSettings.notificationProgressBarConfigurationSettings,
    notificationProgressBarConfigurationSettings = _hudUtilityNotificati5 === void 0 ? {} : _hudUtilityNotificati5,
    _hudUtilityNotificati6 = hudUtilityNotificationConfigurationSettings.notificationCloseButtonConfigurationSettings,
    notificationCloseButtonConfigurationSettings = _hudUtilityNotificati6 === void 0 ? {} : _hudUtilityNotificati6,
    _hudUtilityNotificati7 = hudUtilityNotificationConfigurationSettings.notificationContainerConfigurationSettings,
    notificationContainerConfigurationSettings = _hudUtilityNotificati7 === void 0 ? {} : _hudUtilityNotificati7,
    _hudUtilityNotificati8 = hudUtilityNotificationConfigurationSettings.notificationBackDropConfigurationSettings,
    notificationBackDropConfigurationSettings = _hudUtilityNotificati8 === void 0 ? {} : _hudUtilityNotificati8,
    _hudUtilityNotificati9 = hudUtilityNotificationConfigurationSettings.notificationContentConfigurationSettings,
    notificationContentConfigurationSettings = _hudUtilityNotificati9 === void 0 ? {} : _hudUtilityNotificati9,
    _hudUtilityNotificati10 = hudUtilityNotificationConfigurationSettings.notificationMessageConfigurationSettings,
    notificationMessageConfigurationSettings = _hudUtilityNotificati10 === void 0 ? {} : _hudUtilityNotificati10,
    _hudUtilityNotificati11 = hudUtilityNotificationConfigurationSettings.notificationHeaderConfigurationSettings,
    notificationHeaderConfigurationSettings = _hudUtilityNotificati11 === void 0 ? {} : _hudUtilityNotificati11,
    _hudUtilityNotificati12 = hudUtilityNotificationConfigurationSettings.notificationFooterConfigurationSettings,
    notificationFooterConfigurationSettings = _hudUtilityNotificati12 === void 0 ? {} : _hudUtilityNotificati12,
    _hudUtilityNotificati13 = hudUtilityNotificationConfigurationSettings.notificationTitleConfigurationSettings,
    notificationTitleConfigurationSettings = _hudUtilityNotificati13 === void 0 ? {} : _hudUtilityNotificati13,
    _hudUtilityNotificati14 = hudUtilityNotificationConfigurationSettings.notificationModalConfigurationSettings,
    notificationModalConfigurationSettings = _hudUtilityNotificati14 === void 0 ? {} : _hudUtilityNotificati14,
    _hudUtilityNotificati15 = hudUtilityNotificationConfigurationSettings.notificationIconConfigurationSettings,
    notificationIconConfigurationSettings = _hudUtilityNotificati15 === void 0 ? {} : _hudUtilityNotificati15,
    _hudUtilityNotificati16 = hudUtilityNotificationConfigurationSettings.notificationMessageContainerConfigurations,
    notificationMessageContainerConfigurations = _hudUtilityNotificati16 === void 0 ? {} : _hudUtilityNotificati16,
    _hudUtilityNotificati17 = hudUtilityNotificationConfigurationSettings.notificationModalContainerConfigurations,
    notificationModalContainerConfigurations = _hudUtilityNotificati17 === void 0 ? {} : _hudUtilityNotificati17,
    _hudUtilityNotificati18 = hudUtilityNotificationConfigurationSettings.notificationProgressBarConfigurations,
    notificationProgressBarConfigurations = _hudUtilityNotificati18 === void 0 ? {} : _hudUtilityNotificati18,
    _hudUtilityNotificati19 = hudUtilityNotificationConfigurationSettings.notificationCompletionConfigurations,
    notificationCompletionConfigurations = _hudUtilityNotificati19 === void 0 ? {} : _hudUtilityNotificati19,
    _hudUtilityNotificati20 = hudUtilityNotificationConfigurationSettings.notificationFooterConfigurations,
    notificationFooterConfigurations = _hudUtilityNotificati20 === void 0 ? {} : _hudUtilityNotificati20,
    _hudUtilityNotificati21 = hudUtilityNotificationConfigurationSettings.notificationModalConfigurations,
    notificationModalConfigurations = _hudUtilityNotificati21 === void 0 ? {} : _hudUtilityNotificati21,
    _hudUtilityNotificati22 = hudUtilityNotificationConfigurationSettings.notificationCompletionAnimationContent,
    notificationCompletionAnimationContent = _hudUtilityNotificati22 === void 0 ? null : _hudUtilityNotificati22,
    _hudUtilityNotificati23 = hudUtilityNotificationConfigurationSettings.notificationModalBottomContent,
    notificationModalBottomContent = _hudUtilityNotificati23 === void 0 ? null : _hudUtilityNotificati23,
    _hudUtilityNotificati24 = hudUtilityNotificationConfigurationSettings.notificationModalCenterContent,
    notificationModalCenterContent = _hudUtilityNotificati24 === void 0 ? null : _hudUtilityNotificati24,
    _hudUtilityNotificati25 = hudUtilityNotificationConfigurationSettings.notificationCompletionContent,
    notificationCompletionContent = _hudUtilityNotificati25 === void 0 ? null : _hudUtilityNotificati25,
    _hudUtilityNotificati26 = hudUtilityNotificationConfigurationSettings.notificationModalTopContent,
    notificationModalTopContent = _hudUtilityNotificati26 === void 0 ? null : _hudUtilityNotificati26,
    _hudUtilityNotificati27 = hudUtilityNotificationConfigurationSettings.initialAnimationStateConfiguration,
    initialAnimationStateConfiguration = _hudUtilityNotificati27 === void 0 ? {
      opacity: 0
    } : _hudUtilityNotificati27,
    _hudUtilityNotificati28 = hudUtilityNotificationConfigurationSettings.durationCompletionExitAnimationConfiguration,
    durationCompletionExitAnimationConfiguration = _hudUtilityNotificati28 === void 0 ? {
      x: 0,
      scale: 0.269
    } : _hudUtilityNotificati28,
    _hudUtilityNotificati29 = hudUtilityNotificationConfigurationSettings.animationStateConfiguration,
    animationStateConfiguration = _hudUtilityNotificati29 === void 0 ? {
      opacity: 1,
      transition: {
        type: "spring",
        stiffness: 1569,
        damping: 100.69
      }
    } : _hudUtilityNotificati29,
    _hudUtilityNotificati30 = hudUtilityNotificationConfigurationSettings.exitAnimationStateConfiguration,
    exitAnimationStateConfiguration = _hudUtilityNotificati30 === void 0 ? {
      opacity: 0,
      transition: {
        duration: 0.3069
      }
    } : _hudUtilityNotificati30,
    _hudUtilityNotificati31 = hudUtilityNotificationConfigurationSettings.motionDirection,
    motionDirection = _hudUtilityNotificati31 === void 0 ? "horizontal" : _hudUtilityNotificati31,
    _hudUtilityNotificati32 = hudUtilityNotificationConfigurationSettings.rightSideOfHeader,
    rightSideOfHeader = _hudUtilityNotificati32 === void 0 ? null : _hudUtilityNotificati32,
    _hudUtilityNotificati33 = hudUtilityNotificationConfigurationSettings.leftSideOfHeader,
    leftSideOfHeader = _hudUtilityNotificati33 === void 0 ? null : _hudUtilityNotificati33,
    _hudUtilityNotificati34 = hudUtilityNotificationConfigurationSettings.footer,
    footer = _hudUtilityNotificati34 === void 0 ? "Thank you for using our app!" : _hudUtilityNotificati34,
    _hudUtilityNotificati35 = hudUtilityNotificationConfigurationSettings.centerContent,
    centerContent = _hudUtilityNotificati35 === void 0 ? null : _hudUtilityNotificati35,
    _hudUtilityNotificati36 = hudUtilityNotificationConfigurationSettings.upperContent,
    upperContent = _hudUtilityNotificati36 === void 0 ? null : _hudUtilityNotificati36,
    _hudUtilityNotificati37 = hudUtilityNotificationConfigurationSettings.lowerContent,
    lowerContent = _hudUtilityNotificati37 === void 0 ? null : _hudUtilityNotificati37,
    _hudUtilityNotificati38 = hudUtilityNotificationConfigurationSettings.notificationVolume,
    notificationVolume = _hudUtilityNotificati38 === void 0 ? 0.869 : _hudUtilityNotificati38,
    message = hudUtilityNotificationConfigurationSettings.message,
    title = hudUtilityNotificationConfigurationSettings.title,
    _hudUtilityNotificati39 = hudUtilityNotificationConfigurationSettings.notificationCloseButtonHoverColor,
    notificationCloseButtonHoverColor = _hudUtilityNotificati39 === void 0 ? "rgba(169, 169, 169, 1)" : _hudUtilityNotificati39,
    _hudUtilityNotificati40 = hudUtilityNotificationConfigurationSettings.notificationProgressBarColor,
    notificationProgressBarColor = _hudUtilityNotificati40 === void 0 ? "rgba(0, 169, 247, 1)" : _hudUtilityNotificati40,
    _hudUtilityNotificati41 = hudUtilityNotificationConfigurationSettings.durationCompletionDelay,
    durationCompletionDelay = _hudUtilityNotificati41 === void 0 ? 1000 : _hudUtilityNotificati41,
    _hudUtilityNotificati42 = hudUtilityNotificationConfigurationSettings.autoDismiss,
    autoDismiss = _hudUtilityNotificati42 === void 0 ? true : _hudUtilityNotificati42,
    _hudUtilityNotificati43 = hudUtilityNotificationConfigurationSettings.duration,
    duration = _hudUtilityNotificati43 === void 0 ? 5000 : _hudUtilityNotificati43,
    onClose = hudUtilityNotificationConfigurationSettings.onClose,
    _hudUtilityNotificati44 = hudUtilityNotificationConfigurationSettings.showCloseButton,
    showCloseButton = _hudUtilityNotificati44 === void 0 ? true : _hudUtilityNotificati44,
    _hudUtilityNotificati45 = hudUtilityNotificationConfigurationSettings.iconColor,
    iconColor = _hudUtilityNotificati45 === void 0 ? "black" : _hudUtilityNotificati45,
    _hudUtilityNotificati46 = hudUtilityNotificationConfigurationSettings.iconName,
    iconName = _hudUtilityNotificati46 === void 0 ? "" : _hudUtilityNotificati46,
    _hudUtilityNotificati47 = hudUtilityNotificationConfigurationSettings.icon,
    icon = _hudUtilityNotificati47 === void 0 ? null : _hudUtilityNotificati47,
    audioUrl = hudUtilityNotificationConfigurationSettings.audioUrl,
    appIcon = hudUtilityNotificationConfigurationSettings.appIcon,
    _hudUtilityNotificati48 = hudUtilityNotificationConfigurationSettings.position,
    position = _hudUtilityNotificati48 === void 0 ? "bottom-right" : _hudUtilityNotificati48,
    _hudUtilityNotificati49 = hudUtilityNotificationConfigurationSettings.compactMode,
    compactMode = _hudUtilityNotificati49 === void 0 ? false : _hudUtilityNotificati49,
    _hudUtilityNotificati50 = hudUtilityNotificationConfigurationSettings.enableBlur,
    enableBlur = _hudUtilityNotificati50 === void 0 ? false : _hudUtilityNotificati50;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    closedNotification = _useState2[0],
    setClosedNotification = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    durationCompleted = _useState4[0],
    setDurationCompleted = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    closeButtonHover = _useState6[0],
    setCloseButtonHover = _useState6[1];
  var _useState7 = useState(false),
    _useState8 = _slicedToArray(_useState7, 2),
    overflowing = _useState8[0],
    setOverflowing = _useState8[1];
  var _useState9 = useState(false),
    _useState10 = _slicedToArray(_useState9, 2),
    showModal = _useState10[0],
    setShowModal = _useState10[1];
  var _useState11 = useState(true),
    _useState12 = _slicedToArray(_useState11, 2),
    visible = _useState12[0],
    setVisible = _useState12[1];
  var audioRef = useRef(new Audio(audioUrl));
  var messageRef = useRef(null);
  var mergedNotificationConfigurationSettings = {
    completionContainer: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.completionContainer), notificationCompletionContainerConfigurationSettings),
    container: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.container), notificationContainerConfigurationSettings),
    backdrop: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.backdrop), notificationBackDropConfigurationSettings),
    content: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.content), notificationContentConfigurationSettings),
    header: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.header), notificationHeaderConfigurationSettings),
    title: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.title), notificationTitleConfigurationSettings),
    closeButton: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.closeButton), notificationCloseButtonConfigurationSettings),
    notificationIcon: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.notificationIcon), notificationNotificationIconConfigurationSettings),
    icon: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.icon), notificationIconConfigurationSettings),
    message: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.message), notificationMessageConfigurationSettings),
    showMoreButton: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.showMoreButton), notificationShowMoreButtonConfigurationSettings),
    footer: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.footer), notificationFooterConfigurationSettings),
    modal: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.modal), notificationModalConfigurationSettings)
  };
  var animationConfig = useMemo(function () {
    return {
      vertical: {
        initial: _objectSpread(_objectSpread({}, initialAnimationStateConfiguration), {}, {
          y: position.includes("top") ? "-100%" : "100%"
        }),
        animate: _objectSpread({}, animationStateConfiguration),
        exit: _objectSpread(_objectSpread({}, exitAnimationStateConfiguration), {}, {
          y: position.includes("top") ? "-100%" : "100%"
        }, durationCompletionExitAnimationConfiguration)
      },
      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%"
        }, durationCompletionExitAnimationConfiguration)
      }
    };
  }, [durationCompletionExitAnimationConfiguration, initialAnimationStateConfiguration, exitAnimationStateConfiguration, animationStateConfiguration]);
  var handleShowMore = function handleShowMore() {
    return setShowModal(true);
  };
  var close = function close() {
    if (onClose) {
      onClose();
    }
    setVisible(false);
  };
  useEffect(function () {
    if (audioUrl) {
      audioRef.current.volume = notificationVolume;
      audioRef.current.play();
    }
    var checkOverflow = function checkOverflow() {
      var element = messageRef.current;
      if (element) {
        var overflow = element.scrollHeight > element.clientHeight;
        setOverflowing(overflow);
      }
    };
    checkOverflow();
    window.addEventListener("resize", checkOverflow);
    return function () {
      window.removeEventListener("resize", checkOverflow);
      if (audioRef.current) {
        audioRef.current.pause();
        audioRef.current = null;
      }
    };
  }, [audioUrl]);
  useEffect(function () {
    if (!autoDismiss) {
      return function () {};
    }
    var notificationTimer = setTimeout(function () {
      setClosedNotification(true);
      close();
    }, duration + durationCompletionDelay);
    return function () {
      clearTimeout(notificationTimer);
    };
  }, [autoDismiss, duration, durationCompletionDelay, onClose]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, !closedNotification ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AnimatePresence, null, visible ? /*#__PURE__*/React.createElement(React.Fragment, null, enableBlur && /*#__PURE__*/React.createElement("div", {
    style: mergedNotificationConfigurationSettings.backdrop
  }), /*#__PURE__*/React.createElement(motion.div, {
    style: _objectSpread(_objectSpread({}, getPositionStyles(position)), mergedNotificationConfigurationSettings.container),
    variants: animationConfig[motionDirection],
    initial: "initial",
    animate: "animate",
    exit: "exit"
  }, /*#__PURE__*/React.createElement("div", {
    style: mergedNotificationConfigurationSettings.content
  }, /*#__PURE__*/React.createElement("div", {
    style: mergedNotificationConfigurationSettings.header
  }, leftSideOfHeader, appIcon ? /*#__PURE__*/React.createElement(HUDIcon, {
    iconConfigurationSettings: mergedNotificationConfigurationSettings.icon,
    svg: appIcon
  }) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement("h1", {
    style: mergedNotificationConfigurationSettings.title
  }, title), showCloseButton ? /*#__PURE__*/React.createElement(HUDIcon, {
    iconConfigurationSettings: _objectSpread(_objectSpread({}, mergedNotificationConfigurationSettings.closeButton), closeButtonHover ? _objectSpread({
      scale: "1.069"
    }, notificationCloseButtonHoverConfigurationSettings) : {}),
    color: closeButtonHover ? notificationCloseButtonHoverColor : mergedNotificationConfigurationSettings.closeButton.color ? mergedNotificationConfigurationSettings.closeButton.color : "black",
    name: "fa-close",
    onMouseLeave: function onMouseLeave() {
      setCloseButtonHover(false);
    },
    onMouseEnter: function onMouseEnter() {
      setCloseButtonHover(true);
    },
    onClick: close
  }) : /*#__PURE__*/React.createElement(React.Fragment, null), rightSideOfHeader), upperContent, icon || iconName ? /*#__PURE__*/React.createElement(HUDIcon, {
    iconConfigurationSettings: mergedNotificationConfigurationSettings.notificationIcon,
    color: iconColor && iconColor.trim() !== "" ? iconColor : "black",
    name: iconName,
    svg: icon
  }) : /*#__PURE__*/React.createElement(React.Fragment, null), centerContent, /*#__PURE__*/React.createElement(HUDScrollContainer, _extends({
    containerConfigurationSettings: _objectSpread(_objectSpread({}, mergedNotificationConfigurationSettings.message), {}, {
      overflow: compactMode ? "auto" : "hidden"
    }),
    scrollContainerRef: messageRef
  }, notificationMessageContainerConfigurations), message), lowerContent, overflowing && !compactMode && /*#__PURE__*/React.createElement("button", {
    onClick: handleShowMore,
    style: mergedNotificationConfigurationSettings.showMoreButton
  }, "Show More"), /*#__PURE__*/React.createElement("div", _extends({
    style: mergedNotificationConfigurationSettings.footer
  }, notificationFooterConfigurations), footer), autoDismiss && /*#__PURE__*/React.createElement(HUDProgressBar, _extends({
    progressBarConfigurationSettings: _objectSpread({}, notificationProgressBarConfigurationSettings),
    onComplete: function onComplete() {
      if (!autoDismiss) {
        return;
      }
      setDurationCompleted(true);
      close();
    },
    progressColor: notificationProgressBarColor,
    displayPercentage: false,
    animateDuration: duration,
    animateTo: 100,
    mode: "toggle"
  }, notificationProgressBarConfigurations))))) : null), durationCompleted && /*#__PURE__*/React.createElement("div", _extends({
    style: _objectSpread(_objectSpread({}, mergedNotificationConfigurationSettings.completionContainer), getPositionStyles(position))
  }, notificationCompletionConfigurations), /*#__PURE__*/React.createElement(HUDLoading, _extends({
    explosionParticleConfigurationSettings: {
      size: 15
    },
    origin: {
      x: "169px",
      y: "15%"
    },
    massiveExplosion: true,
    particleSpeed: 31.69,
    hideExplosion: true,
    explosionSize: 37,
    sizeMultiplier: 1,
    particles: 100,
    type: "explosion"
  }, notificationCompletionAnimationContent)), notificationCompletionContent && notificationCompletionContent)) : null, /*#__PURE__*/React.createElement(HUDModal, _extends({
    open: showModal,
    onClose: function onClose() {
      return setShowModal(false);
    }
  }, notificationModalContainerConfigurations), /*#__PURE__*/React.createElement("div", _extends({
    className: "invisa-scroller",
    style: mergedNotificationConfigurationSettings.modal
  }, notificationModalConfigurations), notificationModalTopContent && notificationModalTopContent, /*#__PURE__*/React.createElement("label", {
    style: {
      fontWeight: "769",
      fontSize: "1.369rem",
      color: "black",
      height: "12.69rem",
      marginRight: "1.69rem",
      marginLeft: "1.69rem",
      marginTop: "2.69rem"
    }
  }, title), notificationModalCenterContent && notificationModalCenterContent, /*#__PURE__*/React.createElement("label", {
    style: {
      fontWeight: "369",
      fontSize: "1.269rem",
      color: "black",
      height: "12.69rem",
      marginRight: "1.69rem",
      marginLeft: "1.69rem",
      marginTop: "2.69rem"
    }
  }, message), notificationModalBottomContent && notificationModalBottomContent)));
}
;
export default HUDUtilityNotification;