@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDHeaderBar.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";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["headerBarConfigurationSettings", "closeButtonConfigurationSettings", "openIconConfigurationSettings", "contentConfigurationSettings", "indicatorIconName", "controlledOpen", "initialOpen", "appearanceThreshold", "onClose", "onOpen", "headerContent", "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, useRef, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { HUDUniversalHUDUtilityManager } from "../HUDManagers/HUDUniversalHUDUtilityManager.js";
import HUDIcon from "./HUDIcon.js";
var defaultStyles = {
  headerBar: {
    position: "fixed",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    transition: "transform 0.3s ease",
    boxShadow: "0 2px 10px rgba(0, 0, 0, 0.5)",
    backgroundColor: "transparent",
    zIndex: 1000,
    padding: "10px 20px",
    right: 0,
    left: 0,
    top: 0
  },
  content: {
    display: "flex",
    alignItems: "center"
  },
  icon: {
    position: "absolute",
    display: "flex",
    cursor: "pointer",
    transition: "top 0.369s ease",
    borderRadius: "0.69rem",
    fontSize: "1.2rem",
    background: "rgba(0, 0, 0, 0.169)",
    color: "#FFF",
    zIndex: 869,
    padding: "3.69px",
    left: "calc(50%)",
    top: "5px"
  }
};
function HUDHeaderBar(_ref) {
  var _ref$headerBarConfigu = _ref.headerBarConfigurationSettings,
    headerBarConfigurationSettings = _ref$headerBarConfigu === void 0 ? {} : _ref$headerBarConfigu,
    _ref$closeButtonConfi = _ref.closeButtonConfigurationSettings,
    closeButtonConfigurationSettings = _ref$closeButtonConfi === void 0 ? {} : _ref$closeButtonConfi,
    _ref$openIconConfigur = _ref.openIconConfigurationSettings,
    openIconConfigurationSettings = _ref$openIconConfigur === void 0 ? {} : _ref$openIconConfigur,
    _ref$contentConfigura = _ref.contentConfigurationSettings,
    contentConfigurationSettings = _ref$contentConfigura === void 0 ? {} : _ref$contentConfigura,
    _ref$indicatorIconNam = _ref.indicatorIconName,
    indicatorIconName = _ref$indicatorIconNam === void 0 ? "fa-chevron-down" : _ref$indicatorIconNam,
    controlledOpen = _ref.controlledOpen,
    _ref$initialOpen = _ref.initialOpen,
    initialOpen = _ref$initialOpen === void 0 ? false : _ref$initialOpen,
    _ref$appearanceThresh = _ref.appearanceThreshold,
    appearanceThreshold = _ref$appearanceThresh === void 0 ? 87.69 : _ref$appearanceThresh,
    onClose = _ref.onClose,
    onOpen = _ref.onOpen,
    _ref$headerContent = _ref.headerContent,
    headerContent = _ref$headerContent === void 0 ? null : _ref$headerContent,
    children = _ref.children,
    rest = _objectWithoutProperties(_ref, _excluded);
  var _useState = useState(initialOpen),
    _useState2 = _slicedToArray(_useState, 2),
    open = _useState2[0],
    setOpen = _useState2[1];
  var _useState3 = useState("5px"),
    _useState4 = _slicedToArray(_useState3, 2),
    iconTop = _useState4[0],
    setIconTop = _useState4[1];
  var headerRef = useRef(null);
  var mergedConfigurationSettings = {
    headerBar: _objectSpread(_objectSpread({}, defaultStyles.headerBar), headerBarConfigurationSettings),
    content: _objectSpread(_objectSpread({}, defaultStyles.content), contentConfigurationSettings),
    icon: _objectSpread(_objectSpread(_objectSpread({}, defaultStyles.icon), closeButtonConfigurationSettings), {}, {
      transform: open ? "rotate(-180deg)" : "rotate(0deg)",
      top: iconTop
    })
  };
  var toggleOpen = function toggleOpen() {
    var updatedState = !open;
    setOpen(updatedState);
    if (updatedState && onOpen) {
      onOpen();
    } else if (!updatedState && onClose) {
      onClose();
    }
    return;
  };
  var updateIconPosition = function updateIconPosition() {
    if (headerRef.current) {
      var headerHeight = headerRef.current.getBoundingClientRect().height;
      setIconTop(open ? "".concat(headerHeight + 12.69, "px") : "5px");
    }
    return;
  };
  var handleMouseMove = useCallback(function (e) {
    if (headerRef.current) {
      var mouseNear = HUDUniversalHUDUtilityManager.MouseNearComponent(headerRef, appearanceThreshold, e);
      setOpen(mouseNear);
      if (onClose && !mouseNear) {
        onClose();
      }
      if (onOpen && mouseNear) {
        onOpen();
      }
    }
    return;
  }, [appearanceThreshold]);
  useEffect(function () {
    if (controlledOpen !== undefined) {
      setOpen(controlledOpen);
    }
    return;
  }, [controlledOpen]);
  useEffect(function () {
    updateIconPosition();
    return;
  }, [open]);
  useEffect(function () {
    window.addEventListener("mousemove", handleMouseMove);
    return function () {
      window.removeEventListener("mousemove", handleMouseMove);
      return;
    };
  }, [appearanceThreshold]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HUDIcon, {
    iconConfigurationSettings: _objectSpread(_objectSpread({}, mergedConfigurationSettings.icon), openIconConfigurationSettings),
    name: indicatorIconName,
    onClick: toggleOpen
  }), /*#__PURE__*/React.createElement(AnimatePresence, null, /*#__PURE__*/React.createElement(motion.div, _extends({
    ref: headerRef,
    initial: {
      y: "-100%"
    },
    animate: {
      y: open ? 0 : "-100%"
    },
    style: mergedConfigurationSettings.headerBar
  }, rest), /*#__PURE__*/React.createElement("div", {
    style: mergedConfigurationSettings.content
  }, headerContent ? headerContent : children))));
}
export default HUDHeaderBar;