2019-08-15 09:28:15 +08:00
|
|
|
import * as React from 'react';
|
2018-08-07 21:07:52 +08:00
|
|
|
import * as PropTypes from 'prop-types';
|
2016-12-30 21:41:28 +08:00
|
|
|
import classNames from 'classnames';
|
2018-12-05 19:12:18 +08:00
|
|
|
import BreadcrumbItem from './BreadcrumbItem';
|
2019-07-31 10:47:34 +08:00
|
|
|
import BreadcrumbSeparator from './BreadcrumbSeparator';
|
2019-05-06 12:04:39 +08:00
|
|
|
import Menu from '../menu';
|
2018-12-05 19:12:18 +08:00
|
|
|
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
|
|
|
import warning from '../_util/warning';
|
2019-05-06 12:04:39 +08:00
|
|
|
import { Omit } from '../_util/type';
|
2016-03-31 17:46:35 +08:00
|
|
|
|
2017-11-22 11:10:33 +08:00
|
|
|
export interface Route {
|
|
|
|
path: string;
|
|
|
|
breadcrumbName: string;
|
2019-05-13 17:54:18 +08:00
|
|
|
children?: Omit<Route, 'children'>[];
|
2017-11-22 11:10:33 +08:00
|
|
|
}
|
|
|
|
|
2016-08-29 16:52:35 +08:00
|
|
|
export interface BreadcrumbProps {
|
|
|
|
prefixCls?: string;
|
2017-11-22 11:10:33 +08:00
|
|
|
routes?: Route[];
|
2019-06-24 11:29:58 +08:00
|
|
|
params?: any;
|
2017-01-20 20:10:50 +08:00
|
|
|
separator?: React.ReactNode;
|
2018-12-07 20:02:01 +08:00
|
|
|
itemRender?: (
|
2019-06-16 20:51:47 +08:00
|
|
|
route: Route,
|
2019-06-24 11:29:58 +08:00
|
|
|
params: any,
|
2019-06-16 20:51:47 +08:00
|
|
|
routes: Array<Route>,
|
2018-12-07 20:02:01 +08:00
|
|
|
paths: Array<string>,
|
|
|
|
) => React.ReactNode;
|
2016-08-29 16:52:35 +08:00
|
|
|
style?: React.CSSProperties;
|
2016-12-30 21:41:28 +08:00
|
|
|
className?: string;
|
2017-05-25 16:54:15 +08:00
|
|
|
}
|
2016-08-29 16:52:35 +08:00
|
|
|
|
2017-11-22 11:10:33 +08:00
|
|
|
function getBreadcrumbName(route: Route, params: any) {
|
2016-08-29 16:52:35 +08:00
|
|
|
if (!route.breadcrumbName) {
|
2016-06-10 21:12:52 +08:00
|
|
|
return null;
|
|
|
|
}
|
2016-06-11 17:05:19 +08:00
|
|
|
const paramsKeys = Object.keys(params).join('|');
|
2016-08-29 16:52:35 +08:00
|
|
|
const name = route.breadcrumbName.replace(
|
2016-06-11 17:05:19 +08:00
|
|
|
new RegExp(`:(${paramsKeys})`, 'g'),
|
2017-03-23 21:15:49 +08:00
|
|
|
(replacement, key) => params[key] || replacement,
|
2016-06-11 16:11:08 +08:00
|
|
|
);
|
2016-08-29 16:52:35 +08:00
|
|
|
return name;
|
2016-07-14 13:29:50 +08:00
|
|
|
}
|
|
|
|
|
2017-11-22 11:10:33 +08:00
|
|
|
function defaultItemRender(route: Route, params: any, routes: Route[], paths: string[]) {
|
2016-10-24 12:04:26 +08:00
|
|
|
const isLastItem = routes.indexOf(route) === routes.length - 1;
|
|
|
|
const name = getBreadcrumbName(route, params);
|
2018-12-07 20:02:01 +08:00
|
|
|
return isLastItem ? <span>{name}</span> : <a href={`#/${paths.join('/')}`}>{name}</a>;
|
2016-10-24 12:04:26 +08:00
|
|
|
}
|
|
|
|
|
2016-07-14 13:29:50 +08:00
|
|
|
export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
|
2018-05-05 00:47:44 +08:00
|
|
|
static Item: typeof BreadcrumbItem;
|
2019-08-05 19:09:08 +08:00
|
|
|
|
2019-07-31 10:47:34 +08:00
|
|
|
static Separator: typeof BreadcrumbSeparator;
|
2016-07-14 13:29:50 +08:00
|
|
|
|
2016-03-31 17:46:35 +08:00
|
|
|
static defaultProps = {
|
|
|
|
separator: '/',
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-31 17:46:35 +08:00
|
|
|
|
|
|
|
static propTypes = {
|
2017-04-12 04:49:08 +08:00
|
|
|
prefixCls: PropTypes.string,
|
|
|
|
separator: PropTypes.node,
|
|
|
|
routes: PropTypes.array,
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-31 17:46:35 +08:00
|
|
|
|
2016-11-01 11:10:11 +08:00
|
|
|
componentDidMount() {
|
2019-08-05 18:38:10 +08:00
|
|
|
const { props } = this;
|
2016-09-09 13:55:46 +08:00
|
|
|
warning(
|
|
|
|
!('linkRender' in props || 'nameRender' in props),
|
2019-02-27 15:32:29 +08:00
|
|
|
'Breadcrumb',
|
2016-12-02 15:07:33 +08:00
|
|
|
'`linkRender` and `nameRender` are removed, please use `itemRender` instead, ' +
|
2018-12-07 20:02:01 +08:00
|
|
|
'see: https://u.ant.design/item-render.',
|
2016-09-09 13:55:46 +08:00
|
|
|
);
|
|
|
|
}
|
2019-05-30 17:06:59 +08:00
|
|
|
|
2019-05-30 22:59:01 +08:00
|
|
|
getPath = (path: string, params: any) => {
|
2019-06-16 20:51:47 +08:00
|
|
|
path = (path || '').replace(/^\//, '');
|
|
|
|
Object.keys(params).forEach(key => {
|
|
|
|
path = path.replace(`:${key}`, params[key]);
|
|
|
|
});
|
|
|
|
return path;
|
|
|
|
};
|
2019-05-30 17:06:59 +08:00
|
|
|
|
2019-05-30 22:59:01 +08:00
|
|
|
addChildPath = (paths: string[], childPath: string = '', params: any) => {
|
|
|
|
const originalPaths = [...paths];
|
|
|
|
const path = this.getPath(childPath, params);
|
|
|
|
if (path) {
|
2019-06-16 20:51:47 +08:00
|
|
|
originalPaths.push(path);
|
2019-05-30 22:59:01 +08:00
|
|
|
}
|
|
|
|
return originalPaths;
|
2019-06-16 20:51:47 +08:00
|
|
|
};
|
2019-05-30 22:59:01 +08:00
|
|
|
|
2019-05-06 12:04:39 +08:00
|
|
|
genForRoutes = ({
|
|
|
|
routes = [],
|
|
|
|
params = {},
|
|
|
|
separator,
|
|
|
|
itemRender = defaultItemRender,
|
|
|
|
}: BreadcrumbProps) => {
|
|
|
|
const paths: string[] = [];
|
|
|
|
return routes.map(route => {
|
2019-06-03 16:36:07 +08:00
|
|
|
const path = this.getPath(route.path, params);
|
2019-05-06 12:04:39 +08:00
|
|
|
|
|
|
|
if (path) {
|
|
|
|
paths.push(path);
|
|
|
|
}
|
|
|
|
// generated overlay by route.children
|
|
|
|
let overlay = null;
|
|
|
|
if (route.children && route.children.length) {
|
|
|
|
overlay = (
|
|
|
|
<Menu>
|
|
|
|
{route.children.map(child => (
|
2019-06-16 20:51:47 +08:00
|
|
|
<Menu.Item key={child.breadcrumbName || child.path}>
|
|
|
|
{itemRender(child, params, routes, this.addChildPath(paths, child.path, params))}
|
|
|
|
</Menu.Item>
|
|
|
|
))}
|
2019-05-06 12:04:39 +08:00
|
|
|
</Menu>
|
|
|
|
);
|
|
|
|
}
|
2016-09-09 13:55:46 +08:00
|
|
|
|
2019-05-06 12:04:39 +08:00
|
|
|
return (
|
|
|
|
<BreadcrumbItem overlay={overlay} separator={separator} key={route.breadcrumbName || path}>
|
|
|
|
{itemRender(route, params, routes, paths)}
|
|
|
|
</BreadcrumbItem>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
};
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2018-12-05 19:12:18 +08:00
|
|
|
renderBreadcrumb = ({ getPrefixCls }: ConfigConsumerProps) => {
|
2016-03-31 17:46:35 +08:00
|
|
|
let crumbs;
|
2016-12-30 21:41:28 +08:00
|
|
|
const {
|
2018-12-05 19:12:18 +08:00
|
|
|
prefixCls: customizePrefixCls,
|
2018-12-07 20:02:01 +08:00
|
|
|
separator,
|
|
|
|
style,
|
|
|
|
className,
|
|
|
|
routes,
|
|
|
|
children,
|
2016-12-30 21:41:28 +08:00
|
|
|
} = this.props;
|
2018-12-05 19:12:18 +08:00
|
|
|
const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
|
2016-03-31 17:46:35 +08:00
|
|
|
if (routes && routes.length > 0) {
|
2019-05-06 12:04:39 +08:00
|
|
|
// generated by route
|
|
|
|
crumbs = this.genForRoutes(this.props);
|
2016-10-24 12:04:26 +08:00
|
|
|
} else if (children) {
|
2016-07-14 13:29:50 +08:00
|
|
|
crumbs = React.Children.map(children, (element: any, index) => {
|
2017-02-23 13:43:50 +08:00
|
|
|
if (!element) {
|
|
|
|
return element;
|
|
|
|
}
|
2019-07-31 10:47:34 +08:00
|
|
|
|
2017-01-14 15:25:37 +08:00
|
|
|
warning(
|
2019-07-31 10:47:34 +08:00
|
|
|
element.type &&
|
|
|
|
(element.type.__ANT_BREADCRUMB_ITEM || element.type.__ANT_BREADCRUMB_SEPARATOR),
|
2019-02-27 15:32:29 +08:00
|
|
|
'Breadcrumb',
|
2019-07-31 10:47:34 +08:00
|
|
|
"Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children",
|
2017-01-14 15:25:37 +08:00
|
|
|
);
|
2019-07-31 10:47:34 +08:00
|
|
|
|
2019-08-15 09:47:04 +08:00
|
|
|
return React.cloneElement(element, {
|
2016-03-31 17:46:35 +08:00
|
|
|
separator,
|
|
|
|
key: index,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
return (
|
2016-12-30 21:41:28 +08:00
|
|
|
<div className={classNames(className, prefixCls)} style={style}>
|
2016-03-31 17:46:35 +08:00
|
|
|
{crumbs}
|
|
|
|
</div>
|
|
|
|
);
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2018-12-05 19:12:18 +08:00
|
|
|
|
|
|
|
render() {
|
2018-12-07 20:02:01 +08:00
|
|
|
return <ConfigConsumer>{this.renderBreadcrumb}</ConfigConsumer>;
|
2018-12-05 19:12:18 +08:00
|
|
|
}
|
2016-03-31 17:46:35 +08:00
|
|
|
}
|