88 lines
2.1 KiB
JavaScript
Raw Normal View History

2020-02-20 19:57:29 -05:00
import Button from './button'
import Heading from './heading'
2020-04-23 02:13:29 -04:00
import TabBar from './tab_bar'
2020-02-13 19:40:04 -05:00
2020-03-06 23:53:28 -05:00
export default class ColumnHeader extends PureComponent {
2020-02-13 19:40:04 -05:00
static contextTypes = {
router: PropTypes.object,
}
static propTypes = {
title: PropTypes.node,
2020-02-19 18:57:07 -05:00
showBackBtn: PropTypes.bool,
actions: PropTypes.array,
2020-02-22 18:26:23 -05:00
tabs: PropTypes.array,
2020-02-13 19:40:04 -05:00
}
historyBack = () => {
if (window.history && window.history.length === 1) {
2020-03-06 23:53:28 -05:00
this.context.router.history.push('/home')
2020-02-13 19:40:04 -05:00
} else {
this.context.router.history.goBack()
}
}
handleBackClick = () => {
this.historyBack()
}
2020-02-20 19:57:29 -05:00
render() {
2020-03-06 23:53:28 -05:00
const {
title,
showBackBtn,
tabs,
2020-04-07 21:06:59 -04:00
actions,
2020-03-06 23:53:28 -05:00
} = this.props
2020-02-13 19:40:04 -05:00
return (
2020-02-19 18:57:07 -05:00
<div className={[_s.default, _s.height100PC, _s.flexRow].join(' ')}>
{
showBackBtn &&
2020-03-06 23:53:28 -05:00
<Button
2020-03-27 18:57:03 -04:00
color='primary'
2020-03-06 23:53:28 -05:00
backgroundColor='none'
2020-03-11 19:56:18 -04:00
className={[_s.alignItemsCenter, _s.pl0, _s.justifyContentCenter].join(' ')}
2020-03-06 23:53:28 -05:00
icon='back'
2020-04-23 02:13:29 -04:00
iconSize='20px'
2020-04-29 18:32:49 -04:00
iconClassName={[_s.mr5, _s.fillPrimary].join(' ')}
2020-03-06 23:53:28 -05:00
onClick={this.handleBackClick}
/>
2020-02-19 18:57:07 -05:00
}
2020-02-20 19:57:29 -05:00
2020-03-11 19:56:18 -04:00
<div className={[_s.default, _s.height100PC, _s.justifyContentCenter, _s.mr10].join(' ')}>
2020-02-20 19:57:29 -05:00
<Heading size='h1'>
2020-04-29 18:32:49 -04:00
2020-02-20 19:57:29 -05:00
</Heading>
</div>
2020-04-28 22:24:35 -04:00
{
!!tabs &&
<TabBar tabs={tabs} />
}
2020-02-22 18:26:23 -05:00
2020-02-19 18:57:07 -05:00
{
!!actions &&
2020-04-29 18:32:49 -04:00
<div className={[_s.default, _s.bgTransparent, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.mlAuto].join(' ')}>
2020-02-19 18:57:07 -05:00
{
actions.map((action, i) => (
2020-03-06 23:53:28 -05:00
<Button
2020-04-07 21:06:59 -04:00
backgroundColor='none'
2020-04-28 22:24:35 -04:00
color='primary'
2020-04-07 21:06:59 -04:00
onClick={() => action.onClick()}
2020-02-19 18:57:07 -05:00
key={`column-header-action-btn-${i}`}
2020-04-28 22:24:35 -04:00
className={[_s.ml5, _s.px10].join(' ')}
2020-03-06 23:53:28 -05:00
icon={action.icon}
2020-04-07 21:06:59 -04:00
iconClassName={_s.inheritFill}
2020-04-23 02:13:29 -04:00
iconSize='15px'
2020-03-06 23:53:28 -05:00
/>
2020-02-19 18:57:07 -05:00
))
}
</div>
}
2020-02-13 19:40:04 -05:00
</div>
)
}
}