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

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

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["sideContainerConfigurationSettings", "closeButtonConfigurationSettings", "backDropConfigurationSettings", "contentConfigurationSettings", "headerConfigurationSettings", "footerConfigurationSettings", "closeButtonHoverColor", "closeButtonColor", "displayCloseButton", "displayBackDrop", "controlledOpen", "open", "onClose", "onOpen", "position", "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, { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import HUDIcon from "./HUDIcon.js";
var defaultStyles = {
  backdrop: {
    position: "fixed",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    transition: "all 0.369s ease",
    backgroundColor: "rgba(0, 0, 0, 0.569)",
    backdropFilter: "blur(2px)",
    zIndex: 1269,
    bottom: 0,
    right: 0,
    left: 0,
    top: 0
  },
  header: {
    display: "flex",
    justifyContent: "flex-end",
    marginTop: "0.569rem"
  },
  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 HUDSideContainerPanel(hudSideContainerPanelConfigurationSettings) {
  var _hudSideContainerPane = hudSideContainerPanelConfigurationSettings.sideContainerConfigurationSettings,
    sideContainerConfigurationSettings = _hudSideContainerPane === void 0 ? {} : _hudSideContainerPane,
    _hudSideContainerPane2 = hudSideContainerPanelConfigurationSettings.closeButtonConfigurationSettings,
    closeButtonConfigurationSettings = _hudSideContainerPane2 === void 0 ? {} : _hudSideContainerPane2,
    _hudSideContainerPane3 = hudSideContainerPanelConfigurationSettings.backDropConfigurationSettings,
    backDropConfigurationSettings = _hudSideContainerPane3 === void 0 ? {} : _hudSideContainerPane3,
    _hudSideContainerPane4 = hudSideContainerPanelConfigurationSettings.contentConfigurationSettings,
    contentConfigurationSettings = _hudSideContainerPane4 === void 0 ? {} : _hudSideContainerPane4,
    _hudSideContainerPane5 = hudSideContainerPanelConfigurationSettings.headerConfigurationSettings,
    headerConfigurationSettings = _hudSideContainerPane5 === void 0 ? {} : _hudSideContainerPane5,
    _hudSideContainerPane6 = hudSideContainerPanelConfigurationSettings.footerConfigurationSettings,
    footerConfigurationSettings = _hudSideContainerPane6 === void 0 ? {} : _hudSideContainerPane6,
    _hudSideContainerPane7 = hudSideContainerPanelConfigurationSettings.closeButtonHoverColor,
    closeButtonHoverColor = _hudSideContainerPane7 === void 0 ? "rgba(127, 127, 127, 1)" : _hudSideContainerPane7,
    _hudSideContainerPane8 = hudSideContainerPanelConfigurationSettings.closeButtonColor,
    closeButtonColor = _hudSideContainerPane8 === void 0 ? "rgba(0, 0, 0, 1)" : _hudSideContainerPane8,
    _hudSideContainerPane9 = hudSideContainerPanelConfigurationSettings.displayCloseButton,
    displayCloseButton = _hudSideContainerPane9 === void 0 ? true : _hudSideContainerPane9,
    _hudSideContainerPane10 = hudSideContainerPanelConfigurationSettings.displayBackDrop,
    displayBackDrop = _hudSideContainerPane10 === void 0 ? true : _hudSideContainerPane10,
    controlledOpen = hudSideContainerPanelConfigurationSettings.controlledOpen,
    _hudSideContainerPane11 = hudSideContainerPanelConfigurationSettings.open,
    open = _hudSideContainerPane11 === void 0 ? false : _hudSideContainerPane11,
    onClose = hudSideContainerPanelConfigurationSettings.onClose,
    onOpen = hudSideContainerPanelConfigurationSettings.onOpen,
    _hudSideContainerPane12 = hudSideContainerPanelConfigurationSettings.position,
    position = _hudSideContainerPane12 === void 0 ? "left" : _hudSideContainerPane12,
    _hudSideContainerPane13 = hudSideContainerPanelConfigurationSettings.headerContent,
    headerContent = _hudSideContainerPane13 === void 0 ? null : _hudSideContainerPane13,
    _hudSideContainerPane14 = hudSideContainerPanelConfigurationSettings.footerContent,
    footerContent = _hudSideContainerPane14 === void 0 ? null : _hudSideContainerPane14,
    children = hudSideContainerPanelConfigurationSettings.children,
    rest = _objectWithoutProperties(hudSideContainerPanelConfigurationSettings, _excluded);
  var _useState = useState(open),
    _useState2 = _slicedToArray(_useState, 2),
    sideContainerOpen = _useState2[0],
    setSideContainerOpen = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    closeButtonHover = _useState4[0],
    setCloseButtonHover = _useState4[1];
  var sideContainerPanelVariants = {
    hidden: {
      opacity: 0,
      x: position === "left" ? "-100%" : "100%"
    },
    visible: {
      transition: {
        type: "spring",
        stiffness: 300,
        damping: 30
      },
      opacity: 1,
      x: 0
    }
  };
  var mergedConfigurationSettings = {
    backdrop: _objectSpread(_objectSpread({}, defaultStyles.backdrop), backDropConfigurationSettings),
    header: _objectSpread(_objectSpread({}, defaultStyles.header), headerConfigurationSettings),
    closeButton: _objectSpread(_objectSpread({}, defaultStyles.closeButton), closeButtonConfigurationSettings),
    content: _objectSpread(_objectSpread({}, defaultStyles.content), contentConfigurationSettings),
    footer: _objectSpread(_objectSpread({}, defaultStyles.footer), footerConfigurationSettings)
  };
  var toggleOpen = function toggleOpen() {
    var updatedState = !open;
    setSideContainerOpen(updatedState);
    if (onOpen) {
      onOpen(updatedState);
    }
    if (updatedState === false && onClose) {
      onClose(updatedState);
    }
    return;
  };
  useEffect(function () {
    if (controlledOpen !== undefined) {
      setSideContainerOpen(controlledOpen);
    }
  }, [controlledOpen]);
  return /*#__PURE__*/React.createElement(AnimatePresence, null, sideContainerOpen && /*#__PURE__*/React.createElement(React.Fragment, null, displayBackDrop ? /*#__PURE__*/React.createElement("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)"
    })
  }) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(motion.div, {
    style: _objectSpread(_defineProperty(_defineProperty({
      position: "fixed",
      overflow: "auto",
      boxShadow: "-5px 1px 10px -1.69px rgba(0, 0, 0, 0.469)",
      background: "white",
      height: "100vh",
      width: "300px",
      zIndex: 2699
    }, position, 0), "top", 0), sideContainerConfigurationSettings),
    initial: "hidden",
    animate: "visible",
    exit: "hidden",
    variants: sideContainerPanelVariants
  }, /*#__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: toggleOpen
  }) : /*#__PURE__*/React.createElement(React.Fragment, null), headerContent ? headerContent : /*#__PURE__*/React.createElement(React.Fragment, null)), /*#__PURE__*/React.createElement("div", {
    className: "invisa-scroller",
    style: _objectSpread({
      position: "relative",
      display: "flex",
      flexDirection: "column",
      overflowY: "auto"
    }, mergedConfigurationSettings.content)
  }, children), footerContent ? /*#__PURE__*/React.createElement("div", {
    className: "invisa-scroller",
    style: _objectSpread({
      position: "relative",
      display: "flex",
      flexDirection: "row",
      overflowX: "auto",
      borderTop: "1px solid #ccc",
      padding: "20px"
    }, mergedConfigurationSettings.footer)
  }, footerContent) : /*#__PURE__*/React.createElement(React.Fragment, null))));
}
;
export default HUDSideContainerPanel;