Skip to content

Commit 5caf189

Browse files
danielopradodanieloprado
committed
clean up and documentation
1 parent a0042a2 commit 5caf189

17 files changed

+115
-408
lines changed

‎.vscode/settings.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,6 @@
2020
"*.d.ts": true,
2121
"**/*.map": {
2222
"when": "$(basename)"
23-
},
23+
}
2424
}
2525
}

‎API.md

+46-121
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,51 @@
11
API
22
---
33

4-
* [Base](#base)
5-
* [Text](#text)
6-
* [Checkbox / Switch](#checkbox-/-switch)
7-
* [Radio](#radio)
8-
* [Date](#date)
9-
* Time (comming soon)
10-
* [Select](#select)
11-
* [Switch](#switch)
12-
* [Color](#color)
13-
* [Autocomplete](#autocomplete)
14-
* [Html](#html)
15-
* [Hidden](#hidden)
16-
* [Custom Message](#custom-message)
17-
184
### Base (Common props)
195

20-
| Props | Required | Type | Description |
21-
|-------------------|----------|------------------------|----------------------------------------------------|
22-
| label | false | string | |
23-
| helperText | false | string | |
24-
| disabled | false | boolean | |
25-
| validation | false | string | rules of validation |
26-
| validationContext | false | object { prop: value } | extra fields for validation bind (ex. required_if) |
27-
| errorMessage | false | string | custom error message from external validation |
28-
29-
#### Text
30-
31-
All [material-ui](https://material-ui.com/api/text-field/) props and:
32-
33-
| Props | Required | Type | Description |
34-
|----------|----------|-------------------------|--------------------------------------|
35-
| value | true | any | |
36-
| mask | false | string | |
37-
| onChange | true | Function(string/number) | |
38-
| loading | false | boolean | if true will add a progress at right |
39-
40-
#### Checkbox / Switch
41-
42-
All material-ui
43-
[checkbox](https://material-ui.com/api/checkbox/) and
44-
[switch](https://material-ui.com/api/switch/)
45-
props and:
46-
47-
| Props | Required | Type | Description |
48-
|------------|----------|------------------------------------------|-------------------------------|
49-
| value | false | any | if null will return a boolean |
50-
| checked | true | boolean | |
51-
| helperText | false | string | |
52-
| onChange | true | Function(value (if provided) or boolean) | |
53-
54-
### Radio
55-
56-
All material-ui [radio](https://material-ui.com/api/radio/) props and:
57-
58-
| Props | Required | Type | Description |
59-
|------------|----------|-----------------|------------------------------------|
60-
| value | true | any | Value that will return if selected |
61-
| checked | true | boolean | |
62-
| helperText | false | string | |
63-
| onChange | true | Function(value) | |
64-
65-
66-
### Date
67-
68-
All [material-ui-pickers](https://github.com/dmtrKovalenko/material-ui-pickers) props and:
69-
70-
| Props | Required | Type | Description |
71-
|---------------|----------|----------------|----------------------------------|
72-
| value | true | Date | |
73-
| minDate | false | Date | |
74-
| maxDate | false | Date | |
75-
| disablePast | false | boolean | |
76-
| disableFuture | false | boolean | |
77-
| format | false | string | moment string format |
78-
| locale | false | string | use defaultDateLocale as default |
79-
| onChange | true | Function(date) | |
80-
81-
#### Select
82-
83-
All [material-ui](https://material-ui.com/api/select/) props and:
84-
85-
| Props | Required | Type | Description |
86-
|----------|----------|------------------------------------------------|--------------------------------------|
87-
| value | true | any | |
88-
| options | true | object { value: string/number, label: string } | |
89-
| onChange | true | Function(string/number) | |
90-
| loading | false | boolean | if true will add a progress at right |
91-
92-
#### Color
93-
94-
| Props | Required | Type | Description |
95-
|----------|----------|------------------|-------------|
96-
| value | true | string | |
97-
| onChange | true | Function(string) | |
98-
99-
100-
#### Autocomplete
101-
102-
| Props | Required | Type | Description |
103-
|----------|----------|------------------------------------------------|-------------|
104-
| value | true | any | |
105-
| options | true | object { value: string/number, label: string } | |
106-
| onChange | true | Function(string/number) | |
107-
108-
#### Html
109-
110-
| Props | Required | Type | Description |
111-
|----------|----------|------------------|-------------|
112-
| value | true | string | |
113-
| onChange | true | Function(string) | |
114-
115-
#### Hidden
116-
117-
| Props | Required | Type | Description |
118-
|-------|----------|------|-------------|
119-
| value | true | any | |
120-
121-
#### Custom Message
122-
123-
| Props | Required | Type | Description |
124-
|----------|----------|--------|--------------------|
125-
| rules | true | string | separated by comma |
126-
| children | true | string | message |
6+
Component Base to create a form field.
7+
8+
| Props | Required | Type | Description |
9+
|-------------------|----------|------------------------|------------------------------------------------------------------------|
10+
| name | false | string | |
11+
| value | false | any | |
12+
| submitted | false | boolean | flag to set if form was submited (also can be set by setFormSubmitted) |
13+
| validation | false | string | rules of validation |
14+
| validationContext | false | object { prop: value } | extra fields for validation bind (ex. required_if) |
15+
| errorMessage | false | string | custom error message from external validation |
16+
17+
### How to Create a Form Field
18+
19+
```jsx
20+
import { FieldCoreBase } from '@react-form-fields/core';
21+
22+
class MyComponentField extends FieldCoreBase {
23+
onChange = event => {
24+
const value = this.mask.clean(event.target ? event.target.value : event);
25+
26+
this.setState({ touched: true }); //<-- important to show the error
27+
this.props.onChange(value);
28+
}
29+
30+
render() {
31+
const { value, label, name } = this.props;
32+
33+
return (
34+
<Fragment>
35+
{super.render() /*<-- important*/}
36+
37+
{/* isRequired: check if validation prop contains the required rule */}
38+
<label>{label} {this.isRequired ? '*' : ''}</label>
39+
<input
40+
name={name}
41+
value={this.mask.apply(value)}
42+
onChange={this.onChange}
43+
/>
44+
45+
{/* errorMessage will null if submitted and touched are false */}
46+
{this.errorMessage ? <p class="error">{this.errorMessage}</p> : null}
47+
</Fragment>
48+
);
49+
}
50+
}
51+
```

‎README.md

+7-13
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
1-
React Form Fields: Material UI
1+
React Form Fields: Core
22
------------------------------
33

4-
See [Demo](https://react-form-fields.github.io/material-ui)
5-
64
See [API.md](https://github.com/react-form-fields/core/blob/master/API.md) for details
75

86
## Requirements
97

10-
* React >= 16.0.0
11-
* Material-ui >= 1.0.0
8+
* React >= 16.3.0
129

1310
## Install
1411

@@ -22,7 +19,7 @@ yarn add @react-form-fields/core
2219

2320
```jsx
2421
// import
25-
import FieldText from '@react-form-fields/core/components/Text';
22+
import FieldText from '@react-form-fields/material-ui/components/Text';
2623

2724
// render()
2825
<FieldText
@@ -46,7 +43,7 @@ yarn add @react-form-fields/core
4643
```jsx
4744
// import
4845
import ValidationContext from '@react-form-fields/core/components/ValidationContext';
49-
import FieldText from '@react-form-fields/core/components/Text';
46+
import FieldText from '@react-form-fields/material-ui/components/Text';
5047

5148
// render()
5249
<ValidationContext ref={ref=> this.validation = ref}>
@@ -79,13 +76,12 @@ yarn add @react-form-fields/core
7976
Global Setup example:
8077

8178
```js
82-
import { setConfig } from '@react-form-fields/core/config';
79+
import { setConfig } from '@react-form-fields/core';
8380
import commonMasks from '@react-form-fields/core/mask/common/pt-br';
8481
import validationMessage from '@react-form-fields/core/validator/custom-languages/pt-br';
8582

8683
setConfig({
8784
masks: commonMasks,
88-
defaultDateLocale: 'pt-br',
8985
validation: validationMessage
9086
});
9187
```
@@ -94,19 +90,17 @@ setConfig({
9490

9591
See [validatorjs](https://github.com/skaterdav85/validatorjs)
9692

97-
Validation Context
93+
Validation and Validation Context
9894

9995
```jsx
10096
<FieldDate
101-
label='Begin Date'
10297
name='begin'
10398
value={model.beginDate}
10499
validation='date'
105100
onChange={(v => this.setState({ model: { ...model, beginDate: v } }))}
106101
/>
107102

108103
<FieldDate
109-
label='End Date'
110104
name='end'
111105
value={model.endDate}
112106
validation='date|after_or_equal:begin date' //after_or_equal needs a value from other prop (ex: 'begin date')
@@ -131,7 +125,7 @@ Custom Message
131125

132126
## Mask
133127

134-
Only FieldText has mask prop;
128+
Register your custom masks:
135129

136130
```js
137131
// register

‎components/BaseSelection.tsx

-86
This file was deleted.

0 commit comments

Comments
 (0)