@fewings/fancy-react/dist/AnimateNumber/index.js

react components with fancy style

"use strict";var C=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var O=Object.prototype.hasOwnProperty;var H=(e,r)=>{for(var i in r)C(e,i,{get:r[i],enumerable:!0})},N=(e,r,i,u)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of M(r))!O.call(e,o)&&o!==i&&C(e,o,{get:()=>r[o],enumerable:!(u=E(r,o))||u.enumerable});return e};var W=e=>N(C({},"__esModule",{value:!0}),e);var I={};H(I,{AnimateNumber:()=>_});module.exports=W(I);var y=require("motion/react"),l=require("react");var n=require("react"),v=require("motion/react"),P=require("@fewings/react/hooks"),d=require("react/jsx-runtime");function D({to:e,countDur:r,widthDur:i,direction:u="random",onSizeChange:o}){let b=(0,P.usePrevState)(e)??0,s=(0,n.useMemo)(()=>u==="up"||b<e,[u,e]),[a,f]=(0,n.useState)({w:0,h:0}),m=(0,n.useRef)(null),S=()=>{m.current&&clearTimeout(m.current)},T=(0,n.useRef)(null),w=t=>{let c=T.current;c&&(c.style.visibility=t?"visible":"hidden",g.current.style.display=t?"none":"block")},[g,k]=(0,v.useAnimate)(),z=(0,n.useRef)(0),p=(0,n.useMemo)(()=>{let t=z.current;return z.current=e,t},[e]),A=e>p?1:-1,R=(0,n.useMemo)(()=>{let t=Array.from({length:Math.abs(e-p)+1},(c,$)=>p+$*A);return s?t:t.reverse()},[e,p,s]);return(0,n.useEffect)(()=>{S(),w(!1);let t=[0,`calc(-100% + ${a.h}px)`];return k(g.current,{y:s?t:t.reverse()},{duration:r,onPlay:()=>{w(!1)},onComplete:()=>{m.current=window.setTimeout(()=>{w(!0)},(r+1)*1e3)}}),()=>{S()}},[a.h,e,r,p,s]),(0,d.jsxs)(v.motion.div,{style:{position:"relative",display:"inline-block",overflow:"hidden"},initial:{width:0,transformOrigin:"left"},animate:{width:"auto",transformOrigin:"left"},exit:{width:0,transformOrigin:"right"},transition:{duration:i},children:[(0,d.jsx)("div",{ref:g,style:{position:"absolute",top:0,left:0,willChange:"transform"},children:R.map(t=>(0,d.jsx)("div",{children:t},t))}),(0,d.jsx)("div",{ref:t=>{if(!t||(T.current=t,a.w===t.offsetWidth&&a.h===t.offsetHeight))return;let c={w:t.offsetWidth,h:t.offsetHeight};f(c),o?.(c)},children:e})]})}var x=e=>/^\d+$/.test(e);var h=require("react/jsx-runtime");function _({value:e,countDur:r=.5,sizeDur:i=.3,format:u=s=>`${s}`,style:o,...b}){let s=(0,l.useRef)(u),a=(0,l.useMemo)(()=>s.current(e).split(""),[e]);return(0,l.useEffect)(()=>{s.current=u}),(0,h.jsx)("div",{style:{width:"fit-content",height:"fit-content",display:"flex",alignItems:"center",...o},...b,children:(0,h.jsx)(y.AnimatePresence,{children:a.map((f,m)=>x(f)?(0,h.jsx)(D,{to:+f,countDur:r,widthDur:i},m):(0,h.jsx)(y.motion.div,{initial:{opacity:0,width:0},animate:{opacity:1,width:"auto"},exit:{width:0,opacity:0},transition:{duration:i,transformOrigin:"left"},children:f},`${f}${m!==0&&m!==a.length-1?m:""}`))})})}