@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDAnimatedIcon.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, useEffect } from "react";
import HUDIcon from "./HUDIcon.js";
var animations = "\n  @keyframes openAnimation {\n       0% {\n            transform: rotate(0);\n       }\n       50% {\n            transform: rotate(-20deg);\n       }\n       100% {\n            transform: rotate(0);\n       }\n  }\n\n  @keyframes closeAnimation {\n       0% {\n            transform: rotate(0);\n       }\n       50% {\n            transform: rotate(20deg);\n       }\n       100% {\n            transform: rotate(0);\n       }\n  }\n\n  @keyframes bounceAnimation {\n       0%, 100% {\n            transform: translateY(0);\n       }\n       50% {\n            transform: translateY(-20px);\n       }\n  }\n\n  @keyframes fadeAnimation {\n       0% {\n            opacity: 1;\n       }\n       50% {\n            opacity: 0.5;\n       }\n       100% {\n            opacity: 1;\n       }\n  }\n\n  .icon-wrapper {\n       display : inline-block;\n       cursor : pointer;\n       transition : all 0.369s ease-in-out;\n  }\n\n  .open-animation {\n       animation : openAnimation 0.69s ease-in-out;\n  }\n\n  .close-animation {\n       animation : closeAnimation 0.69s ease-in-out;\n  }\n\n  .bounce-animation {\n       animation : bounceAnimation 0.69s ease-in-out;\n  }\n\n  .fade-animation {\n       animation : fadeAnimation 0.69s ease-in-out;\n  }\n";
function HUDAnimatedIcon(hudAnimatedIconConfigurationSettings) {
  var _hudAnimatedIconConfi = hudAnimatedIconConfigurationSettings.iconConfigurationSettings,
    iconConfigurationSettings = _hudAnimatedIconConfi === void 0 ? {} : _hudAnimatedIconConfi,
    animationClasses = hudAnimatedIconConfigurationSettings.animationClasses,
    _hudAnimatedIconConfi2 = hudAnimatedIconConfigurationSettings.hoverIconColor,
    hoverIconColor = _hudAnimatedIconConfi2 === void 0 ? "red" : _hudAnimatedIconConfi2,
    _hudAnimatedIconConfi3 = hudAnimatedIconConfigurationSettings.iconColor,
    iconColor = _hudAnimatedIconConfi3 === void 0 ? "black" : _hudAnimatedIconConfi3,
    _hudAnimatedIconConfi4 = hudAnimatedIconConfigurationSettings.onHover,
    onHover = _hudAnimatedIconConfi4 === void 0 ? false : _hudAnimatedIconConfi4,
    _hudAnimatedIconConfi5 = hudAnimatedIconConfigurationSettings.playAnimation,
    playAnimation = _hudAnimatedIconConfi5 === void 0 ? false : _hudAnimatedIconConfi5,
    _hudAnimatedIconConfi6 = hudAnimatedIconConfigurationSettings.autoAnimate,
    autoAnimate = _hudAnimatedIconConfi6 === void 0 ? false : _hudAnimatedIconConfi6,
    _hudAnimatedIconConfi7 = hudAnimatedIconConfigurationSettings.mutatingDuration,
    mutatingDuration = _hudAnimatedIconConfi7 === void 0 ? -1 : _hudAnimatedIconConfi7,
    _hudAnimatedIconConfi8 = hudAnimatedIconConfigurationSettings.delay,
    delay = _hudAnimatedIconConfi8 === void 0 ? "0s" : _hudAnimatedIconConfi8,
    icons = hudAnimatedIconConfigurationSettings.icons;
  var _useState = useState(""),
    _useState2 = _slicedToArray(_useState, 2),
    animationClass = _useState2[0],
    setAnimationClass = _useState2[1];
  var _useState3 = useState(icons.close),
    _useState4 = _slicedToArray(_useState3, 2),
    icon = _useState4[0],
    setIcon = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    open = _useState6[0],
    setOpen = _useState6[1];
  var handleClick = function handleClick() {
    var currentlyOpen = !open;
    setIcon(currentlyOpen ? icons.open : icons.close);
    setOpen(!open);
    return;
  };
  useEffect(function () {
    var currentAnimatedClass = open ? animationClasses.open : animationClasses.close;
    setAnimationClass(currentAnimatedClass);
    var element = document.querySelector(".icon-wrapper");
    if (element) {
      element.style.animationDelay = delay;
      element.classList.remove(currentAnimatedClass);
      void element.offsetWidth;
      element.classList.add(currentAnimatedClass);
      if (!autoAnimate) {
        return;
      }
      var delayMilliseconds = parseFloat(delay) * 1000;
      var autoAnimationTimer = setTimeout(function () {
        setIcon(icons.open);
      }, delayMilliseconds);
      return function () {
        clearTimeout(autoAnimationTimer);
      };
    }
  }, [open, delay, icons, animationClasses]);
  useEffect(function () {
    if (playAnimation) {
      setIcon(icons.close);
      var delayMilliseconds = parseFloat(delay) * 1000;
      var autoAnimationTimer = setTimeout(function () {
        setIcon(icons.open);
      }, delayMilliseconds);
      return function () {
        clearTimeout(autoAnimationTimer);
      };
    }
  }, [playAnimation]);
  useEffect(function () {
    if (autoAnimate && mutatingDuration !== -1) {
      setInterval(function () {
        setIcon(icons.close);
        var delayMilliseconds = parseFloat(delay) * 1000;
        var autoAnimationTimer = setTimeout(function () {
          setIcon(icons.open);
        }, delayMilliseconds);
        return function () {
          clearTimeout(autoAnimationTimer);
        };
      }, mutatingDuration + 100);
    }
  }, [mutatingDuration]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, animations), /*#__PURE__*/React.createElement("div", {
    className: "icon-wrapper ".concat(animationClass),
    onMouseLeave: function onMouseLeave() {
      if (!onHover) {
        return;
      }
      setIcon(icons.open);
      setOpen(false);
      return;
    },
    onMouseEnter: function onMouseEnter() {
      if (!onHover) {
        return;
      }
      setIcon(icons.close);
      setOpen(true);
      return;
    },
    onClick: handleClick
  }, /*#__PURE__*/React.createElement(HUDIcon, {
    iconConfigurationSettings: _objectSpread({
      transition: "color 0.369s ease, scale 0.369s ease-in-out",
      scale: open ? "1.069" : "1"
    }, iconConfigurationSettings),
    color: open ? hoverIconColor : iconColor,
    name: icon
  })));
}
;
export default HUDAnimatedIcon;