Merge branch 'master' into parallel-transition

README.md

@@ -62,6 +62,64 @@ The app will be running at localhost:8080, the build command watches for changes
 sources are located in src/example.
 
 
+##API Description
+
+###1) The component:
+```javascript
+<TransitionSwitch parallel={false}>
+    <Route exact path="/">
+        <Transition>home path</Transition>
+    </Route>
+    <Route path="/otherPath">
+        <Transition>other path</Transition>
+    </Route>
+    <Route path="/">
+        <Transition>other home</Transition>
+    </Route>
+    <Route path="/anotherPath">
+        <Transition>another path</Transition>
+    </Route>
+</TransitionSwitch>
+```
+
+TransitionSwitch allows to perform transitions on route change. Given its name, it works like the router v4 Switch. It
+means that only one route will be visible at all times. Except if parallel is set to true, which means that the entering
+transition won't wait for the leaving transition to be finished.
+NB: parallel may be renamed in the next revision.
+
+###2) The transitions:
+Like a switch, the children must be Route elements. The children of these route elements will be given hooks to perform
+the transition. These hooks are :
+
+```javascript
+componentWillAppear(callback)
+
+componentDidAppear()
+
+componentWillEnter(callback)
+
+componentDidEnter()
+
+componentWillLeave(callback)
+
+componentDidLeave()
+```
+The callbacks must be called after the transition is complete, in the case of animation, a good place is in the
+onComplete. The interface is very much the same as react-trasition-group v1. Meaning that componentWillAppear is called
+for the first time when the TransitionSwitch is mounted.
+
+##Sample App
+
+In case you want to quickly try it, there's a webpack setup and very rough sample app. 
+In order to build it you should run :
+```
+npm run build:example
+npm run start:server
+```
+The app will be running at localhost:8080, the build command watches for changes in case you want to play with it, the
+sources are located in src/example.
+
+
 In the next update: 
 - improve the tests
 - add warnings for uses that aren't allowed by the API.

src/TransitionSwitch.test.js

@@ -9,7 +9,6 @@ import PropTypes from 'prop-types';
 import sinon from 'sinon';
 
 describe('TransitionSwitch', () => {
-
     const spies = [];
 
     beforeAll(() => {
@@ -37,7 +36,6 @@ describe('TransitionSwitch', () => {
 
     it('should call componentDidAppear after transition', () => {
         jest.useFakeTimers();
-
         const wrapper = mount(<TestApp />);
 
         expect(Transition.prototype.componentDidAppear.called).toBe(false);
@@ -47,7 +45,6 @@ describe('TransitionSwitch', () => {
 
     it('should call transition hooks', () => {
         jest.useFakeTimers();
-
         const wrapper = mount(<TestApp />);
         const routerWrapper = wrapper.find(MemoryRouter);
 
@@ -154,7 +151,6 @@ class TestAppParallel extends React.Component {
         );
     }
 }
-
 class TestApp extends React.Component {
 
     render() {

src/example/index.js

@@ -50,6 +50,16 @@ class Transition extends React.Component {
 
     constructor(props) {
         super(props);
+
+        this.mounted = false;
+    }
+
+    componentWillMount() {
+        this.mounted = true;
+    }
+
+    componentWillUnmount() {
+        this.mounted = false;
     }
 
     componentWillAppear(cb) {