Explicitly declare the timer handles for cancellation

mui · Dec 31, 2015 · 8d492e1 · 8d492e1
1 parent 1460e09
commit 8d492e1
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 30 deletions.
diff --git a/docs/src/app/components/pages/components/progress.jsx b/docs/src/app/components/pages/components/progress.jsx
@@ -7,24 +7,24 @@ import CodeBlock from '../../CodeExample/CodeBlock';
 
 const ProgressPage = React.createClass({
 
+  timer: undefined,
+
   getInitialState() {
     return {
       completed: 0,
     };
   },
 
   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
@@ -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
@@ -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
@@ -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
@@ -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 {