mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-16 01:41:02 +08:00
d12403a26d
* refactor: add className in BreadcrumbItemProps * refactor: update docs
80 lines
1.9 KiB
TypeScript
80 lines
1.9 KiB
TypeScript
import * as React from 'react';
|
|
import DownOutlined from '@ant-design/icons/DownOutlined';
|
|
|
|
import DropDown, { DropDownProps } from '../dropdown/dropdown';
|
|
import { ConfigContext } from '../config-provider';
|
|
|
|
export interface BreadcrumbItemProps {
|
|
prefixCls?: string;
|
|
separator?: React.ReactNode;
|
|
href?: string;
|
|
overlay?: DropDownProps['overlay'];
|
|
dropdownProps?: DropDownProps;
|
|
onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
|
|
className?: string;
|
|
}
|
|
interface BreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {
|
|
__ANT_BREADCRUMB_ITEM: boolean;
|
|
}
|
|
const BreadcrumbItem: BreadcrumbItemInterface = ({
|
|
prefixCls: customizePrefixCls,
|
|
separator = '/',
|
|
children,
|
|
overlay,
|
|
dropdownProps,
|
|
...restProps
|
|
}) => {
|
|
const { getPrefixCls } = React.useContext(ConfigContext);
|
|
const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
|
|
/**
|
|
* if overlay is have
|
|
* Wrap a DropDown
|
|
*/
|
|
const renderBreadcrumbNode = (breadcrumbItem: React.ReactNode) => {
|
|
if (overlay) {
|
|
return (
|
|
<DropDown overlay={overlay} placement="bottomCenter" {...dropdownProps}>
|
|
<span className={`${prefixCls}-overlay-link`}>
|
|
{breadcrumbItem}
|
|
<DownOutlined />
|
|
</span>
|
|
</DropDown>
|
|
);
|
|
}
|
|
return breadcrumbItem;
|
|
};
|
|
|
|
let link;
|
|
if ('href' in restProps) {
|
|
link = (
|
|
<a className={`${prefixCls}-link`} {...restProps}>
|
|
{children}
|
|
</a>
|
|
);
|
|
} else {
|
|
link = (
|
|
<span className={`${prefixCls}-link`} {...restProps}>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
// 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;
|