react-countdown-circle-timer/lib/index.js

Lightweight React countdown timer component with color and progress animation based on SVG

var j=Object.create;var k=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var O=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var W=e=>k(e,"__esModule",{value:!0});var H=(e,t)=>{W(e);for(var o in t)k(e,o,{get:t[o],enumerable:!0})},J=(e,t,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of N(t))!V.call(e,r)&&r!=="default"&&k(e,r,{get:()=>t[r],enumerable:!(o=z(t,r))||o.enumerable});return e},T=e=>J(W(k(e!=null?j(O(e)):{},"default",e&&e.__esModule&&"default"in e?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e);H(exports,{CountdownCircleTimer:()=>A,useCountdown:()=>R});var $=T(require("react"));var M=T(require("react"));var d=T(require("react")),B=T(require("react")),D=typeof window=="undefined"?B.useEffect:B.useLayoutEffect,E=({isPlaying:e,duration:t,startAt:o=0,updateInterval:r=0,onComplete:s,onUpdate:n})=>{let[i,c]=(0,d.useState)(o),m=(0,d.useRef)(0),p=(0,d.useRef)(o),h=(0,d.useRef)(o*-1e3),u=(0,d.useRef)(null),a=(0,d.useRef)(null),g=(0,d.useRef)(null),y=w=>{let l=w/1e3;if(a.current===null){a.current=l,u.current=requestAnimationFrame(y);return}let f=l-a.current,b=m.current+f;a.current=l,m.current=b;let P=p.current+(r===0?b:(b/r|0)*r),S=p.current+b,F=typeof t=="number"&&S>=t;c(F?t:P),F||(u.current=requestAnimationFrame(y))},x=()=>{u.current&&cancelAnimationFrame(u.current),g.current&&clearTimeout(g.current),a.current=null},C=(0,d.useCallback)(w=>{x(),m.current=0;let l=typeof w=="number"?w:o;p.current=l,c(l),e&&(u.current=requestAnimationFrame(y))},[e,o]);return D(()=>{if(n==null||n(i),t&&i>=t){h.current+=t*1e3;let{shouldRepeat:w=!1,delay:l=0,newStartAt:f}=(s==null?void 0:s(h.current/1e3))||{};w&&(g.current=setTimeout(()=>C(f),l*1e3))}},[i,t]),D(()=>(e&&(u.current=requestAnimationFrame(y)),x),[e,t,r]),{elapsedTime:i,reset:C}};var q=(e,t,o)=>{let r=e/2,s=t/2,n=r-s,i=2*n,c=o==="clockwise"?"1,0":"0,1",m=2*Math.PI*n;return{path:`m ${r},${s} a ${n},${n} 0 ${c} 0,${i} a ${n},${n} 0 ${c} 0,-${i}`,pathLength:m}},v=(e,t)=>e===0||e===t?0:typeof t=="number"?e-t:0,G=e=>({position:"relative",width:e,height:e}),I={display:"flex",justifyContent:"center",alignItems:"center",position:"absolute",left:0,top:0,width:"100%",height:"100%"};var L=(e,t,o,r,s)=>{if(r===0)return t;let n=(s?r-e:e)/r;return t+o*n},U=e=>{var t,o;return(o=(t=e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(r,s,n,i)=>`#${s}${s}${n}${n}${i}${i}`).substring(1).match(/.{2}/g))==null?void 0:t.map(r=>parseInt(r,16)))!=null?o:[]},K=(e,t)=>{var u;let{colors:o,colorsTime:r,isSmoothColorTransition:s=!0}=e;if(typeof o=="string")return o;let n=(u=r==null?void 0:r.findIndex((a,g)=>a>=t&&t>=r[g+1]))!=null?u:-1;if(!r||n===-1)return o[0];if(!s)return o[n];let i=r[n]-t,c=r[n]-r[n+1],m=U(o[n]),p=U(o[n+1]),h=!!e.isGrowing;return`rgb(${m.map((a,g)=>L(i,a,p[g]-a,c,h)|0).join(",")})`},R=e=>{let{duration:t,initialRemainingTime:o,updateInterval:r,size:s=180,strokeWidth:n=12,trailStrokeWidth:i,isPlaying:c=!1,isGrowing:m=!1,rotation:p="clockwise",onComplete:h,onUpdate:u}=e,a=(0,M.useRef)(),g=Math.max(n,i!=null?i:0),{path:y,pathLength:x}=q(s,g,p),{elapsedTime:C}=E({isPlaying:c,duration:t,startAt:v(t,o),updateInterval:r,onUpdate:typeof u=="function"?l=>{let f=Math.ceil(t-l);f!==a.current&&(a.current=f,u(f))}:void 0,onComplete:typeof h=="function"?l=>{var S;let{shouldRepeat:f,delay:b,newInitialRemainingTime:P}=(S=h(l))!=null?S:{};if(f)return{shouldRepeat:f,delay:b,newStartAt:v(t,P)}}:void 0}),w=t-C;return{elapsedTime:C,path:y,pathLength:x,remainingTime:Math.ceil(w),rotation:p,size:s,stroke:K(e,w),strokeDashoffset:L(C,0,x,t,m),strokeWidth:n}};var A=e=>{let{children:t,strokeLinecap:o,trailColor:r,trailStrokeWidth:s}=e,{path:n,pathLength:i,stroke:c,strokeDashoffset:m,remainingTime:p,elapsedTime:h,size:u,strokeWidth:a}=R(e);return $.default.createElement("div",{style:G(u)},$.default.createElement("svg",{viewBox:`0 0 ${u} ${u}`,width:u,height:u,xmlns:"http://www.w3.org/2000/svg"},$.default.createElement("path",{d:n,fill:"none",stroke:r!=null?r:"#d9d9d9",strokeWidth:s!=null?s:a}),$.default.createElement("path",{d:n,fill:"none",stroke:c,strokeLinecap:o!=null?o:"round",strokeWidth:a,strokeDasharray:i,strokeDashoffset:m})),typeof t=="function"&&$.default.createElement("div",{style:I},t({remainingTime:p,elapsedTime:h,color:c})))};A.displayName="CountdownCircleTimer";