@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
146 lines • 9.27 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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 } from "react";
import HUDTyper from "./HUDTyper.js";
function HUDDimensionalText(hudDimensionalTextConfigurationSettings) {
var _hudDimensionalTextCo = hudDimensionalTextConfigurationSettings.componentContainerConfigurationSettings,
componentContainerConfigurationSettings = _hudDimensionalTextCo === void 0 ? {} : _hudDimensionalTextCo,
_hudDimensionalTextCo2 = hudDimensionalTextConfigurationSettings.containerConfigurationSettings,
containerConfigurationSettings = _hudDimensionalTextCo2 === void 0 ? {} : _hudDimensionalTextCo2,
_hudDimensionalTextCo3 = hudDimensionalTextConfigurationSettings.textConfigurationSettings,
textConfigurationSettings = _hudDimensionalTextCo3 === void 0 ? {} : _hudDimensionalTextCo3,
_hudDimensionalTextCo4 = hudDimensionalTextConfigurationSettings.componentContainerConfigurations,
componentContainerConfigurations = _hudDimensionalTextCo4 === void 0 ? {} : _hudDimensionalTextCo4,
_hudDimensionalTextCo5 = hudDimensionalTextConfigurationSettings.typerConfigurations,
typerConfigurations = _hudDimensionalTextCo5 === void 0 ? {} : _hudDimensionalTextCo5,
_hudDimensionalTextCo6 = hudDimensionalTextConfigurationSettings.textConfigurations,
textConfigurations = _hudDimensionalTextCo6 === void 0 ? {} : _hudDimensionalTextCo6,
_hudDimensionalTextCo7 = hudDimensionalTextConfigurationSettings.componentContainerBackgroundColor,
componentContainerBackgroundColor = _hudDimensionalTextCo7 === void 0 ? "rgba(255, 255, 255, 0.9)" : _hudDimensionalTextCo7,
_hudDimensionalTextCo8 = hudDimensionalTextConfigurationSettings.hoverShadowSize,
hoverShadowSize = _hudDimensionalTextCo8 === void 0 ? "1.69px 3.069px 2.069px" : _hudDimensionalTextCo8,
_hudDimensionalTextCo9 = hudDimensionalTextConfigurationSettings.componentContainerFontSize,
componentContainerFontSize = _hudDimensionalTextCo9 === void 0 ? "1rem" : _hudDimensionalTextCo9,
_hudDimensionalTextCo10 = hudDimensionalTextConfigurationSettings.componentContainerColor,
componentContainerColor = _hudDimensionalTextCo10 === void 0 ? "black" : _hudDimensionalTextCo10,
_hudDimensionalTextCo11 = hudDimensionalTextConfigurationSettings.shadowSize,
shadowSize = _hudDimensionalTextCo11 === void 0 ? "1px 1px 2px" : _hudDimensionalTextCo11,
_hudDimensionalTextCo12 = hudDimensionalTextConfigurationSettings.perspective,
perspective = _hudDimensionalTextCo12 === void 0 ? "500px" : _hudDimensionalTextCo12,
_hudDimensionalTextCo13 = hudDimensionalTextConfigurationSettings.scaleOnHover,
scaleOnHover = _hudDimensionalTextCo13 === void 0 ? true : _hudDimensionalTextCo13,
componentContainer = hudDimensionalTextConfigurationSettings.componentContainer,
_hudDimensionalTextCo14 = hudDimensionalTextConfigurationSettings.fontSize,
fontSize = _hudDimensionalTextCo14 === void 0 ? "2rem" : _hudDimensionalTextCo14,
hoverShadowColor = hudDimensionalTextConfigurationSettings.hoverShadowColor,
_hudDimensionalTextCo15 = hudDimensionalTextConfigurationSettings.always3D,
always3D = _hudDimensionalTextCo15 === void 0 ? true : _hudDimensionalTextCo15,
_hudDimensionalTextCo16 = hudDimensionalTextConfigurationSettings.color,
color = _hudDimensionalTextCo16 === void 0 ? "#333" : _hudDimensionalTextCo16,
_hudDimensionalTextCo17 = hudDimensionalTextConfigurationSettings.maxTilt,
maxTilt = _hudDimensionalTextCo17 === void 0 ? 10 : _hudDimensionalTextCo17,
shadowColor = hudDimensionalTextConfigurationSettings.shadowColor,
hoverColor = hudDimensionalTextConfigurationSettings.hoverColor,
text = hudDimensionalTextConfigurationSettings.text;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
hovered = _useState2[0],
setHovered = _useState2[1];
var _useState3 = useState("translateZ(0)"),
_useState4 = _slicedToArray(_useState3, 2),
transform = _useState4[0],
setTransform = _useState4[1];
var _useState5 = useState(0),
_useState6 = _slicedToArray(_useState5, 2),
scrollOffset = _useState6[0],
setScrollOffset = _useState6[1];
var getDarkerShade = function getDarkerShade(hexColor) {
var factor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.2;
var color = hexColor.charAt(0) === "#" ? hexColor.substring(1, 7) : hexColor;
var rgb = parseInt(color, 16);
var r = Math.max(0, Math.min(255, (rgb >> 16) - (rgb >> 16) * factor));
var g = Math.max(0, Math.min(255, (rgb >> 8 & 0x00ff) - (rgb >> 8 & 0x00ff) * factor));
var b = Math.max(0, Math.min(255, (rgb & 0x0000ff) - (rgb & 0x0000ff) * factor));
return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", 0.69)");
};
var computedShadowColor = shadowColor || getDarkerShade(color);
var computedHoverShadowColor = hoverShadowColor || getDarkerShade(color, 0.69);
var computedHoverColor = hoverColor || getDarkerShade(color, 0.2);
var containerStyle = _objectSpread({
position: "relative",
display: "inline-block",
transform: always3D || hovered ? transform : "translateZ(0) translateY(".concat(scrollOffset, "px)"),
transition: "transform 0.3s ease",
perspectiveOrigin: "50% 50%",
perspective: perspective
}, containerConfigurationSettings);
var textStyle = _objectSpread({
display: "inline-block",
transition: "transform 0.3s ease, text-shadow 0.3s ease, filter 0.3s ease, color 0.3s ease",
transform: hovered && scaleOnHover ? "".concat(transform, " scale(1.05)") : transform,
filter: hovered ? "brightness(1.2)" : "none",
cursor: "pointer",
textShadow: always3D || hovered ? "".concat(hoverShadowSize, " ").concat(computedHoverShadowColor) : "".concat(shadowSize, " ").concat(computedShadowColor),
fontWeight: "bold",
fontSize: fontSize,
color: hovered ? computedHoverColor : color
}, textConfigurationSettings);
var componentContainerStyle = _objectSpread(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
position: "absolute",
transition: "transform 0.3s ease, text-shadow 0.3s ease, filter 0.3s ease, color 0.3s ease",
transform: "translateX(-50%) ".concat(hovered ? transform : "translateZ(0) translateY(10px)"),
visibility: hovered ? "visible" : "hidden",
whiteSpace: "nowrap",
cursor: "pointer",
boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)",
borderRadius: "5px",
color: hovered ? computedHoverColor : componentContainerColor,
background: componentContainerBackgroundColor,
fontSize: componentContainerFontSize
}, "color", componentContainerColor), "padding", "5px 10px"), "left", "50%"), "top", "100%"), componentContainerConfigurationSettings);
var handleMouseMove = function handleMouseMove(event) {
if (always3D || hovered) {
var clientX = event.clientX,
clientY = event.clientY,
currentTarget = event.currentTarget;
var offsetWidth = currentTarget.offsetWidth,
offsetHeight = currentTarget.offsetHeight,
offsetLeft = currentTarget.offsetLeft,
offsetTop = currentTarget.offsetTop;
var x = (clientX - offsetLeft) / offsetWidth - 0.5;
var y = (clientY - offsetTop) / offsetHeight - 0.5;
var tiltX = maxTilt * x;
var tiltY = maxTilt * y;
setTransform("translateZ(30px) rotateX(".concat(tiltY, "deg) rotateY(").concat(tiltX, "deg)"));
}
};
useEffect(function () {
var handleScroll = function handleScroll() {
setScrollOffset(window.scrollY / 10);
};
window.addEventListener("scroll", handleScroll);
return function () {
return window.removeEventListener("scroll", handleScroll);
};
}, []);
return /*#__PURE__*/React.createElement("div", {
style: containerStyle,
onMouseLeave: function onMouseLeave() {
setTransform("translateZ(0)");
setHovered(false);
},
onMouseEnter: function onMouseEnter() {
return setHovered(true);
},
onMouseMove: handleMouseMove
}, /*#__PURE__*/React.createElement("span", _extends({
style: textStyle
}, textConfigurations), /*#__PURE__*/React.createElement(HUDTyper, typerConfigurations, text)), componentContainer && /*#__PURE__*/React.createElement("div", _extends({
style: componentContainerStyle
}, componentContainerConfigurations), componentContainer));
}
;
export default HUDDimensionalText;