@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
198 lines • 11.6 kB
JavaScript
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 = ["openIconContainerAnimationTransitionConfigurationSettings", "openIconContainerInitialAnimationConfigurationSettings", "headerBarAnimationTransitionConfigurationSettings", "openIconContainerAnimationConfigurationSettings", "headerBarInitialAnimationConfigurationSettings", "headerBarAnimationConfigurationSettings", "openIconContainerConfigurationSettings", "closeButtonConfigurationSettings", "headerBarConfigurationSettings", "openIconConfigurationSettings", "contentConfigurationSettings", "openIconContainerConfigurations", "indicatorIconName", "controlledOpen", "initialOpen", "closeButtonTopPositioningDelay", "closeButtonOpenedTopPadding", "closeButtonClosedTopPadding", "appearanceThreshold", "onAppearanceUpdate", "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 { useTimeout } from "../HUDManagers/HUDUniversalHUDEventEffectsManager.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: "fixed",
display: "flex",
cursor: "pointer",
borderRadius: "0.69rem",
fontSize: "1.2rem",
background: "rgba(0, 0, 0, 0.169)",
color: "#FFF",
zIndex: 869,
padding: "3.69px",
left: "calc(50%)"
}
};
function HUDHeaderBar(_ref) {
var _ref$openIconContaine = _ref.openIconContainerAnimationTransitionConfigurationSettings,
openIconContainerAnimationTransitionConfigurationSettings = _ref$openIconContaine === void 0 ? {} : _ref$openIconContaine,
_ref$openIconContaine2 = _ref.openIconContainerInitialAnimationConfigurationSettings,
openIconContainerInitialAnimationConfigurationSettings = _ref$openIconContaine2 === void 0 ? {} : _ref$openIconContaine2,
_ref$headerBarAnimati = _ref.headerBarAnimationTransitionConfigurationSettings,
headerBarAnimationTransitionConfigurationSettings = _ref$headerBarAnimati === void 0 ? {} : _ref$headerBarAnimati,
_ref$openIconContaine3 = _ref.openIconContainerAnimationConfigurationSettings,
openIconContainerAnimationConfigurationSettings = _ref$openIconContaine3 === void 0 ? {} : _ref$openIconContaine3,
_ref$headerBarInitial = _ref.headerBarInitialAnimationConfigurationSettings,
headerBarInitialAnimationConfigurationSettings = _ref$headerBarInitial === void 0 ? {} : _ref$headerBarInitial,
_ref$headerBarAnimati2 = _ref.headerBarAnimationConfigurationSettings,
headerBarAnimationConfigurationSettings = _ref$headerBarAnimati2 === void 0 ? {} : _ref$headerBarAnimati2,
_ref$openIconContaine4 = _ref.openIconContainerConfigurationSettings,
openIconContainerConfigurationSettings = _ref$openIconContaine4 === void 0 ? {} : _ref$openIconContaine4,
_ref$closeButtonConfi = _ref.closeButtonConfigurationSettings,
closeButtonConfigurationSettings = _ref$closeButtonConfi === void 0 ? {} : _ref$closeButtonConfi,
_ref$headerBarConfigu = _ref.headerBarConfigurationSettings,
headerBarConfigurationSettings = _ref$headerBarConfigu === void 0 ? {} : _ref$headerBarConfigu,
_ref$openIconConfigur = _ref.openIconConfigurationSettings,
openIconConfigurationSettings = _ref$openIconConfigur === void 0 ? {} : _ref$openIconConfigur,
_ref$contentConfigura = _ref.contentConfigurationSettings,
contentConfigurationSettings = _ref$contentConfigura === void 0 ? {} : _ref$contentConfigura,
_ref$openIconContaine5 = _ref.openIconContainerConfigurations,
openIconContainerConfigurations = _ref$openIconContaine5 === void 0 ? {} : _ref$openIconContaine5,
_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$closeButtonTopPo = _ref.closeButtonTopPositioningDelay,
closeButtonTopPositioningDelay = _ref$closeButtonTopPo === void 0 ? 16 : _ref$closeButtonTopPo,
_ref$closeButtonOpene = _ref.closeButtonOpenedTopPadding,
closeButtonOpenedTopPadding = _ref$closeButtonOpene === void 0 ? 12.69 : _ref$closeButtonOpene,
_ref$closeButtonClose = _ref.closeButtonClosedTopPadding,
closeButtonClosedTopPadding = _ref$closeButtonClose === void 0 ? 5 : _ref$closeButtonClose,
_ref$appearanceThresh = _ref.appearanceThreshold,
appearanceThreshold = _ref$appearanceThresh === void 0 ? 87.69 : _ref$appearanceThresh,
onAppearanceUpdate = _ref.onAppearanceUpdate,
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 _useTimeout = useTimeout({
multiple: true
}),
schedule = _useTimeout.schedule;
var _useState = useState(initialOpen),
_useState2 = _slicedToArray(_useState, 2),
open = _useState2[0],
setOpen = _useState2[1];
var _useState3 = useState(5),
_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), openIconConfigurationSettings)
};
var toggleOpen = function toggleOpen() {
var updatedState = !open;
setOpen(updatedState);
if (updatedState && onOpen) {
onOpen();
} else if (!updatedState && onClose) {
onClose();
}
return;
};
var handleMouseMove = useCallback(function (e) {
if (headerRef.current) {
var mouseNear = HUDUniversalHUDUtilityManager.MouseNearComponent(headerRef, appearanceThreshold, e);
setOpen(mouseNear);
if (!mouseNear && onClose) {
onClose();
}
if (mouseNear && onOpen) {
onOpen();
}
}
return;
}, [appearanceThreshold]);
useEffect(function () {
if (controlledOpen !== undefined) {
setOpen(controlledOpen);
}
return;
}, [controlledOpen]);
useEffect(function () {
if (open) {
requestAnimationFrame(function () {
schedule(function () {
if (headerRef.current) {
var rect = headerRef.current.getBoundingClientRect();
setIconTop(rect.height + closeButtonOpenedTopPadding);
onAppearanceUpdate === null || onAppearanceUpdate === void 0 || onAppearanceUpdate(open, rect);
}
}, closeButtonTopPositioningDelay);
});
} else {
setIconTop(closeButtonClosedTopPadding);
onAppearanceUpdate === null || onAppearanceUpdate === void 0 || onAppearanceUpdate(open, null);
}
return;
}, [open, closeButtonClosedTopPadding, closeButtonOpenedTopPadding, closeButtonTopPositioningDelay, onAppearanceUpdate]);
useEffect(function () {
window.addEventListener("mousemove", handleMouseMove);
return function () {
window.removeEventListener("mousemove", handleMouseMove);
};
}, [appearanceThreshold]);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(motion.div, _extends({
initial: _objectSpread({
top: -50
}, openIconContainerInitialAnimationConfigurationSettings !== null && openIconContainerInitialAnimationConfigurationSettings !== void 0 ? openIconContainerInitialAnimationConfigurationSettings : {}),
animate: _objectSpread({
top: iconTop
}, openIconContainerAnimationConfigurationSettings !== null && openIconContainerAnimationConfigurationSettings !== void 0 ? openIconContainerAnimationConfigurationSettings : {}),
transition: _objectSpread({
duration: 0.69,
delay: open ? 0 : 0.1269
}, openIconContainerAnimationTransitionConfigurationSettings !== null && openIconContainerAnimationTransitionConfigurationSettings !== void 0 ? openIconContainerAnimationTransitionConfigurationSettings : {}),
style: _objectSpread(_objectSpread({}, mergedConfigurationSettings.icon), {}, {
transform: open ? "rotate(-180deg)" : "rotate(0deg)"
}, openIconContainerConfigurationSettings !== null && openIconContainerConfigurationSettings !== void 0 ? openIconContainerConfigurationSettings : {})
}, openIconContainerConfigurations !== null && openIconContainerConfigurations !== void 0 ? openIconContainerConfigurations : {}), /*#__PURE__*/React.createElement(HUDIcon, {
iconConfigurationSettings: _objectSpread({
background: "transparent",
color: "inherit"
}, openIconConfigurationSettings !== null && openIconConfigurationSettings !== void 0 ? openIconConfigurationSettings : {}),
name: indicatorIconName,
onClick: toggleOpen
})), /*#__PURE__*/React.createElement(AnimatePresence, null, /*#__PURE__*/React.createElement(motion.div, _extends({
ref: headerRef,
initial: _objectSpread({
y: "-100%"
}, headerBarInitialAnimationConfigurationSettings !== null && headerBarInitialAnimationConfigurationSettings !== void 0 ? headerBarInitialAnimationConfigurationSettings : {}),
animate: _objectSpread({
y: open ? 0 : "-100%"
}, headerBarAnimationConfigurationSettings !== null && headerBarAnimationConfigurationSettings !== void 0 ? headerBarAnimationConfigurationSettings : {}),
transition: _objectSpread({
duration: 0.369
}, headerBarAnimationTransitionConfigurationSettings !== null && headerBarAnimationTransitionConfigurationSettings !== void 0 ? headerBarAnimationTransitionConfigurationSettings : {}),
style: mergedConfigurationSettings.headerBar
}, rest), /*#__PURE__*/React.createElement("div", {
style: mergedConfigurationSettings.content
}, headerContent ? headerContent : children))));
}
;
export default HUDHeaderBar;