Merge remote-tracking branch 'origin/master'

Author: mjackson

docs/api/mixins/RouteLookup.md

@@ -9,15 +9,15 @@ Instance Methods
 
 ### `getRoutes()`
 
-Returns an array of the active routes in order of their hierarchy.
+Returns an array of all routes.
 
 ```js
 [route, route, ...]
 ```
 
 ### `getNamedRoutes()`
 
-Returns an object hash of active routes by name.
+Returns an object hash of all routes by name.
 
 ```js
 {user: route, users: route, ...}
@@ -31,13 +31,11 @@ Example
 -------
 
 ```js
-var TopLevelApp = React.createClass({
-  mixins: [RouteLookup, PathState],
+React.createClass({
+  mixins: [RouteLookup],
 
-  // `updatePath` is from `PathState`
-  updatePath: function() {
-    var deepestRoute = this.getRoutes().reverse()[0];
-    document.title = deepestRoute.props.title;
+  componentDidMount: function() {
+    console.log(this.getRoutes())
   }
 });
 ```

docs/guides/overview.md

@@ -371,3 +371,15 @@ redirecting transitions, query parameters and more.
   [API]:../api/
   [path-matching]:./path-matching.md
 
+CommonJS Guide
+--------------
+
+In order for the above examples to work in a CommonJS environment you'll need to `require` the following:
+
+```
+var Router = require('react-router');
+var Route = Router.Route;
+var Routes = Router.Routes;
+var DefaultRoute = Router.DefaultRoute;
+var Link = Router.Link;
+```

examples/index.html

@@ -12,6 +12,7 @@ <h1>React Router Examples</h1>
 <li><a href="partial-app-loading/index.html">Partial App Loading</a></li>
 <li><a href="query-params/index.html">Query Params</a></li>
 <li><a href="shared-root/index.html">Shared Root</a></li>
+<li><a href="sidebar/index.html">Sidebar</a></li>
 <li><a href="simple-master-detail/index.html">Simple Master Detail</a></li>
 <li><a href="transitions/index.html">Transitions</a></li>
 </ul>

examples/sidebar/app.css

@@ -0,0 +1,23 @@
+.Sidebar {
+  float: left;
+  background: #eee;
+  padding: 20px;
+  margin: 0 20px 20px 20px;
+  width: 200px;
+  cursor: pointer;
+}
+
+.Content {
+  padding: 20px 20px 20px 300px;
+}
+
+.CategoryNav__Toggle:before {
+  display: inline-block;
+  width: 1em;
+  content: '▸';
+}
+
+.CategoryNav__Toggle--is-open:before {
+  content: '▾';
+}
+

examples/sidebar/app.js

@@ -0,0 +1,148 @@
+/** @jsx React.DOM */
+var React = require('react');
+var Router = require('react-router');
+var Routes = Router.Routes;
+var Route = Router.Route;
+var DefaultRoute = Router.DefaultRoute;
+var Link = Router.Link;
+var RouteLookup = Router.RouteLookup;
+var data = require('./data');
+
+var CategoryNav = React.createClass({
+  getInitialState: function() {
+    return { isOpen: this.props.defaultIsOpen};
+  },
+
+  getDefaultProps: function() {
+    return { isOpen: false };
+  },
+
+  componentWillReceiveProps: function(newProps) {
+    if (!this.state.isOpen)
+      this.setState({isOpen: newProps.defaultIsOpen});
+  },
+
+  toggle: function() {
+    this.setState({isOpen: !this.state.isOpen});
+  },
+
+  buildToggleClassName: function() {
+    var toggleClassName = 'CategoryNav__Toggle';
+    if (this.state.isOpen)
+      toggleClassName += ' CategoryNav__Toggle--is-open';
+    return toggleClassName;
+  },
+
+  renderItems: function() {
+    var category = this.props.category;
+    return this.state.isOpen ? category.items.map(function(item) {
+      var params = { name: item.name, category: category.name };
+      return (
+        <li key={item.name}>
+          <Link to="item" params={params}>{item.name}</Link>
+        </li>
+      );
+    }) : null;
+  },
+
+  render: function() {
+    var category = this.props.category;
+    return (
+      <div className="CategoryNav">
+        <h3
+          className={this.buildToggleClassName()}
+          onClick={this.toggle}
+        >{category.name}</h3>
+        <ul>{this.renderItems()}</ul>  
+      </div>
+    );
+  }
+});
+
+var Sidebar = React.createClass({
+  renderCategory: function(category) {
+    return <CategoryNav
+      key={category.name}
+      defaultIsOpen={category.name === this.props.activeCategory}
+      category={category}
+    />;
+  },
+
+  render: function() {
+    return (
+      <div className="Sidebar">
+        {this.props.categories.map(this.renderCategory)}
+      </div>
+    );
+  }
+});
+
+var App = React.createClass({
+  render: function() {
+    var activeRouteHandler = this.props.activeRouteHandler();
+    var activeCategory = activeRouteHandler ?
+      activeRouteHandler.props.params.category : null;
+    return (
+      <div>
+        <Sidebar activeCategory={activeCategory} categories={data.getAll()}/>
+        <div className="Content">
+          {activeRouteHandler}
+        </div>
+      </div>
+    );
+  }
+});
+
+var Item = React.createClass({
+  render: function() {
+    var params = this.props.params;
+    var category = data.lookupCategory(params.category);
+    var item = data.lookupItem(params.category, params.name);
+    return (
+      <div>
+        <h2>{category.name} / {item.name}</h2>
+        <p>Price: ${item.price}</p>
+      </div>
+    );
+  }
+});
+
+var Index = React.createClass({
+  render: function() {
+    return (
+      <div>
+        <p>Sidebar features:</p>
+        <ul style={{maxWidth: '400px'}}>
+          <li>User can open/close categories</li>
+          <li>
+            Visiting an item on first page load will automatically open
+            the correct category. (Click an item, then reload the
+            browser.)
+          </li>
+          <li>
+            Navigating with forward/back buttons will open an active
+            category if it is not already open. (Navigate to several
+            items, close all the categories, then use back/forward
+            buttons.)
+          </li>
+          <li>
+            Only the user can close a category. (Navigating from an
+            active category will not close it.)
+          </li>
+        </ul>
+      </div>
+    );
+  }
+});
+
+var routes = (
+  <Routes>
+    <Route handler={App}>
+      <DefaultRoute handler={Index}/>
+      <Route name="item" path=":category/:name" handler={Item} />
+    </Route>
+  </Routes>
+);
+
+React.renderComponent(routes, document.getElementById('example'));
+

examples/sidebar/data.js

@@ -0,0 +1,48 @@
+var data = [
+  {
+    name: 'Tacos',
+    items: [
+      { name: 'Carne Asada', price: 7 },
+      { name: 'Pollo', price: 6 },
+      { name: 'Carnitas', price: 6 }
+    ]
+  },
+  {
+    name: 'Burgers',
+    items: [
+      { name: 'Buffalo Bleu', price: 8 },
+      { name: 'Bacon', price: 8 },
+      { name: 'Mushroom and Swiss', price: 6 }
+    ]
+  },
+  {
+    name: 'Drinks',
+    items: [
+      { name: 'Lemonade', price: 3 },
+      { name: 'Root Beer', price: 4 },
+      { name: 'Iron Port', price: 5 }
+    ]
+  }
+];
+
+var dataMap = data.reduce(function(map, category) {
+  category.itemsMap = category.items.reduce(function(itemsMap, item) {
+    itemsMap[item.name] = item;
+    return itemsMap;
+  }, {});
+  map[category.name] = category;
+  return map;
+}, {});
+
+exports.getAll = function() {
+  return data;
+};
+
+exports.lookupCategory = function(name) {
+  return dataMap[name];
+};
+
+exports.lookupItem = function(category, item) {
+  return dataMap[category].itemsMap[item];
+};
+

examples/sidebar/index.html

@@ -0,0 +1,9 @@
+<!doctype html public "restroom">
+<title>Sidebar Example</title>
+<link href="../global.css" rel="stylesheet"/>
+<link href="app.css" rel="stylesheet"/>
+<body>
+<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Sidebar</h1>
+<div id="example"/>
+<script src="../global-bundle.js"></script>
+<script src="app-bundle.js"></script>

examples/simple-master-detail/app.js

@@ -16,7 +16,7 @@ var App = React.createClass({
 
   render: function() {
     var links = this.state.states.map(function(state) {
-      return <li><Link to="state" abbr={state.abbr}>{state.name}</Link></li>
+      return <li><Link to="state" params={{ abbr: state.abbr }}>{state.name}</Link></li>
     });
     return (
       <div className="App">

modules/utils/__tests__/Path-test.js

@@ -195,10 +195,22 @@ describe('Path.injectParams', function () {
     });
   });
 
+  describe('when a pattern has one splat', function () {
+    it('returns the correct path', function () {
+      expect(Path.injectParams('/a/*/d', { splat: 'b/c' })).toEqual('/a/b/c/d');
+    });
+  });
+
   describe('when a pattern has multiple splats', function () {
     it('returns the correct path', function () {
       expect(Path.injectParams('/a/*/c/*', { splat: [ 'b', 'd' ] })).toEqual('/a/b/c/d');
     });
+
+    it('complains if not given enough splat values', function () {
+      expect(function() {
+        Path.injectParams('/a/*/c/*', { splat: [ 'b' ] });
+      }).toThrow(Error);
+    });
   });
 });
 

scripts/build-examples

@@ -16,3 +16,4 @@ $BUNDLE_EXAMPLE examples/query-params/app.js > examples/query-params/app-bundle.
 $BUNDLE_EXAMPLE examples/shared-root/app.js > examples/shared-root/app-bundle.js
 $BUNDLE_EXAMPLE examples/simple-master-detail/app.js > examples/simple-master-detail/app-bundle.js
 $BUNDLE_EXAMPLE examples/transitions/app.js > examples/transitions/app-bundle.js
+$BUNDLE_EXAMPLE examples/sidebar/app.js > examples/sidebar/app-bundle.js