Skip to content

Commit e9448c6

Browse files
dunglasmysiar
dunglas
authored and
mysiar
committed
Bootstrap 4 support (#50)
1 parent d2620dc commit e9448c6

File tree

9 files changed

+58
-56
lines changed

9 files changed

+58
-56
lines changed

‎src/generators/ReactGenerator.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ combineReducers(${titleLc},{/* ... */}),
119119

120120
// utils
121121
for (let file of ['utils/helpers.js', 'utils/fetch.js']) {
122-
this.createFile(file, `${dir}/${file}`, {}, false);
122+
this.createFile(file, `${dir}/${file}`, context, false);
123123
}
124124

125125
this.createEntrypoint(api.entrypoint, `${dir}/config/_entrypoint.js`)

‎src/generators/ReactNativeGenerator.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ combineReducers(${titleLc},{/* ... */}),
102102
this.createFileFromPattern(pattern, dir, lc, context);
103103
}
104104

105-
this.createFile('utils/fetch.js', `${dir}/utils/fetch.js`, {}, false);
105+
this.createFile('utils/fetch.js', `${dir}/utils/fetch.js`, context, false);
106106
this.createEntrypoint(api.entrypoint, `${dir}/config/_entrypoint.js`)
107107
}
108108
}

‎templates/react-common/utils/fetch.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default function (url, options = {}) {
1919
return response
2020
.json()
2121
.then(json => {
22-
const error = json['{{{ hydraPrefix }}}description'] ? json['{{{ hydraPrefix }}}description'] : response.statusText;
22+
const error = json['{{{ hydraPrefix }}}description'] || response.statusText;
2323
if (!json.violations) throw Error(error);
2424

2525
let errors = {_error: error};

‎templates/react/components/foo/Create.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ class Create extends Component {
2525
<h1>New {{{ title }}}</h1>
2626

2727
{this.props.loading && <div className="alert alert-info" role="status">Loading...</div>}
28-
{this.props.error && <div className="alert alert-danger" role="alert"><span className="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> {this.props.error}</div>}
28+
{this.props.error && <div className="alert alert-danger" role="alert"><span className="fa fa-exclamation-triangle" aria-hidden="true"></span> {this.props.error}</div>}
2929

3030
<Form onSubmit={this.props.create} values={this.props.item}/>
3131
<Link to="." className="btn btn-default">Back to list</Link>

‎templates/react/components/foo/Form.js

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,23 @@ import React, { Component } from 'react';
22
import { Field, reduxForm } from 'redux-form';
33

44
class Form extends Component {
5-
renderField(data) {
6-
const hasError = data.meta.touched && !!data.meta.error;
7-
if (hasError) {
8-
data.input['aria-describedby'] = `{{{ lc }}}_${data.input.name}_helpBlock`;
5+
renderField = (data) => {
6+
data.input.className = 'form-control';
7+
8+
const isInvalid = data.meta.touched && !!data.meta.error;
9+
if (isInvalid) {
10+
data.input.className += ' is-invalid';
911
data.input['aria-invalid'] = true;
1012
}
1113

12-
return <div className={`form-group${hasError ? ' has-error' : ''}`}>
13-
<label htmlFor={`{{{ lc }}}_${data.input.name}`} className="control-label">{data.input.name}</label>
14-
<input {...data.input} type={data.type} step={data.step} required={data.required} placeholder={data.placeholder} id={`{{{ lc }}}_${data.input.name}`} className="form-control"/>
15-
{hasError && <span className="help-block" id={`{{{ lc }}}_${data.input.name}_helpBlock`}>{data.meta.error}</span>}
14+
if (this.props.error && data.meta.touched && !data.meta.error) {
15+
data.input.className += ' is-valid';
16+
}
17+
18+
return <div className={`form-group`}>
19+
<label htmlFor={`{{{ lc }}}_${data.input.name}`} className="form-control-label">{data.input.name}</label>
20+
<input {...data.input} type={data.type} step={data.step} required={data.required} placeholder={data.placeholder} id={`{{{ lc }}}_${data.input.name}`}/>
21+
{isInvalid && <div className="invalid-feedback">{data.meta.error}</div>}
1622
</div>;
1723
}
1824

‎templates/react/components/foo/List.js

Lines changed: 30 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -38,42 +38,40 @@ class List extends Component {
3838

3939
<p><Link to="create" className="btn btn-default">Create</Link></p>
4040

41-
<div className="table-responsive">
42-
<table className="table table-striped table-hover">
43-
<thead>
44-
<tr>
45-
<th>Id</th>
41+
<table className="table table-responsive table-striped table-hover">
42+
<thead>
43+
<tr>
44+
<th>Id</th>
4645
{{#each fields}}
47-
<th>{{name}}</th>
46+
<th>{{name}}</th>
4847
{{/each}}
49-
<th></th>
50-
<th></th>
51-
</tr>
52-
</thead>
53-
<tbody>
54-
{this.props.data['{{{ hydraPrefix }}}member'] && this.props.data['{{{ hydraPrefix }}}member'].map(item =>
55-
<tr className={item['@id']} key={item['@id']}>
56-
<td><Link to={`show/${encodeURIComponent(item['@id'])}`}>{item['@id']}</Link></td>
48+
<th></th>
49+
<th></th>
50+
</tr>
51+
</thead>
52+
<tbody>
53+
{this.props.data['{{{ hydraPrefix }}}member'] && this.props.data['{{{ hydraPrefix }}}member'].map(item =>
54+
<tr key={item['@id']}>
55+
<th scope="row"><Link to={`show/${encodeURIComponent(item['@id'])}`}>{item['@id']}</Link></th>
5756
{{#each fields}}
58-
<td>{item['{{{ name }}}'] ? itemToLinks(item['{{{ name }}}']) : ''}</td>
57+
<td>{item['{{{ name }}}'] ? itemToLinks(item['{{{ name }}}']) : ''}</td>
5958
{{/each}}
60-
<td>
61-
<Link to={`show/${encodeURIComponent(item['@id'])}`}>
62-
<span className="glyphicon glyphicon-search" aria-hidden="true"/>
63-
<span className="sr-only">Show</span>
64-
</Link>
65-
</td>
66-
<td>
67-
<Link to={`edit/${encodeURIComponent(item['@id'])}`}>
68-
<span className="glyphicon glyphicon-pencil" aria-hidden="true"/>
69-
<span className="sr-only">Edit</span>
70-
</Link>
71-
</td>
72-
</tr>
73-
)}
74-
</tbody>
75-
</table>
76-
</div>
59+
<td>
60+
<Link to={`show/${encodeURIComponent(item['@id'])}`}>
61+
<span className="fa fa-search" aria-hidden="true"/>
62+
<span className="sr-only">Show</span>
63+
</Link>
64+
</td>
65+
<td>
66+
<Link to={`edit/${encodeURIComponent(item['@id'])}`}>
67+
<span className="fa fa-pencil" aria-hidden="true"/>
68+
<span className="sr-only">Edit</span>
69+
</Link>
70+
</td>
71+
</tr>
72+
)}
73+
</tbody>
74+
</table>
7775

7876
{this.pagination()}
7977
</div>;

‎templates/react/components/foo/Show.js

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,14 @@ class Show extends Component {
3535

3636
const item = this.props.retrieved;
3737

38-
return (<div>
38+
return <div>
3939
<h1>Show {item && item['@id']}</h1>
4040

4141
{this.props.loading && <div className="alert alert-info" role="status">Loading...</div>}
42-
{this.props.error && <div className="alert alert-danger" role="alert"><span className="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> {this.props.error}</div>}
43-
{this.props.deleteError && <div className="alert alert-danger" role="alert"><span className="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> {this.props.deleteError}</div>}
42+
{this.props.error && <div className="alert alert-danger" role="alert"><span className="fa fa-exclamation-triangle" aria-hidden="true"></span> {this.props.error}</div>}
43+
{this.props.deleteError && <div className="alert alert-danger" role="alert"><span className="fa fa-exclamation-triangle" aria-hidden="true"></span> {this.props.deleteError}</div>}
4444

45-
{item && <div className="table-responsive">
46-
<table className="table table-striped table-hover">
45+
{item && <table className="table table-responsive table-striped table-hover">
4746
<thead>
4847
<tr>
4948
<th>Field</th>
@@ -53,21 +52,20 @@ class Show extends Component {
5352
<tbody>
5453
{{#each fields}}
5554
<tr>
56-
<td>{{name}}</td>
55+
<th scope="row">{{name}}</th>
5756
<td>{item['{{{ name }}}']}</td>
5857
</tr>
5958
{{/each }}
6059
</tbody>
6160
</table>
62-
</div>
6361
}
6462
<Link to=".." className="btn btn-default">Back to list</Link>
6563
{item && <Link to={`/{{ name }}/edit/${encodeURIComponent(item['@id'])}`}>
6664
<button className="btn btn-warning">Edit</button>
6765
</Link>
6866
}
6967
<button onClick={this.del} className="btn btn-danger">Delete</button>
70-
</div>);
68+
</div>;
7169
}
7270
}
7371

‎templates/react/components/foo/Update.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,9 @@ class Update extends Component {
4747
{this.props.created && <div className="alert alert-success" role="status">{this.props.created['@id']} created.</div>}
4848
{this.props.updated && <div className="alert alert-success" role="status">{this.props.updated['@id']} updated.</div>}
4949
{(this.props.retrieveLoading || this.props.updateLoading || this.props.deleteLoading) && <div className="alert alert-info" role="status">Loading...</div>}
50-
{this.props.retrieveError && <div className="alert alert-danger" role="alert"><span className="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> {this.props.retrieveError}</div>}
51-
{this.props.updateError && <div className="alert alert-danger" role="alert"><span className="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> {this.props.updateError}</div>}
52-
{this.props.deleteError && <div className="alert alert-danger" role="alert"><span className="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> {this.props.deleteError}</div>}
50+
{this.props.retrieveError && <div className="alert alert-danger" role="alert"><span className="fa fa-exclamation-triangle" aria-hidden="true"></span> {this.props.retrieveError}</div>}
51+
{this.props.updateError && <div className="alert alert-danger" role="alert"><span className="fa fa-exclamation-triangle" aria-hidden="true"></span> {this.props.updateError}</div>}
52+
{this.props.deleteError && <div className="alert alert-danger" role="alert"><span className="fa fa-exclamation-triangle" aria-hidden="true"></span> {this.props.deleteError}</div>}
5353

5454
{item && <Form onSubmit={values => this.props.update(item, values)} initialValues={item}/>}
5555
<Link to=".." className="btn btn-default">Back to list</Link>

‎templates/react/utils/helpers.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,5 @@ function createLink(item) {
1515
const splittedRoute = routeWithoutPrefix.split('/');
1616
const route = '/' === routeWithoutPrefix[0] ? splittedRoute[1] : splittedRoute[0];
1717

18-
return <div><Link key={item} to={`/${route}/show/${encodeURIComponent(item)}`}>{item}</Link></div>;
18+
return <div key={item}><Link to={`/${route}/show/${encodeURIComponent(item)}`}>{item}</Link></div>;
1919
}

0 commit comments

Comments
 (0)