react-countdown-circle-timer - npm Package Compare versions

Comparing version 3.2.0 to 3.2.1

lib/index.d.ts

@@ -61,2 +61,4 @@ /// <reference types="react" />
   isSmoothColorTransition?: boolean
+  /** Indicates if the progress path should be growing instead of shrinking. Default: false */
+  isGrowing?: boolean
   /** Render function to customize the time/content in the center of the circle */
@@ -63,0 +65,0 @@ children?: (props: TimeProps) => React.ReactNode

lib/index.js

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

lib/index.module.js

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

package.json

 {
   "name": "react-countdown-circle-timer",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "Lightweight React countdown timer component with color and progress animation based on SVG",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25386

increased by0.82%

Lines of code

109

increased by1.87%

No dependency changes