Skip to content

Commit 32e5c40

Browse files
leandrohsilveiraleandrohsilveira
authored
Merge pull request #41 from leandrohsilveira/v1.3.0-SNAPSHOT
Control fields and forms with decorators
2 parents 1c66b4a + 46d60f0 commit 32e5c40

26 files changed

+946
-727
lines changed

‎docs/bundle.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/bundle.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,6 @@
2626

2727
<body>
2828
<div id="app"></div>
29-
<script type="text/javascript" src="vendor.js?701ec3fe1a8a211b5495"></script><script type="text/javascript" src="bundle.js?701ec3fe1a8a211b5495"></script></body>
29+
<script type="text/javascript" src="vendor.js?c4344e59cf5d483a909f"></script><script type="text/javascript" src="bundle.js?c4344e59cf5d483a909f"></script></body>
3030

3131
</html>

‎docs/packages.sizes.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"name":"react-formctrl","versionedName":"react-formctrl@1.2.0","size":67300,"minified":30316,"gzipped":6072}
1+
{"name":"react-formctrl","versionedName":"react-formctrl@1.3.0","size":73823,"minified":33420,"gzipped":6309}

‎docs/vendor.js‎

Lines changed: 4 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/vendor.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/react-formctrl-examples/src/cases/basic-form.jsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
import React from 'react'
22

3-
import {Form, Field} from 'react-formctrl'
4-
import {SubmitValuesPopup} from '../components/submit-values'
3+
import { Form, controlledField } from 'react-formctrl'
4+
import { SubmitValuesPopup } from '../components/submit-values'
55

