RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/markerikson/project-minimek/commit/21393edb923d0447bfeffa8c3ae1f89e1a1ff0be below:

Add ability to swap visible tab component based on active tab · markerikson/project-minimek@21393ed · GitHub

File tree Expand file treeCollapse file tree 2 files changed

+26

-5

lines changed

Filter options

Expand file treeCollapse file tree 2 files changed

+26

-5

lines changed Original file line number Diff line number Diff line change


 @@ -9,13 +9,21 @@ import TabBarContainer from "./features/tabs/TabBarContainer";

9 9 10 10


 import './App.css';

11 11 12

+
 const UnitInfo = () => <div>Unit Info content</div>;

13 + 14

+
 const Pilots = () => <div>Pilots content</div>;

15 + 16

+
 const Mechs = () => <div>Mechs content</div>;

17 + 18

+
 const UnitOrganization = () => <div>Unit Organization content</div>;

19 + 12 20


 class App extends Component {

13 21


 render() {

14 22


 const tabs = [

15

-
 {name : "unitInfo", label : "Unit Info"},

16

-
 {name : "pilots", label : "Pilots"},

17

-
 {name : "mechs", label : "Mechs"},

18

-
 {name : "unitOrganization", label : "Unit Organization"}

23

+
 {name : "unitInfo", label : "Unit Info", component : UnitInfo,},

24

+
 {name : "pilots", label : "Pilots", component : Pilots,},

25

+
 {name : "mechs", label : "Mechs", component : Mechs,},

26

+
 {name : "unitOrganization", label : "Unit Organization", component : UnitOrganization}

19 27

];

20 28 21 29


 return (

Original file line number Diff line number Diff line change


 @@ -1,5 +1,6 @@

1 1


 import React from "react";

2 2


 import {Menu} from "semantic-ui-react";

3

+
 import ToggleDisplay from 'react-toggle-display';

3 4 4 5


 import Tab from "./Tab";

5 6


 @@ -20,13 +21,25 @@ const TabBar = (props) => {

20 21

);

21 22

});

22 23 24

+
 const tabPanels = tabs.map(tabInfo => {

25

+
 const {name, component : TabComponent} = tabInfo;

26 + 27

+
 return (

28

+
 <ToggleDisplay show={name === currentTab} key={name}>

29

+
 <TabComponent />

30

+
 </ToggleDisplay>

31

+
 )

32

+
 })

33 + 23 34


 return (

24 35


 <div>

25 36


 <Menu tabular attached="top" {...otherProps}>

26 37


 {tabItems}

27 38


 </Menu>

39 + 40

+
 {tabPanels}

28 41


 </div>

29

-
 )

42

+
 );

30 43

31 44 32 45


 export default TabBar;

You can’t perform that action at this time.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4