mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
Add route and params to nameRender (#2002)
This commit is contained in:
parent
378b6b84a5
commit
f0f8f5e687
@ -1,15 +1,14 @@
|
||||
import React, { cloneElement } from 'react';
|
||||
import BreadcrumbItem from './BreadcrumbItem';
|
||||
|
||||
const defaultNameFormatter = (route, params) => {
|
||||
if (!route.breadcrumbName) {
|
||||
const defaultNameRender = (breadcrumbName, route, params) => {
|
||||
if (!breadcrumbName) {
|
||||
return null;
|
||||
}
|
||||
const name = route.breadcrumbName.replace(/:(.*)/g, (replacement, key) => {
|
||||
return params[key] || replacement;
|
||||
});
|
||||
|
||||
return name;
|
||||
const name = breadcrumbName.replace(
|
||||
/:(.*)/g, (replacement, key) => params[key] || replacement
|
||||
);
|
||||
return <span>{name}</span>;
|
||||
};
|
||||
|
||||
export default class Breadcrumb extends React.Component {
|
||||
@ -17,8 +16,7 @@ export default class Breadcrumb extends React.Component {
|
||||
prefixCls: 'ant-breadcrumb',
|
||||
separator: '/',
|
||||
linkRender: (paths, name) => <a href={`#/${paths.join('/')}`}>{name}</a>,
|
||||
nameRender: (name) => <span>{name}</span>,
|
||||
nameFormatter: defaultNameFormatter,
|
||||
nameRender: defaultNameRender,
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
@ -31,12 +29,11 @@ export default class Breadcrumb extends React.Component {
|
||||
params: React.PropTypes.object,
|
||||
linkRender: React.PropTypes.func,
|
||||
nameRender: React.PropTypes.func,
|
||||
nameFormatter: React.PropTypes.func,
|
||||
}
|
||||
|
||||
render() {
|
||||
let crumbs;
|
||||
const { separator, prefixCls, routes, params, children, linkRender, nameRender, nameFormatter } = this.props;
|
||||
const { separator, prefixCls, routes, params, children, linkRender, nameRender } = this.props;
|
||||
if (routes && routes.length > 0) {
|
||||
const paths = [];
|
||||
const lastPath = routes.length - 1;
|
||||
@ -49,13 +46,11 @@ export default class Breadcrumb extends React.Component {
|
||||
if (path) {
|
||||
paths.push(path);
|
||||
}
|
||||
|
||||
const name = nameFormatter(route, params);
|
||||
const name = nameRender(route.breadcrumbName, route, params);
|
||||
if (name) {
|
||||
const link = (i === lastPath) ? nameRender(name) : linkRender(paths, name);
|
||||
return <BreadcrumbItem separator={separator} key={name}>{link}</BreadcrumbItem>;
|
||||
const link = (i === lastPath) ? name : linkRender(paths, name);
|
||||
return <BreadcrumbItem separator={separator} key={route.breadcrumbName || i}>{link}</BreadcrumbItem>;
|
||||
}
|
||||
|
||||
return null;
|
||||
});
|
||||
} else {
|
||||
|
@ -29,5 +29,5 @@ english: Breadcrumb
|
||||
| routes | router 的路由栈信息 | Array | | - |
|
||||
| params | 路由的参数 | Object | | - |
|
||||
| separator | 分隔符自定义 | String or Element | | '/' |
|
||||
| linkRender | 自定义链接函数,和 react-router 配置使用 | Function(href, name) | | - |
|
||||
| nameRender | 自定义链接函数,和 react-router 配置使用 | Function(name) | | - |
|
||||
| linkRender | 自定义链接函数,和 react-router 配置使用 | Function(href, breadcrumbName) | | - |
|
||||
| nameRender | 自定义文字函数,和 react-router 配置使用 | Function(breadcrumbName, route, params) | | - |
|
||||
|
Loading…
Reference in New Issue
Block a user