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

43 lines
1.2 KiB
JavaScript
Raw Normal View History

2020-05-09 03:17:19 +01:00
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component';
2020-02-22 23:26:23 +00:00
import TabBarItem from './tab_bar_item'
2020-04-23 07:13:29 +01:00
/**
* Renders a tab bar component
* @param {array} [props.tabs] - tab bar data for creating `TabBarItem`
* @param {bool} [props.isLarge] - to style the tab bar larger
*/
2020-02-22 23:26:23 +00:00
export default class TabBar extends PureComponent {
2020-04-23 07:13:29 +01:00
2020-02-22 23:26:23 +00:00
static propTypes = {
tabs: PropTypes.array,
2020-04-23 07:13:29 +01:00
isLarge: PropTypes.bool,
2020-02-22 23:26:23 +00:00
}
render() {
2020-04-23 07:13:29 +01:00
const { tabs, isLarge } = this.props
2020-02-22 23:26:23 +00:00
return (
2020-05-09 03:17:19 +01:00
<ResponsiveClassesComponent
classNames={[_s.default, _s.height53PX, _s.px5, _s.flexRow, _s.overflowXScroll, _s.noScrollbar].join(' ')}
2020-05-09 03:17:19 +01:00
classNamesXS={[_s.default, _s.height40PX, _s.px5, _s.flexRow].join(' ')}
>
2020-04-23 07:13:29 +01:00
{
// Check for if tabs exist or not.
// We don't `return null` because it maintains 53px height if no tabs.
!!tabs &&
2020-02-22 23:26:23 +00:00
tabs.map((tab, i) => (
2020-04-23 07:13:29 +01:00
<TabBarItem
key={`tab-bar-item-${i}`}
title={tab.title}
onClick={tab.onClick}
to={tab.to}
2020-04-28 06:33:58 +01:00
isActive={tab.active}
2020-04-23 07:13:29 +01:00
isLarge={isLarge}
/>
2020-02-22 23:26:23 +00:00
))
}
2020-05-09 03:17:19 +01:00
</ResponsiveClassesComponent>
2020-02-22 23:26:23 +00:00
)
}
2020-04-23 07:13:29 +01:00
2020-02-22 23:26:23 +00:00
}