Permalink
Browse files

Create a TabBar component to render a list of tabs

  • Loading branch information...
markerikson committed Nov 21, 2016
1 parent 9bfab80 commit c5600b7aabb82b2959785dc67613ae591ac45c97
Showing with 80 additions and 0 deletions.
  1. +13 −0 src/features/tabs/Tab.jsx
  2. +32 −0 src/features/tabs/TabBar.jsx
  3. +35 −0 src/features/tabs/TabBarContainer.jsx
View
@@ -0,0 +1,13 @@
import React from "react";
import {Menu} from "semantic-ui-react";
const Tab = ({name, label, onClick, active}) => (
<Menu.Item
name={name}
content={label}
active={active}
onClick={() => onClick(name)}
/>
);
export default Tab;
@@ -0,0 +1,32 @@
import React from "react";
import {Menu} from "semantic-ui-react";
import Tab from "./Tab";
const TabBar = (props) => {
const {tabs, currentTab, onTabClick, ...otherProps} = props;
const tabItems = tabs.map(tabInfo => {
const {name, label} = tabInfo;
return (
<Tab
key={name}
name={name}
label={label}
active={currentTab === name}
onClick={onTabClick}
/>
);
});
return (
<div>
<Menu tabular attached="top" {...otherProps}>
{tabItems}
</Menu>
</div>
)
}
export default TabBar;
@@ -0,0 +1,35 @@
import React, {Component} from "react";
import TabBar from "./TabBar";
export default class TabBarContainer extends Component {
constructor(props) {
super(props);
const {tabs = [{name : null}]} = props;
const firstTab = tabs[0];
this.state = {
currentTab : firstTab.name
} ;
}
onTabClick = (name) => {
this.setState({currentTab : name});
}
render() {
const {tabs, ...otherProps} = this.props;
const {currentTab} = this.state;
return (
<TabBar
{...otherProps}
currentTab={currentTab}
onTabClick={this.onTabClick}
tabs={tabs}
/>
)
}
}

0 comments on commit c5600b7

Please sign in to comment.