Merge pull request #39 from redux-autoform/experimental

Experimental

src/components/common/HorizontalComponent.js

@@ -0,0 +1,14 @@
+import React, { Component, PropTypes } from 'react';
+
+const HorizontalComponent = ({children, size}) => (
+	<div className={`col-md-${size}`}>
+		{children}
+	</div>
+);
+
+HorizontalComponent.propTypes = {
+	children: PropTypes.object,
+	size: PropTypes.number
+};
+
+export default HorizontalComponent;

src/components/common/VerticalComponent.js

@@ -0,0 +1,18 @@
+import React, { Component, PropTypes } from 'react';
+
+const VerticalComponent = ({children, size}) => (
+	<div className="container-fluid">
+		<div className="row">
+			<div className={`col-md-${size}`}>
+				{children}
+			</div>
+		</div>
+	</div>
+);
+
+VerticalComponent.propTypes = {
+	children: PropTypes.object,
+	size: PropTypes.number
+};
+
+export default VerticalComponent;

src/components/group/BaseGroup.js

@@ -1,4 +1,6 @@
 import React, { Component, PropTypes } from 'react';
+import HorizontalComponent from '../common/HorizontalComponent';
+import VerticalComponent from '../common/VerticalComponent';
 
 class BaseGroup extends Component {
     static propTypes = {
@@ -8,87 +10,89 @@ class BaseGroup extends Component {
         componentFactory: PropTypes.object.isRequired
     };
 
-    getComponents = () => {
-        let { layout, componentFactory, fields } = this.props;
-        let components;
+    getFieldMetadata = (field) => {
+        let {layout, fields} = this.props;
 
-        if (layout.fields) {
+        let fieldMetadata = fields.find(cp => cp.name === field.name);
 
-            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}`);
+        }
 
-                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};
 
-                // 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 fieldMetadata;
+    };
 
-                return {
-                    data: fieldMetadata,
-                    length: layout.fields.length,
-                    component: componentFactory.buildFieldComponent(fieldMetadata)
-                }
-            });
+    getComponents = () => {
+        let {layout, componentFactory, fields} = this.props;
+        let components;
+
+        if (layout.fields) {
+            components = layout.fields.map(field => ({
+                data: this.getFieldMetadata(field),
+                length: layout.fields.length,
+                component: componentFactory.buildFieldComponent(this.getFieldMetadata(field))
+            }));
 
         } else if (layout.groups) {
 
-            components = layout.groups.map(group => {
-                return {
-                    data: group,
-                    length: layout.groups.length,
-                    component: componentFactory.buildGroupComponent({
-                        component: group.component,
-                        layout: group,
-                        fields: fields,
-                        componentFactory: componentFactory
-                    })
-                }
-            });
+            components = layout.groups.map(group => ({
+                data: group,
+                length: layout.groups.length,
+                component: componentFactory.buildGroupComponent({
+                    component: group.component,
+                    layout: group,
+                    fields: fields,
+                    componentFactory: componentFactory
+                })
+            }));
         }
 
         return components;
     };
 
-    getDefaultSize = (component, gridLength = 12) => {
-        return (this.isHorizontal()) ? Math.floor(gridLength/component.length) : gridLength;
+    getSize = (component) => {
+        let defaultSize = (this.isHorizontal()) ? Math.floor(12/component.length) : 12;
+        return component.data.size || defaultSize;
     };
 
     isHorizontal = () => {
         let { layout } = this.props;
         return layout.orientation === 'horizontal';
     };
 
+    isVisible = (component) => {
+        return component.data.visible !== false;
+    };
+
     getContent = () => {
         let components = this.getComponents();
 
-        return components.map((component, i) => {
-            let componentContent, size = 12;
+        return components.map((component, index) => {
+            let content, size;
 
-            // invisible components should be hidden
-            if (component.data.visible === false) {
-                componentContent = null;
+            if (this.isVisible(component)) {
+                size = this.getSize(component);
+                content = component.component;
             } else {
-                size = component.data.size || this.getDefaultSize(component);
-                componentContent = component.component;
+                // invisible components should be hidden
+                content = null;
             }
 
             if (this.isHorizontal()) {
                 return (
-                    <div key={`component-${i}-wrapper`} className={`col-md-${size}`}>
-                        {componentContent}
-                    </div>
+                    <HorizontalComponent key={`component-${index}-wrapper`} size={size}>
+                        {content}
+                    </HorizontalComponent>
                 );
             } else {
                 return (
-                    <div key={`component-${i}-wrapper`} className="container-fluid">
-                        <div className="row">
-                            <div className={`col-md-${size}`}>
-                                {componentContent}
-                            </div>
-                        </div>
-                    </div>
+                    <VerticalComponent key={`component-${index}-wrapper`} size={size}>
+                        {content}
+                    </VerticalComponent>
                 );
             }
         });