Skip to content

Commit a0042a2

Browse files
danielopradodanieloprado
committed
initial
0 parents  commit a0042a2

22 files changed

+1219
-0
lines changed

‎.gitignore

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# See https://help.github.com/ignore-files/ for more about ignoring files.
2+
# dependencies
3+
/dist
4+
/node_modules
5+
6+
**/*.js
7+
**/*.js.map
8+
**/*.d.ts
9+
!declarations/*.d.ts
10+
!docs/**/*.js
11+
!docs/**/*.js.map
12+
13+
# testing
14+
/coverage
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
.env.local
22+
.env.development.local
23+
.env.test.local
24+
.env.production.local
25+
26+
npm-debug.log*
27+
yarn-debug.log*
28+
yarn-error.log*

‎.npmignore

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**/*.tsx
2+
/**/*.ts
3+
!/**/*.d.ts
4+
/declarations
5+
/.git
6+
/node_modules
7+
/.vscode
8+
/tsconfig.json
9+
/docs
10+
*.tgz
11+
*.log
12+
*.lock

‎.vscode/settings.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"typescript.tsdk": "node_modules/typescript/lib",
3+
"tslint.enable": false,
4+
"files.exclude": {
5+
"**/.git": true,
6+
"**/.svn": true,
7+
"**/.hg": true,
8+
"**/CVS": true,
9+
"**/.DS_Store": true,
10+
"**/*.js": {
11+
"when": "$(basename).ts"
12+
},
13+
"**/*?.js": {
14+
"when": "$(basename).tsx"
15+
},
16+
"components/**/*.d.ts": true,
17+
"decorators/**/*.d.ts": true,
18+
"mask/**/*.d.ts": true,
19+
"validator/**/*.d.ts": true,
20+
"*.d.ts": true,
21+
"**/*.map": {
22+
"when": "$(basename)"
23+
},
24+
}
25+
}

‎API.md

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
API
2+
---
3+
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+
18+
### Base (Common props)
19+
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 |

‎README.md

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
React Form Fields: Material UI
2+
------------------------------
3+
4+
See [Demo](https://react-form-fields.github.io/material-ui)
5+
6+
See [API.md](https://github.com/react-form-fields/core/blob/master/API.md) for details
7+
8+
## Requirements
9+
10+
* React >= 16.0.0
11+
* Material-ui >= 1.0.0
12+
13+
## Install
14+
15+
```bash
16+
yarn add @react-form-fields/core
17+
```
18+
19+
## Usage
20+
21+
### Individual field
22+
23+
```jsx
24+
// import
25+
import FieldText from '@react-form-fields/core/components/Text';
26+
27+
// render()
28+
<FieldText
29+
ref={ref => this.field = ref}
30+
label='Email'
31+
type='email'
32+
disabled={disabled}
33+
value={email}
34+
validation='required|email'
35+
onChange={v => this.setState({ email: v }))}
36+
/>
37+
38+
// onSubmit()
39+
if(this.field.isValid()) {
40+
console.log('submit');
41+
}
42+
```
43+
44+
### Complete Form
45+
46+
```jsx
47+
// import
48+
import ValidationContext from '@react-form-fields/core/components/ValidationContext';
49+
import FieldText from '@react-form-fields/core/components/Text';
50+
51+
// render()
52+
<ValidationContext ref={ref=> this.validation = ref}>
53+
<FieldText
54+
ref={ref => this.field = ref}
55+
label='Email'
56+
type='email'
57+
value={email}
58+
validation='required|email'
59+
onChange={v => this.setState({ email: v }))}
60+
/>
61+
62+
<FieldText
63+
label='Senha'
64+
type='password'
65+
value={password}
66+
validation='required'
67+
onChange={v => this.setState({ password: v }))}
68+
/>
69+
</ValidationContext>
70+
71+
// onSubmit()
72+
if(this.validation.isValid()) {
73+
console.log('all fields are valid');
74+
}
75+
```
76+
77+
### Config
78+
79+
Global Setup example:
80+
81+
```js
82+
import { setConfig } from '@react-form-fields/core/config';
83+
import commonMasks from '@react-form-fields/core/mask/common/pt-br';
84+
import validationMessage from '@react-form-fields/core/validator/custom-languages/pt-br';
85+
86+
setConfig({
87+
masks: commonMasks,
88+
defaultDateLocale: 'pt-br',
89+
validation: validationMessage
90+
});
91+
```
92+
93+
## Validation Rules and Config
94+
95+
See [validatorjs](https://github.com/skaterdav85/validatorjs)
96+
97+
Validation Context
98+
99+
```jsx
100+
<FieldDate
101+
label='Begin Date'
102+
name='begin'
103+
value={model.beginDate}
104+
validation='date'
105+
onChange={(v => this.setState({ model: { ...model, beginDate: v } }))}
106+
/>
107+
108+
<FieldDate
109+
label='End Date'
110+
name='end'
111+
value={model.endDate}
112+
validation='date|after_or_equal:begin date' //after_or_equal needs a value from other prop (ex: 'begin date')
113+
validationContext={{ 'begin date': model.beginDate }} // build the dependency object as you needed
114+
onChange={(v => this.setState({ model: { ...model, endDate: v } }))}
115+
/>
116+
```
117+
118+
Custom Message
119+
120+
```jsx
121+
<FieldDate
122+
label='Begin Date'
123+
name='begin'
124+
value={model.beginDate}
125+
validation='date'
126+
onChange={(v => this.setState({ model: { ...model, beginDate: v } }))}
127+
>
128+
<CustomMessage rules='date'>This not a date!</CustomMessage>
129+
</FieldDate>
130+
```
131+
132+
## Mask
133+
134+
Only FieldText has mask prop;
135+
136+
```js
137+
// register
138+
import { register } from '@react-form-fields/core/mask';
139+
140+
// -optional
141+
import commonMasks from '@react-form-fields/core/mask/common/pt-br';
142+
143+
register([
144+
...commonMasks, // -optional
145+
name: 'my-new-mask',
146+
apply: value => {
147+
if (!value) return value;
148+
149+
const regexp = value.length > 10 ?
150+
/^(\d{0,2})(\d{0,5})(\d{0,4}).*/ :
151+
/^(\d{0,2})(\d{0,4})(\d{0,4}).*/;
152+
153+
const result = value.length > 2 ?
154+
'($1) $2-$3' : '($1$2$3';
155+
156+
return value.replace(regexp, result).replace(/-$/, '');
157+
},
158+
clean: value => value.replace(/\D/gi, '').substr(0, 11)
159+
])
160+
161+
// usage
162+
<FieldText
163+
label='Phone'
164+
type='text'
165+
mask='my-new-mask'
166+
value={phone}
167+
onChange={v => this.setState({ phone: v }))}
168+
/>
169+
```
170+
171+
### Common Masks
172+
173+
#### PT-BR:
174+
175+
* zipcode
176+
* phone
177+
* document (CNPJ/CPF)
178+
* cpf
179+
* cnpj

0 commit comments

Comments
 (0)