2.6.7 • Published 5 years ago
@react-form-fields/native-base v2.6.7
React Form Fields: NativeBase
See Core See Demo See API.md for details
Requirements
- React >= 16.0.0
Install
yarn add @react-form-fields/material-ui
Usage
Individual field
// import
import FieldText from '@react-form-fields/material-ui/components/Text';
// render()
<FieldText
ref={ref => this.field = ref}
label='Email'
type='email'
disabled={disabled}
value={email}
validation='required|email'
onChange={v => this.setState({ email: v }))}
/>
// onSubmit()
if(this.field.isValid()) {
console.log('submit');
}
Complete Form
// import
import ValidationContext from '@react-form-fields/material-ui/components/ValidationContext';
import FieldText from '@react-form-fields/material-ui/components/Text';
// render()
<ValidationContext ref={ref=> this.validation = ref}>
<FieldText
ref={ref => this.field = ref}
label='Email'
type='email'
value={email}
validation='required|email'
onChange={v => this.setState({ email: v }))}
/>
<FieldText
label='Senha'
type='password'
value={password}
validation='required'
onChange={v => this.setState({ password: v }))}
/>
</ValidationContext>
// onSubmit()
if(this.validation.isValid()) {
console.log('all fields are valid');
}
Config
Global Setup example:
import { setConfig } from '@react-form-fields/material-ui/config';
import commonMasks from '@react-form-fields/material-ui/mask/common/pt-br';
import validationMessage from '@react-form-fields/material-ui/validator/custom-languages/pt-br';
setConfig({
masks: commonMasks,
dateLocale: 'pt',
validation: validationMessage
});
Validation Rules and Config
See validatorjs
Validation Context
<FieldDate
label='Begin Date'
name='begin'
value={model.beginDate}
validation='date'
onChange={(v => this.setState({ model: { ...model, beginDate: v } }))}
/>
<FieldDate
label='End Date'
name='end'
value={model.endDate}
validation='date|after_or_equal:begin date' //after_or_equal needs a value from other prop (ex: 'begin date')
validationContext={{ 'begin date': model.beginDate }} // build the dependency object as you needed
onChange={(v => this.setState({ model: { ...model, endDate: v } }))}
/>
Custom Message
<FieldDate
label='Begin Date'
name='begin'
value={model.beginDate}
validation='date'
onChange={(v => this.setState({ model: { ...model, beginDate: v } }))}
>
<CustomMessage rules='date'>This not a date!</CustomMessage>
</FieldDate>
Mask
Only FieldText has mask prop;
// register
import { register } from '@react-form-fields/material-ui/mask';
// -optional
import commonMasks from '@react-form-fields/material-ui/mask/common/pt-br';
register([
...commonMasks, // -optional
name: 'my-new-mask',
apply: value => {
if (!value) return value;
const regexp = value.length > 10 ?
/^(\d{0,2})(\d{0,5})(\d{0,4}).*/ :
/^(\d{0,2})(\d{0,4})(\d{0,4}).*/;
const result = value.length > 2 ?
'($1) $2-$3' : '($1$2$3';
return value.replace(regexp, result).replace(/-$/, '');
},
clean: value => value.replace(/\D/gi, '').substr(0, 11)
])
// usage
<FieldText
label='Phone'
type='text'
mask='my-new-mask'
value={phone}
onChange={v => this.setState({ phone: v }))}
/>
Common Masks
PT-BR:
- zipcode
- phone
- document (CNPJ/CPF)
- cpf
- cnpj
2.6.7
5 years ago
2.6.6
5 years ago
2.6.5
5 years ago
2.6.4
5 years ago
2.6.3
5 years ago
2.6.2
5 years ago
2.6.1
5 years ago
2.6.0
5 years ago
2.5.3
5 years ago
2.5.2
5 years ago
2.5.1
5 years ago
2.5.0
5 years ago
2.4.2
5 years ago
2.4.1
5 years ago
2.4.0
5 years ago
2.3.5
5 years ago
2.3.4
5 years ago
2.3.3
5 years ago
2.3.2
5 years ago
2.3.1
5 years ago
2.3.0
5 years ago
2.2.1
5 years ago
2.2.0
5 years ago
2.1.4
5 years ago
2.1.3
5 years ago
2.1.2
5 years ago
2.1.1
5 years ago
2.1.0
5 years ago
2.0.1
5 years ago
2.0.0
5 years ago
1.3.0
5 years ago
1.2.8
5 years ago
1.2.7
5 years ago
1.2.6
5 years ago
1.2.5
5 years ago
1.2.4
5 years ago
1.2.3
5 years ago
1.2.2
5 years ago
1.2.1
5 years ago
1.2.0
5 years ago
1.1.1
6 years ago
1.1.0
6 years ago
1.0.12
6 years ago
1.0.11
6 years ago
1.0.10
6 years ago
1.0.9
6 years ago
1.0.8
6 years ago
1.0.7
6 years ago
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago