@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDToolTip.js

The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton

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, useRef } from "react";
import HUDTyper from "./HUDTyper.js";
function HUDToolTip(hudToolTipConfigurationSettings) {
  var _hudToolTipConfigurat = hudToolTipConfigurationSettings.toolTipContainerConfigurationSettings,
    toolTipContainerConfigurationSettings = _hudToolTipConfigurat === void 0 ? {} : _hudToolTipConfigurat,
    _hudToolTipConfigurat2 = hudToolTipConfigurationSettings.toolTipConfigurationSettings,
    toolTipConfigurationSettings = _hudToolTipConfigurat2 === void 0 ? {} : _hudToolTipConfigurat2,
    _hudToolTipConfigurat3 = hudToolTipConfigurationSettings.position,
    position = _hudToolTipConfigurat3 === void 0 ? "top" : _hudToolTipConfigurat3,
    children = hudToolTipConfigurationSettings.children,
    _hudToolTipConfigurat4 = hudToolTipConfigurationSettings.keepVisibleOnTooltipHover,
    keepVisibleOnTooltipHover = _hudToolTipConfigurat4 === void 0 ? false : _hudToolTipConfigurat4,
    _hudToolTipConfigurat5 = hudToolTipConfigurationSettings.textDelay,
    textDelay = _hudToolTipConfigurat5 === void 0 ? 0.569 : _hudToolTipConfigurat5,
    _hudToolTipConfigurat6 = hudToolTipConfigurationSettings.textSpeed,
    textSpeed = _hudToolTipConfigurat6 === void 0 ? 27.69 : _hudToolTipConfigurat6,
    text = hudToolTipConfigurationSettings.text;
  var _useState = useState(position),
    _useState2 = _slicedToArray(_useState, 2),
    adjustedPosition = _useState2[0],
    setAdjustedPosition = _useState2[1];
  var _useState3 = useState({
      top: 0,
      left: 0
    }),
    _useState4 = _slicedToArray(_useState3, 2),
    coordinates = _useState4[0],
    setCoordinates = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    visible = _useState6[0],
    setVisible = _useState6[1];
  var toolTipRef = useRef(null);
  var targetRef = useRef(null);
  var toolTipContainerStyle = _objectSpread({
    position: "relative",
    display: "inline-block"
  }, toolTipContainerConfigurationSettings);
  var toolTipStyle = _objectSpread({
    position: "fixed",
    backgroundColor: "black",
    color: "white",
    padding: "8px",
    borderRadius: "4px",
    zIndex: 1000,
    opacity: visible ? 1 : 0,
    visibility: visible ? "visible" : "hidden",
    transition: "opacity 0.2269s ease-in-out",
    left: "".concat(coordinates.left, "px"),
    top: "".concat(coordinates.top, "px")
  }, toolTipConfigurationSettings);
  var handleMouseEnter = function handleMouseEnter() {
    setVisible(true);
    calculatePosition();
  };
  var handleMouseLeave = function handleMouseLeave() {
    return setVisible(false);
  };
  var calculatePosition = function calculatePosition() {
    if (targetRef.current && toolTipRef.current) {
      var toolTipRect = toolTipRef.current.getBoundingClientRect();
      var targetRect = targetRef.current.getBoundingClientRect();
      var top, left;
      switch (position) {
        case "top":
          top = targetRect.top - toolTipRect.height;
          left = targetRect.left + targetRect.width / 2 - toolTipRect.width / 2;
          break;
        case "right":
          top = targetRect.top + targetRect.height / 2 - toolTipRect.height / 2;
          left = targetRect.right;
          break;
        case "bottom":
          top = targetRect.bottom;
          left = targetRect.left + targetRect.width / 2 - toolTipRect.width / 2;
          break;
        case "left":
          top = targetRect.top + targetRect.height / 2 - toolTipRect.height / 2;
          left = targetRect.left - toolTipRect.width;
          break;
        default:
          top = targetRect.bottom;
          left = targetRect.left + targetRect.width / 2 - toolTipRect.width / 2;
          break;
      }
      if (top < 0) {
        top = targetRect.bottom;
        setAdjustedPosition("bottom");
      } else if (left + toolTipRect.width > window.innerWidth) {
        left = window.innerWidth - toolTipRect.width - 10;
        setAdjustedPosition("left");
      } else if (left < 0) {
        left = 10;
        setAdjustedPosition("right");
      }
      setCoordinates({
        top: top,
        left: left
      });
    }
  };
  return /*#__PURE__*/React.createElement("div", {
    ref: targetRef,
    style: toolTipContainerStyle,
    onMouseLeave: handleMouseLeave,
    onMouseEnter: handleMouseEnter
  }, children, /*#__PURE__*/React.createElement("div", {
    ref: toolTipRef,
    style: toolTipStyle
  }, visible ? /*#__PURE__*/React.createElement(HUDTyper, {
    speed: textSpeed,
    delay: textDelay
  }, text) : text));
}
;

/*
 * Allows for pop-up descriptions for interface components (Buttons, Images, Inputs, etc...).
 *
 * @params
 * @param {React.Props} hudToolTipConfigurationSettings - facilitates all the parameters for HUDToolTip.
 * @param {Object} hudToolTipConfigurationSettings.toolTipContainerConfigurationSettings - Allows for adding / adjusting the tooltip's container style.
 * @param {Object} hudToolTipConfigurationSettings.toolTipConfigurationStyle - Allows for adding / adjusting the tooltip's style.
 * @param {string} hudToolTipConfigurationSettings.position - Allows for one to set the position of the tooltip on appearance.
 * @param {React.Children} hudToolTipConfigurationSettings.children - The target interface component for the tooltip to display on (Buttons, Inputs, Videos, images, etc...).
 * @param {float} hudToolTipConfigurationSettings.textDelay - Delays the display of the text.
 * @param {float} hudToolTipConfigurationSettings.textSpeed - Sets the display speed of the text.
 * @param {string} hudToolTipConfigurationSettings.text - Sets the text of the tooltip.
 *
 * @example
 * <HUDToolTip
 *      text = "Customizable tooltip"
 *      position = "top"
 *      toolTipConfigurationStyle = {{ cursor : "pointer" }}
 *      toolTipContainerConfigurationSettings = {{ backgroundColor : "blue", color : "yellow" }}
 * >
 *      <button>Hover me</button>
 * </HUDToolTip>
 */
export default HUDToolTip;