@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDRotatingText.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 * as React from "react";
import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
function HUDRotatingText(_ref) {
  var _ref$rotatingWordTran = _ref.rotatingWordTransitionAnimationConfigurationSettings,
    rotatingWordTransitionAnimationConfigurationSettings = _ref$rotatingWordTran === void 0 ? {} : _ref$rotatingWordTran,
    _ref$rotatingWordInit = _ref.rotatingWordInitialAnimationConfigurationSettings,
    rotatingWordInitialAnimationConfigurationSettings = _ref$rotatingWordInit === void 0 ? {} : _ref$rotatingWordInit,
    _ref$rotatingWordExit = _ref.rotatingWordExitAnimationConfigurationSettings,
    rotatingWordExitAnimationConfigurationSettings = _ref$rotatingWordExit === void 0 ? {} : _ref$rotatingWordExit,
    _ref$rotatingWordAnim = _ref.rotatingWordAnimationConfigurationSettings,
    rotatingWordAnimationConfigurationSettings = _ref$rotatingWordAnim === void 0 ? {} : _ref$rotatingWordAnim,
    _ref$rotatingTextCont = _ref.rotatingTextContainerConfigurationSettings,
    rotatingTextContainerConfigurationSettings = _ref$rotatingTextCont === void 0 ? {} : _ref$rotatingTextCont,
    _ref$rotatingWordConf = _ref.rotatingWordConfigurationSettings,
    rotatingWordConfigurationSettings = _ref$rotatingWordConf === void 0 ? {} : _ref$rotatingWordConf,
    _ref$wordConfiguratio = _ref.wordConfigurationSettings,
    wordConfigurationSettings = _ref$wordConfiguratio === void 0 ? {} : _ref$wordConfiguratio,
    wordReplacements = _ref.wordReplacements,
    _ref$interval = _ref.interval,
    interval = _ref$interval === void 0 ? 2000 : _ref$interval,
    template = _ref.template;
  var _useState = useState(0),
    _useState2 = _slicedToArray(_useState, 2),
    cycleIndex = _useState2[0],
    setCycleIndex = _useState2[1];
  var getProcessedText = function getProcessedText() {
    return template.split(" ").map(function (word, index) {
      if (wordReplacements[word]) {
        var wordsArray = wordReplacements[word];
        var currentWord = wordsArray[cycleIndex % wordsArray.length];
        return /*#__PURE__*/React.createElement(motion.span, {
          key: "animated-".concat(index),
          layout: true,
          style: _objectSpread({
            position: "relative",
            display: "inline-flex",
            verticalAlign: "baseline",
            whiteSpace: "nowrap",
            marginRight: "4px"
          }, rotatingWordConfigurationSettings)
        }, /*#__PURE__*/React.createElement("span", {
          "aria-hidden": "true",
          style: {
            position: "absolute",
            visibility: "hidden",
            whiteSpace: "nowrap"
          }
        }, currentWord), /*#__PURE__*/React.createElement(AnimatePresence, {
          mode: "wait",
          initial: false
        }, /*#__PURE__*/React.createElement(motion.span, {
          key: "".concat(word, "-").concat(cycleIndex % wordsArray.length),
          initial: _objectSpread({
            opacity: 0,
            y: "100%"
          }, rotatingWordInitialAnimationConfigurationSettings),
          animate: _objectSpread({
            opacity: 1,
            y: "0%"
          }, rotatingWordAnimationConfigurationSettings),
          exit: _objectSpread({
            opacity: 0,
            y: "-100%"
          }, rotatingWordExitAnimationConfigurationSettings),
          transition: _objectSpread({
            duration: 0.569,
            delay: 0.069
          }, rotatingWordTransitionAnimationConfigurationSettings),
          style: {
            whiteSpace: "nowrap",
            display: "inline-block"
          }
        }, currentWord)));
      }
      return /*#__PURE__*/React.createElement("span", {
        key: "static-".concat(index),
        style: _objectSpread({
          marginRight: "4px",
          whiteSpace: "nowrap"
        }, wordConfigurationSettings)
      }, word);
    });
  };
  useEffect(function () {
    var wordCycle = setInterval(function () {
      setCycleIndex(function (prev) {
        return prev + 1;
      });
    }, interval);
    return function () {
      return clearInterval(wordCycle);
    };
  }, [interval]);
  return /*#__PURE__*/React.createElement("div", {
    style: _objectSpread({
      display: "flex",
      flexDirection: "row",
      flexWrap: "wrap",
      fontWeight: "569",
      fontSize: "1.69rem"
    }, rotatingTextContainerConfigurationSettings)
  }, getProcessedText());
}
export default HUDRotatingText;