@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
315 lines • 14.2 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 = ["dropDownMenuButtonTitleConfigurationSettings", "dropDownButtonTitleConfigurationSettings", "dropDownButtonHoverConfigurationSettings", "dropDownMenuButtonConfigurationSettings", "dropDownContainerConfigurationSettings", "dropDownButtonConfigurationSettings", "dropDownListConfigurationSettings", "dropDownMenuButtonTitleConfigurations", "dropDownMenuButtonIconConfigurations", "dropDownButtonIconConfigurations", "dropDownMenuButtonContent", "dropDownButtonContent", "dropDownButtonHoverAction", "dropDownButtonClickAction", "onDropDownVisibility", "onLoaded", "onHover", "onClick", "dropDownDirection", "initiallySelected", "selectedIndex", "closeOnClickOutside", "closeOnUnhover", "openOnHover", "menu"];
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 { Fade } from "react-awesome-reveal";
import { motion } from "framer-motion";
import HUDIcon from "./HUDIcon.js";
var HUDDropDown = function HUDDropDown(_ref) {
var _ref$dropDownMenuButt = _ref.dropDownMenuButtonTitleConfigurationSettings,
dropDownMenuButtonTitleConfigurationSettings = _ref$dropDownMenuButt === void 0 ? {} : _ref$dropDownMenuButt,
_ref$dropDownButtonTi = _ref.dropDownButtonTitleConfigurationSettings,
dropDownButtonTitleConfigurationSettings = _ref$dropDownButtonTi === void 0 ? {} : _ref$dropDownButtonTi,
_ref$dropDownButtonHo = _ref.dropDownButtonHoverConfigurationSettings,
dropDownButtonHoverConfigurationSettings = _ref$dropDownButtonHo === void 0 ? {} : _ref$dropDownButtonHo,
_ref$dropDownMenuButt2 = _ref.dropDownMenuButtonConfigurationSettings,
dropDownMenuButtonConfigurationSettings = _ref$dropDownMenuButt2 === void 0 ? {} : _ref$dropDownMenuButt2,
_ref$dropDownContaine = _ref.dropDownContainerConfigurationSettings,
dropDownContainerConfigurationSettings = _ref$dropDownContaine === void 0 ? {} : _ref$dropDownContaine,
_ref$dropDownButtonCo = _ref.dropDownButtonConfigurationSettings,
dropDownButtonConfigurationSettings = _ref$dropDownButtonCo === void 0 ? {} : _ref$dropDownButtonCo,
_ref$dropDownListConf = _ref.dropDownListConfigurationSettings,
dropDownListConfigurationSettings = _ref$dropDownListConf === void 0 ? {} : _ref$dropDownListConf,
_ref$dropDownMenuButt3 = _ref.dropDownMenuButtonTitleConfigurations,
dropDownMenuButtonTitleConfigurations = _ref$dropDownMenuButt3 === void 0 ? {} : _ref$dropDownMenuButt3,
_ref$dropDownMenuButt4 = _ref.dropDownMenuButtonIconConfigurations,
dropDownMenuButtonIconConfigurations = _ref$dropDownMenuButt4 === void 0 ? {} : _ref$dropDownMenuButt4,
_ref$dropDownButtonIc = _ref.dropDownButtonIconConfigurations,
dropDownButtonIconConfigurations = _ref$dropDownButtonIc === void 0 ? {} : _ref$dropDownButtonIc,
_ref$dropDownMenuButt5 = _ref.dropDownMenuButtonContent,
dropDownMenuButtonContent = _ref$dropDownMenuButt5 === void 0 ? null : _ref$dropDownMenuButt5,
_ref$dropDownButtonCo2 = _ref.dropDownButtonContent,
dropDownButtonContent = _ref$dropDownButtonCo2 === void 0 ? null : _ref$dropDownButtonCo2,
_ref$dropDownButtonHo2 = _ref.dropDownButtonHoverAction,
dropDownButtonHoverAction = _ref$dropDownButtonHo2 === void 0 ? null : _ref$dropDownButtonHo2,
_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$dropDownDirectio = _ref.dropDownDirection,
dropDownDirection = _ref$dropDownDirectio === void 0 ? "down" : _ref$dropDownDirectio,
_ref$initiallySelecte = _ref.initiallySelected,
initiallySelected = _ref$initiallySelecte === void 0 ? 0 : _ref$initiallySelecte,
_ref$selectedIndex = _ref.selectedIndex,
selectedIndex = _ref$selectedIndex === void 0 ? null : _ref$selectedIndex,
_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 ? false : _ref$openOnHover,
_ref$menu = _ref.menu,
menu = _ref$menu === void 0 ? [] : _ref$menu,
rest = _objectWithoutProperties(_ref, _excluded);
var _useState = useState(menu.length ? menu[initiallySelected] : {
name: "N/A"
}),
_useState2 = _slicedToArray(_useState, 2),
selected = _useState2[0],
setSelected = _useState2[1];
var _useState3 = useState({
top: 0,
left: 0
}),
_useState4 = _slicedToArray(_useState3, 2),
coordinates = _useState4[0],
setCoordinates = _useState4[1];
var _useState5 = useState(dropDownDirection),
_useState6 = _slicedToArray(_useState5, 2),
position = _useState6[0],
setPosition = _useState6[1];
var _useState7 = useState(false),
_useState8 = _slicedToArray(_useState7, 2),
opened = _useState8[0],
setOpened = _useState8[1];
var dropDownRef = useRef(null);
var buttonRef = 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() {
var openState = !opened;
handleDropDownVisibility(openState);
if (onClick) {
onClick(!opened);
}
};
var handleItemHover = function handleItemHover(item) {
var hovering = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
if (dropDownButtonHoverAction) {
dropDownButtonHoverAction(item, hovering);
}
};
var handleSelect = function handleSelect(item) {
setSelected(item);
if (dropDownButtonClickAction) {
dropDownButtonClickAction(item);
}
handleDropDownVisibility();
};
var calculatePosition = function calculatePosition() {
if (buttonRef.current && dropDownRef.current) {
var buttonRect = buttonRef.current.getBoundingClientRect();
var dropDownRect = dropDownRef.current.getBoundingClientRect();
var top, left;
var spaceAbove = buttonRect.top;
var spaceBelow = window.innerHeight - buttonRect.bottom;
if (dropDownDirection === "up" && spaceAbove < dropDownRect.height) {
setPosition("down");
} else if (dropDownDirection === "down" && spaceBelow < dropDownRect.height) {
setPosition("up");
}
if (position === "down") {
top = buttonRect.bottom + 3.69;
} else {
top = buttonRect.top - dropDownRect.height - 3.69;
}
left = buttonRect.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 (selectedIndex === undefined || selectedIndex === null) {
return function () {};
}
if (menu.length > 0 && menu[selectedIndex]) {
setSelected(menu[selectedIndex]);
}
}, [menu, selectedIndex]);
useEffect(function () {
if (onLoaded) {
onLoaded(selected);
}
}, []);
useEffect(function () {
if (!closeOnClickOutside) {
return;
}
var handleClickOutside = function handleClickOutside(event) {
if (dropDownRef.current && !dropDownRef.current.contains(event.target) && buttonRef.current && !buttonRef.current.contains(event.target)) {
handleDropDownVisibility(false);
}
};
if (opened) {
document.addEventListener("mousedown", handleClickOutside);
}
return function () {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [opened, closeOnClickOutside]);
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", {
ref: buttonRef,
style: _objectSpread({
display: "flex",
flexDirection: "row",
alignItems: "center",
cursor: "pointer",
userSelect: "none",
transition: "all 0.069s ease-out",
boxShadow: "0 6px 20px rgba(0, 0, 0, 0.3)"
}, dropDownMenuButtonConfigurationSettings),
onClick: toggleDropdown
}, /*#__PURE__*/React.createElement(Fade, {
direction: "left",
duration: 169
}, dropDownMenuButtonContent && dropDownMenuButtonContent, selected.iconName ? /*#__PURE__*/React.createElement("span", {
className: "ml-auto"
}, /*#__PURE__*/React.createElement(HUDIcon, _extends({
color: selected.iconColor || "white",
name: selected.iconName
}, dropDownMenuButtonIconConfigurations))) : null, /*#__PURE__*/React.createElement("span", _extends({
className: "block truncate text-xl font-semibold tracking-wider",
style: _objectSpread({
fontSize: "1.69rem",
marginLeft: "0.169rem"
}, dropDownMenuButtonTitleConfigurationSettings)
}, dropDownMenuButtonTitleConfigurations), selected.name))), opened && /*#__PURE__*/React.createElement(motion.div, {
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%)",
zIndex: 999999,
paddingBottom: "8.69px",
paddingRight: "12.69px",
paddingLeft: "12.69px",
paddingTop: "8.69px",
left: coordinates.left,
top: coordinates.top
}, dropDownListConfigurationSettings),
variants: dropDownVariants,
initial: "hidden",
animate: "visible",
exit: "hidden"
}, menu.map(function (item, index) {
return /*#__PURE__*/React.createElement(React.Fragment, null, item.hideInMenu ? null : /*#__PURE__*/React.createElement(motion.div, {
key: index,
style: _objectSpread({
display: "flex",
flexDirection: "row",
alignItems: "center",
cursor: "pointer",
userSelect: "none",
transition: "box-shadow 0.069s ease-out",
borderRadius: "0.569rem",
background: "rgba(41.69, 41.69, 41.69, 0.169)",
paddingBottom: "2.69px",
paddingRight: "12.69px",
paddingLeft: "12.69px",
paddingTop: "2.69px",
marginBottom: "0.269rem"
}, dropDownButtonConfigurationSettings),
transition: {
type: "spring",
stiffness: 500,
damping: 20
},
whileHover: _objectSpread({
boxShadow: "0px 0px 27.69px -1.69px rgba(255, 255, 255, 0.169)",
scale: 1.0569
}, dropDownButtonHoverConfigurationSettings),
onMouseLeave: function onMouseLeave() {
return handleItemHover(item, false);
},
onMouseEnter: function onMouseEnter() {
return handleItemHover(item);
},
onClick: function onClick() {
return handleSelect(item);
}
}, dropDownButtonContent && dropDownButtonContent, item.iconName ? /*#__PURE__*/React.createElement("span", {
className: "ml-auto"
}, /*#__PURE__*/React.createElement(HUDIcon, _extends({
color: item.iconColor || "white",
name: item.iconName
}, dropDownButtonIconConfigurations))) : null, /*#__PURE__*/React.createElement("span", {
className: "block truncate text-lg font-medium",
style: _objectSpread({
fontSize: "1.169rem",
marginLeft: "0.169rem"
}, dropDownButtonTitleConfigurationSettings)
}, item.name)));
})));
};
export default HUDDropDown;