2019-08-09 17:06:27 +01:00
|
|
|
import { NavLink } from 'react-router-dom';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import Icon from '../icon';
|
|
|
|
|
|
|
|
class SectionHeadlineBarItem extends PureComponent {
|
|
|
|
static propTypes = {
|
|
|
|
to: PropTypes.string,
|
|
|
|
icon: PropTypes.string,
|
|
|
|
className: PropTypes.string,
|
|
|
|
onClick: PropTypes.func,
|
|
|
|
title: PropTypes.oneOf([
|
|
|
|
PropTypes.string,
|
|
|
|
PropTypes.node,
|
|
|
|
]),
|
2019-08-13 16:54:29 +01:00
|
|
|
exact: PropTypes.bool,
|
2019-08-09 17:06:27 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
2019-08-13 16:54:29 +01:00
|
|
|
const { to, title, icon, className, onClick, exact } = this.props;
|
2019-08-09 17:06:27 +01:00
|
|
|
|
|
|
|
const classes = classNames('section-header-bar__item', className);
|
|
|
|
|
|
|
|
if (to) {
|
2019-08-13 16:54:29 +01:00
|
|
|
return (<NavLink className={classes} exact={exact} to={to}>{title}</NavLink>);
|
2019-08-09 17:06:27 +01:00
|
|
|
} else if (icon) {
|
|
|
|
<button className={classes} onClick={onClick} title={title}>
|
|
|
|
<Icon id={icon} fixedWidth />
|
|
|
|
</button>
|
|
|
|
}
|
|
|
|
|
|
|
|
return (<button className={classes} onClick={onClick}>{title}</button>)
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
export default class SectionHeadlineBar extends PureComponent {
|
|
|
|
static propTypes = {
|
2019-08-13 16:54:29 +01:00
|
|
|
items: PropTypes.array.isRequired,
|
|
|
|
className: PropTypes.string,
|
2019-08-09 17:06:27 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
2019-08-13 16:54:29 +01:00
|
|
|
const { items, className } = this.props;
|
|
|
|
|
|
|
|
const classes = classNames('section-headline-bar', className);
|
2019-08-09 17:06:27 +01:00
|
|
|
|
|
|
|
return (
|
2019-08-13 16:54:29 +01:00
|
|
|
<div className={classes}>
|
2019-08-09 17:06:27 +01:00
|
|
|
{
|
|
|
|
items.forEach(item, i => (
|
|
|
|
<SectionHeadlineBarItem key={`shbi-{i}`} {...item} />
|
|
|
|
))
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|