@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
169 lines • 9.24 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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 * as React from "react";
import { useState, useEffect, useRef } from "react";
import { useTiltEffect } from "../HUDManagers/HUDUniversalHUDEventEffectsManager.js";
import { motion } from "framer-motion";
function HUDActionHeader(_ref) {
var _ref$actionHeaderUnde = _ref.actionHeaderUnderContainerAnimationTransitionConfigurationSettings,
actionHeaderUnderContainerAnimationTransitionConfigurationSettings = _ref$actionHeaderUnde === void 0 ? {} : _ref$actionHeaderUnde,
_ref$actionHeaderUnde2 = _ref.actionHeaderUnderContainerInitialAnimationConfigurationSettings,
actionHeaderUnderContainerInitialAnimationConfigurationSettings = _ref$actionHeaderUnde2 === void 0 ? {} : _ref$actionHeaderUnde2,
_ref$actionHeaderCont = _ref.actionHeaderContainerAnimationTransitionConfigurationSettings,
actionHeaderContainerAnimationTransitionConfigurationSettings = _ref$actionHeaderCont === void 0 ? {} : _ref$actionHeaderCont,
_ref$actionHeaderCont2 = _ref.actionHeaderContainerInitialAnimationConfigurationSettings,
actionHeaderContainerInitialAnimationConfigurationSettings = _ref$actionHeaderCont2 === void 0 ? {} : _ref$actionHeaderCont2,
_ref$actionHeaderUnde3 = _ref.actionHeaderUnderContainerAnimationConfigurationSettings,
actionHeaderUnderContainerAnimationConfigurationSettings = _ref$actionHeaderUnde3 === void 0 ? {} : _ref$actionHeaderUnde3,
_ref$actionHeaderCont3 = _ref.actionHeaderContainerTiltEffectConfigurationSettings,
actionHeaderContainerTiltEffectConfigurationSettings = _ref$actionHeaderCont3 === void 0 ? {} : _ref$actionHeaderCont3,
_ref$actionHeaderCont4 = _ref.actionHeaderContainerAnimationConfigurationSettings,
actionHeaderContainerAnimationConfigurationSettings = _ref$actionHeaderCont4 === void 0 ? {} : _ref$actionHeaderCont4,
_ref$actionHeaderCont5 = _ref.actionHeaderContentContainerConfigurationSettings,
actionHeaderContentContainerConfigurationSettings = _ref$actionHeaderCont5 === void 0 ? {} : _ref$actionHeaderCont5,
_ref$actionHeaderUnde4 = _ref.actionHeaderUnderContainerConfigurationSettings,
actionHeaderUnderContainerConfigurationSettings = _ref$actionHeaderUnde4 === void 0 ? {} : _ref$actionHeaderUnde4,
_ref$actionHeaderCont6 = _ref.actionHeaderContainerConfigurationSettings,
actionHeaderContainerConfigurationSettings = _ref$actionHeaderCont6 === void 0 ? {} : _ref$actionHeaderCont6,
_ref$actionHeaderCont7 = _ref.actionHeaderContentContainerConfigurations,
actionHeaderContentContainerConfigurations = _ref$actionHeaderCont7 === void 0 ? {} : _ref$actionHeaderCont7,
_ref$actionHeaderUnde5 = _ref.actionHeaderUnderContainerConfigurations,
actionHeaderUnderContainerConfigurations = _ref$actionHeaderUnde5 === void 0 ? {} : _ref$actionHeaderUnde5,
_ref$actionHeaderCont8 = _ref.actionHeaderContainerConfigurations,
actionHeaderContainerConfigurations = _ref$actionHeaderCont8 === void 0 ? {} : _ref$actionHeaderCont8,
_ref$actionHeaderBack = _ref.actionHeaderBackgroundContent,
actionHeaderBackgroundContent = _ref$actionHeaderBack === void 0 ? null : _ref$actionHeaderBack,
_ref$actionHeaderFore = _ref.actionHeaderForegroundContent,
actionHeaderForegroundContent = _ref$actionHeaderFore === void 0 ? null : _ref$actionHeaderFore,
_ref$actionHeaderUnde6 = _ref.actionHeaderUnderContent,
actionHeaderUnderContent = _ref$actionHeaderUnde6 === void 0 ? null : _ref$actionHeaderUnde6,
_ref$background = _ref.background,
background = _ref$background === void 0 ? "rgba(15.69, 18.69, 18.69, 0.95)" : _ref$background,
_ref$textColor = _ref.textColor,
textColor = _ref$textColor === void 0 ? "#fff" : _ref$textColor,
_ref$height = _ref.height,
height = _ref$height === void 0 ? "60px" : _ref$height,
_ref$width = _ref.width,
width = _ref$width === void 0 ? "91.69%" : _ref$width,
_ref$padding = _ref.padding,
padding = _ref$padding === void 0 ? "12px 24px" : _ref$padding,
_ref$left = _ref.left,
left = _ref$left === void 0 ? "2.69%" : _ref$left,
_ref$top = _ref.top,
top = _ref$top === void 0 ? 27 : _ref$top,
_ref$sections = _ref.sections,
sections = _ref$sections === void 0 ? [] : _ref$sections;
var _useTiltEffect = useTiltEffect(_objectSpread({
maxTilt: 0.69,
transitionDuration: "0.369s",
resetOnLeave: true,
scale: 1
}, actionHeaderContainerTiltEffectConfigurationSettings)),
tiltComponentRef = _useTiltEffect.tiltComponentRef,
handleMouseMove = _useTiltEffect.handleMouseMove,
handleMouseLeave = _useTiltEffect.handleMouseLeave;
var _useState = useState(0),
_useState2 = _slicedToArray(_useState, 2),
lastScrollY = _useState2[0],
setLastScrollY = _useState2[1];
var _useState3 = useState(true),
_useState4 = _slicedToArray(_useState3, 2),
visible = _useState4[0],
setVisible = _useState4[1];
var headerRef = useRef(null);
useEffect(function () {
var handleScroll = function handleScroll() {
var currentScrollY = window.scrollY;
setVisible(currentScrollY < lastScrollY || currentScrollY < 50);
setLastScrollY(currentScrollY);
};
window.addEventListener("scroll", handleScroll);
return function () {
return window.removeEventListener("scroll", handleScroll);
};
}, [lastScrollY]);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(motion.div, _extends({
ref: tiltComponentRef,
initial: _objectSpread({
opacity: 0,
y: -20,
scale: 0.9169
}, actionHeaderContainerInitialAnimationConfigurationSettings),
animate: _objectSpread({
opacity: visible ? 1 : 0,
y: visible ? 0 : -100,
scale: 1
}, actionHeaderContainerAnimationConfigurationSettings),
transition: _objectSpread({
duration: 0.869,
ease: "easeOut"
}, actionHeaderContainerAnimationTransitionConfigurationSettings),
style: _objectSpread({
position: "fixed",
display: "flex",
alignItems: "center",
backdropFilter: "blur(7px)",
borderRadius: "0.369rem",
boxShadow: "2.69px 7.69px 5.69px -1.69px rgba(0, 0, 0, 0.169)",
background: background,
color: textColor,
height: height,
width: width,
padding: padding,
left: left,
top: top
}, actionHeaderContainerConfigurationSettings),
onMouseLeave: handleMouseLeave,
onMouseMove: handleMouseMove
}, actionHeaderContainerConfigurations), /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: "flex",
alignItems: "center",
justifyContent: "space-between",
width: "100%",
padding: "12px 8.69px"
}, actionHeaderContentContainerConfigurationSettings)
}, actionHeaderContentContainerConfigurations), actionHeaderBackgroundContent, sections && sections.map(function (section, index) {
return /*#__PURE__*/React.createElement("div", {
key: index,
style: _objectSpread({
display: "flex",
alignItems: "center",
gap: 15
}, section.style)
}, typeof section.content === "function" ? section.content() : section.content);
}), actionHeaderForegroundContent)), actionHeaderUnderContent ? /*#__PURE__*/React.createElement(motion.div, _extends({
initial: _objectSpread({
opacity: 0,
y: -20,
scale: 0.9169
}, actionHeaderUnderContainerInitialAnimationConfigurationSettings),
animate: _objectSpread({
opacity: visible ? 1 : 0,
y: visible ? height + 10 : -100,
scale: 1
}, actionHeaderUnderContainerAnimationConfigurationSettings),
transition: _objectSpread({
duration: 0.869,
ease: "easeOut"
}, actionHeaderUnderContainerAnimationTransitionConfigurationSettings),
style: _objectSpread({
position: "absolute",
transition: "all 0.369s ease-in-out",
borderRadius: "0.369rem",
background: "transparent",
maxWidth: "15.69rem",
height: "auto",
width: "auto",
zIndex: 1069,
padding: "1.269px 21.69px",
left: left,
top: "calc(".concat(top * 2.9169, "px + ").concat(height, ")")
}, actionHeaderUnderContainerConfigurationSettings)
}, actionHeaderUnderContainerConfigurations), actionHeaderUnderContent) : null);
}
;
export default HUDActionHeader;