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

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

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
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 _regeneratorRuntime from "@babel/runtime/regenerator";
/*

     Created by Hassan Steven Compton.
     
     March 7, 2024.

*/
import React, { useState, useEffect, useRef, useCallback } from "react";
import { motion } from "framer-motion";
import { Delay } from "../HUDManagers/HUDUniversalHUDUtilityManager.js";
function HUDTyper(_ref) {
  var _children$toString;
  var _ref$characterConfigu = _ref.characterConfigurationSettings,
    characterConfigurationSettings = _ref$characterConfigu === void 0 ? {} : _ref$characterConfigu,
    _ref$characterConfigu2 = _ref.characterConfigurations,
    characterConfigurations = _ref$characterConfigu2 === void 0 ? {} : _ref$characterConfigu2,
    _ref$typerConfigurati = _ref.typerConfigurations,
    typerConfigurations = _ref$typerConfigurati === void 0 ? {} : _ref$typerConfigurati,
    _ref$characterVariant = _ref.characterVariantsByType,
    characterVariantsByType = _ref$characterVariant === void 0 ? null : _ref$characterVariant,
    _ref$characterAnimati = _ref.characterAnimation,
    characterAnimation = _ref$characterAnimati === void 0 ? null : _ref$characterAnimati,
    _ref$speed = _ref.speed,
    speed = _ref$speed === void 0 ? 12.69 : _ref$speed,
    _ref$delay = _ref.delay,
    delay = _ref$delay === void 0 ? 0 : _ref$delay,
    onType = _ref.onType,
    _ref$startTyping = _ref.startTyping,
    startTyping = _ref$startTyping === void 0 ? false : _ref$startTyping,
    _ref$autoRefresh = _ref.autoRefresh,
    autoRefresh = _ref$autoRefresh === void 0 ? false : _ref$autoRefresh,
    _ref$playOnMount = _ref.playOnMount,
    playOnMount = _ref$playOnMount === void 0 ? true : _ref$playOnMount,
    _ref$appendMode = _ref.appendMode,
    appendMode = _ref$appendMode === void 0 ? false : _ref$appendMode,
    _ref$once = _ref.once,
    once = _ref$once === void 0 ? false : _ref$once,
    children = _ref.children;
  var _useState = useState(""),
    _useState2 = _slicedToArray(_useState, 2),
    displayedText = _useState2[0],
    setDisplayedText = _useState2[1];
  var _useState3 = useState(-1),
    _useState4 = _slicedToArray(_useState3, 2),
    typingIndex = _useState4[0],
    setTypingIndex = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    typedOnce = _useState6[0],
    setTypedOnce = _useState6[1];
  var _useState7 = useState(false),
    _useState8 = _slicedToArray(_useState7, 2),
    typing = _useState8[0],
    setTyping = _useState8[1];
  var lastTypedTextRef = useRef("");
  var charRefs = useRef([]);
  var textToType = (_children$toString = children === null || children === void 0 ? void 0 : children.toString()) !== null && _children$toString !== void 0 ? _children$toString : "";
  var updateCharRefs = useCallback(function (el, index) {
    charRefs.current[index] = el;
  }, []);
  var getCharType = useCallback(function (_char) {
    if (/\d/.test(_char)) {
      return "digit";
    }
    if (/[a-zA-Z]/.test(_char)) {
      return "letter";
    }
    return "symbol";
  }, []);
  useEffect(function () {
    var shouldType = playOnMount || startTyping || autoRefresh && lastTypedTextRef.current !== textToType;
    if (!shouldType) {
      return;
    }
    if (once && typedOnce && lastTypedTextRef.current === textToType) {
      return;
    }
    var beginTyping = /*#__PURE__*/function () {
      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) switch (_context.prev = _context.next) {
            case 0:
              _context.next = 2;
              return Delay(delay);
            case 2:
              if (speed <= 0) {
                setDisplayedText(textToType);
                setTypingIndex(textToType.length - 1);
                setTyping(false);
                if (once) {
                  setTypedOnce(true);
                }
              } else {
                if (appendMode && textToType.startsWith(displayedText)) {
                  setTypingIndex(displayedText.length);
                } else {
                  setDisplayedText("");
                  setTypingIndex(0);
                }
                setTyping(true);
              }
              lastTypedTextRef.current = textToType;
            case 4:
            case "end":
              return _context.stop();
          }
        }, _callee);
      }));
      return function beginTyping() {
        return _ref2.apply(this, arguments);
      };
    }();
    beginTyping();
  }, [textToType, delay, autoRefresh, playOnMount, once, typedOnce, startTyping, appendMode]);
  useEffect(function () {
    if (!typing || typingIndex === -1 || typingIndex > textToType.length) {
      return;
    }
    var timer = setTimeout(function () {
      var nextIndex = typingIndex + 1;
      setDisplayedText(textToType.slice(0, nextIndex));
      if (onType && charRefs.current[typingIndex]) {
        var _charRefs$current$typ = charRefs.current[typingIndex].getBoundingClientRect(),
          top = _charRefs$current$typ.top,
          left = _charRefs$current$typ.left;
        onType(textToType[typingIndex], {
          top: top,
          left: left
        });
      }
      if (nextIndex >= textToType.length) {
        setTyping(false);
        if (once) {
          setTypedOnce(true);
        }
      }
      setTypingIndex(nextIndex);
    }, speed);
    return function () {
      return clearTimeout(timer);
    };
  }, [typingIndex, typing, textToType, speed, onType]);
  if (!characterAnimation && !characterVariantsByType) {
    return /*#__PURE__*/React.createElement("span", _extends({
      style: _objectSpread({
        display: "block",
        whiteSpace: "pre-wrap",
        wordBreak: "break-word"
      }, typerConfigurations === null || typerConfigurations === void 0 ? void 0 : typerConfigurations.style)
    }, typerConfigurations), textToType.split("").map(function (_char2, index) {
      return /*#__PURE__*/React.createElement("span", {
        key: index,
        ref: function ref(el) {
          return updateCharRefs(el, index);
        }
      }, index <= typingIndex ? _char2 : "");
    }));
  }
  return /*#__PURE__*/React.createElement("span", _extends({
    style: _objectSpread({
      display: "block",
      whiteSpace: "pre-wrap",
      wordBreak: "break-word"
    }, typerConfigurations === null || typerConfigurations === void 0 ? void 0 : typerConfigurations.style)
  }, typerConfigurations), textToType.split("").map(function (_char3, index) {
    if (index > typingIndex) {
      return /*#__PURE__*/React.createElement("span", {
        key: index,
        style: {
          visibility: "hidden",
          width: "0.69ch"
        }
      });
    }
    var shouldAnimate = characterAnimation || characterVariantsByType;
    var Component = shouldAnimate ? motion.span : "span";
    var animationProps = {};
    if (characterVariantsByType) {
      var _variant$initial, _variant$animate, _variant$transition, _variant$transition$d, _variant$transition2;
      var type = getCharType(_char3);
      var variant = characterVariantsByType[type] || {};
      animationProps = {
        initial: (_variant$initial = variant.initial) !== null && _variant$initial !== void 0 ? _variant$initial : "hidden",
        animate: (_variant$animate = variant.animate) !== null && _variant$animate !== void 0 ? _variant$animate : "visible",
        exit: variant.exit,
        variants: variant.variants,
        transition: _objectSpread(_objectSpread({}, (_variant$transition = variant.transition) !== null && _variant$transition !== void 0 ? _variant$transition : {}), {}, {
          delay: ((_variant$transition$d = (_variant$transition2 = variant.transition) === null || _variant$transition2 === void 0 ? void 0 : _variant$transition2.delay) !== null && _variant$transition$d !== void 0 ? _variant$transition$d : 0) + index * speed / 1000
        })
      };
    } else if (characterAnimation) {
      var _characterAnimation$i, _characterAnimation$a, _characterAnimation$t, _characterAnimation$t2, _characterAnimation$t3;
      animationProps = {
        initial: (_characterAnimation$i = characterAnimation.initial) !== null && _characterAnimation$i !== void 0 ? _characterAnimation$i : "hidden",
        animate: (_characterAnimation$a = characterAnimation.animate) !== null && _characterAnimation$a !== void 0 ? _characterAnimation$a : "visible",
        exit: characterAnimation.exit,
        variants: characterAnimation.variants,
        transition: _objectSpread(_objectSpread({}, (_characterAnimation$t = characterAnimation.transition) !== null && _characterAnimation$t !== void 0 ? _characterAnimation$t : {}), {}, {
          delay: ((_characterAnimation$t2 = (_characterAnimation$t3 = characterAnimation.transition) === null || _characterAnimation$t3 === void 0 ? void 0 : _characterAnimation$t3.delay) !== null && _characterAnimation$t2 !== void 0 ? _characterAnimation$t2 : 0) + index * speed / 1000
        })
      };
    }
    return /*#__PURE__*/React.createElement(Component, _extends({
      key: "".concat(_char3, "-").concat(index, "-").concat(typingIndex),
      ref: function ref(el) {
        return updateCharRefs(el, index);
      }
    }, animationProps, {
      style: _objectSpread(_objectSpread({}, characterConfigurationSettings), shouldAnimate ? {} : {
        whiteSpace: "pre-wrap"
      })
    }, characterConfigurations), _char3 === " " ? "\xA0" : _char3);
  }));
}
;
export default HUDTyper;