breadcrumb & router

components/breadcrumb/demo/router.md

@@ -0,0 +1,59 @@
+# 路由
+
+- order: 2
+
+和 `react-router@0.13.x` 进行结合使用。
+
+---
+
+````jsx
+var Router = antd.Router;
+var Route = Router.Route;
+var Link = Router.Link;
+var RouteHandler = Router.RouteHandler;
+var Breadcrumb = antd.Breadcrumb;
+
+var About = React.createClass({
+  render() {
+    return <div></div>;
+  }
+});
+
+var App = React.createClass({
+  render() {
+    return (<div>
+      <div className="demo-nav">
+        <Link to="/">首页</Link>
+        <Link to="/about">关于</Link>
+      </div>
+      <Breadcrumb />
+      <RouteHandler />
+    </div>);
+  }
+});
+
+var routes = (
+  <Route name="首页" path="/" handler={App} ignoreScrollBehavior>
+    <Route name="关于" path="about" handler={About} />
+  </Route>
+);
+
+Router.run(routes, Router.HashLocation, (Root) => {
+  React.render(<Root />, document.getElementById('components-breadcrumb-demo-router'));
+});
+````
+
+<style>
+.demo-nav {
+  height: 30px;
+  line-height: 30px;
+  margin-bottom: 15px;
+  background: #f8f8f8;
+}
+.demo-nav a {
+  line-height: 30px;
+  width: 40px;
+  text-align: center;
+  display: inline-block;
+}
+</style>

components/breadcrumb/index.jsx

@@ -1,6 +1,9 @@
 'use strict';
 
 import React from 'react';
+import Router from 'react-router';
+
+let Link = Router.Link;
 
 let prefixCls = 'ant-breadcrumb';
 
@@ -11,22 +14,30 @@ let BreadcrumbItem = React.createClass({
     if (typeof this.props.href === 'undefined') {
       link = <span className={prefixCls + '-link'} {...this.props}>{this.props.children}</span>;
     }
-    if (this.props.last) {
-      slash = '';
-    }
-    return <span>{link} {slash}</span>;
+    return <span>{link}{slash}</span>;
   }
 });
 
 let Breadcrumb = React.createClass({
+  contextTypes: {
+    router: React.PropTypes.func.isRequired
+  },
   render() {
-    if (this.props.children.length > 0) {
-      var last = this.props.children[this.props.children.length - 1];
-      last.props.last = true;
+    var crumbs, routes, params;
+    if (this.context.router) {
+      routes = this.context.router.getCurrentRoutes();
+      params = this.context.router.getCurrentParams();
+      crumbs = routes.map(function(route) {
+        return <BreadcrumbItem>
+          <Link to={route.path} params={params}>{route.name}</Link>
+        </BreadcrumbItem>;
+      });
+    } else {
+      crumbs = this.props.children;
     }
     return (
       <div className={prefixCls}>
-        {this.props.children}
+        {crumbs}
       </div>
     );
   }

index.js

@@ -11,6 +11,7 @@ var antd = {
   Popover: require('./components/popover'),
   Select: require('./components/select'),
   Breadcrumb: require('./components/breadcrumb'),
+  Router: require('react-router'),
   Popconfirm: require('./components/popconfirm'),
   confirm: require('./components/modal/confirm'),
   Steps: require('./components/steps'),

package.json

@@ -24,7 +24,8 @@
     "rc-select": "~4.0.0",
     "rc-steps": "~1.1.0",
     "rc-tabs": "~5.1.0",
-    "rc-tooltip": "~2.2.3"
+    "rc-tooltip": "~2.2.3",
+    "react-router": "~0.13.3"
   },
   "devDependencies": {
     "babel": "~5.6.14",

style/components/breadcrumb.less

@@ -8,11 +8,15 @@
     color: #666;
   }
 
-  > span:last-child {
+  & > span:last-child {
     font-weight: bold;
     color: #666;
   }
 
+  & > span:last-child &-slash {
+    display: none;
+  }
+
   &-slash {
     margin: 0 8px;
     color: #d9d9d9;