UNPKG

@eeacms/countup

Version:

React component and hook to animate counting up or down to a number

2 lines (1 loc) 3.98 kB
var H=Object.create;var E=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var L=e=>E(e,"__esModule",{value:!0});var Y=(e,t)=>{L(e);for(var r in t)E(e,r,{get:t[r],enumerable:!0})},Z=(e,t,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of Q(t))!X.call(e,n)&&n!=="default"&&E(e,n,{get:()=>t[n],enumerable:!(r=K(t,n))||r.enumerable});return e},F=e=>Z(L(E(e!=null?H(W(e)):{},"default",e&&e.__esModule&&"default"in e?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e);Y(exports,{CountUp:()=>h,default:()=>ie,useCountUp:()=>D});var i=F(require("react")),x=F(require("react")),_=Object.defineProperty,ee=Object.defineProperties,te=Object.getOwnPropertyDescriptors,$=Object.getOwnPropertySymbols,re=Object.prototype.hasOwnProperty,ne=Object.prototype.propertyIsEnumerable,k=(e,t,r)=>t in e?_(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,j=(e,t)=>{for(var r in t||(t={}))re.call(t,r)&&k(e,r,t[r]);if($)for(var r of $(t))ne.call(t,r)&&k(e,r,t[r]);return e},V=(e,t)=>ee(e,te(t)),B=typeof window=="undefined"?x.useEffect:x.useLayoutEffect,M=({isPlaying:e,duration:t,startAt:r=0,updateInterval:n=0,onComplete:C,onUpdate:P})=>{let[b,U]=(0,i.useState)(r),w=(0,i.useRef)(r*-1e3),p=(0,i.useRef)(null),v=(0,i.useRef)(null),R=(0,i.useRef)(null),c=(0,i.useRef)({elapsedTimeRef:0,startAtRef:r,durationRef:t,updateIntervalRef:n});c.current=V(j({},c.current),{durationRef:t,updateIntervalRef:n});let o=m=>{let s=m/1e3;if(v.current===null){v.current=s,p.current=requestAnimationFrame(o);return}let{durationRef:d,elapsedTimeRef:T,updateIntervalRef:S,startAtRef:a}=c.current,u=s-v.current,y=T+u;v.current=s,c.current=V(j({},c.current),{elapsedTimeRef:y});let g=a+(S===0?y:(y/S|0)*S),A=a+y,l=typeof d=="number"&&A>=d;U(l?d:g),l||(p.current=requestAnimationFrame(o))},I=()=>{p.current&&cancelAnimationFrame(p.current),R.current&&clearTimeout(R.current),v.current=null},O=(0,i.useCallback)(m=>{let s=typeof m=="number"?m:r;I(),c.current=V(j({},c.current),{elapsedTimeRef:0,startAtRef:s}),U(s),e&&(p.current=requestAnimationFrame(o))},[e,r]);return B(()=>{if(P==null||P(b),t&&b>=t){w.current+=t*1e3;let{shouldRepeat:m=!1,delay:s=0,newStartAt:d}=(C==null?void 0:C(w.current/1e3))||{};m&&(R.current=setTimeout(()=>O(d),s*1e3))}},[b,t]),B(()=>(e&&(p.current=requestAnimationFrame(o)),I),[e]),{elapsedTime:b,reset:O}};var f=F(require("react")),ue=(e,t,r,n)=>(e/=n,e--,r*(e*e*e+1)+t),oe=(e,t)=>{if(typeof e=="number")return typeof t=="number"?t:2},N=(e,t)=>e.replace(/\B(?=(\d{3})+(?!\d))/g,t),z=e=>(e.toString().split(".")[1]||"").length,ae=(e,t)=>{let r=z(e),n=z(t||1);return r>=n?r:n},D=({isCounting:e=!1,start:t=0,end:r,duration:n,decimalPlaces:C=ae(t,r),decimalSeparator:P=".",thousandsSeparator:b="",onComplete:U,formatter:w,updateInterval:p,useIntersection:v=!0,onUpdate:R})=>{function c(a){let[u,y]=f.default.useState(!1),[g,A]=f.default.useState(!1);return(0,f.useEffect)(()=>{A(!0)},[]),f.default.useEffect(()=>{if(u||!g)return;let l=new IntersectionObserver(([J])=>{y(u===!1?J.isIntersecting:!0)}),q=a.current;return q&&l.observe(q),()=>{l.disconnect()}},[a,u,g]),u}let o=oe(r,n),I=f.default.useRef(null),O=c(I),[m,s]=f.default.useState(!1);(0,f.useEffect)(()=>{O===!0&&s(!0)},[O]);let d=a=>{let u;if(o===0&&typeof r=="number")u=r;else if(typeof r=="number"&&typeof o=="number"){let l=a<o?a:o;u=ue(l,t,r-t,o)}else u=t+a;if(typeof w=="function")return w(u);if(C===0){let l=Math.round(u).toString();return N(l,b)}let[y,g]=u.toFixed(C).split(".");return`${N(y,b)}${P}${g}`},{elapsedTime:T,reset:S}=M({isPlaying:m===!1&&v===!0?!1:e,duration:o,onComplete:U,updateInterval:p,onUpdate:typeof R=="function"?a=>R(d(a)):void 0});return{value:d(T),reset:S,ref:I}};var G=F(require("react")),h=({children:e,as:t="div",...r})=>{let n=D(r);return G.default.createElement(t,{ref:n.ref},typeof e=="function"?e(n):n.value)};h.displayName="CountUp";var se=e=>e,ie=se;