diff --git a/docs/src/app/components/pages/components/progress.jsx b/docs/src/app/components/pages/components/progress.jsx index 1cf886530d0217..bde4822ecc198a 100644 --- a/docs/src/app/components/pages/components/progress.jsx +++ b/docs/src/app/components/pages/components/progress.jsx @@ -7,6 +7,8 @@ import CodeBlock from '../../CodeExample/CodeBlock'; const ProgressPage = React.createClass({ + timer: undefined, + getInitialState() { return { completed: 0, @@ -14,17 +16,15 @@ const ProgressPage = React.createClass({ }, componentDidMount() { - let self = this; - this.timer = window.setInterval(() => { let diff = Math.random() * 10; - self.setState({ - completed: self.state.completed + diff, + this.setState({ + completed: this.state.completed + diff, }); - if (self.state.completed > 100) { + if (this.state.completed > 100) { window.clearInterval(this.timer); } }, 1000); diff --git a/src/circular-progress.jsx b/src/circular-progress.jsx index 67cf828f55dc25..d234d3d74be7a9 100644 --- a/src/circular-progress.jsx +++ b/src/circular-progress.jsx @@ -10,6 +10,9 @@ const CircularProgress = React.createClass({ mixins: [StylePropable], + scalePathTimer: undefined, + rotateWrapperTimer: undefined, + propTypes: { color: React.PropTypes.string, innerStyle: React.PropTypes.object, @@ -73,8 +76,8 @@ const CircularProgress = React.createClass({ }, componentWillUnmount() { - clearTimeout(this._scalePathTimer); - clearTimeout(this._rotateWrapperTimer); + clearTimeout(this.scalePathTimer); + clearTimeout(this.rotateWrapperTimer); }, _scalePath(path, step) { @@ -99,7 +102,7 @@ const CircularProgress = React.createClass({ path.style.transitionDuration = '850ms'; } - this._scalePathTimer = setTimeout(() => this._scalePath(path, step + 1), step ? 750 : 250); + this.scalePathTimer = setTimeout(() => this._scalePath(path, step + 1), step ? 750 : 250); }, _rotateWrapper(wrapper) { @@ -114,7 +117,7 @@ const CircularProgress = React.createClass({ AutoPrefix.set(wrapper.style, 'transitionTimingFunction', 'linear'); }, 50); - this._rotateWrapperTimer = setTimeout(() => this._rotateWrapper(wrapper), 10050); + this.rotateWrapperTimer = setTimeout(() => this._rotateWrapper(wrapper), 10050); }, getDefaultProps() { diff --git a/src/linear-progress.jsx b/src/linear-progress.jsx index c2b949d8da237b..2074c34017aaa8 100644 --- a/src/linear-progress.jsx +++ b/src/linear-progress.jsx @@ -9,6 +9,11 @@ const LinearProgress = React.createClass({ mixins: [StylePropable], + timers: { + bar1: undefined, + bar2: undefined, + }, + propTypes: { color: React.PropTypes.string, max: React.PropTypes.number, @@ -38,7 +43,6 @@ const LinearProgress = React.createClass({ }, getInitialState() { - this.timers = {}; return { muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; diff --git a/src/refresh-indicator.jsx b/src/refresh-indicator.jsx index e25cf0548e0925..1c379492571538 100644 --- a/src/refresh-indicator.jsx +++ b/src/refresh-indicator.jsx @@ -11,6 +11,10 @@ const VIEWBOX_SIZE = 32; const RefreshIndicator = React.createClass({ mixins: [StylePropable], + scalePathTimer: undefined, + rotateWrapperTimer: undefined, + rotateWrapperSecondTimer: undefined, + contextTypes: { muiTheme: React.PropTypes.object, }, @@ -72,8 +76,9 @@ const RefreshIndicator = React.createClass({ }, componentWillUnmount() { - clearTimeout(this._scalePathTimer); - clearTimeout(this._rotateWrapperTimer); + clearTimeout(this.scalePathTimer); + clearTimeout(this.rotateWrapperTimer); + clearTimeout(this.rotateWrapperSecondTimer); }, render() { @@ -282,7 +287,7 @@ const RefreshIndicator = React.createClass({ AutoPrefix.set(path.style, 'strokeDashoffset', strokeDashoffset); AutoPrefix.set(path.style, 'transitionDuration', transitionDuration); - this._scalePathTimer = setTimeout(() => this._scalePath(path, currStep + 1), currStep ? 750 : 250); + this.scalePathTimer = setTimeout(() => this._scalePath(path, currStep + 1), currStep ? 750 : 250); }, _rotateWrapper(wrapper) { @@ -292,13 +297,13 @@ const RefreshIndicator = React.createClass({ AutoPrefix.set(wrapper.style, 'transform', 'rotate(0deg)'); AutoPrefix.set(wrapper.style, 'transitionDuration', '0ms'); - setTimeout(() => { + this.rotateWrapperSecondTimer = setTimeout(() => { AutoPrefix.set(wrapper.style, 'transform', 'rotate(1800deg)'); AutoPrefix.set(wrapper.style, 'transitionDuration', '10s'); AutoPrefix.set(wrapper.style, 'transitionTimingFunction', 'linear'); }, 50); - this._rotateWrapperTimer = setTimeout(this._rotateWrapper.bind(this, wrapper), 10050); + this.rotateWrapperTimer = setTimeout(() => this._rotateWrapper(wrapper), 10050); }, prefixed(key) { diff --git a/src/snackbar.jsx b/src/snackbar.jsx index 760225f899ea07..950eb5aef9a655 100644 --- a/src/snackbar.jsx +++ b/src/snackbar.jsx @@ -21,11 +21,9 @@ const Snackbar = React.createClass({ manuallyBindClickAway: true, - _timerAutoHideId: undefined, - - _timerTransitionId: undefined, - - _timerOneAtTheTimeId: undefined, + timerAutoHideId: undefined, + timerTransitionId: undefined, + timerOneAtTheTimeId: undefined, contextTypes: { muiTheme: React.PropTypes.object, @@ -157,8 +155,8 @@ const Snackbar = React.createClass({ open: false, }); - clearTimeout(this._timerOneAtTheTimeId); - this._timerOneAtTheTimeId = setTimeout(() => { + clearTimeout(this.timerOneAtTheTimeId); + this.timerOneAtTheTimeId = setTimeout(() => { this.setState({ message: nextProps.message, action: nextProps.action, @@ -181,7 +179,7 @@ const Snackbar = React.createClass({ this._setAutoHideTimer(); //Only Bind clickaway after transition finishes - this._timerTransitionId = setTimeout(() => { + this.timerTransitionId = setTimeout(() => { this._bindClickAway(); }, 400); } @@ -201,20 +199,20 @@ const Snackbar = React.createClass({ this._setAutoHideTimer(); //Only Bind clickaway after transition finishes - this._timerTransitionId = setTimeout(() => { + this.timerTransitionId = setTimeout(() => { this._bindClickAway(); }, 400); } else { - clearTimeout(this._timerAutoHideId); + clearTimeout(this.timerAutoHideId); this._unbindClickAway(); } } }, componentWillUnmount() { - clearTimeout(this._timerAutoHideId); - clearTimeout(this._timerTransitionId); - clearTimeout(this._timerOneAtTheTimeId); + clearTimeout(this.timerAutoHideId); + clearTimeout(this.timerTransitionId); + clearTimeout(this.timerOneAtTheTimeId); this._unbindClickAway(); }, @@ -355,8 +353,8 @@ const Snackbar = React.createClass({ const autoHideDuration = this.props.autoHideDuration; if (autoHideDuration > 0) { - clearTimeout(this._timerAutoHideId); - this._timerAutoHideId = setTimeout(() => { + clearTimeout(this.timerAutoHideId); + this.timerAutoHideId = setTimeout(() => { if (this.props.open !== null && this.props.onRequestClose) { this.props.onRequestClose('timeout'); } else {