Merge pull request #68 from charpeni/corners-router-props

Add router functions to corners and title

Author: davidLeonardi

README.md

@@ -186,6 +186,13 @@ You can listen to these events by adding an event listener as such:
 	});
 ```
 
+As of v0.8.0 the `leftCorner`, `rightCorner` and `titleComponent` have access to the following router functions :
+
+- `toRoute(route)`
+- `toBack()`
+- `replaceRoute(route)`
+- `resetToRoute(route)`
+- `goToFirstRoute()`
 
 
 A more advanced example: Twitter app

components/NavBarContainer.js

@@ -10,8 +10,11 @@ const propTypes = {
   currentRoute: PropTypes.object.isRequired,
   customAction: PropTypes.func,
   handleBackAndroid: PropTypes.bool,
+  goToFirstRoute: PropTypes.func.isRequired,
   leftProps: PropTypes.object,
   navigator: PropTypes.object.isRequired,
+  replaceRoute: PropTypes.func.isRequired,
+  resetToRoute: PropTypes.func.isRequired,
   rightCorner: PropTypes.func,
   rightProps: PropTypes.object,
   style: View.propTypes.style,
@@ -44,6 +47,9 @@ class NavBarContainer extends React.Component {
 
     this.goBack = this.goBack.bind(this);
     this.goForward = this.goForward.bind(this);
+    this.replaceRoute = this.replaceRoute.bind(this);
+    this.resetToRoute = this.resetToRoute.bind(this);
+    this.goToFirstRoute = this.goToFirstRoute.bind(this);
     this.customAction = this.customAction.bind(this);
 
     this.state = {
@@ -87,6 +93,18 @@ class NavBarContainer extends React.Component {
     this.props.toRoute(route, this.props.navigator);
   }
 
+  replaceRoute(nextRoute) {
+    this.props.replaceRoute(nextRoute, this.props.navigator);
+  }
+
+  resetToRoute(nextRoute) {
+    this.props.resetToRoute(nextRoute, this.props.navigator);
+  }
+
+  goToFirstRoute(nextRoute) {
+    this.props.goToFirstRoute(nextRoute, this.props.navigator);
+  }
+
   customAction(opts) {
     this.props.customAction(opts);
   }
@@ -119,23 +137,6 @@ class NavBarContainer extends React.Component {
           willDisappear
         />
       );
-    } else if (this.props.currentRoute.hideNavigationBar) {
-      navbarContent = (
-        <NavBarContent
-          route={this.props.currentRoute}
-          backButtonComponent={this.props.backButtonComponent}
-          rightCorner={this.props.rightCorner}
-          titleStyle={this.props.titleStyle}
-          borderBottomWidth={this.props.borderBottomWidth}
-          borderColor={this.props.borderColor}
-          goBack={this.goBack}
-          goForward={this.goForward}
-          leftProps={this.props.leftProps}
-          rightProps={this.props.rightProps}
-          titleProps={this.props.titleProps}
-          customAction={this.customAction}
-        />
-      );
     } else {
       navbarContent = (
         <NavBarContent
@@ -147,6 +148,9 @@ class NavBarContainer extends React.Component {
           borderColor={this.props.borderColor}
           goBack={this.goBack}
           goForward={this.goForward}
+          replaceRoute={this.replaceRoute}
+          resetToRoute={this.resetToRoute}
+          goToFirstRoute={this.goToFirstRoute}
           leftProps={this.props.leftProps}
           rightProps={this.props.rightProps}
           titleProps={this.props.titleProps}

components/NavBarContent.js

@@ -9,7 +9,10 @@ const propTypes = {
   customAction: PropTypes.func,
   goBack: PropTypes.func,
   goForward: PropTypes.func,
+  goToFirstRoute: PropTypes.func.isRequired,
   leftProps: PropTypes.object,
+  replaceRoute: PropTypes.func.isRequired,
+  resetToRoute: PropTypes.func.isRequired,
   rightCorner: PropTypes.func,
   rightProps: PropTypes.object,
   route: PropTypes.object.isRequired,
@@ -65,6 +68,9 @@ class NavBarContent extends React.Component {
 
     this.goBack = this.goBack.bind(this);
     this.goForward = this.goForward.bind(this);
+    this.replaceRoute = this.replaceRoute.bind(this);
+    this.resetToRoute = this.resetToRoute.bind(this);
+    this.goToFirstRoute = this.goToFirstRoute.bind(this);
     this.customAction = this.customAction.bind(this);
 
     this.state = {
@@ -112,6 +118,18 @@ class NavBarContent extends React.Component {
     this.props.goForward(route);
   }
 
+  replaceRoute(nextRoute) {
+    this.props.replaceRoute(nextRoute);
+  }
+
+  resetToRoute(nextRoute) {
+    this.props.resetToRoute(nextRoute);
+  }
+
+  goToFirstRoute(nextRoute) {
+    this.props.goToFirstRoute(nextRoute);
+  }
+
   customAction(opts) {
     this.props.customAction(opts);
   }
@@ -144,6 +162,10 @@ class NavBarContent extends React.Component {
       leftCornerContent = (
         <LeftCorner
           toRoute={this.goForward}
+          toBack={this.goBack}
+          replaceRoute={this.replaceRoute}
+          resetToRoute={this.resetToRoute}
+          goToFirstRoute={this.goToFirstRoute}
           customAction={this.customAction}
           {...this.props.leftProps}
           {...this.props.route.leftCornerProps}
@@ -172,6 +194,10 @@ class NavBarContent extends React.Component {
       rightCornerContent = (
         <RightCorner
           toRoute={this.goForward}
+          toBack={this.goBack}
+          replaceRoute={this.replaceRoute}
+          resetToRoute={this.resetToRoute}
+          goToFirstRoute={this.goToFirstRoute}
           customAction={this.customAction}
           {...this.props.rightProps}
           {...this.props.route.rightCornerProps}
@@ -193,7 +219,17 @@ class NavBarContent extends React.Component {
 
     if (this.props.route.titleComponent) {
       TitleComponent = this.props.route.titleComponent;
-      titleContent = <TitleComponent {...this.props.titleProps} />;
+      titleContent = (
+        <TitleComponent
+          toRoute={this.goForward}
+          toBack={this.goBack}
+          replaceRoute={this.replaceRoute}
+          resetToRoute={this.resetToRoute}
+          goToFirstRoute={this.goToFirstRoute}
+          customAction={this.customAction}
+          {...this.props.titleProps}
+        />
+      );
     } else {
       titleContent = (
         <Text style={[styles.navbarText, this.props.titleStyle]} numberOfLines={1}>

index.js

@@ -45,6 +45,9 @@ class Router extends React.Component {
 
     this.onForward = this.onForward.bind(this);
     this.onBack = this.onBack.bind(this);
+    this.onReplaceRoute = this.onReplaceRoute.bind(this);
+    this.onResetToRoute = this.onResetToRoute.bind(this);
+    this.onToFirstRoute = this.onToFirstRoute.bind(this);
     this.customAction = this.customAction.bind(this);
     this.renderScene = this.renderScene.bind(this);
 
@@ -127,18 +130,34 @@ class Router extends React.Component {
     });
   }
 
+  onForward(nextRoute, navigator) {
+    navigator.push(
+      Object.assign(nextRoute, { index: this.state.route.index + 1 || 1 })
+    );
+  }
+
   onBack(navigator) {
     if (this.state.route.index > 0) {
       navigator.pop();
     }
   }
 
-  onForward(nextRoute, navigator) {
-    navigator.push(
-      Object.assign(nextRoute, { index: this.state.route.index + 1 || 1 })
+  onReplaceRoute(nextRoute, navigator) {
+    navigator.replace(
+      Object.assign(nextRoute, { index: this.state.route.index || 0 })
     );
   }
 
+  onResetToRoute(nextRoute, navigator) {
+    navigator.resetTo(
+      Object.assign(nextRoute, { index: 0 })
+    );
+  }
+
+  onToFirstRoute(navigator) {
+    navigator.popToTop();
+  }
+
   onWillPop() {
     this.emitter.emit('willPop');
   }
@@ -201,23 +220,17 @@ class Router extends React.Component {
 
   renderScene(route, navigator) {
     const goForward = (nextRoute) => {
-      navigator.push(
-        Object.assign(nextRoute, { index: this.state.route.index + 1 || 1 })
-      );
+      this.onForward(nextRoute, navigator);
       this.emitter.emit('push', nextRoute);
     };
 
     const replaceRoute = (nextRoute) => {
-      navigator.replace(
-        Object.assign(nextRoute, { index: this.state.route.index || 0 })
-      );
+      this.replaceRoute(nextRoute, navigator);
       this.emitter.emit('replace', nextRoute);
     };
 
     const resetToRoute = (nextRoute) => {
-      navigator.resetTo(
-        Object.assign(nextRoute, { index: 0 })
-      );
+      this.onResetToRoute(nextRoute, navigator);
       this.emitter.emit('resetTo', nextRoute);
     };
 
@@ -226,7 +239,7 @@ class Router extends React.Component {
     };
 
     const goToFirstRoute = () => {
-      navigator.popToTop();
+      this.onToFirstRoute(navigator);
       this.emitter.emit('popToTop');
     };
 
@@ -305,6 +318,9 @@ class Router extends React.Component {
           borderColor={this.props.borderColor}
           toRoute={this.onForward}
           toBack={this.onBack}
+          replaceRoute={this.onReplaceRoute}
+          resetToRoute={this.onResetToRoute}
+          goToFirstRoute={this.onToFirstRoute}
           leftProps={this.state.leftProps}
           rightProps={this.state.rightProps}
           titleProps={this.state.titleProps}