2017-11-17 14:38:54 +08:00
|
|
|
import * as React from 'react';
|
2020-03-02 12:09:38 +08:00
|
|
|
import DownOutlined from '@ant-design/icons/DownOutlined';
|
2019-08-05 18:38:10 +08:00
|
|
|
import omit from 'omit.js';
|
2019-08-13 14:07:17 +08:00
|
|
|
|
2019-05-06 12:04:39 +08:00
|
|
|
import DropDown, { DropDownProps } from '../dropdown/dropdown';
|
2018-12-05 19:12:18 +08:00
|
|
|
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
2016-03-31 17:46:35 +08:00
|
|
|
|
2016-09-13 15:31:29 +08:00
|
|
|
export interface BreadcrumbItemProps {
|
2016-12-19 15:19:15 +08:00
|
|
|
prefixCls?: string;
|
2016-07-14 13:29:50 +08:00
|
|
|
separator?: React.ReactNode;
|
|
|
|
href?: string;
|
2019-05-06 12:04:39 +08:00
|
|
|
overlay?: DropDownProps['overlay'];
|
2020-03-02 16:08:25 +08:00
|
|
|
dropdownProps?: DropDownProps;
|
2019-03-11 23:48:37 +08:00
|
|
|
onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
|
2016-07-14 13:29:50 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps, any> {
|
2017-01-27 17:08:05 +08:00
|
|
|
static __ANT_BREADCRUMB_ITEM = true;
|
|
|
|
|
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
|
|
|
|
2018-12-05 19:12:18 +08:00
|
|
|
renderBreadcrumbItem = ({ getPrefixCls }: ConfigConsumerProps) => {
|
2019-08-05 18:38:10 +08:00
|
|
|
const { prefixCls: customizePrefixCls, separator, children, ...restProps } = this.props;
|
2018-12-05 19:12:18 +08:00
|
|
|
const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
|
2016-03-31 17:46:35 +08:00
|
|
|
let link;
|
|
|
|
if ('href' in this.props) {
|
2018-12-07 20:02:01 +08:00
|
|
|
link = (
|
2019-08-05 18:38:10 +08:00
|
|
|
<a className={`${prefixCls}-link`} {...omit(restProps, ['overlay'])}>
|
2018-12-07 20:02:01 +08:00
|
|
|
{children}
|
|
|
|
</a>
|
|
|
|
);
|
2016-03-31 17:46:35 +08:00
|
|
|
} else {
|
2018-12-07 20:02:01 +08:00
|
|
|
link = (
|
2019-08-05 18:38:10 +08:00
|
|
|
<span className={`${prefixCls}-link`} {...omit(restProps, ['overlay'])}>
|
2018-12-07 20:02:01 +08:00
|
|
|
{children}
|
|
|
|
</span>
|
|
|
|
);
|
2016-03-31 17:46:35 +08:00
|
|
|
}
|
2019-05-06 12:04:39 +08:00
|
|
|
|
|
|
|
// wrap to dropDown
|
|
|
|
link = this.renderBreadcrumbNode(link, prefixCls);
|
2017-03-29 15:13:20 +08:00
|
|
|
if (children) {
|
|
|
|
return (
|
|
|
|
<span>
|
|
|
|
{link}
|
2019-07-25 12:02:15 +08:00
|
|
|
{separator && separator !== '' && (
|
|
|
|
<span className={`${prefixCls}-separator`}>{separator}</span>
|
|
|
|
)}
|
2017-03-29 15:13:20 +08:00
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
return null;
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2018-12-05 19:12:18 +08:00
|
|
|
|
2019-05-06 12:04:39 +08:00
|
|
|
/**
|
|
|
|
* if overlay is have
|
|
|
|
* Wrap a DropDown
|
|
|
|
*/
|
|
|
|
renderBreadcrumbNode = (breadcrumbItem: React.ReactNode, prefixCls: string) => {
|
2020-03-02 16:08:25 +08:00
|
|
|
const { overlay, dropdownProps } = this.props;
|
2019-05-06 12:04:39 +08:00
|
|
|
if (overlay) {
|
|
|
|
return (
|
2020-03-02 16:08:25 +08:00
|
|
|
<DropDown overlay={overlay} placement="bottomCenter" {...dropdownProps}>
|
2019-06-03 16:13:15 +08:00
|
|
|
<span className={`${prefixCls}-overlay-link`}>
|
2019-05-06 12:04:39 +08:00
|
|
|
{breadcrumbItem}
|
2019-11-28 12:34:33 +08:00
|
|
|
<DownOutlined />
|
2019-06-03 16:13:15 +08:00
|
|
|
</span>
|
2019-05-06 12:04:39 +08:00
|
|
|
</DropDown>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
return breadcrumbItem;
|
|
|
|
};
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2018-12-05 19:12:18 +08:00
|
|
|
render() {
|
2018-12-07 20:02:01 +08:00
|
|
|
return <ConfigConsumer>{this.renderBreadcrumbItem}</ConfigConsumer>;
|
2018-12-05 19:12:18 +08:00
|
|
|
}
|
2016-03-31 17:46:35 +08:00
|
|
|
}
|