react-slot-counter/lib/index.js

Make Your Numbers Pop: Simple and Dynamic Counters for Your UI

'use client';
"use strict";var e=require("react"),n=function(){return n=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var u in n=arguments[t])Object.prototype.hasOwnProperty.call(n,u)&&(e[u]=n[u]);return e},n.apply(this,arguments)};var t="undefined"!=typeof window?e.useLayoutEffect:e.useEffect;var r="index-module_slot_wrap__ZT-DX",u="index-module_slot__DpPgW",i="index-module_separator__7GhtE",o="index-module_numbers__sqlqm",a="index-module_num__j6XH3",l="index-module_top_dummy_list__veRmf";!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],u=document.createElement("style");u.type="text/css","top"===t&&r.firstChild?r.insertBefore(u,r.firstChild):r.appendChild(u),u.styleSheet?u.styleSheet.cssText=e:u.appendChild(document.createTextNode(e))}}(".index-module_slot_wrap__ZT-DX {\n  display: inline-block;\n  white-space: nowrap;\n}\n\n.index-module_slot__DpPgW {\n  display: inline-block;\n  overflow: hidden;\n  text-align: center;\n  vertical-align: middle;\n  will-change: transform;\n}\n\n.index-module_separator__7GhtE {\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n}\n\n.index-module_numbers__sqlqm {\n  display: block;\n}\n\n.index-module_num__j6XH3 {\n  display: block;\n}\n\n.index-module_top_dummy_list__veRmf {\n  position: absolute;\n  top: 0;\n  transform: translateY(-100%);\n}\n\n[aria-hidden=true] {\n  user-select: none;\n}");var s=[",","."," "],c=/\u0020/,d=/\u00A0/,f=/\u202F/,m="slot-counter",v="slot-counter-separator",h="slot-counter-item",p="slot-counter-item-numbers",g="slot-counter-item-number",y="slot-counter-item-number-value",b=function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];return e.filter(Boolean).join(" ")},C=function(e,n){for(var t=[],r=e;r<n;r+=1)t.push(r);return t},S=function(e,n){for(var t=[],r=e;r!==n;)t.push(r),10===(r+=1)&&(r=0);return t},_=function(e,n){var t=Math.random()*(n-e);return Math.floor(t+e)},A=function(e){for(var n,t=function(e,n,t){if(t||2===arguments.length)for(var r,u=0,i=n.length;u<i;u++)!r&&u in n||(r||(r=Array.prototype.slice.call(n,0,u)),r[u]=n[u]);return e.concat(r||Array.prototype.slice.call(n))}([],e,!0),r=t.length-1;r>0;r-=1){var u=Math.floor(Math.random()*(r+1));n=[t[u],t[r]],t[r]=n[0],t[u]=n[1]}return t},E=function(e){return"number"==typeof e?e:(Array.isArray(e)?e.join(""):e).replace(/[,.]/g,"")},N=function(e){return"object"!=typeof e&&!Number.isNaN(E(e))},R=function(e){return"object"==typeof e},w=function(e){return!R(e)&&(s.includes(e)||c.test(e)||d.test(e)||f.test(e))};var x=e.memo(e.forwardRef((function(r,i){var s,c,d=r.isNew,f=r.charClassName,m=r.numbersRef,v=r.active,C=r.isChanged,S=r.effectiveDuration,_=r.delay,E=r.duration,N=r.speed,R=r.value,w=r.startValue,x=r.disableStartValue,M=r.dummyList,k=r.hasSequentialDummyList,q=r.hasInfiniteList,O=r.valueClassName,j=r.numberSlotClassName,D=r.numberClassName,I=r.reverse,T=r.sequentialAnimationMode,F=r.useMonospaceWidth,L=r.maxNumberWidth,P=r.onFontHeightChange,W=r.slotPeek,B=e.useState(!1),V=B[0],H=B[1],Y=e.useState(R),X=Y[0],z=Y[1],G=e.useRef(),Z=e.useRef(R),J=e.useRef(null),U=e.useState(0),K=U[0],Q=U[1],$=e.useState(k?M:A(M)),ee=$[0],ne=$[1],te=e.useState(!1),re=te[0],ue=te[1],ie=K*(M.length+1);t((function(){ue(!0)}),[]),t((function(){var e,n;Q(null!==(n=null===(e=J.current)||void 0===e?void 0:e.getBoundingClientRect().height)&&void 0!==n?n:0)}),[re]),e.useEffect((function(){v?requestAnimationFrame((function(){H(v)})):H(v)}),[v]),e.useEffect((function(){var e=J.current;if(K&&e&&"undefined"!=typeof ResizeObserver){var n=new ResizeObserver((function(e){var n=e[0].contentRect.height;Math.abs(K-n)>1&&(null==P||P(n))}));return n.observe(e),function(){n.disconnect()}}}),[K,P]),e.useMemo((function(){x&&(G.current=Z.current)}),[x]),e.useEffect((function(){V&&(G.current=Z.current,Z.current=R,setTimeout((function(){return z(R)}),T?0:S*N*E*1e3/M.length+1e3*_))}),[V,R,S,_,M.length,T,N,E]),e.useEffect((function(){ne(k?M:A(M))}),[M,k]),e.useImperativeHandle(i,(function(){return{refreshStyles:function(){var e,n;H(!0),Q(null!==(n=null===(e=J.current)||void 0===e?void 0:e.getBoundingClientRect().height)&&void 0!==n?n:0),requestAnimationFrame((function(){H(!1)}))}}}));var oe=function(){return ee.map((function(n,t){return e.createElement("span",{key:t,className:b(a,D,g),"aria-hidden":"true"},n)}))},ae=I?X:null!=w?w:X;T&&(ae=I?X:null!==(s=null!=w?w:G.current)&&void 0!==s?s:X,T&&d&&!I&&(ae=""));var le=I&&null!=w?w:X;T&&(le=I&&null!==(c=null!=w?w:G.current)&&void 0!==c?c:X);var se=e.useMemo((function(){if(re)return F?L:void 0}),[re,L,F]),ce=e.useMemo((function(){if(re)return W?K+2*W:K}),[re,K,W]);return e.createElement("span",{className:b(u,f,h),style:n({display:"inline-block",width:se,height:ce},W&&{paddingTop:W,paddingBottom:W})},e.createElement("span",{ref:m,className:b(o,j,p),style:n({transition:"none",transform:I?"translateY(-".concat(ie,"px)"):"translateY(0px)"},V&&C&&{transform:I?"translateY(0px)":"translateY(-".concat(ie,"px)"),transition:"transform ".concat(S,"s ").concat(_,"s ease-in-out")})},re?e.createElement(e.Fragment,null,W&&e.createElement("div",{className:l},oe()),e.createElement("span",{className:b(a,D,g),"aria-hidden":"true",style:{height:K}},ae),oe(),e.createElement("span",{className:b(a,D,O,g,y),ref:J},le),q||W?oe():null):e.createElement("span",{className:b(a,D,g),"aria-hidden":"true"},null!=w?w:X)))})));var M=e.memo(e.forwardRef((function(n,u){var o,a,l,s,c,d,f,p,g,y,A=n.value,M=n.startValue,k=n.startValueOnce,q=void 0!==k&&k,O=n.duration,j=void 0===O?.7:O,D=n.speed,I=void 0===D?1.4:D,T=n.delay,F=n.dummyCharacters,L=n.dummyCharacterCount,P=void 0===L?6:L,W=n.autoAnimationStart,B=void 0===W||W,V=n.containerClassName,H=n.charClassName,Y=n.separatorClassName,X=n.valueClassName,z=n.numberSlotClassName,G=n.numberClassName,Z=n.animateUnchanged,J=void 0!==Z&&Z,U=n.hasInfiniteList,K=void 0!==U&&U,Q=n.sequentialAnimationMode,$=void 0!==Q&&Q,ee=n.useMonospaceWidth,ne=void 0!==ee&&ee,te=n.direction,re=n.debounceDelay,ue=n.animateOnVisible,ie=n.startFromLastDigit,oe=void 0!==ie&&ie,ae=n.onAnimationStart,le=n.onAnimationEnd,se=n.separatorCharacters,ce=n.isSeparatorCharacter,de=void 0===ce?w:ce,fe=n.slotPeek,me=function(n,t){var r=e.useState(n),u=r[0],i=r[1];return e.useEffect((function(){if(0===t)return i(n);var e=setTimeout((function(){i(n)}),t);return function(){clearTimeout(e)}}),[n,t]),u}(A,null!=re?re:0),ve=e.useMemo((function(){return function(e){return Array.isArray(e)&&R(e[0])}(me)?"":"object"==typeof me?JSON.stringify(me):me.toString()}),[me]),he=e.useState(!1),pe=he[0],ge=he[1],ye=e.useRef(),be=e.useRef(null),Ce=e.useRef(null),Se=e.useRef(M),_e=e.useRef([]),Ae=e.useMemo((function(){return"boolean"==typeof ue?ue:"object"==typeof ue||void 0}),[ue]),Ee=e.useMemo((function(){return"object"==typeof ue?ue.rootMargin:void 0}),[ue]),Ne=e.useMemo((function(){return"object"==typeof ue?ue.triggerOnce:void 0}),[ue]),Re=e.useRef(!0),we=!Ae&&B,xe=e.useRef(null==M||we?me:M),Me=e.useRef(M),ke=e.useRef(0),qe=e.useRef(0),Oe=e.useState([]),je=Oe[0],De=Oe[1],Ie=e.useRef(),Te=e.useState(0),Fe=Te[0],Le=Te[1],Pe=e.useState(),We=Pe[0],Be=Pe[1],Ve=e.useRef(!1),He=null!=M&&(!q||ke.current<1),Ye=null!==(a=null===(o=ye.current)||void 0===o?void 0:o.dummyCharacterCount)&&void 0!==a?a:P,Xe=null!==(s=null===(l=ye.current)||void 0===l?void 0:l.duration)&&void 0!==s?s:j,ze=e.useRef({onAnimationStart:ae,onAnimationEnd:le});ze.current={onAnimationStart:ae,onAnimationEnd:le};var Ge=e.useRef(!1),Ze=e.useCallback((function(){var e=Ce.current;if(e){var n=C(0,10).map((function(n){var t=document.createElement("span");t.className=null!=X?X:"",t.style.position="absolute",t.style.top="0",t.style.left="-9999px",t.style.visibility="hidden",t.textContent=n.toString(),e.appendChild(t);var r=t.getBoundingClientRect().width;return e.removeChild(t),r})),t=Math.max.apply(Math,n);Be(t)}}),[X]);t((function(){var e;Ze(),null===(e=document.fonts)||void 0===e||e.ready.then((function(){Ze()}))}),[]),e.useEffect((function(){De(C(0,Ye*j*I-1).map((function(e){if(!F)return _(0,10);var n=e>=F.length?_(0,F.length):e;return F[n]})))}),[F,Ye,I,j]),xe.current!==me&&Ve.current&&qe.current>0&&(Me.current=xe.current,xe.current=me);var Je=Array.isArray(Me.current)?Me.current:null!==(d=null===(c=Me.current)||void 0===c?void 0:c.toString().split(""))&&void 0!==d?d:[],Ue=Array.isArray(xe.current)?xe.current:null!==(p=null===(f=xe.current)||void 0===f?void 0:f.toString().split(""))&&void 0!==p?p:[],Ke=Array.isArray(Se.current)?Se.current:null!==(y=null===(g=Se.current)||void 0===g?void 0:g.toString().split(""))&&void 0!==y?y:[],Qe=e.useMemo((function(){return Array.isArray(me)?me:null==me?void 0:me.toString().split("")}),[me]),$e=e.useMemo((function(){return Array.isArray(M)?M:null==M?void 0:M.toString().split("")}),[M]),en=Je.length!==Ue.length,nn=[];Ue.forEach((function(e,n){var t=Ue.length-n-1,r=He?Ke:Je;(Ue[t]!==r[t]||en||J)&&nn.push(t)})),oe||nn.reverse();var tn=e.useMemo((function(){return T||Math.min(.1,Xe/Qe.length)}),[Xe,Qe.length,T]),rn=e.useCallback((function(){var e,n,t;null===(n=(e=ze.current).onAnimationEnd)||void 0===n||n.call(e),Ge.current=!1,null===(t=Ce.current)||void 0===t||t.removeEventListener("transitionend",rn)}),[]),un=e.useCallback((function(){var e,n,t;Ie.current&&window.cancelAnimationFrame(Ie.current),Ge.current&&rn(),Ge.current=!0,null===(e=Ce.current)||void 0===e||e.addEventListener("transitionend",rn),null===(t=(n=ze.current).onAnimationStart)||void 0===t||t.call(n),ge(!1),ke.current=qe.current,ke.current+=1,window.requestAnimationFrame((function(){var e;null===(e=Ce.current)||void 0===e||e.offsetWidth,Ie.current=requestAnimationFrame((function(){qe.current+=1,ge(!0)}))}))}),[rn]),on=e.useCallback((function(e){var n,t,r=He?M:Me.current;if(null==r||!N(r)||!N(me))return[];var u=r.toString().length,i=me.toString().length,o=u<i,a=Math.abs(u-i),l=Number(E(r.toString())),s=Number(E(me.toString())),c=Number(l.toString()[o?-a+e:a+e]||0),d=Number(s.toString()[e]||0);if(d===c)return[];var f=l<s,m=f?S((c+1)%10,d):S((d+1)%10,c);return"bottom-up"!==(null!==(t=null===(n=ye.current)||void 0===n?void 0:n.direction)&&void 0!==t?t:te)||f?m:m.reverse()}),[He,me,M,te]),an=e.useCallback((function(){_e.current.forEach((function(e){e.refreshStyles()})),Ze()}),[Ze]);e.useEffect((function(){(Ve.current||null!=Me.current)&&(Ve.current||null==Se.current)&&(Ve.current||we)&&un()}),[ve,un,we]),e.useEffect((function(){we&&un()}),[we,un]),e.useEffect((function(){requestAnimationFrame((function(){Ve.current=!0}))}),[]),e.useImperativeHandle(u,(function(){return{startAnimation:vn,refreshStyles:an,reload:function(){return Le((function(e){return e+1}))}}}));var ln=null==M||we||0!==ke.current?Qe:$e||[],sn=((null==$e?void 0:$e.length)||0)-ln.length,cn=function(n){var t,r=e.useRef(n),u=e.useRef(r.current),i=n.join(","),o=null===(t=r.current)||void 0===t?void 0:t.join(",");return e.useEffect((function(){o!==i&&(u.current=(null==o?void 0:o.split(","))||[],r.current=i.split(","))}),[i,o]),{getPrevDependencies:e.useCallback((function(){return u.current}),[]),setPrevDependenciesToSameAsCurrent:e.useCallback((function(){u.current=r.current}),[])}}(ln),dn=cn.getPrevDependencies,fn=cn.setPrevDependenciesToSameAsCurrent,mn=ln.length-dn().length,vn=e.useCallback((function(e){null==M||q||(Me.current=void 0),ye.current=e,un(),fn()}),[M,q,un,fn]),hn=e.useMemo((function(){return function(e,n){var t;return function(){for(var r=[],u=0;u<arguments.length;u++)r[u]=arguments[u];clearTimeout(t),t=setTimeout((function(){e.apply(void 0,r)}),n)}}((function(){an()}),0)}),[an]);e.useEffect((function(){if(be.current&&window.IntersectionObserver){var e=new IntersectionObserver((function(e){e[0].isIntersecting&&an()}));return e.observe(be.current),function(){return e.disconnect()}}}),[an]),e.useEffect((function(){if(Ae&&be.current&&window.IntersectionObserver){var e=new IntersectionObserver((function(t){t[0].isIntersecting&&Re.current&&(vn(),Re.current=!1,Ne&&(e.disconnect(),n.disconnect()))}),{rootMargin:Ee,threshold:1}),n=new IntersectionObserver((function(e){e[0].isIntersecting||(Re.current=!0)}),{threshold:0});return e.observe(be.current),n.observe(be.current),function(){e.disconnect(),n.disconnect()}}}),[Ae,Ee,Ne,vn]);var pn=function(e){return se&&"string"==typeof e?se.includes(e):null!==de&&de(e)},gn=nn.filter((function(e){return!pn(ln[e])})),yn=-1;return e.createElement("span",{key:Fe,ref:be,className:b(V,r,m)},ln.map((function(n,t){var r,u,o=nn.includes(t),a=(o?gn.indexOf(t):0)*tn,l=Me.current,s=null!=M&&!!q&&ke.current>1,c=null!=me&&null!=l&&N(me)&&N(l)&&E(me)<E(l);if((null===(r=ye.current)||void 0===r?void 0:r.direction)&&(c="top-down"===(null===(u=ye.current)||void 0===u?void 0:u.direction)),te&&(c="top-down"===te),pn(n))return e.createElement("span",{key:Ue.length-t-1,className:b(i,Y,h,v)},n);var d=$&&(!we||qe.current>1);return yn+=1,e.createElement(x,{key:ln.length-t-1,index:t,isNew:mn>0&&t<mn,maxNumberWidth:We,numbersRef:Ce,active:pe,isChanged:o,charClassName:H,effectiveDuration:Xe,delay:a,value:n,startValue:s||null==$e?void 0:$e[t+sn],disableStartValue:s,dummyList:d?on(yn):je,hasSequentialDummyList:d,hasInfiniteList:K,valueClassName:X,numberSlotClassName:z,numberClassName:G,reverse:c,sequentialAnimationMode:$,useMonospaceWidth:ne,onFontHeightChange:hn,speed:I,duration:j,slotPeek:fe,ref:function(e){e&&_e.current.push(e)}})})))})));module.exports=M;
//# sourceMappingURL=index.js.map