tatuka-components
Version:
this is a readme text
52 lines • 2.88 kB
JavaScript
;
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = require("react");
var component_types_1 = require("../types/component-types");
var Symbol_1 = tslib_1.__importDefault(require("./components/Symbol"));
var react_2 = tslib_1.__importDefault(require("react"));
var core_1 = tslib_1.__importDefault(require("./core"));
require("./style.css");
var clsx_1 = tslib_1.__importDefault(require("clsx"));
function TextAnimation(_a) {
var text = _a.text, customOptions = _a.customOptions, onAnimationEnd = _a.onAnimationEnd;
var options = tslib_1.__assign(tslib_1.__assign({}, component_types_1.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 core_1.default(text, options);
function generateWords() {
var animationDelayIndex = 0;
return text.split(' ').map(function (word, index) { return (react_2.default.createElement("ul", { key: index, className: (0, clsx_1.default)('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_2.default.createElement(Symbol_1.default, { 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 = (0, react_1.useState)(Boolean), isRendered = _b[0], setIsRendered = _b[1];
(0, react_1.useEffect)(function () {
setIsRendered(true);
}, []);
return (react_2.default.createElement("div", { style: { gap: options.spacingWords }, className: 'flex flex-wrap ' }, isRendered && generateWords()));
}
exports.default = react_2.default.memo(TextAnimation);
//# sourceMappingURL=TextAnimation.js.map