tatuka-components
Version:
this is a readme text
50 lines • 2.61 kB
JavaScript
'use client';
import { __assign } from "tslib";
import { useEffect, useState } from 'react';
import { textAnimationDefaultProps } from '../types/component-types';
import Symbol from './components/Symbol';
import React from 'react';
import TextAnimationCore from './core';
import "../../../dist/style/styles.css";
import clsx from 'clsx';
function TextAnimation(_a) {
var text = _a.text, customOptions = _a.customOptions, onAnimationEnd = _a.onAnimationEnd;
var options = __assign(__assign({}, textAnimationDefaultProps), customOptions);
var animationNames = {
domino: 'circle',
dance: 'dance',
random: 'circle',
loading: 'loading',
};
//check pharametres validation
if (options.speed > 100 || options.speed < 0) {
throw new Error('options Speed pharameter should be only number from 0 to 100');
}
var textAnimationCore = new TextAnimationCore(text, options);
function generateWords() {
var animationDelayIndex = 0;
return text.split(' ').map(function (word, index) { return (React.createElement("ul", { key: index, className: clsx('text-animation ', options.mirror && 'mirror') }, word.split('').map(function (character) {
if (typeof window === 'undefined') {
return null;
}
var color = textAnimationCore.getColor();
var animationDelay = textAnimationCore.getAnimationDelay(animationDelayIndex);
animationDelayIndex++;
return (React.createElement(Symbol, { onAnimationEnd: function (anim) {
if (anim.currentTarget.style.animationDelay ===
"".concat(String(Math.max.apply(Math, textAnimationCore.animationDelayTimes)), "s")) {
if (typeof onAnimationEnd === 'function') {
onAnimationEnd();
}
}
}, color: color, key: "".concat(index, "_symbol_").concat(animationDelay, "_").concat(String(Math.random())), fontSize: options.fontSize, symbol: character, animationName: animationNames[options.style], animationDelay: animationDelay, animationDuration: options.symbolAnimationTime }));
}))); });
}
var _b = useState(Boolean), isRendered = _b[0], setIsRendered = _b[1];
useEffect(function () {
setIsRendered(true);
}, []);
return (React.createElement("div", { style: { gap: options.spacingWords }, className: 'flex flex-wrap ' }, isRendered && generateWords()));
}
export default React.memo(TextAnimation);
//# sourceMappingURL=TextAnimation.js.map