TabsForm Support

demo/presets.js

@@ -116,5 +116,13 @@ export default [
         layoutName: 'edit',
         formTitle: 'Edit contact',
         schema: require('./presets/componentsFieldGroup.txt')
+    },
+    {
+        name: 'Layout Tabs',
+        displayName: 'Layout Tabs',
+        entityName: 'contact',
+        layoutName: 'edit',
+        formTitle: 'Edit contact',
+        schema: require('./presets/layoutsTabs.txt')
     }
 ]

demo/presets/layoutsTabs.txt

@@ -0,0 +1,77 @@
+{
+    entities: [
+        {
+            name: "contact",
+            fields: [
+                { name: "f1", displayName: "Field 1", type: "string" },
+                { name: "f2", displayName: "Field 2", type: "string" },
+                { name: "f3", displayName: "Field 3", type: "string" },
+                { name: "f4", displayName: "Field 4", type: "string" },
+                { name: "f5", displayName: "Field 5", type: "string" },
+                { name: "f6", displayName: "Field 6", type: "string" },
+                { name: "f7", displayName: "Field 7", type: "string" },
+                { name: "f8", displayName: "Field 8", type: "string" },
+            ],
+            layouts: [
+                {
+                    name: 'edit',
+                    type: 'tabs',
+                    groups: [
+                        {
+                            title: 'First',
+                            fields: [
+                                {
+                                    name: 'f1'
+                                },
+                                {
+                                    name: 'f2',
+                                    size: 8
+                                }
+                            ]
+                        },
+                        {
+                            title: 'Second',
+                            orientation: 'horizontal',
+                            fields: [
+                                {
+                                    name: 'f3'
+                                },
+                                {
+                                    name: 'f4'
+                                }
+                            ]
+                        },
+                        {
+                            title: 'Third',
+                            orientation: 'horizontal',
+                            fields: [
+                                {
+                                    name: 'f5',
+                                    size: 4
+                                },
+                                {
+                                    name: 'f6',
+                                    size: 8
+                                }
+                            ]
+                        },
+                        {
+                            title: 'Fourth',
+                            orientation: 'horizontal',
+                            fields: [
+                                {
+                                    name: 'f7',
+                                    innerSize: 3
+                                },
+                                {
+                                    name: 'f8',
+                                    innerSize: 3
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}

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/common/AlertMessage.js

@@ -0,0 +1,15 @@
+import React, { Component, PropTypes } from 'react';
+import { Alert } from 'react-bootstrap';
+
+const AlertMessage = ({ error }) => (
+	<Alert bsStyle='danger'>
+		<h4>
+			Could not render the MetaFormGroup component. The schema is not valid.
+		</h4>
+		<p>Detailed information:
+			<b>{ error.message }</b>
+		</p>
+	</Alert>
+);
+
+export default AlertMessage;

src/components/common/Header.js

@@ -0,0 +1,17 @@
+import React, { Component, PropTypes } from 'react';
+
+const Header = ({ title }) => {
+	if (title) {
+		return (
+			<header className="metaform-group-header">
+				<span className="metaform-group-title">
+					{title}
+				</span>
+			</header>
+		)
+	} 
+
+	return null;
+};
+
+export default Header;

src/components/fieldComponents/ArrayContainer.js → src/components/field/ArrayContainer.js

@@ -1,8 +1,8 @@
 import React, { Component, PropTypes } from 'react';
-import GlyphButton from '../GlyphButton.js';
+import GlyphButton from '../common/GlyphButton.js';
 import Alert from 'react-bootstrap/lib/Alert';
-import FormGroup from '../FormGroup';
-import ArrayContainerItem from '../ArrayContainerItem';
+import FormGroup from '../common/FormGroup';
+import ArrayContainerItem from '../common/ArrayContainerItem';
 
 class ArrayContainer extends Component {
     static propTypes = {

src/components/fieldComponents/DateTimePicker.js → src/components/field/DateTimePicker.js

@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import {DateTimePicker as ReactWidgetsDateTimePicker} from 'react-widgets';
 import { getDateLocalizer } from 'redux-autoform-utils';
-import FormGroup from '../FormGroup';
+import FormGroup from '../common/FormGroup';
 
 class DateTimePicker extends Component {
     static propTypes = {

src/components/fieldComponents/FieldGroup.js → src/components/field/FieldGroup.js

@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react';
-import FormGroup from '../FormGroup';
+import FormGroup from '../common/FormGroup';
 
 class FieldGroup extends Component {
     static propTypes = {

src/components/fieldComponents/Lookup.js → src/components/field/Lookup.js

@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react';
-import FormGroup from '../FormGroup';
+import FormGroup from '../common/FormGroup';
 import Select from 'react-select-plus';
 
 class Lookup extends Component {

src/components/fieldComponents/Radio.js → src/components/field/Radio.js

@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import { Radio as BootstrapRadio } from 'react-bootstrap';
-import FormGroup from '../FormGroup';
+import FormGroup from '../common/FormGroup';
 
 class Radio extends Component {
     handleChange = (event) => {

src/components/fieldComponents/Select.js → src/components/field/Select.js

@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react';
-import FormGroup from '../FormGroup';
-import Input from '../Input';
+import FormGroup from '../common/FormGroup';
+import Input from '../common/Input';
 import ReactSelect from 'react-select-plus';
 import fetch from 'isomorphic-fetch';
 

src/components/fieldComponents/Static.js → src/components/field/Static.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import FormGroup from '../FormGroup';
-import {FormControl} from 'react-bootstrap';
+import FormGroup from '../common/FormGroup';
+import { FormControl } from 'react-bootstrap';
 
 class Static extends Component {
     render() {

src/components/fieldComponents/TextArea.js → src/components/field/TextArea.js

@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react';
-import Input from  '../Input';
+import Input from  '../common/Input';
 
 class TextArea extends Component {
     static propTypes = {
@@ -15,9 +15,7 @@ class TextArea extends Component {
     };
 
     render() {
-        let { rows } = this.props;
-
-        return <Input componentClass="textarea" rows={rows} {...this.props}/>;
+        return <Input componentClass="textarea" {...this.props}/>;
     }
 }
 

src/components/fieldComponents/TextBox.js → src/components/field/TextBox.js

@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react';
-import Input from  '../Input';
+import Input from  '../common/Input';
 
 class TextBox extends Component {
     static propTypes = {

src/components/form/NormalForm.js

@@ -0,0 +1,26 @@
+import React, { Component, PropTypes } from 'react';
+import Header from '../common/Header';
+
+export default class NormalForm extends Component {
+	static propTypes = {
+		content: PropTypes.array.isRequired,
+		title: PropTypes.string.isRequired
+	};
+
+	render() {
+		let { title, content } = this.props;
+
+		return (
+			<section>
+				<div className='row'>
+					<div className="metaform-group">
+						<Header title={title}/>
+						<div className="metaform-group-content">
+							{ content }
+						</div>
+					</div>
+				</div>
+			</section>
+		);
+	}
+}

src/components/form/TabsForm.js

@@ -0,0 +1,43 @@
+import React, { Component, PropTypes } from 'react';
+import { Nav, NavItem } from 'react-bootstrap';
+
+export default class TabsForm extends Component {
+	static propTypes = {
+		content: PropTypes.array.isRequired,
+		layout: PropTypes.object.isRequired
+	};
+
+	state = {
+		position: 0
+	};
+
+	handleSelect = (eventKey) => {
+		this.setState({ position: eventKey });
+	};
+
+	render() {
+		let { layout, content } = this.props;
+		let { position } = this.state;
+
+		return (
+			<section>
+				<div className='row'>
+					<div className="metaform-group">
+						<Nav bsStyle="tabs" onSelect={this.handleSelect}>
+							{
+								layout.groups.map(({ title }, index) => (
+									<NavItem key={index} eventKey={index}>
+										{title}
+									</NavItem>
+								))
+							}
+						</Nav>
+						<div className="metaform-group-content">
+							{ content[position] }
+						</div>
+					</div>
+				</div>
+			</section>
+		);
+	}
+}

src/components/groupComponents/Group.js → src/components/group/Group.js

@@ -1,5 +1,7 @@
 import React, { Component, PropTypes } from 'react';
-import { Alert } from 'react-bootstrap';
+import AlertMessage from '../common/AlertMessage';
+import NormalForm from './../form/NormalForm';
+import TabsForm from './../form/TabsForm';
 
 class Group extends Component {
     static propTypes = {
@@ -79,56 +81,28 @@ class Group extends Component {
             );
         });
     };
-
-    getHeader = () => {
-        let { layout } = this.props;
-
-        if (layout.title) {
-            return (
-                <header className="metaform-group-header">
-                    <span className="metaform-group-title">
-                        { layout.title }
-                    </span>
-                </header>    
-            );
-        } else {
-            return null;
-        }
-    };
 
     render() {
-
+        let { layout } = this.props;
+
         // 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();
-
-            return (
-                <section>
-                    <div className='row'>
-                        <div className="metaform-group">
-                            { header }
-                            <div className="metaform-group-content">
-                                { content }
-                            </div>
-                        </div>
-                    </div>
-                </section>
-            );
-
+
+            if (layout.type) {
+                switch (layout.type) {
+                    case 'tabs':
+                        return <TabsForm layout={layout} content={content}/>;
+                    default:
+                        return <NormalForm title={layout.title} content={content}/>
+                }
+            }
+
+            return <NormalForm title={layout.title} content={content}/>
         } catch (ex) {
-            return (
-                <Alert bsStyle='danger'>
-                    <h4>
-                        Could not render the MetaFormGroup component. The schema is not valid.
-                    </h4>
-                    <p>Detailed information:
-                        <b>{ ex.message }</b>
-                    </p>
-                </Alert>
-            )
+            return <AlertMessage error={ex}/>
         }
     }
 }