Start to play with tabs

Author: jonisaa

package.json

@@ -29,6 +29,7 @@
   "homepage": "https://github.com/redux-autoform/redux-autoform-bootstrap-ui#readme",
   "dependencies": {
     "bootstrap": "^3.3.6",
+    "font-awesome": "^4.6.3",
     "isomorphic-fetch": "^2.2.1",
     "react": "^15.1.0",
     "react-bootstrap": "^0.30.0",

src/components/groupComponents/Group.js

@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react';
-import { Alert } from 'react-bootstrap';
+import { Alert, Nav, NavItem } from 'react-bootstrap';
 
 class Group extends Component {
     static propTypes = {
@@ -96,27 +96,57 @@ class Group extends Component {
         }
     };
 
+    handleSelect = (eventKey) => {
+        event.preventDefault();
+    };
+
     render() {
 
         // the passed in layout can contain either fields or groups.
         // in case it contains 'fields', we're gonna render each of the fields.
-        // in case it contains 'groups', we're gonna render render each group, passing the fields as a parameter
+        // in case it contains 'groups', we're gonna render each group, passing the fields as a parameter
         try {
             let content = this.getContent();
             let header = this.getHeader();
+
+            let { layout } = this.props;
 
-            return (
-                <section>
-                    <div className='row'>
-                        <div className="metaform-group">
-                            { header }
-                            <div className="metaform-group-content">
-                                { content }
+            if (layout.type == "tabs") {
+                return(
+                    <section>
+                        <div className='row'>
+                            <div className="metaform-group">
+                                { header }
+                                <Nav bsStyle="tabs" onSelect={this.handleSelect}>
+                                    {
+                                        layout.groups.map((item, index) => (
+                                            <NavItem eventKey={index}>
+                                                {item.title}
+                                            </NavItem>
+                                        ))
+                                    }
+                                </Nav>
+                                <div className="metaform-group-content">
+                                    { content }
+                                </div>
                             </div>
                         </div>
-                    </div>
-                </section>
-            );
+                    </section>
+                );
+            } else {
+                return (
+                    <section>
+                        <div className='row'>
+                            <div className="metaform-group">
+                                { header }
+                                <div className="metaform-group-content">
+                                    { content }
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                );
+            }
 
         } catch (ex) {
             return (

src/components/groupComponents/Tabs.js

@@ -0,0 +1,27 @@
+import React, { Component, PropTypes } from 'react';
+import { Alert, Nav, NavItem } from 'react-bootstrap';
+
+export default class Tabs extends Component {
+	static propTypes = {
+		header: PropTypes.object,
+		content: PropTypes.object,
+		layout: PropTypes.object
+	};
+	
+	render() {
+		let { header, content, layout } = this.props;
+
+		return (
+			<section>
+				<div className='row'>
+					<div className="metaform-group">
+						{ header }
+						<div className="metaform-group-content">
+							{ content }
+						</div>
+					</div>
+				</div>
+			</section>
+		);
+	}
+}