Skip to content

Commit e843390

Browse files
andrerpenaandrerpena
committed
#24 Just making it a little bit better
1 parent de658e7 commit e843390

File tree

3 files changed

+91
-146
lines changed

3 files changed

+91
-146
lines changed

‎src/components/group/BaseGroup.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import React, { Component, PropTypes } from 'react';
2+
import AlertMessage from '../common/AlertMessage';
3+
import NormalForm from './../form/NormalForm';
4+
5+
class BaseGroup extends Component {
6+
static propTypes = {
7+
component: PropTypes.string,
8+
fields: PropTypes.array.isRequired,
9+
layout: PropTypes.object.isRequired,
10+
componentFactory: PropTypes.object.isRequired
11+
};
12+
13+
getComponents = () => {
14+
let { layout, componentFactory, fields } = this.props;
15+
let components;
16+
17+
if (layout.fields) {
18+
19+
components = layout.fields.map(field => {
20+
let fieldMetadata = fields.find(cp => cp.name === field.name);
21+
22+
if (!fieldMetadata) {
23+
throw Error(`Could not find field. Field: ${field.name}`);
24+
}
25+
26+
// in case the field is going to render layouts internally, it's going to need information about the
27+
// layout and fields. I'm not sure if this is the best way to do it, probably not. TODO: Review it.
28+
fieldMetadata._extra = {layout, fields};
29+
30+
return {
31+
data: fieldMetadata,
32+
length: layout.fields.length,
33+
component: componentFactory.buildFieldComponent(fieldMetadata)
34+
}
35+
});
36+
37+
} else if (layout.groups) {
38+
39+
components = layout.groups.map(group => {
40+
return {
41+
data: group,
42+
length: layout.groups.length,
43+
component: componentFactory.buildGroupComponent({
44+
component: group.component,
45+
layout: group,
46+
fields: fields,
47+
componentFactory: componentFactory
48+
})
49+
}
50+
});
51+
}
52+
53+
return components;
54+
};
55+
56+
getDefaultSize = (component, gridLength = 12) => {
57+
let { layout } = this.props;
58+
59+
return layout.orientation == 'horizontal' ? Math.floor(gridLength/component.length) : gridLength;
60+
};
61+
62+
getContent = () => {
63+
let components = this.getComponents();
64+
65+
return components.map((component, i) => {
66+
let componentContent, size = 12;
67+
68+
// invisible components should be hidden
69+
if (component.data.visible === false) {
70+
componentContent = null;
71+
} else {
72+
size = component.data.size || this.getDefaultSize(component);
73+
componentContent = component.component;
74+
}
75+
76+
return (
77+
<div key={`component-${i}-wrapper`} className={`col-md-${size}`}>
78+
{ componentContent }
79+
</div>
80+
);
81+
});
82+
};
83+
}
84+
85+
export default BaseGroup;

‎src/components/group/Group.js‎

Lines changed: 2 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,15 @@
11
import React, { Component, PropTypes } from 'react';
22
import AlertMessage from '../common/AlertMessage';
33
import NormalForm from './../form/NormalForm';
4+
import BaseGroup from './BaseGroup';
45

