ant-design/components/breadcrumb/index.jsx

52 lines
1.5 KiB
React
Raw Normal View History

2015-07-01 20:44:19 +08:00
import React from 'react';
let prefixCls = 'ant-breadcrumb';
let BreadcrumbItem = React.createClass({
render() {
var link = <a className={prefixCls + '-link'} {...this.props}>{this.props.children}</a>;
var slash = <span className={prefixCls + '-slash'}>/</span>;
if (typeof this.props.href === 'undefined') {
link = <span className={prefixCls + '-link'} {...this.props}>{this.props.children}</span>;
}
2015-07-02 17:22:26 +08:00
return <span>{link}{slash}</span>;
2015-07-01 20:44:19 +08:00
}
});
let Breadcrumb = React.createClass({
2015-07-02 17:22:26 +08:00
contextTypes: {
router: React.PropTypes.object
2015-07-02 17:22:26 +08:00
},
2015-07-01 20:44:19 +08:00
render() {
let crumbs, routes, params;
let ReactRouter = this.props.router;
if (this.context.router && ReactRouter) {
var Link = ReactRouter.Link;
routes = this.context.router.state.branch;
params = this.context.router.state.params;
2015-07-02 18:33:37 +08:00
crumbs = routes.map(function(route, i) {
2015-08-21 16:41:39 +08:00
var name = route.breadcrumbName.replace(/\:(.*)/g, function(replacement, key) {
return params[key] || replacement;
});
2015-07-02 18:33:37 +08:00
var link;
if (i === routes.length - 1) {
link = <span>{name}</span>;
} else {
link = <Link to={route.path} params={params}>{name}</Link>;
}
2015-07-09 18:23:34 +08:00
return <BreadcrumbItem key={name}>{link}</BreadcrumbItem>;
2015-07-02 17:22:26 +08:00
});
} else {
crumbs = this.props.children;
2015-07-01 21:24:04 +08:00
}
2015-07-01 20:44:19 +08:00
return (
<div className={prefixCls}>
2015-07-02 17:22:26 +08:00
{crumbs}
2015-07-01 20:44:19 +08:00
</div>
);
}
});
Breadcrumb.Item = BreadcrumbItem;
export default Breadcrumb;