diff --git a/src/components/common/HorizontalComponent.js b/src/components/common/HorizontalComponent.js
new file mode 100644
index 0000000..9fb495f
--- /dev/null
+++ b/src/components/common/HorizontalComponent.js
@@ -0,0 +1,14 @@
+import React, { Component, PropTypes } from 'react';
+
+const HorizontalComponent = ({children, size}) => (
+
+ {children}
+
+);
+
+HorizontalComponent.propTypes = {
+ children: PropTypes.object,
+ size: PropTypes.number
+};
+
+export default HorizontalComponent;
\ No newline at end of file
diff --git a/src/components/common/VerticalComponent.js b/src/components/common/VerticalComponent.js
new file mode 100644
index 0000000..6c54c6c
--- /dev/null
+++ b/src/components/common/VerticalComponent.js
@@ -0,0 +1,18 @@
+import React, { Component, PropTypes } from 'react';
+
+const VerticalComponent = ({children, size}) => (
+
+);
+
+VerticalComponent.propTypes = {
+ children: PropTypes.object,
+ size: PropTypes.number
+};
+
+export default VerticalComponent;
\ No newline at end of file
diff --git a/src/components/group/BaseGroup.js b/src/components/group/BaseGroup.js
index db092ca..39d230f 100644
--- a/src/components/group/BaseGroup.js
+++ b/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,51 +10,53 @@ 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 = () => {
@@ -60,35 +64,35 @@ class BaseGroup extends Component {
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 (
-
- {componentContent}
-
+
+ {content}
+
);
} else {
return (
-
-
-
- {componentContent}
-
-
-
+
+ {content}
+
);
}
});