Merge pull request #29 from redux-autoform/experimental

Added HeadLess support

demo/presets.js

@@ -23,7 +23,7 @@ export default [
     },
     {
         name: 'layoutsTabs',
-        displayName: 'Layouts - Tabs (Experimental)',
+        displayName: 'Layouts - Tabs',
         entityName: 'contact',
         layoutName: 'edit',
         formTitle: 'Edit contact',

src/components/group/Group.js

@@ -9,23 +9,27 @@ class Group extends BaseGroup {
         componentFactory: PropTypes.object.isRequired
     };
 
-    render() {
-
+    getHeader = () => {
         let {layout} = this.props;
-        let content = this.getContent();
 
-        // Group header
-        let header = layout.title
+        return layout.title
             ? (
             <header className="metaform-group-header">
                 <span className="metaform-group-title">
                     {layout.title}
                 </span>
             </header>
         ) : null;
+    };
+
+    render() {
+        let {layout} = this.props;
+        let content = this.getContent();
+        let header = (!layout.headLess)? this.getHeader() : null;
+        const style = (layout.headLess)? { marginTop: "15px" } : null;
 
         return (
-            <section>
+            <section style={style}>
                 <div className='row'>
                     <div className="metaform-group">
                         { header }

src/components/group/TabGroup.js

@@ -14,6 +14,51 @@ class TabGroup extends BaseGroup {
 		position: 0
 	};
 
+    getComponents = () => {
+        let { layout, componentFactory, fields } = this.props;
+        let components;
+
+        if (layout.fields) {
+
+            components = layout.fields.map(field => {
+                let fieldMetadata = fields.find(cp => cp.name === field.name);
+
+                if (!fieldMetadata) {
+                    throw Error(`Could not find field. Field: ${field.name}`);
+                }
+
+                // in case the field is going to render layouts internally, it's going to need information about the
+                // layout and fields. I'm not sure if this is the best way to do it, probably not. TODO: Review it.
+                fieldMetadata._extra = {layout, fields};
+
+                return {
+                    data: fieldMetadata,
+                    length: layout.fields.length,
+                    component: componentFactory.buildFieldComponent(fieldMetadata)
+                }
+            });
+
+        } else if (layout.groups) {
+
+            components = layout.groups.map(group => {
+                group = {...group, headLess: true};
+
+                return {
+                    data: group,
+                    length: layout.groups.length,
+                    component: componentFactory.buildGroupComponent({
+                        component: group.component,
+                        layout: group,
+                        fields: fields,
+                        componentFactory: componentFactory
+                    })
+                }
+            });
+        }
+
+        return components;
+    };
+
 	onNavItemSelected = (eventKey) => {
 		this.setState({ position: eventKey });
 	};