@infinityfx/fluid/dist/components/display/ticker.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsx as t}from"react/jsx-runtime";import{combineClasses as e,classes as i}from"../../core/utils.js";import{useRef as r,useState as n,useEffect as l}from"react";import{createStyles as c}from"../../core/style.js";import{useTrigger as o}from"@infinityfx/lively/hooks";import{Animatable as a}from"@infinityfx/lively";import{LayoutGroup as m}from"@infinityfx/lively/layout";const s=c("ticker",{".ticker":{display:"flex",alignItems:"flex-end",height:"1.25em",overflow:"hidden"},".column":{display:"flex",flexDirection:"column",alignItems:"center"},".column > *":{height:"1.25em",lineHeight:1.2,width:"100%",whiteSpace:"pre"}});function h({children:c,cc:h={},align:u="left",selective:g,duration:f=.7,stagger:d=.1,...p}){const v=e(s,h),y=o(),x=r(c.toString()),S=r(c.toString().split("").map((t=>[{char:t,active:1}]))),k=r([]),[w,b]=n(S.current);function j(){const t=[];for(let e=0;e<S.current.length;e++){let i=S.current[e];i=i.slice(i.length>2?1:0),(null!==i[i.length-1].char||i.length>2)&&t.push(i)}S.current=t,b(t)}return l((()=>{if(x.current===c.toString())return;x.current=c.toString();const t=x.current.split(""),e=S.current,i=e.length-t.length;k.current=e.map((t=>t[t.length-1].char)),i>0&&t["right"===u?"unshift":"push"](...new Array(i).fill(null));for(let r=t.length-1;r>=0;r--){const n="right"==u?r+Math.min(i,0):r;if(Array.isArray(e[n]))e[n].push({char:t[r],active:1});else{const i=[{char:t[r],active:1}];"right"===u?e.unshift(i):e[n]=i}setTimeout((()=>{const t=S.current[r];t?.length>1&&(t[t.length-2].active=0),b(S.current.slice())}),r*d*1e3)}setTimeout(j,1e3*(f+(e.length-1)*d)),y()}),[c]),t("div",{...p,className:i(v.ticker,p.className),children:t(m,{initialMount:!1,transition:{duration:f},children:w.map(((e,i)=>{const r=("right"===u?w.length-1-i:i).toString();return t(a,{id:r,adaptive:!0,deform:!1,cachable:["x","sx"],initial:{translate:"0em 0em"},animate:{translate:["0em 1.2em","0em 0em"],composite:"combine",duration:f,delay:i*d},triggers:[{on:y,name:g&&k.current[i]===e[e.length-1].char?"_":"animate",commit:!1},{on:"mount",commit:!1}],children:t("div",{className:v.column,children:e.map((({char:e,active:i},r)=>t("div",{children:t("div",{style:{position:i?void 0:"absolute"},children:e||" "})},r)))})},r)}))})})}export{h as default};
//# sourceMappingURL=ticker.js.map