2020-03-31 13:47:59 +08:00

71 lines
1.8 KiB
JavaScript

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import ConfigProvider from '../config-provider';
/**
* Breadcrumb.Item
*/
class Item extends Component {
static propTypes = {
prefix: PropTypes.string,
rtl: PropTypes.bool,
/**
* 面包屑节点链接,如果设置这个属性,则该节点为`<a />` ,否则是`<span />`
*/
link: PropTypes.string,
activated: PropTypes.bool,
separator: PropTypes.node,
className: PropTypes.any,
children: PropTypes.node,
};
static defaultProps = {
prefix: 'next-',
};
static _typeMark = 'breadcrumb_item';
// stateless separator component
static Separator({ prefix, children }) {
return (
<span className={`${prefix}breadcrumb-separator`}>{children}</span>
);
}
render() {
const {
prefix,
rtl,
className,
children,
link,
activated,
separator,
...others
} = this.props;
const clazz = classNames(`${prefix}breadcrumb-text`, className, {
activated,
});
return (
<li dir={rtl ? 'rtl' : null} className={`${prefix}breadcrumb-item`}>
{link ? (
<a href={link} className={clazz} {...others}>
{children}
</a>
) : (
<span className={clazz} {...others}>
{children}
</span>
)}
{activated
? null
: Item.Separator({ prefix, children: separator })}
</li>
);
}
}
export default ConfigProvider.config(Item);