5-
class Group extends Component {
6+
class Group extends BaseGroup {
67
static propTypes = {
78
component: PropTypes.string,
89
fields: PropTypes.array.isRequired,
910
layout: PropTypes.object.isRequired,
1011
componentFactory: PropTypes.object.isRequired
1112
};
12-
13-
getComponents = () => {
14-
let { layout, componentFactory, fields } = this.props;
15-
let components;
16-
17-
if (layout.fields) {
18-
19-
components = layout.fields.map(field => {
20-
let fieldMetadata = fields.find(cp => cp.name === field.name);
21-
22-
if (!fieldMetadata) {
23-
throw Error(`Could not find field. Field: ${field.name}`);
24-
}
25-
26-
// in case the field is going to render layouts internally, it's going to need information about the
27-
// layout and fields. I'm not sure if this is the best way to do it, probably not. TODO: Review it.
28-
fieldMetadata._extra = {layout, fields};
29-
30-
return {
31-
data: fieldMetadata,
32-
length: layout.fields.length,
33-
component: componentFactory.buildFieldComponent(fieldMetadata)
34-
}
35-
});
36-
37-
} else if (layout.groups) {
38-
39-
components = layout.groups.map(group => {
40-
return {
41-
data: group,
42-
length: layout.groups.length,
43-
component: componentFactory.buildGroupComponent({
44-
component: group.component,
45-
layout: group,
46-
fields: fields,
47-
componentFactory: componentFactory
48-
})
49-
}
50-
});
51-
}
52-
53-
return components;
54-
};
55-
56-
getDefaultSize = (component, gridLength = 12) => {
57-
let { layout } = this.props;
58-
59-
return layout.orientation == 'horizontal' ? Math.floor(gridLength/component.length) : gridLength;
60-
};
61-
62-
getContent = () => {
63-
let components = this.getComponents();
64-
65-
return components.map((component, i) => {
66-
let componentContent, size = 12;
67-
68-
// invisible components should be hidden
69-
if (component.data.visible === false) {
70-
componentContent = null;
71-
} else {
72-
size = component.data.size || this.getDefaultSize(component);
73-
componentContent = component.component;
74-
}
75-
76-
return (
77-
<div key={`component-${i}-wrapper`} className={`col-md-${size}`}>
78-
{ componentContent }
79-
</div>
80-
);
81-
});
82-
};
8313

8414
render() {
8515
let { layout } = this.props;

‎src/components/group/TabGroup.js‎

Lines changed: 4 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,16 @@
11
import React, { Component, PropTypes } from 'react';
22
import AlertMessage from '../common/AlertMessage';
3-
import TabsForm from './../form/TabsForm';
3+
import BaseGroup from './BaseGroup';
4+
import TabsForm from '../form/TabsForm';
45

5-
class Group extends Component {
6+
class TabGroup extends BaseGroup {
67
static propTypes = {
78
component: PropTypes.string,
89
fields: PropTypes.array.isRequired,
910
layout: PropTypes.object.isRequired,
1011
componentFactory: PropTypes.object.isRequired
1112
};
1213

13-
getComponents = () => {
14-
let { layout, componentFactory, fields } = this.props;
15-
let components;
16-
17-
if (layout.fields) {
18-
19-
components = layout.fields.map(field => {
20-
let fieldMetadata = fields.find(cp => cp.name === field.name);
21-
22-
if (!fieldMetadata) {
23-
throw Error(`Could not find field. Field: ${field.name}`);
24-
}
25-
26-
// in case the field is going to render layouts internally, it's going to need information about the
27-
// layout and fields. I'm not sure if this is the best way to do it, probably not. TODO: Review it.
28-
fieldMetadata._extra = {layout, fields};
29-
30-
return {
31-
data: fieldMetadata,
32-
length: layout.fields.length,
33-
component: componentFactory.buildFieldComponent(fieldMetadata)
34-
}
35-
});
36-
37-
} else if (layout.groups) {
38-
39-
components = layout.groups.map(group => {
40-
return {
41-
data: group,
42-
length: layout.groups.length,
43-
component: componentFactory.buildGroupComponent({
44-
component: group.component,
45-
layout: group,
46-
fields: fields,
47-
componentFactory: componentFactory
48-
})
49-
}
50-
});
51-
}
52-
53-
return components;
54-
};
55-
56-
getDefaultSize = (component, gridLength = 12) => {
57-
let { layout } = this.props;
58-
59-
return layout.orientation == 'horizontal' ? Math.floor(gridLength/component.length) : gridLength;
60-
};
61-
62-
getContent = () => {
63-
let components = this.getComponents();
64-
65-
return components.map((component, i) => {
66-
let componentContent, size = 12;
67-
68-
// invisible components should be hidden
69-
if (component.data.visible === false) {
70-
componentContent = null;
71-
} else {
72-
size = component.data.size || this.getDefaultSize(component);
73-
componentContent = component.component;
74-
}
75-
76-
return (
77-
<div key={`component-${i}-wrapper`} className={`col-md-${size}`}>
78-
{ componentContent }
79-
</div>
80-
);
81-
});
82-
};
83-
8414
render() {
8515
let { layout } = this.props;
8616

@@ -95,4 +25,4 @@ class Group extends Component {
9525
}
9626
}
9727

98-
export default Group;
28+
export default TabGroup;

0 commit comments

Comments
 (0)