6-
function Input({name, value, onChange}) {
6+
let Input = ({ name, value, onChange }) => {
77
return (
8-
<input className="form-control" name={name} value={value} onChange={onChange}></input>
8+
<input
9+
className="form-control"
10+
name={name}
11+
value={value}
12+
onChange={onChange}
13+
/>
914
)
1015
}
16+
Input = controlledField()(Input)
1117

1218
export function BasicForm(props) {
1319
const formName = "basic"
@@ -20,9 +26,7 @@ export function BasicForm(props) {
2026
<Form name={formName} onSubmit={onSubmit}>
2127
<div className="form-group">
2228
<label htmlFor="simple">Simple:</label>
23-
<Field form={formName} name="simple">
24-
<Input></Input>
25-
</Field>
29+
<Input form={formName} name="simple" />
2630
</div>
2731
<div>
2832
<button className="btn btn-primary" type="submit">Submit</button>

‎packages/react-formctrl-examples/src/cases/custom-validators.jsx‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import React from 'react'
22

3-
import {FormProvider, FormControl, Form, Field} from 'react-formctrl'
3+
import { FormProvider, Form, controlledForm, controlledField } from 'react-formctrl'
44

5-
import {CustomValidator} from 'react-formctrl/lib/validator'
5+
import { CustomValidator } from 'react-formctrl/lib/validator'
66

7-
import {SubmitValuesPopup} from '../components/submit-values'
7+
import { SubmitValuesPopup } from '../components/submit-values'
88

9-
function Input({name, label, type, onChange, onBlur, value, ctrl: {valid, invalid, dirty, errors}}) {
9+
let Input = ({ name, label, type, onChange, onBlur, value, ctrl: { valid, invalid, dirty, errors } }) => {
1010
const getInputClasses = () => {
11-
if(valid) return 'is-valid'
12-
if(dirty && invalid) return 'is-invalid'
11+
if (valid) return 'is-valid'
12+
if (dirty && invalid) return 'is-invalid'
1313
}
1414
return (
1515
<div className="form-group">
@@ -21,40 +21,46 @@ function Input({name, label, type, onChange, onBlur, value, ctrl: {valid, invali
2121
</div>
2222
)
2323
}
24+
Input = controlledField()(Input)
2425

25-
function CustomValidatorForm({onSubmit, formCtrl: {formName, invalid, unchanged}}) {
26+
let CustomValidatorForm = ({ onSubmit, formCtrl: { formName, invalid, unchanged } }) => {
2627
return (
2728
<Form name={formName} onSubmit={onSubmit}>
28-
<Field form={formName} name="username1" validate={["noadmin"]} required>
29-
<Input label="Username 1 (required, not admin)"></Input>
30-
</Field>
31-
32-
<Field form={formName} name="username2" validate= "noadmin" required>
33-
<Input label="Username 2 (required, not admin)"></Input>
34-
</Field>
35-
29+
<Input
30+
label="Username 1 (required, not admin)"
31+
form={formName}
32+
name="username1"
33+
validate={["noadmin"]}
34+
required
35+
/>
36+
<Input
37+
label="Username 2 (required, not admin)"
38+
form={formName}
39+
name="username2"
40+
validate="noadmin"
41+
required
42+
/>
3643
<button type="submit" className="btn btn-primary" disabled={invalid || unchanged}>Submit</button>
3744
&nbsp;
3845
<button type="reset" className="btn btn-default" disabled={unchanged}>Reset</button>
3946
</Form>
4047
)
4148
}
49+
CustomValidatorForm = controlledForm()(CustomValidatorForm)
4250

4351
export function CustomValidatorExample() {
4452
const handleSubmit = values => SubmitValuesPopup.dispatchShowSubmitValuesPopupEvent("Custom validator form", values)
4553
return (
4654
<div>
4755
<h3>Custom validators</h3>
4856
<p>There is a example of the custom field validation usage, the "Field" component can have a "validate" property to map a custom validation registered on "FieldProvider" component.</p>
49-
<FormControl form="customValidatorExampleForm">
50-
<CustomValidatorForm onSubmit={handleSubmit}></CustomValidatorForm>
51-
</FormControl>
57+
<CustomValidatorForm form="customValidatorExampleForm" onSubmit={handleSubmit}></CustomValidatorForm>
5258
</div>
5359
)
5460
}
5561

5662
class NoAdminValidator extends CustomValidator {
57-
63+
5864
constructor() {
5965
super('noadmin') // This constructor parameter defines the error message key
6066
}

‎packages/react-formctrl-examples/src/cases/field-validation.jsx‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import React from 'react'
22

3-
import {Form, Field} from 'react-formctrl'
4-
import {SubmitValuesPopup} from '../components/submit-values'
5-
import {Json} from '../components/case'
3+
import { Form, controlledField } from 'react-formctrl'
4+
import { SubmitValuesPopup } from '../components/submit-values'
5+
import { Json } from '../components/case'
66

7-
function Input({label, name, value, onChange, onBlur, ctrl}) {
8-
const {valid, invalid, dirty, errors} = ctrl
7+
let Input = ({ label, name, value, onChange, onBlur, ctrl }) => {
8+
const { valid, invalid, dirty, errors } = ctrl
99

1010
const getClassName = () => {
11-
if(valid) return 'is-valid'
12-
if(dirty && invalid) return 'is-invalid'
11+
if (valid) return 'is-valid'
12+
if (dirty && invalid) return 'is-invalid'
1313
}
1414
return (
1515
<Json title="Field controller" json={ctrl}>
@@ -20,10 +20,12 @@ function Input({label, name, value, onChange, onBlur, ctrl}) {
2020
<div className="invalid-feedback" key={error.key}>{error.key}</div>
2121
))}
2222
</div>
23-
</Json>
23+
</Json>
2424
)
2525
}
2626

27+
Input = controlledField()(Input)
28+
2729
export function FieldValidationForm(props) {
2830
const formName = "fieldValidation"
2931
const onSubmit = values => SubmitValuesPopup.dispatchShowSubmitValuesPopupEvent("Field validation", values)
@@ -35,16 +37,12 @@ export function FieldValidationForm(props) {
3537
<Form name={formName} onSubmit={onSubmit}>
3638
<div className="card">
3739
<div className="card-body">
38-
<Field form={formName} name="name" required>
39-
<Input label="Name (required)"></Input>
40-
</Field>
40+
<Input label="Name (required)" form={formName} name="name" required />
4141
</div>
4242
</div>
4343
<div className="card">
4444
<div className="card-body">
45-
<Field form={formName} name="email" type="email" required>
46-
<Input label="E-mail (email and required)"></Input>
47-
</Field>
45+
<Input label="E-mail (email and required)" form={formName} name="email" type="email" required />
4846
</div>
4947
</div>
5048
<div>

0 commit comments

Comments
 (0)