text: (this.webpackJsonpsite=this.webpackJsonpsite||[]).push([[0],{23:function(e,t,a){e.exports=a(33)},28:function(e,t,a){},32:function(e,t,a){},33:function(e,t,a){"use strict";a.r(t);var n=a(0),r=a.n(n),l=a(3),c=a.n(l),o=(a(28),a(10)),i=a(15),s=a(16),m=a(7),p=a(22),d=a(21),u=a(2),h=a(17),E=a(11),f=a(20),g=a(12),w=a(5),b=a(8),T=(a(32),864e5),N=[{label:"Examples",target:"#examples"},{label:"Docs",target:"#docs"},{label:"Install",target:"#install"},{label:"Credits",target:"#credits"},{label:"License",target:"#license"}],v=function(e){Object(p.a)(a,e);var t=Object(d.a)(a);function a(e){var n;return Object(i.a)(this,a),(n=t.call(this,e)).state={activeSection:"#examples",activeTimers:{loop:!1,timecodeUp:!1,timecodeDown:!1},dates:n.getClockDates(),scrollTarget:null,timerProgress:{countdown:{time:0,duration:0},loop:{progress:.3}}},n.onHashChange=n.onHashChange.bind(Object(m.a)(n)),n.onHashClick=n.onHashClick.bind(Object(m.a)(n)),n}return Object(s.a)(a,[{key:"getClockDates",value:function(){return{berlin:u.DateTime.fromObject({zone:"Europe/Berlin"}),melbourne:u.DateTime.fromObject({zone:"Australia/Melbourne"}),newYork:u.DateTime.fromObject({zone:"America/New_York"})}}},{key:"onHashChange",value:function(e,t){var a=e.hash;document.querySelector("#".concat(a))&&(t.preventDefault(),this.setState({scrollTarget:"#".concat(a)}))}},{key:"onHashClick",value:function(e,t){var a=e.hash;document.querySelector("#".concat(a))&&(t.preventDefault(),this.setState({scrollTarget:"#".concat(a)}))}},{key:"onTimerUpdate",value:function(e,t){var a=this.state.timerProgress;this.setState({timerProgress:Object.assign({},a,Object(o.a)({},e,t))})}},{key:"onTimerFinish",value:function(e){"clocks"===e&&this.setState({dates:this.getClockDates()})}},{key:"onScrollTriggerEnterViewport",value:function(e){var t=this.state.activeTimers;this.setState({activeTimers:Object.assign({},t,Object(o.a)({},e,!0))})}},{key:"onScrollTriggerExitViewport",value:function(e){var t=this.state.activeTimers;this.setState({activeTimers:Object.assign({},t,Object(o.a)({},e,!1))})}},{key:"renderNavItems",value:function(){return N.map((function(e,t){return r.a.createElement("li",{className:"nav-item",key:"nav-item-".concat(t)},r.a.createElement("a",{href:e.target,className:"nav-link"},e.label))}))}},{key:"render",value:function(){var e=this.state,t=e.activeTimers,a=e.dates,n=e.scrollTarget,l=e.timerProgress,c=new Date,o=u.DateTime.fromObject({zone:"America/New_York"}).endOf("day"),i=u.DateTime.fromObject({zone:"Australia/Melbourne"}).endOf("day"),s=u.DateTime.fromObject({zone:"Europe/Berlin"}).endOf("day");return r.a.createElement("div",{className:"App"},r.a.createElement(h.a,{onChange:this.onHashChange,onClick:this.onHashClick}),r.a.createElement(f.a,{offset:64,target:n}),r.a.createElement("header",{className:"site-header"},r.a.createElement("nav",{className:"site-header-nav"},r.a.createElement("ul",{className:"nav-list"},this.renderNavItems())),r.a.createElement("div",{className:"site-header-ctas"},r.a.createElement("a",{className:"github-button",href:"https://github.com/ryanhefner/react-timer-wrapper","data-icon":"octicon-star","data-size":"large","aria-label":"Star ryanhefner/react-timer-wrapper on GitHub"},"Star"),r.a.createElement("a",{className:"github-button",href:"https://github.com/ryanhefner","data-size":"large","aria-label":"Follow @ryanhefner on GitHub"},"Follow @ryanhefner"))),r.a.createElement("article",{className:"page-wrapper"},r.a.createElement("header",{className:"page-header"},r.a.createElement("h1",{className:"page-header-title"},"react-timer-wrapper"),r.a.createElement("h2",{className:"page-header-subtitle"},"Composable React Timer component that passes its status to its children."),r.a.createElement("div",{className:"page-header-ctas"},r.a.createElement("a",{className:"github-button",href:"https://github.com/ryanhefner/react-timer-wrapper","data-icon":"octicon-star","data-size":"large","aria-label":"Star ryanhefner/react-timer-wrapper on GitHub"},"Star"),r.a.createElement("a",{className:"github-button",href:"https://github.com/ryanhefner","data-size":"large","aria-label":"Follow @ryanhefner on GitHub"},"Follow @ryanhefner"))),r.a.createElement("section",{className:"section section-examples",id:"examples"},r.a.createElement("div",{className:"content"},r.a.createElement("h3",null,"Examples")),r.a.createElement("div",{className:"example example-timecode"},r.a.createElement("div",{className:"content"},r.a.createElement("h4",null,"Timer w/ Timecode (count up)"),r.a.createElement(b.a,{className:"example-blocks",onEnter:this.onScrollTriggerEnterViewport.bind(this,"timecodeUp"),onExit:this.onScrollTriggerExitViewport.bind(this,"timecodeUp")},r.a.createElement(w.a,{active:t.timecodeUp,duration:null},r.a.createElement(g.a,{className:"timecode",component:"p"}))),r.a.createElement("pre",null,r.a.createElement("code",null,"\nimport Timer from 'react-timer-wrapper';\nimport Timecode from 'react-timecode';\n\n...\n\nrender() {\n  return (\n    <Timer active duration={null}>\n      <Timecode />\n    </Timer>\n  );\n}\n                    ")))),r.a.createElement("div",{className:"example example-timecode"},r.a.createElement("div",{className:"content"},r.a.createElement("h4",null,"Timer w/ Timecode (count down)"),r.a.createElement(b.a,{className:"example-blocks",onEnter:this.onScrollTriggerEnterViewport.bind(this,"timecodeDown"),onExit:this.onScrollTriggerExitViewport.bind(this,"timecodeDown")},r.a.createElement(w.a,{active:t.timecodeDown,duration:27e5,onTimeUpdate:this.onTimerUpdate.bind(this,"countdown")}),r.a.createElement(g.a,{className:"timecode",component:"p",time:l.countdown.duration-l.countdown.time})),r.a.createElement("pre",null,r.a.createElement("code",null,"\nimport Timer from 'react-timer-wrapper';\nimport Timecode from 'react-timecode';\n\n...\n\nonTimerUpdate({time, duration}) {\n  this.setState({\n    time,\n    duration,\n  });\n}\n\nrender() {\n  const {\n    time,\n    duration,\n  } = this.state;\n\n  return (\n    <div>\n      <Timer active duration={45 * 60 * 1000} onTimeUpdate={this.onTimerUpdate} />\n      <Timecode time={duration - time} />\n    </div>\n  );\n}\n                    ")))),r.a.createElement("div",{className:"example example-standalone"},r.a.createElement("div",{className:"content"},r.a.createElement("h4",null,"Timer - standalone")),r.a.createElement(b.a,{className:"example-blocks",onEnter:this.onScrollTriggerEnterViewport.bind(this,"loop"),onExit:this.onScrollTriggerExitViewport.bind(this,"loop")},r.a.createElement(w.a,{active:t.loop,loop:!0,onTimeUpdate:this.onTimerUpdate.bind(this,"loop")}),r.a.createElement("div",{className:"percent-wrapper","data-percent":"".concat(Math.round(100*l.loop.progress),"%")},r.a.createElement("p",{className:"percent"},"".concat(Math.round(100*l.loop.progress),"%")),r.a.createElement("div",{className:"percent-bar",style:{width:"".concat(100*l.loop.progress,"%")}}),r.a.createElement("p",{className:"percent white",style:{clipPath:"inset(0 ".concat(100*(1-l.loop.progress),"% 0 0)"),WebkitClipPath:"inset(0 ".concat(100*(1-l.loop.progress),"% 0 0)")}},"".concat(Math.round(100*l.loop.progress),"%")))),r.a.createElement("div",{className:"content"},r.a.createElement("pre",null,r.a.createElement("code",null,"\nimport Timer from 'react-timer-wrapper';\n\n...\n\nconstructor(props) {\n  super(props);\n\n  this.state = {\n    progress: 0,\n  };\n\n  this.onTimerUpdate = this.onTimerUpdate.bind(this);\n}\n\nonTimerUpdate({progress}) {\n  this.setState({\n    progress,\n  });\n}\n\nrender() {\n  return (\n    <div>\n      <Timer\n        active\n        loop\n        onTimeUpdate={this.onTimerUpdate}\n      />\n      <p>{`${Math.round(this.state.progress)}%`}</p>\n    </div>\n  );\n}\n                    ")))),r.a.createElement("div",{className:"example example-indicators"},r.a.createElement("div",{className:"content"},r.a.createElement("h4",null,"Timer - Indicators")),r.a.createElement(b.a,{className:"example-blocks",onEnter:this.onScrollTriggerEnterViewport.bind(this,"clocks"),onExit:this.onScrollTriggerExitViewport.bind(this,"clocks")},r.a.createElement(w.a,{active:t.clocks,className:"timezone",duration:T,loop:!0,time:T-Math.abs(a.berlin.diff(s).valueOf()),onFinish:this.onTimerFinish},r.a.createElement(E.a,{fill:"#fff",size:300,stroke:"#fff",strokeBackground:"transparent"}),r.a.createElement("h5",null,"Berlin"),r.a.createElement("p",{className:"location-time"},a.berlin.toLocaleString(u.DateTime.TIME_24_SIMPLE)),r.a.createElement("p",{className:"location-date"},a.berlin.toLocaleString(u.DateTime.DATE_MED))),r.a.createElement(w.a,{active:t.clocks,className:"timezone",duration:T,loop:!0,time:T-Math.abs(a.newYork.diff(o).valueOf()),onFinish:this.onTimerFinish},r.a.createElement(E.a,{fill:"#fff",size:300,stroke:"#fff",strokeBackground:"transparent"}),r.a.createElement("h5",null,"New York"),r.a.createElement("p",{className:"location-time"},a.newYork.toLocaleString(u.DateTime.TIME_24_SIMPLE)),r.a.createElement("p",{className:"location-date"},a.newYork.toLocaleString(u.DateTime.DATE_MED))),r.a.createElement(w.a,{active:t.clocks,className:"timezone",duration:T,loops:!0,time:T-Math.abs(a.melbourne.diff(i).valueOf()),onFinish:this.onTimerFinish},r.a.createElement(E.a,{fill:"#fff",size:300,stroke:"#fff",strokeBackground:"transparent"}),r.a.createElement("h5",null,"Melbourne"),r.a.createElement("p",{className:"location-time"},a.melbourne.toLocaleString(u.DateTime.TIME_24_SIMPLE)),r.a.createElement("p",{className:"location-date"},a.melbourne.toLocaleString(u.DateTime.DATE_MED)))),r.a.createElement("div",{className:"content"},r.a.createElement("pre",null,r.a.createElement("code",null,'\nimport Timer from \'react-timer-wrapper\';\nimport { CircleIndicator } from \'react-indicators\';\n\nrender() {\n  return (\n    <Timer\n      active\n      loop\n    >\n      <CircleIndicator\n        fill="#fff"\n        size={300}\n        stroke="#fff"\n        strokeBackground="transparent"\n      />\n    </Timer>\n  );\n}\n                    '))))),r.a.createElement("section",{className:"section section-docs",id:"docs"},r.a.createElement("div",{className:"content"},r.a.createElement("h3",null,"Docs"),r.a.createElement("div",null,r.a.createElement("h4",null,"Properties"),r.a.createElement("ul",null,r.a.createElement("li",null,r.a.createElement("code",null,"active:Boolean")," - Start/stop the timer. (Default: ",r.a.createElement("code",null,"false"),")"),r.a.createElement("li",null,r.a.createElement("code",null,"component:String | Element")," - Element or React component used to render/wrap the children. (Default: ",r.a.createElement("code",null,"div"),")"),r.a.createElement("li",null,r.a.createElement("code",null,"duration:Number")," - Enables countdown mode and is the number of milliseconds to count before firing ",r.a.createElement("code",null,"onFinish"),". (Default: ",r.a.createElement("code",null,"10000"),")"),r.a.createElement("li",null,r.a.createElement("code",null,"loop:Boolean")," - Enable looping of the countdown timer. (Default: ",r.a.createElement("code",null,"false"),")"),r.a.createElement("li",null,r.a.createElement("code",null,"time:Number")," - Either used as a time offset for the duration when used as a countdown timer, or the initial time to start from when used for tracking time. (Default: ",r.a.createElement("code",null,"0"),")"),r.a.createElement("li",null,r.a.createElement("code",null,"onFinish:Function")," - Callback fired when the timer has finished. (Fired in countdown mode only)"),r.a.createElement("li",null,r.a.createElement("code",null,"onStart:Function")," - Callback fired when the timer is started."),r.a.createElement("li",null,r.a.createElement("code",null,"onStop:Function")," - Callback fired when the timer is stopped."),r.a.createElement("li",null,r.a.createElement("code",null,"onTimeUpdate:Function")," - Callback fired when time updates."))))),r.a.createElement("section",{className:"section section-install",id:"install"},r.a.createElement("div",{className:"content"},r.a.createElement("h3",null,"Install"),r.a.createElement("p",null,"Install via ",r.a.createElement("a",{href:"https://npmjs.com/package/react-timer-wrapper"},"npm"),":"),r.a.createElement("pre",null,r.a.createElement("code",null,"npm install --save react-timer-wrapper")),r.a.createElement("p",null,"Or"),r.a.createElement("p",null,"Install via ",r.a.createElement("a",{href:"https://yarn.fyi/react-timer-wrapper"},"Yarn"),":"),r.a.createElement("pre",null,r.a.createElement("code",null,"yarn add react-timer-wrapper")))),r.a.createElement("section",{className:"section section-credits",id:"credits"},r.a.createElement("div",{className:"content"},r.a.createElement("h3",null,"Credits"),r.a.createElement("h4",null,"NPM Packages"),r.a.createElement("ul",{className:"credit-list"},r.a.createElement("li",{className:"credit-item"},r.a.createElement("p",null,r.a.createElement("a",{href:"https://npmjs.com/package/luxon",rel:"nofollow"},"luxon"))),r.a.createElement("li",{className:"credit-item"},r.a.createElement("p",null,r.a.createElement("a",{href:"https://npmjs.com/package/react-hash-handler"},"react-hash-handler"),r.a.createElement("br",null))),r.a.createElement("li",{className:"credit-item"},r.a.createElement("p",null,r.a.createElement("a",{href:"https://npmjs.com/package/react-indicators"},"react-indicators"),r.a.createElement("br",null))),r.a.createElement("li",{className:"credit-item"},r.a.createElement("p",null,r.a.createElement("a",{href:"https://npmjs.com/packcage/react-scroll-trigger"},"react-scroll-trigger"),r.a.createElement("br",null))),r.a.createElement("li",{className:"credit-item"},r.a.createElement("p",null,r.a.createElement("a",{href:"https://npmjs.com/package/react-target-scroller"},"react-target-scroller"),r.a.createElement("br",null))),r.a.createElement("li",{className:"credit-item"},r.a.createElement("p",null,r.a.createElement("a",{href:"https://npmjs.com/package/react-timecode"},"react-timecode"),r.a.createElement("br",null))),r.a.createElement("li",{className:"credit-item"},r.a.createElement("p",null,r.a.createElement("a",{href:"https://npmjs.com/package/react-timer-wrapper"},"react-timer-wrapper"),r.a.createElement("br",null))),r.a.createElement("li",{className:"credit-item"},r.a.createElement("p",null,r.a.createElement("a",{href:"https://npmjs.com/package/tweenkle"},"tweenkle"),r.a.createElement("br",null)))),r.a.createElement("h4",null,"Fonts"),r.a.createElement("ul",{className:"credit-list"},r.a.createElement("li",{className:"credit-item"},r.a.createElement("p",null,r.a.createElement("a",{href:"https://fonts.google.com/specimen/IBM+Plex+Sans",rel:"nofollow"},"IBM Plex Sans"))),r.a.createElement("li",{className:"credit-item"},r.a.createElement("p",null,r.a.createElement("a",{href:"https://fonts.google.com/specimen/IBM+Plex+Mono",rel:"nofollow"},"IBM Plex Mono")))))),r.a.createElement("section",{className:"section section-license",id:"license"},r.a.createElement("div",{className:"content"},r.a.createElement("h3",null,"MIT License"),r.a.createElement("p",null,"Copyright (c) 2017 - 2018 ",r.a.createElement("a",{href:"https://www.ryanhefner.com"},"Ryan Hefner")),r.a.createElement("p",null,'Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:'),r.a.createElement("p",null,"The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software."),r.a.createElement("p",null,'THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.')))),r.a.createElement("footer",{className:"site-footer"},r.a.createElement("div",{className:"content"},r.a.createElement("div",{className:"follow-buttons"},r.a.createElement("a",{className:"github-button",href:"https://github.com/ryanhefner/react-timer-wrapper","data-icon":"octicon-star","aria-label":"Star ryanhefner/react-timer-wrapper on GitHub"},"Star"),r.a.createElement("a",{className:"github-button",href:"https://github.com/ryanhefner","aria-label":"Follow @ryanhefner on GitHub"},"Follow @ryanhefner"),r.a.createElement("a",{className:"twitter-follow-button","data-show-count":"false",href:"https://twitter.com/ryanhefner","aria-label":"Follow @ryanhefner on Twitter"},"Follow @ryanhefner"),r.a.createElement("a",{className:"twitter-follow-button","data-show-count":"false",href:"https://twitter.com/rockkick","aria-label":"Follow @rockkick on Twitter"},"Follow @rockkick")),r.a.createElement("p",{className:"credits"},"Built by ",r.a.createElement("a",{href:"https://www.rockkick.co"},"Rock Kick Co.")," and ",r.a.createElement("a",{href:"https://www.ryanhefner.com"},"Ryan Hefner"),"."),r.a.createElement("p",{className:"copyright"},"\xa9 2017 - ".concat(c.getFullYear()," Ryan Hefner")))))}}]),a}(n.Component),k=Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));function S(e){navigator.serviceWorker.register(e).then((function(e){e.onupdatefound=function(){var t=e.installing;t.onstatechange=function(){"installed"===t.state&&(navigator.serviceWorker.controller?console.log("New content is available; please refresh."):console.log("Content is cached for offline use."))}}})).catch((function(e){console.error("Error during service worker registration:",e)}))}c.a.render(r.a.createElement(v,null),document.getElementById("root")),function(){if("serviceWorker"in navigator){if(new URL("/react-timer-wrapper",window.location).origin!==window.location.origin)return;window.addEventListener("load",(function(){var e="".concat("/react-timer-wrapper","/service-worker.js");k?(!function(e){fetch(e).then((function(t){404===t.status||-1===t.headers.get("content-type").indexOf("javascript")?navigator.serviceWorker.ready.then((function(e){e.unregister().then((function(){window.location.reload()}))})):S(e)})).catch((function(){console.log("No internet connection found. App is running in offline mode.")}))}(e),navigator.serviceWorker.ready.then((function(){console.log("This web app is being served cache-first by a service worker. To learn more, visit https://goo.gl/SC7cgQ")}))):S(e)}))}}()}},[[23,1,2]]]);
  //# sourceMappingURL=main.67587961.chunk.js.map