#24 Just making it a little bit better

redux-autoform · Aug 9, 2016 · e843390 · e843390
1 parent de658e7
commit e843390
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 146 deletions.
diff --git a/src/components/group/BaseGroup.js b/src/components/group/BaseGroup.js
@@ -0,0 +1,85 @@
+import React, { Component, PropTypes } from 'react';
+import AlertMessage from '../common/AlertMessage';
+import NormalForm from './../form/NormalForm';
+
+class BaseGroup extends Component {
+    static propTypes = {
+        component: PropTypes.string,
+        fields: PropTypes.array.isRequired,
+        layout: PropTypes.object.isRequired,
+        componentFactory: PropTypes.object.isRequired
+    };
+
+    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 => {
+                return {
+                    data: group,
+                    length: layout.groups.length,
+                    component: componentFactory.buildGroupComponent({
+                        component: group.component,
+                        layout: group,
+                        fields: fields,
+                        componentFactory: componentFactory
+                    })
+                }
+            });
+        }
+
+        return components;
+    };
+
+    getDefaultSize = (component, gridLength = 12) => {
+        let { layout } = this.props;
+
+        return layout.orientation == 'horizontal' ? Math.floor(gridLength/component.length) : gridLength;
+    };
+
+    getContent = () => {
+        let components = this.getComponents();
+
+        return components.map((component, i) => {
+            let componentContent, size = 12;
+
+            // invisible components should be hidden
+            if (component.data.visible === false) {
+                componentContent = null;
+            } else {
+                size = component.data.size || this.getDefaultSize(component);
+                componentContent = component.component;
+            }
+
+            return (
+                <div key={`component-${i}-wrapper`} className={`col-md-${size}`}>
+                    { componentContent }
+                </div>
+            );
+        });
+    };
+}
+
+export default BaseGroup;
diff --git a/src/components/group/Group.js b/src/components/group/Group.js
@@ -1,85 +1,15 @@
 import React, { Component, PropTypes } from 'react';
 import AlertMessage from '../common/AlertMessage';
 import NormalForm from './../form/NormalForm';
+import BaseGroup from './BaseGroup';
 
-class Group extends Component {
+class Group extends BaseGroup {
     static propTypes = {
         component: PropTypes.string,
         fields: PropTypes.array.isRequired,
         layout: PropTypes.object.isRequired,
         componentFactory: PropTypes.object.isRequired
     };
-
-    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 => {
-                return {
-                    data: group,
-                    length: layout.groups.length,
-                    component: componentFactory.buildGroupComponent({
-                        component: group.component,
-                        layout: group,
-                        fields: fields,
-                        componentFactory: componentFactory
-                    })
-                }
-            });
-        }
-
-        return components;
-    };
-
-    getDefaultSize = (component, gridLength = 12) => {
-        let { layout } = this.props;
-
-        return layout.orientation == 'horizontal' ? Math.floor(gridLength/component.length) : gridLength;
-    };
-
-    getContent = () => {
-        let components = this.getComponents();
-
-        return components.map((component, i) => {
-            let componentContent, size = 12;
-
-            // invisible components should be hidden
-            if (component.data.visible === false) {
-                componentContent = null;
-            } else {
-                size = component.data.size || this.getDefaultSize(component);
-                componentContent = component.component;
-            }
-
-            return (
-                <div key={`component-${i}-wrapper`} className={`col-md-${size}`}>
-                    { componentContent }
-                </div>
-            );
-        });
-    };
 
     render() {
         let { layout } = this.props;

diff --git a/src/components/group/TabGroup.js b/src/components/group/TabGroup.js
@@ -1,86 +1,16 @@
 import React, { Component, PropTypes } from 'react';
 import AlertMessage from '../common/AlertMessage';
-import TabsForm from './../form/TabsForm';
+import BaseGroup from './BaseGroup';
+import TabsForm from '../form/TabsForm';
 
-class Group extends Component {
+class TabGroup extends BaseGroup {
 	static propTypes = {
 		component: PropTypes.string,
 		fields: PropTypes.array.isRequired,
 		layout: PropTypes.object.isRequired,
 		componentFactory: PropTypes.object.isRequired
 	};
 
-	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 => {
-				return {
-					data: group,
-					length: layout.groups.length,
-					component: componentFactory.buildGroupComponent({
-						component: group.component,
-						layout: group,
-						fields: fields,
-						componentFactory: componentFactory
-					})
-				}
-			});
-		}
-
-		return components;
-	};
-
-	getDefaultSize = (component, gridLength = 12) => {
-		let { layout } = this.props;
-
-		return layout.orientation == 'horizontal' ? Math.floor(gridLength/component.length) : gridLength;
-	};
-
-	getContent = () => {
-		let components = this.getComponents();
-
-		return components.map((component, i) => {
-			let componentContent, size = 12;
-
-			// invisible components should be hidden
-			if (component.data.visible === false) {
-				componentContent = null;
-			} else {
-				size = component.data.size || this.getDefaultSize(component);
-				componentContent = component.component;
-			}
-
-			return (
-				<div key={`component-${i}-wrapper`} className={`col-md-${size}`}>
-					{ componentContent }
-				</div>
-			);
-		});
-	};
-
 	render() {
 		let { layout } = this.props;
 
@@ -95,4 +25,4 @@ class Group extends Component {
 	}
 }
 
-export default Group;
+export default TabGroup;