switch to card stack

Author: bleonard

App/Actions/AppActions.js

@@ -65,15 +65,6 @@ var AppActions = {
     navItem.targetPath = currentRoute.routePath;
     this.launchRelativeItem(currentRoute, navItem);
   },
-
-  goBack: function(navigator) {
-    var current  = navigator.getCurrentRoutes();
-    var previous = current[0];
-    if (current.length > 2) {
-      previous = current[current.length-2];
-    }
-    AppActions.launchRoutePath(previous.routePath);
-  }
 
 };
 

App/Components/SimpleList.js

@@ -13,7 +13,7 @@ var SimpleList = React.createClass({
   renderRow: function(item, sectionId, rowId) {
     var passAlong = {};
     if (this.props.currentRoute) passAlong.currentRoute = this.props.currentRoute;
-    if (this.props.navigator)    passAlong.navigator    = this.props.navigator;
+    if (this.props.navigation)   passAlong.navigation   = this.props.navigation;
     if (this.props.nextIcon)     passAlong.nextIcon     = this.props.nextIcon;
     if (this.props.noTap)        passAlong.noTap        = this.props.noTap;
 

App/Mixins/NavigationListener.js

@@ -23,8 +23,8 @@ var NavigationListener = {
 
   componentWillMount: function() {
     this._hasNavigationFocus = false;
-    this._onDidFocusNavigationSub  = this.props.navigator.navigationContext.addListener('didfocus',  this._onDidFocusNavigation)
-    this._onWillFocusNavigationSub = this.props.navigator.navigationContext.addListener('willfocus', this._onWillFocusNavigation)
+    // TODO: this._onDidFocusNavigationSub  = this.props.navigator.navigationContext.addListener('didfocus',  this._onDidFocusNavigation)
+    // TODO: this._onWillFocusNavigationSub = this.props.navigator.navigationContext.addListener('willfocus', this._onWillFocusNavigation)
   },
 
   componentWillUnmount: function() {

App/Navigation/NavigationBar.js

@@ -1,16 +1,19 @@
 import React from 'react';
 import {
-  Navigator,
   StyleSheet,
-  TouchableOpacity,
   View,
+  NavigationExperimental,
 } from 'react-native';
 
 import cssVar from '../Lib/cssVar';
 
-import Back                         from '../Platform/Back';
-import NavigatorNavigationBarStyles from '../Platform/NavigatorNavigationBarStyles';
-import NavigationBarRouteMapper     from '../Navigation/NavigationBarRouteMapper';
+import Back             from '../Platform/Back';
+import NavigationHeader from '../Navigation/NavigationHeader';
+import Navigator        from '../Navigation/Navigator';
+
+const {
+  CardStack: NavigationCardStack,
+} = NavigationExperimental;
 
 var stacksEqual = function(one, two, length) {
   if (one.length < length) return false;
@@ -33,7 +36,7 @@ var Container = React.createClass({
         ref={this.props.onLoadedScene}
       >
         <Component ref="mainComponent"
-          navigator={this.props.navigator}
+          navigation={this.props.navigation}
           currentRoute={this.props.route}
           {...this.props.route.passProps}
         />
@@ -42,21 +45,32 @@ var Container = React.createClass({
   }
 });
 
-const routeMapper = new NavigationBarRouteMapper();
-
 var NavigationBar = {
   getInitialState: function() {
     return {};
   },
 
-  renderScene: function(route, navigator) {
+  renderHeader: function(sceneProps) {
+    if (this.props.navBarHidden) {
+      //return <View style={{height: 0}} />
+      return null;
+    }
+
+    return (
+      <NavigationHeader {...sceneProps} navigation={this.navigation} />
+    );
+
+  },
+
+  renderScene: function(sceneProps) {
+    var route = sceneProps.scene.route;
     console.log('renderScene: ' + route.routePath);
 
     return(
       <Container 
         ref={this.onLoadedScene}
         route={route}
-        navigator={navigator}
+        navigation={this.navigation}
         {...this.props}
       />
     );
@@ -72,76 +86,24 @@ var NavigationBar = {
     }
   },
 
-  componentDidUpdate: function(prevProps, prevState) {
-    var current = this.refs.navigator.getCurrentRoutes();
-    
-    if (!current) return; // otherwise initial
-
-    var next = this.props.routeStack.path;
-    var currentRoute = current[current.length - 1];
-    var currentPath  = currentRoute.routePath;
-    var nextRoute    = next[next.length - 1];
-    var nextPath     = nextRoute.routePath;
-
-    if(stacksEqual(current, next, current.length)
-          && next[next.length-2]
-          && next[next.length-2].routePath === currentPath) {
-      // simple push
-      this.refs.navigator.push(nextRoute);
-    }
-    else if(stacksEqual(current, next, next.length)
-          && current[current.length-2]
-          && current[current.length-2].routePath === nextPath) {
-      // simple pop
-      this.refs.navigator.pop();
-    }
-    else if(current.length === next.length
-          && stacksEqual(current, next, next.length-1)) {
-      // switching out last one
-      if (currentRoute.component === nextRoute.component
-          && this._currentComponent
-          && this._currentComponent.setNavigatorRoute) {
-        // switch out current one, same type
-        if (this._currentComponent.props.currentRoute) {
-          // update it in place
-          this._currentComponent.props.currentRoute = currentRoute;
-        }
-        this._currentComponent.setNavigatorRoute(nextRoute);
-      }
-      else {
-        this.refs.navigator.replace(nextRoute);
-      }
-    }
-    else {
-      // something more complicated
-      this.refs.navigator.immediatelyResetRouteStack(this.props.routeStack.path);
-    }
-  },
-
-  renderNavBar: function() {
-    if (this.props.navBarHidden) return null;
-
-    return (
-      <Navigator.NavigationBar
-        routeMapper={routeMapper}
-        style={styles.navBar}
-      />
-    );
+  componentWillMount: function() {
+    this.navigation = new Navigator();
   },
 
   componentDidMount: function() {
-    Back.setNavigator(this.refs.navigator);
+    this.navigation.setStack(this.refs.stack);
+    Back.setNavigator(this.navigation);
   },
 
   render: function() {
     return (
       <View style={styles.appContainer}>
-        <Navigator
-          ref="navigator"
+
+        <NavigationCardStack
+          ref="stack"
+          navigationState={this.props.navigationState}
           renderScene={this.renderScene}
-          navBarHidden={this.props.navBarHidden}
-          initialRouteStack={this.props.routeStack.path}
-          navigationBar={this.renderNavBar()}
+          renderHeader={this.renderHeader}
         />
       </View>
     );
@@ -154,16 +116,14 @@ var styles = StyleSheet.create({
   },
   navBar: {
     backgroundColor: cssVar('blue50'),
-    height: NavigatorNavigationBarStyles.General.TotalNavHeight
   },
   scene: {
     flex: 1,
-    marginTop: NavigatorNavigationBarStyles.General.TotalNavHeight,
     backgroundColor: cssVar('gray5'),
   },
   sceneHidden: {
     marginTop: 0
-  }
+  },
 });
 
 

App/Navigation/NavigationBarRouteMapper.js

@@ -86,11 +86,11 @@ var NavigationButton = React.createClass({
     }
 
     var backLabel = route.navBack || {icon: 'back'}; //{icon: 'caret-left-semi'};
-    return this.makeButton(backLabel, styles.navBarLeftButton, this.goBack);
+    return this.makeButton(backLabel, styles.navBarLeftButton, this.sendBack);
   },
 
-  goBack: function() {
-    AppActions.goBack(this.props.navigator);
+  sendBack: function() {
+    this.props.navigation.back();
   },
 
   render: function() {

App/Navigation/NavigationButton.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import {
+  NavigationExperimental,
+  StyleSheet,
+} from 'react-native';
+
+import cssVar from '../Lib/cssVar';
+
+import NavigationTitle  from '../Navigation/NavigationTitle';
+import NavigationButton from '../Navigation/NavigationButton';
+
+const {
+  Header: NavigationHeader,
+} = NavigationExperimental;
+
+var _NavigationHeader = React.createClass({
+  renderTitle: function (props) {
+    var route = props.scene.route;
+    return <NavigationTitle route={route} />;
+  },
+
+  renderLeft: function(props) {
+    var route = props.scene.route;
+    var index = props.scene.index;
+    return <NavigationButton route={route} index={index} navigation={this.props.navigation} direction="left" />
+  },
+
+  renderRight: function(props) {
+    var route = props.scene.route;
+    var index = props.scene.index;
+    return <NavigationButton route={route} index={index} navigation={this.props.navigation} direction="right" />
+  },
+
+  render: function() {
+    return (
+      <NavigationHeader
+        {...this.props}
+        style={styles.header}
+        renderTitleComponent={this.renderTitle}
+        renderLeftComponent={this.renderLeft}
+        renderRightComponent={this.renderRight}
+      />
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  appContainer: {
+    flex: 1
+  },
+  navBar: {
+    backgroundColor: cssVar('blue50'),
+  },
+  scene: {
+    flex: 1,
+    backgroundColor: cssVar('gray5'),
+  },
+  sceneHidden: {
+    marginTop: 0
+  },
+  header: {
+    backgroundColor: cssVar('blue50'),
+    borderBottomWidth: 0,
+  }
+});
+
+export default _NavigationHeader;

App/Navigation/NavigationHeader.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {
+  NavigationExperimental,
+} from 'react-native';
+
+import AppActions from '../Actions/AppActions';
+
+const {
+  StateUtils: NavigationStateUtils,
+} = NavigationExperimental;
+
+var Navigator = function() {
+  this.stack = null;
+};
+
+Navigator.prototype.setStack = function(stack) {
+  this.stack = stack;
+};
+
+Navigator.prototype.back = function() {
+  if (!this.stack) return false;
+
+  var state = this.stack.props.navigationState;
+  var index = state.index;
+  if (index === 0) return false;
+
+  var updated = NavigationStateUtils.pop(state);
+  var routes = updated.routes;
+  if(routes.length === 0) return false;
+
+  var previous = routes[routes.length-1];
+  AppActions.launchRoutePath(previous.routePath);
+};
+
+export default Navigator;

App/Navigation/Navigator.js

@@ -109,8 +109,11 @@ var Router = {
 
     var found = {};
     // TODO: add query parameters to last item on stack
-    found.currentPath = stack[stack.length - 1].routePath;
-    found.path = stack;
+    found.index  = stack.length - 1;
+    for(var j=0; j < stack.length; j++) {
+      stack[j].key = stack[j].routePath;
+    }
+    found.routes = stack;
     return found;
   }
 };

App/Navigation/Router.js

@@ -14,8 +14,7 @@ const Back = {
       //   AppActions.toggleDrawer();
       //   return true;
       // }
-      if (navigator && navigator.getCurrentRoutes().length > 1) {
-        AppActions.goBack(navigator);
+      if (navigator && navigator.back()) {
         return true;
       }
       return false;