@erosnicolau/animated-text
Version:
Advanced React animated text component with comprehensive animation effects
91 lines (90 loc) • 4.37 kB
JavaScript
/**
* Check if any fontSize effects are configured to avoid Tailwind class conflicts
*/
export const hasFontSizeEffects = (animation, blockEffect, phraseStyles, wordEffect, typewriterEffect, wordTypewriterEffect) => {
// Check block effects
if (animation === 'block') {
const effects = Array.isArray(blockEffect) ? blockEffect : [blockEffect];
return effects.some(effect => typeof effect === 'object' && effect.type === 'fontSize');
}
// Check phrase effects
if (animation === 'phrases' && phraseStyles) {
return phraseStyles.some(style => {
if (!style.effect)
return false;
const effects = Array.isArray(style.effect) ? style.effect : [style.effect];
return effects.some(effect => typeof effect === 'object' && effect.type === 'fontSize');
});
}
// Check word effects
if (animation === 'word' && wordEffect) {
const effects = Array.isArray(wordEffect) ? wordEffect : [wordEffect];
return effects.some(effect => typeof effect === 'object' && effect.type === 'fontSize');
}
// Check typewriter effects
if (animation === 'typewriter' && typewriterEffect) {
const effects = Array.isArray(typewriterEffect) ? typewriterEffect : [typewriterEffect];
return effects.some(effect => typeof effect === 'object' && effect.type === 'fontSize');
}
// Check word-typewriter effects
if (animation === 'word-typewriter' && wordTypewriterEffect) {
const effects = Array.isArray(wordTypewriterEffect) ? wordTypewriterEffect : [wordTypewriterEffect];
return effects.some(effect => typeof effect === 'object' && effect.type === 'fontSize');
}
return false;
};
/**
* Check if any lineHeight effects are configured to avoid Tailwind class conflicts
*/
export const hasLineHeightEffects = (animation, blockEffect, phraseStyles, wordEffect, typewriterEffect, wordTypewriterEffect) => {
// Check block effects
if (animation === 'block') {
const effects = Array.isArray(blockEffect) ? blockEffect : [blockEffect];
return effects.some(effect => typeof effect === 'object' && effect.type === 'lineHeight');
}
// Check phrase effects
if (animation === 'phrases' && phraseStyles) {
return phraseStyles.some(style => {
if (!style.effect)
return false;
const effects = Array.isArray(style.effect) ? style.effect : [style.effect];
return effects.some(effect => typeof effect === 'object' && effect.type === 'lineHeight');
});
}
// Check word effects
if (animation === 'word' && wordEffect) {
const effects = Array.isArray(wordEffect) ? wordEffect : [wordEffect];
return effects.some(effect => typeof effect === 'object' && effect.type === 'lineHeight');
}
// Check typewriter effects
if (animation === 'typewriter' && typewriterEffect) {
const effects = Array.isArray(typewriterEffect) ? typewriterEffect : [typewriterEffect];
return effects.some(effect => typeof effect === 'object' && effect.type === 'lineHeight');
}
// Check word-typewriter effects
if (animation === 'word-typewriter' && wordTypewriterEffect) {
const effects = Array.isArray(wordTypewriterEffect) ? wordTypewriterEffect : [wordTypewriterEffect];
return effects.some(effect => typeof effect === 'object' && effect.type === 'lineHeight');
}
return false;
};
/**
* Detect Tailwind font-size classes specifically in className prop
*/
export const hasFontSizeClasses = (className) => {
if (!className)
return false;
const fontSizePattern = /text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)/;
return fontSizePattern.test(className);
};
/**
* Detect any Tailwind font classes in className prop (for legacy compatibility)
*/
export const hasFontClasses = (className) => {
if (!className)
return false;
const fontSizePattern = /text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)/;
const fontWeightPattern = /font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)/;
const lineHeightPattern = /leading-(none|tight|snug|normal|relaxed|loose|[0-9]+)/;
return fontSizePattern.test(className) || fontWeightPattern.test(className) || lineHeightPattern.test(className);
};