fix(Modal): clear timeouts when toggling of modal - #166

ajainarayanan · eddywashere · commit 5e0f5d2591c9 · 2016-12-12T09:35:16.000-08:00
diff --git a/src/Fade.js b/src/Fade.js
@@ -41,8 +41,12 @@ class Fade extends React.Component {
 
     this.onLeave = this.onLeave.bind(this);
     this.onEnter = this.onEnter.bind(this);
+    this.timers = [];
   }
 
+  componentWillUnmount() {
+    this.timers.forEach(timer => clearTimeout(timer));
+  }
   onEnter(cb) {
     return () => {
       cb();
@@ -51,7 +55,6 @@ class Fade extends React.Component {
       }
     };
   }
-
   onLeave(cb) {
     return () => {
       cb();
@@ -66,7 +69,7 @@ class Fade extends React.Component {
       this.onEnter(cb)();
     }
 
-    setTimeout(this.onEnter(cb), this.props.transitionAppearTimeout);
+    this.timers.push(setTimeout(this.onEnter(cb), this.props.transitionAppearTimeout));
   }
 
   componentDidAppear() {
@@ -80,7 +83,7 @@ class Fade extends React.Component {
       this.onEnter(cb)();
     }
 
-    setTimeout(this.onEnter(cb), this.props.transitionEnterTimeout);
+    this.timers.push(setTimeout(this.onEnter(cb), this.props.transitionEnterTimeout));
   }
 
   componentDidEnter() {
@@ -98,9 +101,8 @@ class Fade extends React.Component {
       this.onLeave(cb)();
     }
 
-    setTimeout(this.onLeave(cb), this.props.transitionLeaveTimeout);
+    this.timers.push(setTimeout(this.onLeave(cb), this.props.transitionLeaveTimeout));
   }
-
   render() {
     const {
       baseClass,

Original file line number	Diff line number	Diff line change
`@@ -41,8 +41,12 @@ class Fade extends React.Component {`
`41`	`41`
`42`	`42`	`this.onLeave = this.onLeave.bind(this);`
`43`	`43`	`this.onEnter = this.onEnter.bind(this);`
	`44`	`+ this.timers = [];`
`44`	`45`	`}`
`45`	`46`
	`47`	`+ componentWillUnmount() {`
	`48`	`+ this.timers.forEach(timer => clearTimeout(timer));`
	`49`	`+ }`
`46`	`50`	`onEnter(cb) {`
`47`	`51`	`return () => {`
`48`	`52`	`cb();`
`@@ -51,7 +55,6 @@ class Fade extends React.Component {`
`51`	`55`	`}`
`52`	`56`	`};`
`53`	`57`	`}`
`54`		`-`
`55`	`58`	`onLeave(cb) {`
`56`	`59`	`return () => {`
`57`	`60`	`cb();`
`@@ -66,7 +69,7 @@ class Fade extends React.Component {`
`66`	`69`	`this.onEnter(cb)();`
`67`	`70`	`}`
`68`	`71`
`69`		`- setTimeout(this.onEnter(cb), this.props.transitionAppearTimeout);`
	`72`	`+ this.timers.push(setTimeout(this.onEnter(cb), this.props.transitionAppearTimeout));`
`70`	`73`	`}`
`71`	`74`
`72`	`75`	`componentDidAppear() {`
`@@ -80,7 +83,7 @@ class Fade extends React.Component {`
`80`	`83`	`this.onEnter(cb)();`
`81`	`84`	`}`
`82`	`85`
`83`		`- setTimeout(this.onEnter(cb), this.props.transitionEnterTimeout);`
	`86`	`+ this.timers.push(setTimeout(this.onEnter(cb), this.props.transitionEnterTimeout));`
`84`	`87`	`}`
`85`	`88`
`86`	`89`	`componentDidEnter() {`
`@@ -98,9 +101,8 @@ class Fade extends React.Component {`
`98`	`101`	`this.onLeave(cb)();`
`99`	`102`	`}`
`100`	`103`
`101`		`- setTimeout(this.onLeave(cb), this.props.transitionLeaveTimeout);`
	`104`	`+ this.timers.push(setTimeout(this.onLeave(cb), this.props.transitionLeaveTimeout));`
`102`	`105`	`}`
`103`		`-`
`104`	`106`	`render() {`
`105`	`107`	`const {`
`106`	`108`	`baseClass,`