typingfx
Version:
Customizable, smooth, and snappy typing animations for React — built for natural, human-like effects with minimal config.
2 lines (1 loc) • 3.33 kB
JavaScript
;var u=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var N=(t,a)=>{for(var e in a)u(t,e,{get:a[e],enumerable:!0})},T=(t,a,e,o)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of b(a))!v.call(t,s)&&s!==e&&u(t,s,{get:()=>a[s],enumerable:!(o=E(a,s))||o.enumerable});return t};var S=t=>T(u({},"__esModule",{value:!0}),t);var U={};N(U,{addAnimationListeners:()=>M,listElements:()=>C,setupTypingFX:()=>A,updateAfterDelAnim:()=>_,updateAfterTypeAnim:()=>x});module.exports=S(U);var w=require("react");var r={typeout:"tfx_typeout",word:"tfx_word",hk:"tfx_hk",processing:"tfx_processing",type:"tfx_type",del:"tfx_del",wait:"tfx_wait",cursor:"tfx_cursor",blink:"tfx_blink",paused:"tfx_paused",component:"tfx_component",fadein:"tfx_fadein",fadeout:"tfx_fadeout"};var d=require("react/jsx-runtime"),A=(t,a)=>{let e=o=>{var s;if(Array.isArray(o))return o.map(e);if(typeof o=="string")return o.trim().split(" ").map((i,n)=>(0,d.jsxs)("span",{className:r.word,children:[i,"\xA0"]},i+n));if(typeof o=="number"){let[i,n]=o>0?[o,0]:[0,-o];return(0,d.jsx)("span",{className:[r.word,r.wait].join(" "),style:{"--d":`${i}ms`,"--r":`${n}ms`},children:"\xA0"},crypto.randomUUID())}if((0,w.isValidElement)(o)){let{type:i,props:n}=o,p=typeof i=="string"?{className:[r.hk,n.className].join(" ")}:{};return i instanceof Function||n["data-tfx"]&&a?a?(0,d.jsx)(a.wrapper,{...a.props,className:[r.component,r.hk,(s=a.props)==null?void 0:s.className].join(" "),children:o},crypto.randomUUID()):e(i(n)):(0,d.jsx)(i,{...n,...p,children:e(n.children)},crypto.randomUUID())}return o};return t.map(e)},k=(t,a)=>{var o,s;a.push(t);let e=t;t.classList.contains(r.component)||(e.classList.contains(r.hk)?e.style.setProperty("--n","0"):e.classList.contains(r.word)&&(e.style.setProperty("--n",`${(s=(o=e.textContent)==null?void 0:o.length)!=null?s:0}`),e.style.setProperty("--w",`${e.offsetWidth}px`)),Array.from(t.children).forEach(i=>k(i,a)))},C=t=>Array.from(t.children).map(a=>{let e=[];return k(a,e),e}),H=t=>{let a=[];for(let e=0;e<t.length;e++){let o=t[e],s=t[(e+1)%t.length],i=0;for(;i<o.length&&i<s.length;i++){let n=o[i].classList.contains(r.word),p=s[i].classList.contains(r.word);if(!(n&&p&&o[i].textContent===s[i].textContent)&&(n||p))break}a.push(i)}return a},x=t=>{t.style.width=t.style.getPropertyValue("--w"),t.classList.remove(r.type,r.hk)},_=t=>{t.style.width="0",t.classList.remove(r.del),t.classList.contains(r.word)||t.classList.add(r.hk)},M=(t,a,e)=>{let o=H(t),s=0;for(;s<t.length&&t[s].length===o[s];)s++;if(s===t.length)return;let i=0;for(let n=0;n<t.length;n++)for(let p=0;p<t[n].length;p++){let l=t[n][p],h=t[n][p+1],y=t[n][p-1];l.onanimationend=L=>{if(L.stopPropagation(),l.classList.contains(r.type))x(l),h?(x(h),h.classList.add(r.type)):n!==t.length-1||i++<a?l.classList.add(r.del):e||l.classList.add(r.cursor);else if(_(l),p===t[n].length-1&&t[n].length===o[n]||p===o[n]){let f=(n+1)%t.length;for(;t[f].length===o[f];)f=(f+1)%t.length;f===n&&(f=(t.length+f-1)%t.length);let m=t[f];for(let c=0;c<p;c++)x(m[c]);for(let c=0;c<p;c++)_(t[n][c]);let g=m[m[p]?p:p-1];x(g),g.classList.add(r.type)}else y&&y.classList.add(r.del)}}};0&&(module.exports={addAnimationListeners,listElements,setupTypingFX,updateAfterDelAnim,updateAfterTypeAnim});