Skip to content

Commit 9135e87

Browse files
author
Jonatan E. Salas
authored
Merge pull request #25 from redux-autoform/tab_group_refactor
Tab group refactor
2 parents 39111ff + ccc0198 commit 9135e87

File tree

7 files changed

+119
-22
lines changed

7 files changed

+119
-22
lines changed

‎demo/components/LiveSchemaEditorForm.js‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,18 @@ class LiveSchemaEditorForm extends Component {
1818
));
1919
};
2020

21+
getNewProps = (prop) => {
22+
const {initialValue, autofill, onUpdate, valid, invalid, dirty, pristine, active, touched, visited, autofilled, ...rest} = prop;
23+
24+
return rest;
25+
};
26+
2127
render() {
2228
const { fields: {entityName, layoutName, schema}, selectedPreset, formOptionActions } = this.props;
23-
29+
const newLayout = this.getNewProps(layoutName);
30+
const newEntity = this.getNewProps(entityName);
31+
const newSchema = this.getNewProps(schema);
32+
2433
return <div>
2534
<div className='row'>
2635
<div className="col-md-12">
@@ -44,7 +53,7 @@ class LiveSchemaEditorForm extends Component {
4453
<ControlLabel>
4554
Entity name
4655
</ControlLabel>
47-
<FormControl type="text" value="" placeholder="Enter text" { ... entityName }/>
56+
<FormControl type="text" value="" placeholder="Enter text" {...newEntity}/>
4857
<FormControl.Feedback />
4958
</FormGroup>
5059
</div>
@@ -53,7 +62,7 @@ class LiveSchemaEditorForm extends Component {
5362
<ControlLabel>
5463
Layout name
5564
</ControlLabel>
56-
<FormControl type="text" value="" placeholder="Enter text" { ...layoutName }/>
65+
<FormControl type="text" value="" placeholder="Enter text" {...newLayout}/>
5766
<FormControl.Feedback />
5867
</FormGroup>
5968
</div>
@@ -64,7 +73,7 @@ class LiveSchemaEditorForm extends Component {
6473
<ControlLabel>
6574
Schema
6675
</ControlLabel>
67-
<CodeEditor { ...schema} />
76+
<CodeEditor { ...newSchema}/>
6877
<FormControl.Feedback />
6978
</FormGroup>
7079
</div>

‎demo/presets/layoutsTabs.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
layouts: [
1616
{
1717
name: 'edit',
18-
type: 'tabs',
18+
component: 'TabGroup',
1919
groups: [
2020
{
2121
title: 'First',

‎src/components/common/FormControl.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,11 @@ class FormControl extends Component {
2424
};
2525

2626
getInput = () => {
27-
let { value, placeholder, help, componentClass, children, rows } = this.props;
28-
let formControlProps = { value, placeholder, help, componentClass, rows };
27+
let { value, placeholder, componentClass, children, rows } = this.props;
28+
let formControlProps = { value, placeholder, componentClass, rows };
2929

3030
return (
31-
<BootstrapFormControl type="text" ref="input" onChange={this.handleChange} onBlur={this.handleBlur} {...formControlProps} hasFeedback>
31+
<BootstrapFormControl type="text" ref="input" onChange={this.handleChange} onBlur={this.handleBlur} {...formControlProps}>
3232
{ children }
3333
</BootstrapFormControl>
3434
)

‎src/components/form/NormalForm.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Header from '../common/Header';
44
export default class NormalForm extends Component {
55
static propTypes = {
66
content: PropTypes.array.isRequired,
7-
title: PropTypes.string.isRequired
7+
title: PropTypes.string
88
};
99

1010
render() {

‎src/components/group/Group.js‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { Component, PropTypes } from 'react';
22
import AlertMessage from '../common/AlertMessage';
33
import NormalForm from './../form/NormalForm';
4-
import TabsForm from './../form/TabsForm';
54

65
class Group extends Component {
76
static propTypes = {
@@ -89,18 +88,7 @@ class Group extends Component {
8988
// in case it contains 'fields', we're gonna render each of the fields.
9089
// in case it contains 'groups', we're gonna render each group, passing the fields as a parameter
9190
try {
92-
let content = this.getContent();
93-
94-
if (layout.type) {
95-
switch (layout.type) {
96-
case 'tabs':
97-
return <TabsForm layout={layout} content={content}/>;
98-
default:
99-
return <NormalForm title={layout.title} content={content}/>
100-
}
101-
}
102-
103-
return <NormalForm title={layout.title} content={content}/>
91+
return <NormalForm title={layout.title} content={this.getContent()}/>
10492
} catch (ex) {
10593
return <AlertMessage error={ex}/>
10694
}

‎src/components/group/TabGroup.js‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import React, { Component, PropTypes } from 'react';
2+
import AlertMessage from '../common/AlertMessage';
3+
import TabsForm from './../form/TabsForm';
4+
5+
class Group 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+
render() {
85+
let { layout } = this.props;
86+
87+
// the passed in layout can contain either fields or groups.
88+
// in case it contains 'fields', we're gonna render each of the fields.
89+
// in case it contains 'groups', we're gonna render each group, passing the fields as a parameter
90+
try {
91+
return <TabsForm layout={layout} content={this.getContent()}/>;
92+
} catch (ex) {
93+
return <AlertMessage error={ex}/>
94+
}
95+
}
96+
}
97+
98+
export default Group;

‎src/factory/BootstrapFactory.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import TextBox from '../components/field/TextBox';
33
import Select from '../components/field/Select';
44
import TextArea from '../components/field/TextArea';
55
import Group from '../components/group/Group';
6+
import TabGroup from '../components/group/TabGroup';
67
import ArrayContainer from '../components/field/ArrayContainer';
78
import DateTimePicker from '../components/field/DateTimePicker';
89
import Lookup from '../components/field/Lookup';
@@ -31,6 +32,7 @@ class BootstrapFactory extends ComponentFactory {
3132
this.registerFieldComponent('FieldGroup', ['group'], FieldGroup);
3233

3334
this.registerGroupComponent('Group', Group);
35+
this.registerGroupComponent('TabGroup', TabGroup);
3436
};
3537

3638
setDefaultConfiguration = (config) => {

0 commit comments

Comments
 (0)