diff --git a/countdown_timer.jsx b/countdown_timer.jsx index 59b85d0..1df4832 100644 --- a/countdown_timer.jsx +++ b/countdown_timer.jsx @@ -1,9 +1,7 @@ -var React = require('react'); +import React, { Component, PropTypes } from 'react' // Generic Countdown Timer UI component // -// https://github.com/uken/react-countdown-timer -// // props: // - initialTimeRemaining: Number // The time remaining for the countdown (in ms). @@ -17,59 +15,49 @@ var React = require('react'); // - tickCallback(timeRemaining): Function (optional) // A function to call each tick. // -// - completeCallback(): Function (optional) -// A function to call when the countdown completes. -// -var CountdownTimer = React.createClass({ - displayName: 'CountdownTimer', +export default class CountdownTimer extends Component { - propTypes: { + static propTypes = { initialTimeRemaining: React.PropTypes.number.isRequired, interval: React.PropTypes.number, formatFunc: React.PropTypes.func, tickCallback: React.PropTypes.func, completeCallback: React.PropTypes.func - }, - - getDefaultProps: function() { - return { - interval: 1000, - formatFunc: null, - tickCallback: null, - completeCallback: null - }; - }, - - getInitialState: function() { - // Normally an anti-pattern to use this.props in getInitialState, - // but these are all initializations (not an anti-pattern). - return { - timeRemaining: this.props.initialTimeRemaining, - timeoutId: null, - prevTime: null - }; - }, - - componentDidMount: function() { - this.tick(); - }, + } + + defaultProps = { + interval: 1000, + formatFunc: null, + tickCallback: null, + completeCallback: null, + } - componentWillReceiveProps: function(newProps) { - if (this.state.timeoutId) { clearTimeout(this.state.timeoutId); } - this.setState({prevTime: null, timeRemaining: newProps.initialTimeRemaining}); - }, + state = { + timeRemaining: this.props.initialTimeRemaining, + timeoutId: null, + prevTime: null + } - componentDidUpdate: function() { - if ((!this.state.prevTime) && this.state.timeRemaining > 0 && this.isMounted()) { - this.tick(); - } - }, + componentWillMount() { + this.isComponentMounted = false; + } + + isMounted() { + return this.isComponentMounted; + } - componentWillUnmount: function() { + componentDidMount() { + this.isComponentMounted = true; + this.tick = this.tick.bind(this) + this.getFormattedTime = this.getFormattedTime.bind(this) + this.tick(); + } + + componentWillUnmount() { clearTimeout(this.state.timeoutId); - }, + } - tick: function() { + tick() { var currentTime = Date.now(); var dt = this.state.prevTime ? (currentTime - this.state.prevTime) : 0; var interval = this.props.interval; @@ -102,35 +90,34 @@ var CountdownTimer = React.createClass({ if (this.props.tickCallback) { this.props.tickCallback(timeRemaining); } - }, - getFormattedTime: function(milliseconds) { - if (this.props.formatFunc) { - return this.props.formatFunc(milliseconds); - } +} - var totalSeconds = Math.round(milliseconds / 1000); +getFormattedTime = (milliseconds) => { + if (this.props.formatFunc) { + return this.props.formatFunc(milliseconds); + } - var seconds = parseInt(totalSeconds % 60, 10); - var minutes = parseInt(totalSeconds / 60, 10) % 60; - var hours = parseInt(totalSeconds / 3600, 10); + var totalSeconds = Math.round(milliseconds / 1000); - seconds = seconds < 10 ? '0' + seconds : seconds; - minutes = minutes < 10 ? '0' + minutes : minutes; - hours = hours < 10 ? '0' + hours : hours; + var seconds = parseInt(totalSeconds % 60); + var minutes = parseInt(totalSeconds / 60) % 60; + var hours = parseInt(totalSeconds / 3600); - return hours + ':' + minutes + ':' + seconds; - }, + seconds = seconds < 10 ? '0' + seconds : seconds; + minutes = minutes < 10 ? '0' + minutes : minutes; + hours = hours < 10 ? '0' + hours : hours; - render: function() { - var timeRemaining = this.state.timeRemaining; + return hours + ':' + minutes + ':' + seconds; +} - return ( -
- {this.getFormattedTime(timeRemaining)} -
- ); - } -}); +render() { + var timeRemaining = this.state.timeRemaining; -module.exports = CountdownTimer; + return ( +
+ {this.getFormattedTime(timeRemaining)} +
+ ); +} +}