typingfx
Version:
Customizable, smooth, and snappy typing animations for React — built for natural, human-like effects with minimal config.
2 lines (1 loc) • 3.37 kB
JavaScript
;var u=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var N=Object.prototype.hasOwnProperty;var T=(t,r)=>{for(var e in r)u(t,e,{get:r[e],enumerable:!0})},S=(t,r,e,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of v(r))!N.call(t,s)&&s!==e&&u(t,s,{get:()=>r[s],enumerable:!(o=b(r,s))||o.enumerable});return t};var A=t=>S(u({},"__esModule",{value:!0}),t);var U={};T(U,{addAnimationListeners:()=>M,compareSteps:()=>L,listElements:()=>H,setupTypingFX:()=>C,updateAfterDelAnim:()=>_,updateAfterTypeAnim:()=>x});module.exports=A(U);var w=require("react");var a={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"),C=(t,r)=>{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:a.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:[a.word,a.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:[a.hk,n.className].join(" ")}:{};return i instanceof Function||n["data-tfx"]&&r?r?(0,d.jsx)(r.wrapper,{...r.props,className:[a.component,a.hk,(s=r.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,r)=>{var o,s;r.push(t);let e=t;t.classList.contains(a.component)||(e.classList.contains(a.hk)?e.style.setProperty("--n","0"):e.classList.contains(a.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,r)))},H=t=>Array.from(t.children).map(r=>{let e=[];return k(r,e),e}),L=t=>{let r=[];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(a.word),p=s[i].classList.contains(a.word);if(!(n&&p&&o[i].textContent===s[i].textContent)&&(n||p))break}r.push(i)}return r},x=t=>{t.style.width=t.style.getPropertyValue("--w"),t.classList.remove(a.type,a.hk)},_=t=>{t.style.width="0",t.classList.remove(a.del),t.classList.contains(a.word)||t.classList.add(a.hk)},M=(t,r,e)=>{let o=L(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=E=>{if(E.stopPropagation(),l.classList.contains(a.type))x(l),h?(x(h),h.classList.add(a.type)):n!==t.length-1||i++<r?l.classList.add(a.del):e||l.classList.add(a.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(a.type)}else y&&y.classList.add(a.del)}}};0&&(module.exports={addAnimationListeners,compareSteps,listElements,setupTypingFX,updateAfterDelAnim,updateAfterTypeAnim});