gab-social/app/javascript/gabsocial/components/column_header.js

88 lines
2.1 KiB
JavaScript
Raw Normal View History

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