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-13 14:07:17 +08:00
|
|
|
|
2019-05-06 12:04:39 +08:00
|
|
|
import DropDown, { DropDownProps } from '../dropdown/dropdown';
|
2020-05-28 15:22:00 +08:00
|
|
|
import { ConfigContext } 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
|
|
|
}
|
2020-05-28 15:22:00 +08:00
|
|
|
interface BreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {
|
|
|
|
__ANT_BREADCRUMB_ITEM: boolean;
|
|
|
|
}
|
|
|
|
const BreadcrumbItem: BreadcrumbItemInterface = ({
|
|
|
|
prefixCls: customizePrefixCls,
|
2020-08-03 17:22:51 +08:00
|
|
|
separator = '/',
|
2020-05-28 15:22:00 +08:00
|
|
|
children,
|
|
|
|
overlay,
|
|
|
|
dropdownProps,
|
|
|
|
...restProps
|
|
|
|
}) => {
|
|
|
|
const { getPrefixCls } = React.useContext(ConfigContext);
|
|
|
|
const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
|
2019-05-06 12:04:39 +08:00
|
|
|
/**
|
|
|
|
* if overlay is have
|
|
|
|
* Wrap a DropDown
|
|
|
|
*/
|
2020-05-28 15:22:00 +08:00
|
|
|
const renderBreadcrumbNode = (breadcrumbItem: React.ReactNode) => {
|
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
|
|
|
|
2020-05-28 15:22:00 +08:00
|
|
|
let link;
|
|
|
|
if ('href' in restProps) {
|
|
|
|
link = (
|
|
|
|
<a className={`${prefixCls}-link`} {...restProps}>
|
|
|
|
{children}
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
link = (
|
|
|
|
<span className={`${prefixCls}-link`} {...restProps}>
|
|
|
|
{children}
|
|
|
|
</span>
|
|
|
|
);
|
2018-12-05 19:12:18 +08:00
|
|
|
}
|
2020-05-28 15:22:00 +08:00
|
|
|
|
|
|
|
// wrap to dropDown
|
|
|
|
link = renderBreadcrumbNode(link);
|
|
|
|
if (children) {
|
|
|
|
return (
|
|
|
|
<span>
|
|
|
|
{link}
|
|
|
|
{separator && separator !== '' && (
|
|
|
|
<span className={`${prefixCls}-separator`}>{separator}</span>
|
|
|
|
)}
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
};
|
|
|
|
|
|
|
|
BreadcrumbItem.__ANT_BREADCRUMB_ITEM = true;
|
|
|
|
|
|
|
|
export default BreadcrumbItem;
|