90 lines
2.3 KiB
JavaScript
90 lines
2.3 KiB
JavaScript
import TabBar from './tab_bar'
|
|
import Button from './button'
|
|
import Heading from './heading'
|
|
|
|
export default class ColumnHeader extends PureComponent {
|
|
|
|
static contextTypes = {
|
|
router: PropTypes.object,
|
|
}
|
|
|
|
static propTypes = {
|
|
title: PropTypes.node,
|
|
showBackBtn: PropTypes.bool,
|
|
actions: PropTypes.array,
|
|
tabs: PropTypes.array,
|
|
}
|
|
|
|
historyBack = () => {
|
|
if (window.history && window.history.length === 1) {
|
|
this.context.router.history.push('/home')
|
|
} else {
|
|
this.context.router.history.goBack()
|
|
}
|
|
}
|
|
|
|
handleBackClick = () => {
|
|
this.historyBack()
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
title,
|
|
showBackBtn,
|
|
tabs,
|
|
actions,
|
|
} = this.props
|
|
|
|
return (
|
|
<div className={[_s.default, _s.height100PC, _s.flexRow].join(' ')}>
|
|
{
|
|
showBackBtn &&
|
|
<Button
|
|
color='primary'
|
|
backgroundColor='none'
|
|
className={[_s.alignItemsCenter, _s.pl0, _s.justifyContentCenter].join(' ')}
|
|
icon='back'
|
|
iconWidth='20px'
|
|
iconHeight='20px'
|
|
iconClassName={[_s.mr5, _s.fillColorPrimary].join(' ')}
|
|
onClick={this.handleBackClick}
|
|
/>
|
|
}
|
|
|
|
<div className={[_s.default, _s.height100PC, _s.justifyContentCenter, _s.mr10].join(' ')}>
|
|
<Heading size='h1'>
|
|
{title}
|
|
</Heading>
|
|
</div>
|
|
|
|
{
|
|
!!tabs &&
|
|
<TabBar tabs={tabs} />
|
|
}
|
|
|
|
{
|
|
!!actions &&
|
|
<div className={[_s.default, _s.backgroundTransparent, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.marginLeftAuto].join(' ')}>
|
|
{
|
|
actions.map((action, i) => (
|
|
<Button
|
|
backgroundColor='none'
|
|
color='secondary'
|
|
onClick={() => action.onClick()}
|
|
key={`column-header-action-btn-${i}`}
|
|
className={[_s.ml5, _s.fillColorBrand_onHover, _s.backgroundColorBrandLightOpaque_onHover, _s.px10].join(' ')}
|
|
icon={action.icon}
|
|
iconClassName={_s.inheritFill}
|
|
iconWidth='15px'
|
|
iconHeight='15px'
|
|
/>
|
|
))
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
}
|