@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
226 lines • 9.75 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 = ["dropDownContainerConfigurationSettings", "dropDownListConfigurationSettings", "dropDownFigureContainerConfigurations", "dropDownFigureAnimationConfigurations", "dropDownListConfigurations", "dropDownButtonClickAction", "onDropDownVisibility", "onLoaded", "onHover", "onClick", "figureComponent", "dropDownDirection", "closeOnClickOutside", "closeOnUnhover", "openOnHover", "portalMode", "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, useRef, useEffect } from "react";
import ReactDOM from "react-dom";
import { Fade } from "react-awesome-reveal";
import { motion } from "framer-motion";
var HUDDropDownContainer = function HUDDropDownContainer(_ref) {
var _ref$dropDownContaine = _ref.dropDownContainerConfigurationSettings,
dropDownContainerConfigurationSettings = _ref$dropDownContaine === void 0 ? {} : _ref$dropDownContaine,
_ref$dropDownListConf = _ref.dropDownListConfigurationSettings,
dropDownListConfigurationSettings = _ref$dropDownListConf === void 0 ? {} : _ref$dropDownListConf,
_ref$dropDownFigureCo = _ref.dropDownFigureContainerConfigurations,
dropDownFigureContainerConfigurations = _ref$dropDownFigureCo === void 0 ? {} : _ref$dropDownFigureCo,
_ref$dropDownFigureAn = _ref.dropDownFigureAnimationConfigurations,
dropDownFigureAnimationConfigurations = _ref$dropDownFigureAn === void 0 ? {} : _ref$dropDownFigureAn,
_ref$dropDownListConf2 = _ref.dropDownListConfigurations,
dropDownListConfigurations = _ref$dropDownListConf2 === void 0 ? {} : _ref$dropDownListConf2,
_ref$dropDownButtonCl = _ref.dropDownButtonClickAction,
dropDownButtonClickAction = _ref$dropDownButtonCl === void 0 ? null : _ref$dropDownButtonCl,
_ref$onDropDownVisibi = _ref.onDropDownVisibility,
onDropDownVisibility = _ref$onDropDownVisibi === void 0 ? null : _ref$onDropDownVisibi,
_ref$onLoaded = _ref.onLoaded,
onLoaded = _ref$onLoaded === void 0 ? null : _ref$onLoaded,
_ref$onHover = _ref.onHover,
onHover = _ref$onHover === void 0 ? null : _ref$onHover,
_ref$onClick = _ref.onClick,
onClick = _ref$onClick === void 0 ? null : _ref$onClick,
_ref$figureComponent = _ref.figureComponent,
figureComponent = _ref$figureComponent === void 0 ? /*#__PURE__*/React.createElement("div", {
style: {
fontFamily: "HUD Subtitle",
fontWeight: "569",
fontSize: "1.469rem",
boxShadow: "0px 2.69px 12.69px -1.869px rgba(0, 0, 0, 0.469)",
borderRadius: "0.69rem",
background: "rgba(0, 0, 0, 0.269)",
color: "white",
padding: "0.269rem"
}
}, "Hover to open") : _ref$figureComponent,
_ref$dropDownDirectio = _ref.dropDownDirection,
dropDownDirection = _ref$dropDownDirectio === void 0 ? "down" : _ref$dropDownDirectio,
_ref$closeOnClickOuts = _ref.closeOnClickOutside,
closeOnClickOutside = _ref$closeOnClickOuts === void 0 ? true : _ref$closeOnClickOuts,
_ref$closeOnUnhover = _ref.closeOnUnhover,
closeOnUnhover = _ref$closeOnUnhover === void 0 ? false : _ref$closeOnUnhover,
_ref$openOnHover = _ref.openOnHover,
openOnHover = _ref$openOnHover === void 0 ? true : _ref$openOnHover,
_ref$portalMode = _ref.portalMode,
portalMode = _ref$portalMode === void 0 ? false : _ref$portalMode,
children = _ref.children,
rest = _objectWithoutProperties(_ref, _excluded);
var _useState = useState({
top: 0,
left: 0
}),
_useState2 = _slicedToArray(_useState, 2),
coordinates = _useState2[0],
setCoordinates = _useState2[1];
var _useState3 = useState(dropDownDirection),
_useState4 = _slicedToArray(_useState3, 2),
position = _useState4[0],
setPosition = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
opened = _useState6[0],
setOpened = _useState6[1];
var dropDownRef = useRef(null);
var figureRef = useRef(null);
var dropDownVariants = {
hidden: {
opacity: 0,
scale: 0.95,
y: position === "down" ? -10 : 10
},
visible: {
opacity: 1,
scale: 1,
y: 0,
transition: {
duration: 0.369,
ease: [0.42, 0, 0.58, 1]
}
}
};
var handleDropDownVisibility = function handleDropDownVisibility() {
var openState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
if (onDropDownVisibility) {
onDropDownVisibility(openState);
}
setOpened(openState);
};
var handleHover = function handleHover(hoverState) {
if (onHover) {
onHover(hoverState);
}
if (closeOnUnhover && !hoverState) {
handleDropDownVisibility(hoverState);
return;
}
if (openOnHover && hoverState) {
handleDropDownVisibility(hoverState);
return;
}
};
var toggleDropdown = function toggleDropdown(e) {
var openState = !opened;
handleDropDownVisibility(openState);
if (onClick) {
onClick(e, !opened);
}
};
var handleSelect = function handleSelect(item) {
if (dropDownButtonClickAction) {
dropDownButtonClickAction(item);
}
handleDropDownVisibility();
};
var calculatePosition = function calculatePosition() {
if (figureRef.current && dropDownRef.current) {
var figureRect = figureRef.current.getBoundingClientRect();
var dropDownRect = dropDownRef.current.getBoundingClientRect();
var top, left;
var spaceAbove = figureRect.top;
var spaceBelow = window.innerHeight - figureRect.bottom;
if (dropDownDirection === "up" && spaceAbove < dropDownRect.height) {
setPosition("down");
} else if (dropDownDirection === "down" && spaceBelow < dropDownRect.height) {
setPosition("up");
}
if (position === "down") {
top = figureRect.bottom + 3.69;
} else {
top = figureRect.top - dropDownRect.height - 3.69;
}
left = figureRect.left;
setCoordinates({
top: top,
left: left
});
}
};
useEffect(function () {
var handleResize = function handleResize() {
if (opened) {
calculatePosition();
}
};
if (opened) {
calculatePosition();
}
window.addEventListener("resize", handleResize);
return function () {
window.removeEventListener("resize", handleResize);
};
}, [opened, position]);
useEffect(function () {
if (onLoaded) {
onLoaded();
}
}, []);
useEffect(function () {
if (!closeOnClickOutside) {
return;
}
var handleClickOutside = function handleClickOutside(event) {
if (dropDownRef.current && !dropDownRef.current.contains(event.target) && figureRef.current && !figureRef.current.contains(event.target)) {
handleDropDownVisibility(false);
}
};
if (opened) {
document.addEventListener("mousedown", handleClickOutside);
}
return function () {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [opened, closeOnClickOutside]);
var Dropdown = /*#__PURE__*/React.createElement(motion.div, _extends({
ref: dropDownRef,
className: "absolute bg-white shadow-lg rounded-lg border border-gray-200",
style: _objectSpread({
position: "fixed",
boxShadow: "inset 0 0 5.69px rgba(0, 0, 0, 0.369), 0 0 10px rgba(15, 15, 15, 0.169)",
borderRadius: "0.69rem",
background: "linear-gradient(to top, rgba(37, 37, 37, 0.369), transparent 169%)",
height: "12.69rem",
width: "auto",
zIndex: 999999,
paddingBottom: "8.69px",
paddingRight: "12.69px",
paddingLeft: "12.69px",
paddingTop: "8.69px",
left: coordinates.left,
top: coordinates.top
}, dropDownListConfigurationSettings),
onMouseLeave: closeOnUnhover ? function () {
return handleHover(false);
} : undefined,
variants: dropDownVariants,
initial: "hidden",
animate: "visible",
exit: "hidden"
}, dropDownListConfigurations), children);
return /*#__PURE__*/React.createElement("div", _extends({
className: "relative w-full",
style: _objectSpread({}, dropDownContainerConfigurationSettings),
onMouseLeave: function onMouseLeave() {
return handleHover(false);
},
onMouseEnter: function onMouseEnter() {
return handleHover(true);
}
}, rest), /*#__PURE__*/React.createElement("div", _extends({
ref: figureRef,
onClick: toggleDropdown
}, dropDownFigureContainerConfigurations), /*#__PURE__*/React.createElement(Fade, _extends({
direction: "left",
duration: 169
}, dropDownFigureAnimationConfigurations), figureComponent && figureComponent)), opened && (portalMode ? /*#__PURE__*/ReactDOM.createPortal(Dropdown, document.body) : Dropdown));
};
export default HUDDropDownContainer;