Skip to content

Commit 92553fa

Browse files
akuzkoakuzko
committed
small README and demo app updates
- add Credits section to README - add Intro section to demo app and other polishing changes
1 parent abe6b74 commit 92553fa

File tree

7 files changed

+38
-9
lines changed

7 files changed

+38
-9
lines changed

‎README.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ this variable that you find suitable.
199199
- `this.get('foos.1') // => {bar: 'bak'}`
200200
- `this.get('foos.1.bar') // => 'bak'`
201201
- `this.get() // returns whole form's attributes object`
202-
- `set(name, value)` - sets a `value` for an input with a specified `name`;
202+
- `set(name, value)` - sets a `value` for an input with a specified `name`.
203203
- `set(object)` - sets multiple values at once. Each key in the object
204204
corresponds to input name, and values are input values.
205205
- `merge(name, value)` - merges given `value` object with value of input with
@@ -267,6 +267,11 @@ class Page extends Component {
267267
}
268268
```
269269

270+
## Credits
271+
272+
Hugs and thanks to [ogrechishkina](https://github.com/ogrechishkina) for her
273+
support and building all of the CSS for demo application.
274+
270275
## Running Demo locally
271276

272277
```

‎demo/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<!DOCTYPE html>
12
<html>
23
<head>
34
<title>React Form Base Demo</title>

‎demo/src/App.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { PureComponent } from 'react';
2-
import InputPrerequisites from './components/InputPrerequisites';
2+
import { Intro, InputPrerequisites } from './components';
33
import * as Forms from './forms';
44

55
const sections = [
@@ -50,10 +50,10 @@ export default class App extends PureComponent {
5050
if (['foo', 'bar', 'baz'].includes(attrs.account)) {
5151
reject({ account: 'has already been taken' });
5252
} else {
53-
resolve({ status: 200 });
53+
resolve(true);
5454
}
5555
}, 3000);
56-
}).then(() => form.setState({ saving: false, success: true }))
56+
}).then(success => form.setState({ success, saving: false }))
5757
.catch(errors => form.setState({ errors, saving: false }));
5858
});
5959
};
@@ -77,6 +77,7 @@ export default class App extends PureComponent {
7777
<a href="#form11" className={ this.isActive('form11') }>{Forms.Form11.title}</a>
7878
</div>
7979
<div className="content paper flex-item p-20">
80+
<Intro />
8081
<div id="inputs"><InputPrerequisites /></div>
8182
<div id="form01"><Forms.Form1 {...this.formProps('form1')} /></div>
8283
<div id="form02"><Forms.Form2 {...this.formProps('form2')} /></div>

‎demo/src/components/Intro.jsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import marked from 'marked';
3+
4+
const content = `
5+
This demo application shows the basic usage examples of [react-form-base](https://github.com/akuzko/react-form-base).
6+
It renders a number of forms, each of which demonstrates specific use case scenario
7+
with a short description.
8+
9+
**NOTE:** Please keep in mind that source code, rendered on the left side, is
10+
not 100% accurate, since it does not contain all of the markup (including
11+
\`className\`s), which was omitted for brevity.
12+
`;
13+
14+
export default function Intro() {
15+
return (
16+
<div className="pb-20 mb-20 border-bottom">
17+
<h1>React Form Base Demo</h1>
18+
<div className="mb-20" dangerouslySetInnerHTML={{ __html: marked(content) }} />
19+
</div>
20+
);
21+
}

‎demo/src/components/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1+
export Intro from './Intro';
12
export InputPrerequisites from './InputPrerequisites';
23
export Source from './Source';

‎demo/src/forms/Form11.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,10 +56,10 @@ const SOURCE = [['Form11.jsx', `
5656
if (['foo', 'bar', 'baz'].includes(data.account)) {
5757
reject({ account: 'has already been taken' });
5858
} else {
59-
resolve({ status: 200 });
59+
resolve(true);
6060
}
6161
}, 3000);
62-
}).then(() => form.setState({ saving: false, success: true }))
62+
}).then(success => form.setState({ success, saving: false }))
6363
.catch(errors => form.setState({ errors, saving: false }));
6464
});
6565
}

‎demo/src/forms/Form9.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -90,9 +90,9 @@ const DESCRIPTION = dedent`
9090
like \`'numbers.0'\`, \`'numbers.1'\` and so on will be validated with rules
9191
defined for \`'numbers.*'\`.
9292
93-
**NOTE:** wildcard validation is not limited to a string values. Your form
94-
may have a collection of nested _objects_ and you may want to define property
95-
validation for each of them with something like
93+
**NOTE:** wildcard validation is not limited to validating collection of strings.
94+
Your form may have a collection of nested _objects_ and you may want to define
95+
their property validation for each of them with something like
9696
9797
\`\`\`js
9898
validations = {

0 commit comments

Comments
 (0)