ant-design/components/breadcrumb/BreadcrumbItem.tsx
偏右 6d2a5df1e6 fix: Breadcrumb validateDOMNesting warning (#16929)
* 🐛 Fix Breadcrumb validateDOMNesting warning

```
Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
    in a (created by Context.Consumer)
    in span (created by Context.Consumer)
    in a (created by Context.Consumer)
    in Trigger (created by Dropdown)
    in Dropdown (created by Context.Consumer)
    in Dropdown (created by Context.Consumer)
    in span (created by Context.Consumer)
    in BreadcrumbItem (created by Context.Consumer)
    in div (created by Context.Consumer)
    in Breadcrumb (created by TestBreadcrumb)
    in TestBreadcrumb
```

*  update snapshots
2019-06-03 16:13:15 +08:00

87 lines
2.2 KiB
TypeScript

import * as React from 'react';
import * as PropTypes from 'prop-types';
import DropDown, { DropDownProps } from '../dropdown/dropdown';
import Icon from '../icon';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
export interface BreadcrumbItemProps {
prefixCls?: string;
separator?: React.ReactNode;
href?: string;
overlay?: DropDownProps['overlay'];
onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
}
export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps, any> {
static __ANT_BREADCRUMB_ITEM = true;
static defaultProps = {
separator: '/',
};
static propTypes = {
prefixCls: PropTypes.string,
separator: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
href: PropTypes.string,
};
renderBreadcrumbItem = ({ getPrefixCls }: ConfigConsumerProps) => {
const {
prefixCls: customizePrefixCls,
separator,
children,
overlay,
...restProps
} = this.props;
const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
let link;
if ('href' in this.props) {
link = (
<a className={`${prefixCls}-link`} {...restProps}>
{children}
</a>
);
} else {
link = (
<span className={`${prefixCls}-link`} {...restProps}>
{children}
</span>
);
}
// wrap to dropDown
link = this.renderBreadcrumbNode(link, prefixCls);
if (children) {
return (
<span>
{link}
<span className={`${prefixCls}-separator`}>{separator}</span>
</span>
);
}
return null;
};
/**
* if overlay is have
* Wrap a DropDown
*/
renderBreadcrumbNode = (breadcrumbItem: React.ReactNode, prefixCls: string) => {
const { overlay } = this.props;
if (overlay) {
return (
<DropDown overlay={overlay} placement="bottomCenter">
<span className={`${prefixCls}-overlay-link`}>
{breadcrumbItem}
<Icon type="down" />
</span>
</DropDown>
);
}
return breadcrumbItem;
};
render() {
return <ConfigConsumer>{this.renderBreadcrumbItem}</ConfigConsumer>;
}
}