You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
1.8 KiB
80 lines
1.8 KiB
import React, { Component } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import classnames from 'classnames'
|
|
|
|
export default class PageContainerHeader extends Component {
|
|
static propTypes = {
|
|
title: PropTypes.string,
|
|
subtitle: PropTypes.string,
|
|
onClose: PropTypes.func,
|
|
showBackButton: PropTypes.bool,
|
|
onBackButtonClick: PropTypes.func,
|
|
backButtonStyles: PropTypes.object,
|
|
backButtonString: PropTypes.string,
|
|
tabs: PropTypes.node,
|
|
}
|
|
|
|
renderTabs () {
|
|
const { tabs } = this.props
|
|
|
|
return tabs && (
|
|
<ul className="page-container__tabs">
|
|
{ tabs }
|
|
</ul>
|
|
)
|
|
}
|
|
|
|
renderHeaderRow () {
|
|
const { showBackButton, onBackButtonClick, backButtonStyles, backButtonString } = this.props
|
|
|
|
return showBackButton && (
|
|
<div className="page-container__header-row">
|
|
<span
|
|
className="page-container__back-button"
|
|
onClick={onBackButtonClick}
|
|
style={backButtonStyles}
|
|
>
|
|
{ backButtonString || 'Back' }
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
render () {
|
|
const { title, subtitle, onClose, tabs } = this.props
|
|
|
|
return (
|
|
<div className={
|
|
classnames(
|
|
'page-container__header',
|
|
{ 'page-container__header--no-padding-bottom': Boolean(tabs) }
|
|
)
|
|
}>
|
|
|
|
{ this.renderHeaderRow() }
|
|
|
|
{
|
|
title && <div className="page-container__title">
|
|
{ title }
|
|
</div>
|
|
}
|
|
|
|
{
|
|
subtitle && <div className="page-container__subtitle">
|
|
{ subtitle }
|
|
</div>
|
|
}
|
|
|
|
{
|
|
onClose && <div
|
|
className="page-container__header-close"
|
|
onClick={() => onClose()}
|
|
/>
|
|
}
|
|
|
|
{ this.renderTabs() }
|
|
</div>
|
|
)
|
|
}
|
|
|
|
}
|
|
|