typewriter-animation-adjustable/dist/components/TypewriterAnimation.js

Adjustbale Type Writer Animation

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("core-js/modules/web.dom.iterable.js");
require("core-js/modules/es6.regexp.split.js");
require("core-js/modules/es6.symbol.js");
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
// import "core-js/web/dom-collections/";
// import "core-js/es6/regexp";
// import "core-js/es6";

const AnimationWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: ", ";\n  background-color: ", ";\n  padding: ", ";\n  display: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n  height: ", ";\n  width: ", ";\n\n  table {\n    width: 100%;\n  }\n\n  h1 {\n    color: ", ";\n    font-size: ", ";\n    font-family: ", ";\n    margin: ", ";\n    padding: ", ";\n    text-transform: ", ";\n    font-weight: ", ";\n  }\n\n  p {\n    color: ", ";\n    font-size: ", ";\n    font-family: ", ";\n    margin: ", ";\n    padding: ", ";\n    text-transform: ", ";\n    font-weight: ", ";\n  }\n"])), props => props.containerMargin || "0%", props => props.containerBgColor || "#48c9b0", props => props.containerPadding || "0%", props => props.containerDisplay || "inline-block", props => props.containerAlignItems || "start", props => props.containerJustifyContent || "start", props => props.containerHeight || "auto", props => props.containerWidth || "100%", props => props.headerColor || "white", props => props.headerFontSize || "5em", props => props.headerFontFamily || "system-ui", props => props.headerMargin || "0%", props => props.headerPadding || "0%", props => props.headerTextTransform || "none", props => props.headerFontWeight || "none", props => props.descriptionColor || "black", props => props.descriptionFontSize || "4em", props => props.descriptionFontFamily || "system-ui", props => props.descriptionMargin || "0.1em 0.1em 0.1em 0.1em", props => props.descriptionPadding || "0.1em 0.1em 0.1em 0.1em", props => props.descriptionTextTransform || "none", props => props.descriptionFontWeight || "none");
const Blinker_ = _styledComponents.default.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  margin: ", ";\n  &:after {\n    position: absolute;\n    content: \"\";\n    top: ", ";\n    width: ", ";\n    height: ", ";\n    background-color: ", ";\n  }\n"])), props => props.Margin || " 0px 0px 0px 10px", props => props.Top || "0.15em", props => props.Width || "0.05em", props => props.Height, props => props.color);
const blink = (0, _styledComponents.keyframes)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\n60%\n{\nopacity: 0;\n}\n\n"])));
const Blinker = (0, _styledComponents.default)(Blinker_)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  animation: ", " 1s infinite;\n"])), blink);
const TypewriterAnimation = _ref => {
  let {
    value,
    headerBlinkTimer,
    descriptnBlinkTimer,
    containerMargin,
    containerPadding,
    containerBgColor,
    containerAlignItems,
    containerJustifyContent,
    containerHeight,
    containerWidth,
    containerDisplay,
    headerColor,
    headerFontSize,
    headerFontFamily,
    headerMargin,
    headerPadding,
    descriptionColor,
    descriptionFontSize,
    descriptionFontFamily,
    descriptionMargin,
    descriptionPadding,
    headerBlinkerWidth,
    headerBlinkerHeight,
    headerBlinkerColor,
    headerBlinkerDisplay,
    headerBlinkerMargin,
    headerBlinkerTop,
    descriptionBlinkerHeight,
    descriptionBlinkerWidth,
    descriptionBlinkerColor,
    descriptionBlinkerDisplay,
    descriptionBlinkerMargin,
    descriptionBlinkerTop,
    headerTextTransform,
    headerFontWeight,
    descriptionTextTransform,
    descriptionFontWeight
  } = _ref;
  const [name, setName] = (0, _react.useState)("");
  const [displayHeader, setDisplayHeader] = (0, _react.useState)(headerBlinkerDisplay || false);
  const [displayDes, setDisplayDesc] = (0, _react.useState)(descriptionBlinkerDisplay || true);
  const setNameAnimation = (0, _react.useCallback)(value => {
    // alert(display);
    let index = 0,
      s = [];
    const g = setInterval(function () {
      index = index + 1;
      if (s.length <= value.length) {
        // s.pop();
        s.push(value[index - 1]);
        // s.push(" _");
        if (value[index - 1] === "*") {}
        setName(s.join("").split("*"));
      }
    }, 100);
    if (s.length === value.length) {
      clearInterval(g);
    }
  }, []);
  (0, _react.useEffect)(() => {
    setTimeout(() => {
      setDisplayHeader(false);
    }, headerBlinkTimer ? headerBlinkTimer : 3000);
    setTimeout(() => {
      setDisplayDesc(false);
    }, descriptnBlinkTimer ? descriptnBlinkTimer : 6000);
  }, [displayDes, displayHeader, value, headerBlinkTimer, descriptnBlinkTimer]);
  (0, _react.useEffect)(() => {
    setNameAnimation(value || "Hey, This is My Heading * &  Description !");
  }, [setNameAnimation, value]);
  return /*#__PURE__*/_react.default.createElement(AnimationWrapper, {
    containerDisplay: containerDisplay,
    containerMargin: containerMargin,
    containerPadding: containerPadding,
    containerBgColor: containerBgColor,
    containerAlignItems: containerAlignItems,
    containerJustifyContent: containerJustifyContent,
    containerHeight: containerHeight,
    containerWidth: containerWidth,
    headerColor: headerColor,
    headerFontSize: headerFontSize,
    headerFontFamily: headerFontFamily,
    headerMargin: headerMargin,
    headerPadding: headerPadding,
    descriptionColor: descriptionColor,
    descriptionFontSize: descriptionFontSize,
    descriptionFontFamily: descriptionFontFamily,
    descriptionMargin: descriptionMargin,
    descriptionPadding: descriptionPadding,
    headerTextTransform: headerTextTransform,
    headerFontWeight: headerFontWeight,
    descriptionTextTransform: descriptionTextTransform,
    descriptionFontWeight: descriptionFontWeight
  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement("tbody", null, Array.from(Array(name.length).keys()).map((e, i) => i === 0 ? /*#__PURE__*/_react.default.createElement("tr", {
    key: i
  }, /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement("h1", null, name[i], /*#__PURE__*/_react.default.createElement("span", {
    style: {
      visibility: displayHeader ? "visible" : "hidden"
    }
  }, /*#__PURE__*/_react.default.createElement(Blinker, {
    Margin: headerBlinkerMargin,
    Top: headerBlinkerTop,
    Width: headerBlinkerWidth,
    Height: headerBlinkerHeight || headerFontSize,
    color: headerBlinkerColor || headerColor
  }))))) : i === 1 ? /*#__PURE__*/_react.default.createElement("tr", {
    key: i
  }, /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement("p", {
    key: i,
    id: "description".concat(i)
  }, name[i], /*#__PURE__*/_react.default.createElement("span", {
    style: {
      visibility: displayDes ? "visible" : "hidden"
    }
  }, /*#__PURE__*/_react.default.createElement(Blinker, {
    Margin: descriptionBlinkerMargin,
    Top: descriptionBlinkerTop,
    Width: descriptionBlinkerWidth,
    Height: descriptionBlinkerHeight || descriptionFontSize,
    color: descriptionBlinkerColor || descriptionColor
  }))))) : "")))));
};
var _default = TypewriterAnimation;
exports.default = _default;