more exploration

reactjs · Apr 19, 2017 · 1326f11 · 1326f11
1 parent 3e45cda
commit 1326f11
Show file tree

Hide file tree

Showing 10 changed files with 936 additions and 313 deletions.
diff --git a/package.json b/package.json
@@ -36,8 +36,7 @@
     "testRegex": "-test\\.js",
     "roots": [
       "<rootDir>/test"
-    ],
-    "timers": "fake"
+    ]
   },
   "peerDependencies": {
     "react": "^15.0.0",
@@ -47,7 +46,7 @@
     "chain-function": "^1.0.0",
     "classnames": "^2.2.5",
     "dom-helpers": "^3.2.0",
-    "prop-types": "^15.5.6",
+    "prop-types": "^15.5.8",
     "warning": "^3.0.0"
   },
   "devDependencies": {
@@ -75,6 +74,7 @@
     "react-dom": "^15.4.2",
     "release-script": "^1.0.2",
     "rimraf": "^2.6.1",
+    "sinon": "^2.1.0",
     "style-loader": "^0.16.1",
     "teaspoon": "^6.4.3",
     "webpack": "^2.2.1"

diff --git a/src/CSSTransition.js b/src/CSSTransition.js
@@ -1,93 +1,92 @@
-import React from 'react';
+import * as PropTypes from 'prop-types';
 import addClass from 'dom-helpers/class/addClass';
 import removeClass from 'dom-helpers/class/removeClass';
-import raf from 'dom-helpers/util/requestAnimationFrame';
+import React from 'react';
 
 import Transition from './Transition';
 import { classNamesShape } from './utils/PropTypes';
 
 const propTypes = {
   classNames: classNamesShape,
-  onEnter: React.PropTypes.func,
-  onEntered: React.PropTypes.func,
+  onEnter: PropTypes.func,
+  onEntering: PropTypes.func,
+  onEntered: PropTypes.func,
 
-  onExit: React.PropTypes.func,
-  onExited: React.PropTypes.func,
+  onExit: PropTypes.func,
+  onExiting: PropTypes.func,
+  onExited: PropTypes.func,
 };
 
 class CSSTransition extends React.Component {
   static contextTypes = {
     transitionGroup: React.PropTypes.object,
   };
 
-  constructor(...args) {
-    super(...args);
+  onEnter = (node, isInitial) => {
+    const appearing = this.context.transitionGroup ?
+      this.context.transitionGroup.isMounting : isInitial;
 
-    this.classNameAndNodeQueue = [];
-    this.transitionTimeouts = [];
-  }
+    const { className } = this.getClassNames(appearing ? 'appear' : 'enter')
 
-  componentWillUnmount() {
-    this.unmounted = true;
+    this.removeClasses(node, 'exit');
+    addClass(node, className)
 
-    if (this.timeout) {
-      clearTimeout(this.timeout);
+    if (this.props.onEnter) {
+      this.props.onEnter(node)
     }
-
-    this.transitionTimeouts.forEach((timeout) => {
-      clearTimeout(timeout);
-    });
-
-    this.classNameAndNodeQueue.length = 0;
   }
 
-  onTransitionStart(node, animationType) {
-    const { className, activeClassName } = this.getClassNames(animationType)
-
-    addClass(node, className);
+  onEntering = (node, isInitial) => {
+    const appearing = this.context.transitionGroup ?
+      this.context.transitionGroup.isMounting : isInitial;
 
-    this.queueClassAndNode(activeClassName, node);
-  }
+    const { activeClassName } = this.getClassNames(
+      appearing ? 'appear' : 'enter'
+    );
 
-  onTransitionEnd(node, animationType) {
-    const { className, activeClassName } = this.getClassNames(animationType)
-    removeClass(node, className);
-    removeClass(node, activeClassName);
-  }
+    this.reflowAndAddClass(node, activeClassName)
 
-  onEnter = (node, isInitial) => {
-    const appearing = this.context.transitionGroup ?
-      this.context.transitionGroup.mounting : isInitial;
-
-    this.onTransitionEnd(node, 'exit'); // just in case
-    this.onTransitionStart(node, appearing ? 'appear' : 'enter');
-    if (this.props.onEnter) {
-      this.props.onEnter(node)
+    if (this.props.onEntering) {
+      this.props.onEntering(node)
     }
   }
 
   onEntered = (node, isInitial) => {
     const appearing = this.context.transitionGroup ?
-      this.context.transitionGroup.mounting : isInitial;
+      this.context.transitionGroup.isMounting : isInitial;
 
-    this.onTransitionEnd(node, appearing ? 'appear' : 'enter');
+    this.removeClasses(node, appearing ? 'appear' : 'enter');
 
     if (this.props.onEntered) {
       this.props.onEntered(node)
     }
   }
 
   onExit = (node) => {
-    this.onTransitionEnd(node, 'appear');
-    this.onTransitionEnd(node, 'enter');
-    this.onTransitionStart(node, 'exit');
+    const { className } = this.getClassNames('exit')
+
+    this.removeClasses(node, 'appear');
+    this.removeClasses(node, 'exit');
+    addClass(node, className)
+
     if (this.props.onExit) {
       this.props.onExit(node)
     }
   }
 
+  onExiting = (node) => {
+    const { activeClassName } = this.getClassNames('exit')
+
+    this.reflowAndAddClass(node, activeClassName)
+
+    if (this.props.onExiting) {
+      this.props.onExiting(node)
+    }
+  }
+
   onExited = (node) => {
-    this.onTransitionEnd(node, 'exit');
+    this.removeClasses(node, 'exit');
+
     if (this.props.onExited) {
       this.props.onExited(node)
     }
@@ -104,30 +103,19 @@ class CSSTransition extends React.Component {
     }
   }
 
-  queueClassAndNode(className, node) {
-    this.classNameAndNodeQueue.push({
-      className,
-      node,
-    });
-
-    if (!this.rafHandle) {
-      this.rafHandle = raf(() => this.flushClassNameAndNodeQueue());
-    }
+  removeClasses(node, type) {
+    const { className, activeClassName } = this.getClassNames(type)
+    removeClass(node, className);
+    removeClass(node, activeClassName);
   }
 
-  flushClassNameAndNodeQueue() {
-    if (!this.unmounted) {
-      this.classNameAndNodeQueue.forEach((obj) => {
-        // This is for to force a repaint,
-        // which is necessary in order to transition styles when adding a class name.
-        /* eslint-disable no-unused-expressions */
-        obj.node.scrollTop;
-        /* eslint-enable no-unused-expressions */
-        addClass(obj.node, obj.className);
-      });
-    }
-    this.classNameAndNodeQueue.length = 0;
-    this.rafHandle = null;
+  reflowAndAddClass(node, className) {
+    // This is for to force a repaint,
+    // which is necessary in order to transition styles when adding a class name.
+    /* eslint-disable no-unused-expressions */
+    node.scrollTop;
+    /* eslint-enable no-unused-expressions */
+    addClass(node, className);
   }
 
   render() {
@@ -136,7 +124,9 @@ class CSSTransition extends React.Component {
         {...this.props}
         onEnter={this.onEnter}
         onEntered={this.onEntered}
+        onEntering={this.onEntering}
         onExit={this.onExit}
+        onExiting={this.onExiting}
         onExited={this.onExited}
       />
     );