Implement breadcrumbs example

grabbou · grabbou · commit 0152809ed387 · 2015-10-22T11:41:02.000+02:00
This commit presents simple approach on how to support breadcrumbs with
React Router.
diff --git a/examples/breadcrumbs/app.css b/examples/breadcrumbs/app.css
@@ -0,0 +1,30 @@
+aside {
+  position: absolute;
+  left: 0;
+  width: 300px;
+}
+
+main {
+  position: absolute;
+  left: 310px;
+}
+
+ul.breadcrumbs-list {
+  margin: 0;
+  padding: 0;
+}
+
+ul.breadcrumbs-list li {
+  display: inline-block;
+  margin-right: 20px;
+}
+
+ul.breadcrumbs-list li a:not(.breadcrumb-active) {
+  font-weight: bold;
+  margin-right: 20px;
+}
+
+ul.breadcrumbs-list li a.breadcrumb-active {
+  text-decoration: none;
+  cursor: default;
+}
diff --git a/examples/breadcrumbs/app.js b/examples/breadcrumbs/app.js
@@ -0,0 +1,80 @@
+import React from 'react/addons'
+import { createHistory, useBasename } from 'history'
+import { Router, Route, Link } from 'react-router'
+
+require('./app.css')
+
+const history = useBasename(createHistory)({
+  basename: '/breadcrumbs'
+})
+
+class App extends React.Component {
+  static title = 'Home';
+  static path = '/';
+
+  render() {
+    const depth = this.props.routes.length
+
+    return (
+      <div>
+        <aside>
+          <ul>
+            <li><Link to={Products.path}>Products</Link></li>
+            <li><Link to={Orders.path}>Orders</Link></li>
+          </ul>
+        </aside>
+        <main>
+          <ul className="breadcrumbs-list">
+            {this.props.routes.map((item, index) =>
+              <li key={index}>
+                <Link
+                  onlyActiveOnIndex={true}
+                  activeClassName="breadcrumb-active"
+                  to={item.path || ''}>
+                  {item.component.title}
+                </Link>
+                {(index + 1) < depth && '\u2192'}
+              </li>
+            )}
+          </ul>
+          {this.props.children}
+        </main>
+      </div>
+    )
+  }
+}
+
+class Products extends React.Component {
+  static title = 'Products';
+  static path = '/products';
+
+  render() {
+    return (
+      <div className="Page">
+        <h1>Products</h1>
+      </div>
+    )
+  }
+}
+
+class Orders extends React.Component {
+  static title = 'Orders';
+  static path = '/orders';
+
+  render() {
+    return (
+      <div className="Page">
+        <h1>Orders</h1>
+      </div>
+    )
+  }
+}
+
+React.render((
+  <Router history={history}>
+    <Route path={App.path} component={App}>
+      <Route path={Products.path} component={Products} />
+      <Route path={Orders.path} component={Orders} />
+    </Route>
+  </Router>
+), document.getElementById('example'))
diff --git a/examples/breadcrumbs/index.html b/examples/breadcrumbs/index.html
@@ -0,0 +1,9 @@
+<!doctype html public "restroom">
+<title>Breadcrumbs Example</title>
+<link href="/global.css" rel="stylesheet"/>
+<link href="/animations/app.css" rel="stylesheet"/>
+<body>
+<h1 class="breadcrumbs"><a href="/">React Router Examples</a> / Breadcrumbs</h1>
+<div id="example"/>
+<script src="/__build__/shared.js"></script>
+<script src="/__build__/breadcrumbs.js"></script>
diff --git a/examples/index.html b/examples/index.html
@@ -7,6 +7,7 @@ <h1>React Router Examples</h1>
 <li><a href="animations">Animations</a></li>
 <li><a href="auth-flow">Auth Flow</a></li>
 <li><a href="auth-with-shared-root">Auth With Shared Root</a></li>
+<li><a href="breadcrumbs">Breadcrumbs</a></li>
 <li><a href="dynamic-segments">Dynamic Segments</a></li>
 <li><a href="huge-apps">Huge Apps (Partial App Loading)</a></li>
 <li><a href="master-detail">Master Detail</a></li>
