@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 _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
/*

     Created by Hassan Steven Compton.
     
     March 7, 2024.

*/
import React, { useState, useEffect, useRef, useCallback } from "react";
import { Delay } from "../HUDManagers/HUDUniversalHUDUtilityManager.js";
function HUDTyper(_ref) {
  var speed = _ref.speed,
    _ref$delay = _ref.delay,
    delay = _ref$delay === void 0 ? 0 : _ref$delay,
    onType = _ref.onType,
    children = _ref.children,
    _ref$autoRefresh = _ref.autoRefresh,
    autoRefresh = _ref$autoRefresh === void 0 ? true : _ref$autoRefresh;
  var _useState = useState(""),
    _useState2 = _slicedToArray(_useState, 2),
    displayedText = _useState2[0],
    setDisplayedText = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    startTyping = _useState4[0],
    setStartTyping = _useState4[1];
  var _useState5 = useState(-1),
    _useState6 = _slicedToArray(_useState5, 2),
    typingIndex = _useState6[0],
    setTypingIndex = _useState6[1];
  var _useState7 = useState(false),
    _useState8 = _slicedToArray(_useState7, 2),
    typing = _useState8[0],
    setTyping = _useState8[1];
  var charRefs = useRef([]);
  var updateCharRefs = useCallback(function (el, index) {
    charRefs.current[index] = el;
    return;
  }, []);
  useEffect(function () {
    if (autoRefresh) {
      return;
    }
    var typerMounted = true;
    var textToType = children.toString();
    if (startTyping && typerMounted) {
      var typingTimer = setTimeout(function () {
        if (!typerMounted) {
          return;
        }
        var nextIndex = typingIndex + 1;
        setDisplayedText(textToType.substring(0, nextIndex));
        if (onType && charRefs.current[nextIndex - 1]) {
          var _charRefs$current$get = charRefs.current[nextIndex - 1].getBoundingClientRect(),
            top = _charRefs$current$get.top,
            left = _charRefs$current$get.left;
          onType(textToType[nextIndex - 1], {
            top: top,
            left: left
          });
          return;
        }
        if (typingIndex + 1 >= textToType.length) {
          clearTimeout(typingTimer);
          return;
        }
        setTypingIndex(function (pIndex) {
          return pIndex + 1;
        });
        return;
      }, speed);
      if (typingIndex >= textToType.length) {
        clearTimeout(typingTimer);
        return;
      }
      return function () {
        typerMounted = false;
        clearTimeout(typingTimer);
        return;
      };
    }
    return;
  }, [startTyping, typingIndex, children, speed, onType, autoRefresh]);
  useEffect(function () {
    if (!autoRefresh) {
      return;
    }
    var typerMounted = true;
    var textToType = children.toString();
    if (startTyping && typerMounted) {
      var typingTimer = setTimeout(function () {
        if (!typerMounted) {
          return;
        }
        var nextIndex = typingIndex + 1;
        setDisplayedText(textToType.substring(0, nextIndex));
        if (onType && charRefs.current[nextIndex - 1]) {
          var _charRefs$current$get2 = charRefs.current[nextIndex - 1].getBoundingClientRect(),
            top = _charRefs$current$get2.top,
            left = _charRefs$current$get2.left;
          onType(textToType[nextIndex - 1], {
            top: top,
            left: left
          });
        }
        if (typingIndex + 1 >= textToType.length) {
          clearTimeout(typingTimer);
          return;
        }
        setTypingIndex(function (pIndex) {
          return pIndex + 1;
        });
        return;
      }, speed);
      if (typingIndex >= textToType.length) {
        clearTimeout(typingTimer);
      }
      return function () {
        typerMounted = false;
        setTyping(false);
        clearTimeout(typingTimer);
      };
    }
    return function () {};
  }, [startTyping, typingIndex, children, speed, autoRefresh]);
  useEffect(function () {
    if (autoRefresh) {
      return;
    }
    if (startTyping || typingIndex > -1) {
      return;
    }
    var activateTyping = /*#__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:
              setStartTyping(true);
              return _context.abrupt("return");
            case 4:
            case "end":
              return _context.stop();
          }
        }, _callee);
      }));
      return function activateTyping() {
        return _ref2.apply(this, arguments);
      };
    }();
    activateTyping();
    return;
  }, [children, delay, startTyping, typingIndex, autoRefresh]);
  useEffect(function () {
    if (!autoRefresh) {
      return;
    }
    var activateTyping = /*#__PURE__*/function () {
      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) switch (_context2.prev = _context2.next) {
            case 0:
              if (!typing) {
                _context2.next = 2;
                break;
              }
              return _context2.abrupt("return");
            case 2:
              _context2.next = 4;
              return Delay(delay);
            case 4:
              setDisplayedText("");
              setTyping(true);
              setStartTyping(true);
              setTypingIndex(0);
              return _context2.abrupt("return");
            case 9:
            case "end":
              return _context2.stop();
          }
        }, _callee2);
      }));
      return function activateTyping() {
        return _ref3.apply(this, arguments);
      };
    }();
    activateTyping();
    return function () {};
  }, [children, delay, autoRefresh]);
  return /*#__PURE__*/React.createElement("span", null, children.split("").map(function (_char, index) {
    return /*#__PURE__*/React.createElement("span", {
      key: index,
      ref: function ref(el) {
        return updateCharRefs(el, index);
      }
    }, index <= typingIndex ? _char : "");
  }));
}
export default HUDTyper;