Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React Component Update #14

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Convert syntax to use react component
IhsanE committed Aug 12, 2016
commit f78bf7c6e50cfe498791fe47c4ea0e6a1783fca1
88 changes: 41 additions & 47 deletions countdown_timer.jsx
Original file line number Diff line number Diff line change
@@ -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,112 +15,110 @@ 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() {
getDefaultProps() {
return {
interval: 1000,
formatFunc: null,
tickCallback: null,
completeCallback: null
formatFunc: undefined,
tickCallback: undefined,
completeCallback: undefined,
};
},
}

getInitialState: function() {
getInitialState() {
// 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
timeoutId: undefined,
prevTime: undefined
};
},
}

componentDidMount: function() {
this.tick();
},
componentWillReceiveProps(newProps, oldProps) {
if (this.state.timeoutId) clearTimeout(this.state.timeoutId);
this.setState({ prevTime: undefined, timeRemaining: newProps.initialTimeRemaining });
}

componentWillReceiveProps: function(newProps) {
if (this.state.timeoutId) { clearTimeout(this.state.timeoutId); }
this.setState({prevTime: null, timeRemaining: newProps.initialTimeRemaining});
},
componentDidMount() {
this.tick();
}

componentDidUpdate: function() {
componentDidUpdate(){
if ((!this.state.prevTime) && this.state.timeRemaining > 0 && this.isMounted()) {
this.tick();
}
},
}

componentWillUnmount: function() {
componentWillUnmount() {
clearTimeout(this.state.timeoutId);
},
}

tick() {

tick: function() {
var currentTime = Date.now();
var dt = this.state.prevTime ? (currentTime - this.state.prevTime) : 0;
var dt = currentTime - this.state.prevTime || 0;
var interval = this.props.interval;

// correct for small variations in actual timeout time
var timeRemainingInInterval = (interval - (dt % interval));
var timeout = timeRemainingInInterval;

if (timeRemainingInInterval < (interval / 2.0)) {
if (timeRemainingInInterval < (interval / 2.0)){
timeout += interval;
}

var timeRemaining = Math.max(this.state.timeRemaining - dt, 0);
var countdownComplete = (this.state.prevTime && timeRemaining <= 0);

if (this.isMounted()) {
if (this.state.timeoutId) { clearTimeout(this.state.timeoutId); }
if (this.isMounted()){
if (this.state.timeoutId) clearTimeout(this.state.timeoutId);
this.setState({
timeoutId: countdownComplete ? null : setTimeout(this.tick, timeout),
timeoutId: countdownComplete ? undefined: setTimeout(this.tick, timeout),
prevTime: currentTime,
timeRemaining: timeRemaining
});
}

if (countdownComplete) {
if (this.props.completeCallback) { this.props.completeCallback(); }
if (this.props.completeCallback) { this.props.completeCallback() };
return;
}

if (this.props.tickCallback) {
this.props.tickCallback(timeRemaining);
}
},
}


getFormattedTime: function(milliseconds) {
getFormattedTime(milliseconds) {
if (this.props.formatFunc) {
return this.props.formatFunc(milliseconds);
}

var totalSeconds = Math.round(milliseconds / 1000);

var seconds = parseInt(totalSeconds % 60, 10);
var minutes = parseInt(totalSeconds / 60, 10) % 60;
var hours = parseInt(totalSeconds / 3600, 10);
var seconds = parseInt(totalSeconds % 60);
var minutes = parseInt(totalSeconds / 60) % 60;
var hours = parseInt(totalSeconds / 3600);

seconds = seconds < 10 ? '0' + seconds : seconds;
minutes = minutes < 10 ? '0' + minutes : minutes;
hours = hours < 10 ? '0' + hours : hours;

return hours + ':' + minutes + ':' + seconds;
},
}

render: function() {
render() {
var timeRemaining = this.state.timeRemaining;

return (
@@ -131,6 +127,4 @@ var CountdownTimer = React.createClass({
</div>
);
}
});

module.exports = CountdownTimer;
}