Permalink
Browse files

Add ability to swap visible tab component based on active tab

Added rendering of a panel component for each tab definition, with
toggling of visibility based on the active tab

Added initial dummy components for existing tab definitions
  • Loading branch information...
markerikson committed Nov 21, 2016
1 parent 910058a commit 21393edb923d0447bfeffa8c3ae1f89e1a1ff0be
Showing with 26 additions and 5 deletions.
  1. +12 −4 src/App.js
  2. +14 −1 src/features/tabs/TabBar.jsx
View
@@ -9,13 +9,21 @@ import TabBarContainer from "./features/tabs/TabBarContainer";
import './App.css';
const UnitInfo = () => <div>Unit Info content</div>;
const Pilots = () => <div>Pilots content</div>;
const Mechs = () => <div>Mechs content</div>;
const UnitOrganization = () => <div>Unit Organization content</div>;
class App extends Component {
render() {
const tabs = [
{name : "unitInfo", label : "Unit Info"},
{name : "pilots", label : "Pilots"},
{name : "mechs", label : "Mechs"},
{name : "unitOrganization", label : "Unit Organization"}
{name : "unitInfo", label : "Unit Info", component : UnitInfo,},
{name : "pilots", label : "Pilots", component : Pilots,},
{name : "mechs", label : "Mechs", component : Mechs,},
{name : "unitOrganization", label : "Unit Organization", component : UnitOrganization}
];
return (
@@ -1,5 +1,6 @@
import React from "react";
import {Menu} from "semantic-ui-react";
import ToggleDisplay from 'react-toggle-display';
import Tab from "./Tab";
@@ -20,13 +21,25 @@ const TabBar = (props) => {
);
});
const tabPanels = tabs.map(tabInfo => {
const {name, component : TabComponent} = tabInfo;
return (
<ToggleDisplay show={name === currentTab} key={name}>
<TabComponent />
</ToggleDisplay>
)
})
return (
<div>
<Menu tabular attached="top" {...otherProps}>
{tabItems}
</Menu>
{tabPanels}
</div>
)
);
}
export default TabBar;

0 comments on commit 21393ed

Please sign in to comment.