Merge branch 'lifecycle-events'

Author: programmarchy

README.md

@@ -5,7 +5,7 @@
 
 React view manager similar to [UINavigationController][ios-controller]
 
-## Instalation
+## Installation
 
 ```bash
 npm install react-navigation-controller
@@ -194,6 +194,46 @@ If set to `true`, the navigationController will save the state
 of each view that gets pushed onto the stack. When `popView()` is called,
 the navigationController will rehydrate the state of the view before it is shown.
 
+## Lifecycle Events
+
+Similar to the React component lifecycle, the navigationController will
+call lifecycle events on the component at certain stages.
+
+Lifecycle events can trigger actions when views transition in or out,
+instead of mounted or unmounted:
+
+```
+class HelloView extends React.Component {
+  navigationControllerDidShowView() {
+    // Do something when the show transition is finished,
+    // like fade in an element.
+  }
+  navigationControllerWillHideView() {
+    // Do something when the hide transition will start,
+    // like fade out an element.
+  }
+  render() {
+    return <div>Hello, {this.props.name}!</div>;
+  }
+}
+```
+
+### `view.navigationControllerWillHideView()`
+
+Invoked immediately before the previous view will be hidden.
+
+### `view.navigationControllerWillShowView()`
+
+Invoked immediately before the next view will be shown.
+
+### `view.navigationControllerDidHideView()`
+
+Invoked immediately after the previous view has been hidden.
+
+### `view.navigationControllerDidShowView()`
+
+Invoked immediately after the next view has been shown.
+
 ## Styling
 
 No default styles are provided, but classes are added for custom styling:

examples/src/view.jsx

@@ -31,24 +31,6 @@ class View extends React.Component {
       counter: this.state.counter + 1
     });
   }
-  componentDidMount() {
-    console.log('component did mount', this.props.index);
-  }
-  navigationControllerWillShowView() {
-    console.log('will show view', this.props.index);
-  }
-  navigationControllerDidShowView() {
-    console.log('did show view', this.props.index);
-  }
-  navigationControllerWillHideView() {
-    console.log('will hide view', this.props.index);
-  }
-  navigationControllerDidHideView() {
-    console.log('did hide view', this.props.index);
-  }
-  componentWillUnmount() {
-    console.log('component will unmount', this.props.index);
-  }
   onNext() {
     const view = <View index={this.props.index+1} />;
     this.props.navigationController.pushView(view, {

spec/navigation-controller.spec.jsx

@@ -33,7 +33,7 @@ describe('NavigationController', () => {
     );
     viewWrapper0 = controller['__view-wrapper-0'];
     viewWrapper1 = controller['__view-wrapper-1'];
-  })
+  });
   it('exports a component', () => {
     let controller = renderIntoDocument(
       <NavigationController views={views} />
@@ -86,9 +86,6 @@ describe('NavigationController', () => {
       expect(viewWrapper0).to.have.deep.property(`style.${transformPrefix}`);
       expect(viewWrapper1).to.have.deep.property(`style.${transformPrefix}`);
     });
-  });
-  describe('#componentWillUnmout', () => {
-    
   });
   describe('#__transformViews', () => {
     beforeEach(done => {
@@ -808,4 +805,115 @@ describe('NavigationController', () => {
       });
     });
   });
+  describe('Lifecycle Events', () => {
+    let stubLifecycleEvents = (onTransitionViews) => {
+      const e = {
+        prevView: {
+          willHide: sinon.spy(),
+          didHide: sinon.spy()
+        },
+        nextView: {
+          willShow: sinon.spy(),
+          didShow: sinon.spy()
+        }
+      }
+      const stub = sinon.stub(controller, '__transitionViews', (options) => {
+        let prevView = controller.refs['view-0'];
+        if (prevView) {
+          prevView.navigationControllerWillHideView = e.prevView.willHide;
+          prevView.navigationControllerDidHideView = e.prevView.didHide;
+        }
+        let nextView = controller.refs['view-1'];
+        if (nextView) {
+          nextView.navigationControllerWillShowView = e.nextView.willShow;
+          nextView.navigationControllerDidShowView = e.nextView.didShow;
+        }
+        stub.restore();
+        controller.__transitionViews(options);
+        onTransitionViews();
+      });
+      return e;
+    };
+    describe('#__pushView', () => {
+      beforeEach(done => {
+        requestAnimationFrame(() => {
+          done();
+        });
+      });
+      it('calls events with a "none" transition', (done) => {
+        const e = stubLifecycleEvents(() => {
+          expect(e.prevView.willHide.calledOnce).to.be.true;
+          expect(e.nextView.willShow.calledOnce).to.be.true;
+          expect(e.prevView.didHide.calledOnce).to.be.false;
+          expect(e.nextView.didShow.calledOnce).to.be.false;
+        });
+        controller.__pushView(<ViewB />, {
+          transition: Transition.type.NONE,
+          onComplete() {
+            expect(e.prevView.didHide.calledOnce).to.be.true;
+            expect(e.nextView.didShow.calledOnce).to.be.true;
+            done();
+          }
+        });
+      });
+      it('calls events with a built-in spring animation', (done) => {
+        const e = stubLifecycleEvents(() => {
+          expect(e.prevView.willHide.calledOnce).to.be.true;
+          expect(e.nextView.willShow.calledOnce).to.be.true;
+          expect(e.prevView.didHide.calledOnce).to.be.false;
+          expect(e.nextView.didShow.calledOnce).to.be.false;
+        });
+        controller.__pushView(<ViewB />, {
+          transition: Transition.type.PUSH_LEFT,
+          onComplete() {
+            expect(e.prevView.didHide.calledOnce).to.be.true;
+            expect(e.nextView.didShow.calledOnce).to.be.true;
+            done();
+          }
+        });
+      });
+    });
+    describe('#__popView', () => {
+      beforeEach(done => {
+        controller = renderIntoDocument(
+          <NavigationController views={[<ViewA />,<ViewB />]} />
+        );
+        requestAnimationFrame(() => {
+          done();
+        });
+      });
+      it('calls events with a "none" transition', (done) => {
+        const e = stubLifecycleEvents(() => {
+          expect(e.prevView.willHide.calledOnce).to.be.true;
+          expect(e.nextView.willShow.calledOnce).to.be.true;
+          expect(e.prevView.didHide.calledOnce).to.be.false;
+          expect(e.nextView.didShow.calledOnce).to.be.false;
+        });
+        controller.__popView({
+          transition: Transition.type.NONE,
+          onComplete() {
+            expect(e.prevView.didHide.calledOnce).to.be.true;
+            expect(e.nextView.didShow.calledOnce).to.be.true;
+            done();
+          }
+        });
+      });
+      it('calls events with a built-in spring animation', (done) => {
+        const e = stubLifecycleEvents(() => {
+          expect(e.prevView.willHide.calledOnce).to.be.true;
+          expect(e.nextView.willShow.calledOnce).to.be.true;
+          expect(e.prevView.didHide.calledOnce).to.be.false;
+          expect(e.nextView.didShow.calledOnce).to.be.false;
+        });
+        controller.__popView({
+          transition: Transition.type.PUSH_LEFT,
+          onComplete() {
+            expect(e.prevView.didHide.calledOnce).to.be.true;
+            expect(e.nextView.didShow.calledOnce).to.be.true;
+            done();
+          }
+        });
+      });
+    });
+  });
 });