mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-03-04 17:27:09 +00:00
71 lines
1.8 KiB
JavaScript
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);
|