Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-countdown-circle-timer

Package Overview
Dependencies
Maintainers
1
Versions
48
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 2.1.1 to 2.1.2

21

CHANGELOG.md

@@ -6,7 +6,10 @@ # Change Log

## [2.1.1](https://github.com/vydimitrov/react-countdown-circle-timer/compare/react-countdown-circle-timer@2.1.0...react-countdown-circle-timer@2.1.1) (2020-04-28)
## [2.1.2](https://github.com/vydimitrov/react-countdown-circle-timer/compare/react-countdown-circle-timer@2.1.1...react-countdown-circle-timer@2.1.2) (2020-05-05)
**Note:** Version bump only for package react-countdown-circle-timer
### Bug Fixes
* **web:** Cannot read property 'duration' of undefined - fix [#20](https://github.com/vydimitrov/react-countdown-circle-timer/issues/20) ([bcdb595](https://github.com/vydimitrov/react-countdown-circle-timer/commit/bcdb59595d5fcaa9c7d7f9b357d21dc0af856dde))
* **web:** hide progress path when the duration provided is 0 ([fa48e3d](https://github.com/vydimitrov/react-countdown-circle-timer/commit/fa48e3d5e90e18c25968f0e18d0ca10931e54807))
* **web:** progress path not hidden when countdown is done ([dfe3b2b](https://github.com/vydimitrov/react-countdown-circle-timer/commit/dfe3b2b325ab58c06afed946c9c625ae40737f22))

@@ -16,12 +19,18 @@

## [2.1.1](https://github.com/vydimitrov/react-countdown-circle-timer/compare/react-countdown-circle-timer@2.1.0...react-countdown-circle-timer@2.1.1) (2020-04-28)
### Docs
**Note:** Update Readme and Changelog - docs related release
# [2.1.0](https://github.com/vydimitrov/react-countdown-circle-timer/compare/react-countdown-circle-timer@2.0.5...react-countdown-circle-timer@2.1.0) (2020-04-28)
### Features
* **web:** pass totalElapsedTime as an argument to onComplete callback ([dfd33ce](https://github.com/vydimitrov/react-countdown-circle-timer/commit/dfd33ce05431c43540f384bbd554e14f620e28af))
- **web:** pass totalElapsedTime as an argument to onComplete callback ([dfd33ce](https://github.com/vydimitrov/react-countdown-circle-timer/commit/dfd33ce05431c43540f384bbd554e14f620e28af))
`onComplete` callback will receive as an argument the `totalElapsedTime` in seconds. This is the total duration since the countdown has started running. It's mainly used when the countdown is repeated and the total duration has to be known. Example: countdown of days, hours, minutes and seconds.
`onComplete` callback will receive as an argument the `totalElapsedTime` in seconds. This is the total duration since the countdown has started running. It's mainly used when the countdown is repeated and the total duration has to be known. Example: countdown of days, hours, minutes and seconds.
## [2.0.5](https://github.com/vydimitrov/react-countdown-circle-timer/compare/react-countdown-circle-timer@2.0.4...react-countdown-circle-timer@2.0.5) (2020-04-27)

@@ -28,0 +37,0 @@

@@ -1,2 +0,2 @@

module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=5)}([function(e,t,r){e.exports=r(3)()},function(e,t){e.exports=require("react")},function(e,t,r){e.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(e,t){e.exports=r(1)},function(e,t,r){"use strict";r.r(t),r.d(t,"useElapsedTime",(function(){return a}));var n=r(0);function o(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var r=[],n=!0,o=!1,i=void 0;try{for(var a,u=e[Symbol.iterator]();!(n=(a=u.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(e){o=!0,i=e}finally{try{n||null==u.return||u.return()}finally{if(o)throw i}}return r}}(e,t)||function(e,t){if(e){if("string"==typeof e)return i(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(r):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?i(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var a=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=t.durationMilliseconds,i=t.onComplete,a=t.startAt,u=void 0===a?0:a,c="number"==typeof r,l=Object(n.useState)(u),f=o(l,2),s=f[0],p=f[1],d=Object(n.useRef)(-1*u),y=Object(n.useRef)(null),m=Object(n.useRef)(null),b=Object(n.useRef)(null);Object(n.useEffect)((function(){return function(){null!==b.current&&clearTimeout(b.current)}}),[]);var v=function e(t){if(null===m.current)return m.current=t,void(y.current=requestAnimationFrame(e));p((function(n){var a=n+(t-m.current);if(!c||a<r)return m.current=t,y.current=requestAnimationFrame(e),a;if("function"==typeof i){d.current+=r;var u=o(i(d.current)||[],2),l=u[0],f=void 0!==l&&l,s=u[1],v=void 0===s?0:s;f&&(b.current=setTimeout((function(){p(0),m.current=null,y.current=requestAnimationFrame(e)}),v))}return r}))};return Object(n.useLayoutEffect)((function(){return e&&(y.current=requestAnimationFrame(v)),function(){cancelAnimationFrame(y.current),m.current=null,y.current=null}}),[e]),s}}])},function(e,t,r){"use strict";var n=r(4);function o(){}function i(){}i.resetWarningCache=o,e.exports=function(){function e(e,t,r,o,i,a){if(a!==n){var u=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw u.name="Invariant Violation",u}}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:i,resetWarningCache:o};return r.PropTypes=r,r}},function(e,t,r){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,r){"use strict";r.r(t),r.d(t,"CountdownCircleTimer",(function(){return A}));var n=r(1),o=r.n(n),i=function(e){return{position:"relative",width:e,height:e}},a={display:"flex",justifyContent:"center",alignItems:"center",position:"absolute",left:0,top:0,width:"100%",height:"100%"},u=function(e){return"countdown-circle-timer-gradient-".concat(e||Math.random().toString(36).substring(2))},c=r(0),l=r.n(c),f={duration:l.a.number.isRequired,colors:l.a.arrayOf(l.a.arrayOf((function(e,t,r,n,o){var i=e[0],a=e[1];return i.match(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/)?void 0===a||a>=0&&a<=1?void 0:new Error("Invalid prop '".concat(o,"[1]' supplied to '").concat(r,"'. Expect a number of color transition duration with value between 0 and 1.")):new Error("Invalid prop '".concat(o,"[0]' supplied to '").concat(r,"'.Expect a color with HEX color code."))})).isRequired).isRequired,children:l.a.oneOfType([l.a.func,l.a.node]),size:l.a.number,strokeWidth:l.a.number,trailColor:l.a.string,isPlaying:l.a.bool,strokeLinecap:l.a.oneOf(["round","square"]),isLinearGradient:l.a.bool,gradientUniqueKey:l.a.string,onComplete:l.a.func,ariaLabel:l.a.string,renderAriaTime:l.a.func,initialRemainingTime:l.a.number};function s(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var r=[],n=!0,o=!1,i=void 0;try{for(var a,u=e[Symbol.iterator]();!(n=(a=u.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(e){o=!0,i=e}finally{try{n||null==u.return||u.return()}finally{if(o)throw i}}return r}(e,t)||d(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function p(e){return function(e){if(Array.isArray(e))return y(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||d(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(e,t){if(e){if("string"==typeof e)return y(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(r):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?y(e,t):void 0}}function y(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var m=function(e){var t=e.gradientId,r=e.colors,n=e.defs,i=void 0===n?"defs":n,a=e.linearGradient,u=void 0===a?"linearGradient":a,c=e.stop,l=void 0===c?"stop":c;return o.a.createElement(i,null,o.a.createElement(u,{id:t,x1:"1",y1:"0",x2:"0",y2:"0"},function(e){if(1===e.length)return[{offset:1,stopColor:e[0][0],key:0}];var t=e.length,r=0;return[{offset:0,stopColor:e[0][0],key:0}].concat(p(e.map((function(e,n){var o=s(e,2),i=o[0],a=o[1];return r+=a,{offset:t===n+1?1:r,stopColor:i,key:n+1}}))))}(r).map((function(e){return o.a.createElement(l,e)}))))},b=l.a.oneOfType([l.a.func,l.a.string]);m.propTypes={gradientId:l.a.string.isRequired,colors:f.colors,defs:b,linearGradient:b,stop:b};var v=r(2),g=function(e,t,r,n){return t+r*(e/n)};function h(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function O(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?h(Object(r),!0).forEach((function(t){j(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):h(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function j(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var w=function(e){var t=e.r,r=e.g,n=e.b,o=e.opacity;return"rgba(".concat(t,", ").concat(r,", ").concat(n,", ").concat(o,")")},P=function(e,t){var r=function(e){return e.map((function(e){var t=e[0].replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(e,t,r,n){return"#".concat(t).concat(t).concat(r).concat(r).concat(n).concat(n)})).substring(1).match(/.{2}/g).map((function(e){return parseInt(e,16)}));return[{r:t[0],g:t[1],b:t[2],opacity:1},e[1]]}))}(e);if(!t)return r;var n=0;return r.map((function(e,t){var o=r.length===t+1,i="0%";if(t>0){var a=r[t-1][1],u=Math.round(a?100*a:100);(n+=u)>100||o?(n=100,i="100%"):i="".concat(n,"%")}var c={offset:i,stopColor:w(e[0]),key:t};return[O({},e[0],{gradient:c}),e[1]]}))},S={position:"absolute",width:"1px",height:"1px",margin:"-1px",border:0,clip:"rect(0 0 0 0)",padding:0,overflow:"hidden",whiteSpace:"nowrap",wordWrap:"normal"},T=function(e){var t=e.isPlaying,r=e.size,o=e.strokeWidth,c=e.duration,l=e.initialRemainingTime,f=e.colors,s=e.isLinearGradient,p=e.gradientUniqueKey,d=e.onComplete,y={wrapperStyle:i(r),timeStyle:a,visuallyHidden:S},m=Object(n.useMemo)((function(){return function(e,t){var r=e/2,n=t/2,o=r-n,i=2*o,a=2*Math.PI*o;return{path:"m ".concat(r,",").concat(n,"\n a ").concat(o,",").concat(o," 0 1,0 0,").concat(i,"\n a ").concat(o,",").concat(o," 0 1,0 0,-").concat(i),pathLength:a}}(r,o)}),[r,o]),b=m.path,h=m.pathLength,j=Object(n.useMemo)((function(){return 1e3*c}),[c]),T=Object(n.useMemo)((function(){return function(e,t){return"number"==typeof e?1e3*(t-e):0}(l,c)}),[l,c]),E=Object(n.useMemo)((function(){return function(e,t,r){var n=P(e,r),o=0;return n.map((function(e,r){var i=n.length===r+1;if(o>=t||i)return o=t,O({},e[0],{colorEndTime:o});var a=o,u=void 0!==e[1]?a+e[1]*t:t-o,c=u>=t?t:u,l=n[r+1][0],f={goalR:l.r-e[0].r,goalG:l.g-e[0].g,goalB:l.b-e[0].b};return o=c,O({},e[0],{},f,{colorStartTime:a,colorEndTime:c,duration:c-a})}))}(f,j,s)}),[f,j,s]),x=Object(n.useMemo)((function(){return u(p)}),[p]),k=Object(v.useElapsedTime)(t,{startAt:T,durationMilliseconds:j,onComplete:"function"==typeof d?function(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];return d.apply(void 0,[e/1e3].concat(r))}:void 0});return{path:b,pathLength:h,stroke:function(e,t){if(1===e.length)return w(e[0]);var r=e.find((function(e){var r=e.colorEndTime;return t<=r}));if(void 0===r.duration)return w(r);var n=t-r.colorStartTime,o=0|g(n,r.r,r.goalR,r.duration),i=0|g(n,r.g,r.goalG,r.duration),a=0|g(n,r.b,r.goalB,r.duration);return w({r:o,g:i,b:a,opacity:r.opacity})}(E,k),strokeDashoffset:g(k,0,h,j).toFixed(3),gradientId:x,styles:y,timeProps:{remainingTime:Math.ceil((j-k)/1e3),elapsedTime:k}}};function E(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function x(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?E(Object(r),!0).forEach((function(t){k(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):E(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function k(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var A=function(e){var t=e.size,r=e.strokeWidth,n=e.trailColor,i=e.duration,a=e.isPlaying,u=e.colors,c=e.strokeLinecap,l=e.children,f=e.isLinearGradient,s=e.gradientUniqueKey,p=e.onComplete,d=e.ariaLabel,y=e.renderAriaTime,b=e.initialRemainingTime,v=T({isPlaying:a,size:t,strokeWidth:r,duration:i,initialRemainingTime:b,colors:u,isLinearGradient:f,gradientUniqueKey:s,onComplete:p}),g=v.path,h=v.pathLength,O=v.stroke,j=v.strokeDashoffset,w=v.gradientId,P=v.styles,S=v.timeProps;return o.a.createElement("div",{style:P.wrapperStyle,"aria-label":d},o.a.createElement("svg",{width:t,height:t,xmlns:"http://www.w3.org/2000/svg"},f&&o.a.createElement(m,{colors:u,gradientId:w}),o.a.createElement("path",{d:g,fill:"none",stroke:n,strokeWidth:r}),o.a.createElement("path",{d:g,fill:"none",stroke:f?"url(#".concat(w,")"):O,strokeLinecap:c,strokeWidth:r,strokeDasharray:h,strokeDashoffset:j})),null!==l&&o.a.createElement("div",{"aria-hidden":"true",style:x({},P.timeStyle,{color:O})},o.a.isValidElement(l)?o.a.cloneElement(o.a.Children.only(l),S):l(S)),"function"==typeof y&&o.a.createElement("div",{role:"timer","aria-live":"assertive",style:P.visuallyHidden},y(S)))};A.propTypes=f,A.defaultProps={size:180,strokeWidth:12,trailColor:"#d9d9d9",isPlaying:!1,strokeLinecap:"round",isLinearGradient:!1,ariaLabel:"Countdown timer",children:null},A.displayName="CountdownCircleTimer"}]);
module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=5)}([function(e,t,r){e.exports=r(3)()},function(e,t){e.exports=require("react")},function(e,t,r){e.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(e,t){e.exports=r(1)},function(e,t,r){"use strict";r.r(t),r.d(t,"useElapsedTime",(function(){return a}));var n=r(0);function o(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var r=[],n=!0,o=!1,i=void 0;try{for(var a,u=e[Symbol.iterator]();!(n=(a=u.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(e){o=!0,i=e}finally{try{n||null==u.return||u.return()}finally{if(o)throw i}}return r}}(e,t)||function(e,t){if(e){if("string"==typeof e)return i(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(r):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?i(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var a=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=t.durationMilliseconds,i=t.onComplete,a=t.startAt,u=void 0===a?0:a,c="number"==typeof r,l=Object(n.useState)(u),f=o(l,2),s=f[0],p=f[1],d=Object(n.useRef)(-1*u),y=Object(n.useRef)(null),m=Object(n.useRef)(null),b=Object(n.useRef)(null);Object(n.useEffect)((function(){return function(){null!==b.current&&clearTimeout(b.current)}}),[]);var v=function e(t){if(null===m.current)return m.current=t,void(y.current=requestAnimationFrame(e));p((function(n){var a=n+(t-m.current);if(!c||a<r)return m.current=t,y.current=requestAnimationFrame(e),a;if("function"==typeof i){d.current+=r;var u=o(i(d.current)||[],2),l=u[0],f=void 0!==l&&l,s=u[1],v=void 0===s?0:s;f&&(b.current=setTimeout((function(){p(0),m.current=null,y.current=requestAnimationFrame(e)}),v))}return r}))};return Object(n.useLayoutEffect)((function(){return e&&(y.current=requestAnimationFrame(v)),function(){cancelAnimationFrame(y.current),m.current=null,y.current=null}}),[e]),s}}])},function(e,t,r){"use strict";var n=r(4);function o(){}function i(){}i.resetWarningCache=o,e.exports=function(){function e(e,t,r,o,i,a){if(a!==n){var u=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw u.name="Invariant Violation",u}}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:i,resetWarningCache:o};return r.PropTypes=r,r}},function(e,t,r){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,r){"use strict";r.r(t),r.d(t,"CountdownCircleTimer",(function(){return C}));var n=r(1),o=r.n(n),i=function(e){return{position:"relative",width:e,height:e}},a={display:"flex",justifyContent:"center",alignItems:"center",position:"absolute",left:0,top:0,width:"100%",height:"100%"},u=function(e){return"countdown-circle-timer-gradient-".concat(e||Math.random().toString(36).substring(2))},c=function(e,t){return 0===t?0:"number"==typeof e?1e3*(t-e):0},l=r(0),f=r.n(l),s={duration:f.a.number.isRequired,colors:f.a.arrayOf(f.a.arrayOf((function(e,t,r,n,o){var i=e[0],a=e[1];return i.match(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/)?void 0===a||a>=0&&a<=1?void 0:new Error("Invalid prop '".concat(o,"[1]' supplied to '").concat(r,"'. Expect a number of color transition duration with value between 0 and 1.")):new Error("Invalid prop '".concat(o,"[0]' supplied to '").concat(r,"'.Expect a color with HEX color code."))})).isRequired).isRequired,children:f.a.oneOfType([f.a.func,f.a.node]),size:f.a.number,strokeWidth:f.a.number,trailColor:f.a.string,isPlaying:f.a.bool,strokeLinecap:f.a.oneOf(["round","square"]),isLinearGradient:f.a.bool,gradientUniqueKey:f.a.string,onComplete:f.a.func,ariaLabel:f.a.string,renderAriaTime:f.a.func,initialRemainingTime:f.a.number};function p(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var r=[],n=!0,o=!1,i=void 0;try{for(var a,u=e[Symbol.iterator]();!(n=(a=u.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(e){o=!0,i=e}finally{try{n||null==u.return||u.return()}finally{if(o)throw i}}return r}(e,t)||y(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(e){return function(e){if(Array.isArray(e))return m(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||y(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function y(e,t){if(e){if("string"==typeof e)return m(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(r):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?m(e,t):void 0}}function m(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var b=function(e){var t=e.gradientId,r=e.colors,n=e.defs,i=void 0===n?"defs":n,a=e.linearGradient,u=void 0===a?"linearGradient":a,c=e.stop,l=void 0===c?"stop":c;return o.a.createElement(i,null,o.a.createElement(u,{id:t,x1:"1",y1:"0",x2:"0",y2:"0"},function(e){if(1===e.length)return[{offset:1,stopColor:e[0][0],key:0}];var t=e.length,r=0;return[{offset:0,stopColor:e[0][0],key:0}].concat(d(e.map((function(e,n){var o=p(e,2),i=o[0],a=o[1];return r+=a,{offset:t===n+1?1:r,stopColor:i,key:n+1}}))))}(r).map((function(e){return o.a.createElement(l,e)}))))},v=f.a.oneOfType([f.a.func,f.a.string]);b.propTypes={gradientId:f.a.string.isRequired,colors:s.colors,defs:v,linearGradient:v,stop:v};var g=r(2),h=function(e,t,r,n){return 0===n?r:t+r*(e/n)};function O(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function j(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?O(Object(r),!0).forEach((function(t){w(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):O(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function w(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var P=function(e){var t=e.r,r=e.g,n=e.b,o=e.opacity;return"rgba(".concat(t,", ").concat(r,", ").concat(n,", ").concat(o,")")},S=function(e,t){var r=function(e){return e.map((function(e){var t=e[0].replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(e,t,r,n){return"#".concat(t).concat(t).concat(r).concat(r).concat(n).concat(n)})).substring(1).match(/.{2}/g).map((function(e){return parseInt(e,16)}));return[{r:t[0],g:t[1],b:t[2],opacity:1},e[1]]}))}(e);if(!t)return r;var n=0;return r.map((function(e,t){var o=r.length===t+1,i="0%";if(t>0){var a=r[t-1][1],u=Math.round(a?100*a:100);(n+=u)>100||o?(n=100,i="100%"):i="".concat(n,"%")}var c={offset:i,stopColor:P(e[0]),key:t};return[j({},e[0],{gradient:c}),e[1]]}))},T={position:"absolute",width:"1px",height:"1px",margin:"-1px",border:0,clip:"rect(0 0 0 0)",padding:0,overflow:"hidden",whiteSpace:"nowrap",wordWrap:"normal"},E=function(e){var t=e.isPlaying,r=e.size,o=e.strokeWidth,l=e.duration,f=e.initialRemainingTime,s=e.colors,p=e.isLinearGradient,d=e.gradientUniqueKey,y=e.onComplete,m={wrapperStyle:i(r),timeStyle:a,visuallyHidden:T},b=Object(n.useMemo)((function(){return function(e,t){var r=e/2,n=t/2,o=r-n,i=2*o,a=2*Math.PI*o;return{path:"m ".concat(r,",").concat(n,"\n a ").concat(o,",").concat(o," 0 1,0 0,").concat(i,"\n a ").concat(o,",").concat(o," 0 1,0 0,-").concat(i),pathLength:a}}(r,o)}),[r,o]),v=b.path,O=b.pathLength,w=Object(n.useMemo)((function(){return{durationMilliseconds:1e3*l,startAt:c(f,l)}}),[]),E=w.durationMilliseconds,A=w.startAt,k=Object(n.useMemo)((function(){return function(e,t,r){var n=S(e,r),o=0;return n.map((function(e,r){var i=n.length===r+1;if(o>=t||i)return o=t,j({},e[0],{colorEndTime:o});var a=o,u=void 0!==e[1]?a+e[1]*t:t-o,c=u>=t?t:u,l=n[r+1][0],f={goalR:l.r-e[0].r,goalG:l.g-e[0].g,goalB:l.b-e[0].b};return o=c,j({},e[0],{},f,{colorStartTime:a,colorEndTime:c,duration:c-a})}))}(s,E,p)}),[s,E,p]),x=Object(n.useMemo)((function(){return u(d)}),[d]),C=Object(g.useElapsedTime)(t,{startAt:A,durationMilliseconds:E,onComplete:"function"==typeof y?function(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];return y.apply(void 0,[e/1e3].concat(r))}:void 0});return{path:v,pathLength:O,stroke:function(e,t){if(1===e.length)return P(e[0]);var r=e.find((function(e){var r=e.colorEndTime;return t<=r}));if(void 0===r.duration)return P(r);var n=t-r.colorStartTime,o=0|h(n,r.r,r.goalR,r.duration),i=0|h(n,r.g,r.goalG,r.duration),a=0|h(n,r.b,r.goalB,r.duration);return P({r:o,g:i,b:a,opacity:r.opacity})}(k,C),strokeDashoffset:h(C,0,O,E),gradientId:x,styles:m,timeProps:{remainingTime:Math.ceil((E-C)/1e3),elapsedTime:C}}};function A(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function k(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?A(Object(r),!0).forEach((function(t){x(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):A(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function x(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var C=function(e){var t=e.size,r=e.strokeWidth,n=e.trailColor,i=e.duration,a=e.isPlaying,u=e.colors,c=e.strokeLinecap,l=e.children,f=e.isLinearGradient,s=e.gradientUniqueKey,p=e.onComplete,d=e.ariaLabel,y=e.renderAriaTime,m=e.initialRemainingTime,v=E({isPlaying:a,size:t,strokeWidth:r,duration:i,initialRemainingTime:m,colors:u,isLinearGradient:f,gradientUniqueKey:s,onComplete:p}),g=v.path,h=v.pathLength,O=v.stroke,j=v.strokeDashoffset,w=v.gradientId,P=v.styles,S=v.timeProps;return o.a.createElement("div",{style:P.wrapperStyle,"aria-label":d},o.a.createElement("svg",{width:t,height:t,xmlns:"http://www.w3.org/2000/svg"},f&&o.a.createElement(b,{colors:u,gradientId:w}),o.a.createElement("path",{d:g,fill:"none",stroke:n,strokeWidth:r}),o.a.createElement("path",{d:g,fill:"none",stroke:f?"url(#".concat(w,")"):O,strokeLinecap:c,strokeWidth:r,strokeDasharray:h,strokeDashoffset:j})),null!==l&&o.a.createElement("div",{"aria-hidden":"true",style:k({},P.timeStyle,{color:O})},o.a.isValidElement(l)?o.a.cloneElement(o.a.Children.only(l),S):l(S)),"function"==typeof y&&o.a.createElement("div",{role:"timer","aria-live":"assertive",style:P.visuallyHidden},y(S)))};C.propTypes=s,C.defaultProps={size:180,strokeWidth:12,trailColor:"#d9d9d9",isPlaying:!1,strokeLinecap:"round",isLinearGradient:!1,ariaLabel:"Countdown timer",children:null},C.displayName="CountdownCircleTimer"}]);
//# sourceMappingURL=index.js.map
{
"name": "react-countdown-circle-timer",
"version": "2.1.1",
"version": "2.1.2",
"description": "Lightweight React countdown timer component with color and progress animation based on SVG",

@@ -38,3 +38,3 @@ "main": "./lib/index.js",

"devDependencies": {
"@countdown-circle-timer/shared": "^1.0.4",
"@countdown-circle-timer/shared": "^1.0.5",
"@testing-library/jest-dom": "^4.2.4",

@@ -51,3 +51,3 @@ "@testing-library/react": "^9.4.0"

"types": "types/CountdownCircleTimer.d.ts",
"gitHead": "9a287cc2677da63659564854b67a3d6d1019d612"
"gitHead": "6a5feaa2c5e49ec1b6db240940218003348c487d"
}

@@ -104,5 +104,5 @@ # React Countdown Circle Timer

<img src="https://user-images.githubusercontent.com/10707142/80461739-04ccee80-8936-11ea-9bb2-e05c6055f9ad.gif" width="500">
<img src="https://user-images.githubusercontent.com/10707142/80909463-efd2cf80-8d28-11ea-8592-a179f49ac4ba.gif" width="500">
Check the demo below for one possible solution
[![Edit musing-davinci-mqssz](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/musing-davinci-mqssz?fontsize=14&hidenavigation=1&theme=dark)

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc