0.9.13 • Published 4 years ago
react-native-lcrew-forms v0.9.13
react-native-lcrew-forms
Getting started
$ npm install react-native-lcrew-forms
Usage
import {
Form,
EmailFormField,
TextFormField,
HiddenFormField,
PasswordFormField,
PickerFormField,
KeyboardShift,
SubmitFormField,
ErrorFormField,
useFormContext,
AutoCompleteFormField,
} from 'react-native-lcrew-forms'
const emailRegex = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i
const validators = {
requiredEmail: {
func: value => !!value && emailRegex.test(String(value).toLowerCase()),
message: 'Invalid email',
},
required: {
func: value => !!value,
message: 'Required',
},
password: {
func: value => !!value && String(value).length >= 4,
message: 'Password must be 4 length long',
},
passwordEqual: {
func: (value, values) => !!value && String(value).length >= 4 && values['password'] === value,
message: 'Password must be confirmed correctly',
},
}
class SomeComponent extends React.Component {
...
formSubmit = async (values) => {
// await sleep(1000)
return { null: 'Global error', email: 'Email already exists' }
}
onBlur = (name, value, error) => {
console.log('Field on blur: ' + name + ', value=' + value + ', error=' + error)
}
render() {
const pickerItems = [
{ label: 'First', value: 1 },
{ label: 'Second', value: 2 },
{ label: 'Third', value: 3 },
]
const autoCompleteItems = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Mario' },
{ id: 3, name: 'Donkey Kong' },
{ id: 4, name: 'Zelda' },
{ id: 5, name: 'Nintendo' },
{ id: 6, name: 'Charlie Sheen' },
]
...
return (
<ScrollView>
<KeyboardShift>
<FormRN
onSubmit={this.formSubmit}
clearFieldsAfterSubmit={true}>
>
<ErrorFormField />
<HiddenFormField name="id" value="5" />
<TextFormField name="name" label="Name" validators={validators.required} value="Unknown" />
<TextFormField name="description" multiline={true} />
<EmailFormField value="" validators={validators.requiredEmail} onBlur={this.onBlur} />
<PasswordFormField name="password" label="Password" validators={validators.password} />
<PasswordFormField name="password_confirm" label="Password Confirm"
validators={validators.passwordEqual} validateOnBlur={true} dependencies={['password']}
hideIfNotEnabled={true} />
<PickerFormField name="picker" items={pickerItems} value={pickerItems[0].value} />
<SwitchFormField name="switchControl" />
<AutoCompleteFormField
name="autocomplete"
maxItemsCount={5} maxSelectedItemsCount={0}
filterItems={(items, value) =>
!value ? [] : items.filter(x => x.name.includes(value.toLowerCase()))}
items={autoCompleteItems} />
<SubmitFormField buttonTitle='Save' />
</FormRN>
</KeyboardShift>
</ScrollView>
)
}
Tests
TODO: