Skip to content

Commit 3937df4

Browse files
author
jonisaa
committed
Start to play with tabs
1 parent 9fbba0e commit 3937df4

File tree

5 files changed

+93
-77
lines changed

5 files changed

+93
-77
lines changed

‎src/components/AlertMessage.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React, { Component, PropTypes } from 'react';
2+
import { Alert } from 'react-bootstrap';
3+
4+
const AlertMessage = ({ error }) => (
5+
<Alert bsStyle='danger'>
6+
<h4>
7+
Could not render the MetaFormGroup component. The schema is not valid.
8+
</h4>
9+
<p>Detailed information:
10+
<b>{ error.message }</b>
11+
</p>
12+
</Alert>
13+
);
14+
15+
export default AlertMessage;

‎src/components/Header.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { Component, PropTypes } from 'react';
2+
3+
const Header = ({ title }) => {
4+
if (title) {
5+
return (
6+
<header className="metaform-group-header">
7+
<span className="metaform-group-title">
8+
{title}
9+
</span>
10+
</header>
11+
)
12+
}
13+
14+
return null;
15+
};
16+
17+
export default Header;

‎src/components/groupComponents/Group.js‎

Lines changed: 10 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React, { Component, PropTypes } from 'react';
2-
import { Alert, Nav, NavItem } from 'react-bootstrap';
2+
import AlertMessage from '../AlertMessage';
3+
import NormalForm from './Normal';
4+
import TabsForm from './Tabs';
35

46
class Group extends Component {
57
static propTypes = {
@@ -79,86 +81,23 @@ class Group extends Component {
7981
);
8082
});
8183
};
82-
83-
getHeader = () => {
84-
let { layout } = this.props;
85-
86-
if (layout.title) {
87-
return (
88-
<header className="metaform-group-header">
89-
<span className="metaform-group-title">
90-
{ layout.title }
91-
</span>
92-
</header>
93-
);
94-
} else {
95-
return null;
96-
}
97-
};
98-
99-
handleSelect = (eventKey) => {
100-
event.preventDefault();
101-
};
10284

10385
render() {
104-
86+
let { layout } = this.props;
87+
10588
// the passed in layout can contain either fields or groups.
10689
// in case it contains 'fields', we're gonna render each of the fields.
10790
// in case it contains 'groups', we're gonna render each group, passing the fields as a parameter
10891
try {
10992
let content = this.getContent();
110-
let header = this.getHeader();
11193

112-
let { layout } = this.props;
113-
114-
if (layout.type == "tabs") {
115-
return(
116-
<section>
117-
<div className='row'>
118-
<div className="metaform-group">
119-
{ header }
120-
<Nav bsStyle="tabs" onSelect={this.handleSelect}>
121-
{
122-
layout.groups.map((item, index) => (
123-
<NavItem eventKey={index}>
124-
{item.title}
125-
</NavItem>
126-
))
127-
}
128-
</Nav>
129-
<div className="metaform-group-content">
130-
{ content }
131-
</div>
132-
</div>
133-
</div>
134-
</section>
135-
);
136-
} else {
137-
return (
138-
<section>
139-
<div className='row'>
140-
<div className="metaform-group">
141-
{ header }
142-
<div className="metaform-group-content">
143-
{ content }
144-
</div>
145-
</div>
146-
</div>
147-
</section>
148-
);
94+
if (layout.type == 'tabs') {
95+
return <TabsForm title={layout.title} content={content}/>;
14996
}
150-
97+
98+
return <NormalForm title={layout.title} content={content}/>
15199
} catch (ex) {
152-
return (
153-
<Alert bsStyle='danger'>
154-
<h4>
155-
Could not render the MetaFormGroup component. The schema is not valid.
156-
</h4>
157-
<p>Detailed information:
158-
<b>{ ex.message }</b>
159-
</p>
160-
</Alert>
161-
)
100+
return <AlertMessage error={ex}/>
162101
}
163102
}
164103
}

‎src/components/groupComponents/Normal.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React, { Component, PropTypes } from 'react';
2+
import Header from '../Header';
3+
4+
export default class Tabs extends Component {
5+
static propTypes = {
6+
content: PropTypes.array,
7+
title: PropTypes.string
8+
};
9+
10+
render() {
11+
let { title } = this.props;
12+
13+
return (
14+
<section>
15+
<div className='row'>
16+
<div className="metaform-group">
17+
<Header title={title}/>
18+
<div className="metaform-group-content">
19+
{ content }
20+
</div>
21+
</div>
22+
</div>
23+
</section>
24+
);
25+
}
26+
}

‎src/components/groupComponents/Tabs.js‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,42 @@
11
import React, { Component, PropTypes } from 'react';
2-
import { Alert, Nav, NavItem } from 'react-bootstrap';
2+
import { Nav, NavItem } from 'react-bootstrap';
3+
import Header from '../Header';
34

45
export default class Tabs extends Component {
56
static propTypes = {
6-
header: PropTypes.object,
7-
content: PropTypes.object,
7+
content: PropTypes.array,
88
layout: PropTypes.object
99
};
10+
11+
state = {
12+
position: 0
13+
};
14+
15+
handleSelect = (eventKey) => {
16+
event.preventDefault();
17+
this.setState({ position: eventKey });
18+
};
1019

1120
render() {
12-
let { header, content, layout } = this.props;
21+
let { layout } = this.props;
22+
let { position } = this.state;
1323

1424
return (
1525
<section>
1626
<div className='row'>
1727
<div className="metaform-group">
18-
{ header }
28+
<Header title={layout.title}/>
29+
<Nav bsStyle="tabs" onSelect={this.handleSelect}>
30+
{
31+
layout.groups.map((item, index) => (
32+
<NavItem eventKey={index}>
33+
{item.title}
34+
</NavItem>
35+
))
36+
}
37+
</Nav>
1938
<div className="metaform-group-content">
20-
{ content }
39+
{ content[position] }
2140
</div>
2241
</div>
2342
</div>

0 commit comments

Comments
 (0)