Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Field with next
import React, { Component } from 'react'
import PT from 'prop-types'
import Field, { isTextInput } from './Field'
import { get } from 'lodash'
class Fields extends Component {
// componentDidMount() {
// const { fields } = this.props
// // since focus on fields doesn't work as expected
// // in react native we do an autofocus on mount instead
// // of passing the autofocus prop to the the text field
// const firstFieldToAutoFocus = fields.find(
// field =>
// isTextInput(field.type) &&
// field.fieldProps &&
// field.fieldProps.autoFocus === true
// )
// if (firstFieldToAutoFocus) {
// this._focus(firstFieldToAutoFocus.name)
// }
// }
refs = {}
_ref = name => input => {
this.refs = {
...this.refs,
[name]: input,
}
}
_focus = name => () => {
// console.log(`${this.refs[name]}.focus()`)
this.refs[name].focus()
}
_blur = name => () => {
// console.log(`${this.refs[name]}.blur()`)
this.refs[name].blur()
}
render() {
const { fields, values, onChange } = this.props
return fields.map((field, i) => {
let enhancedFieldProps = { ...field.fieldProps } || {}
const isLastAndTextInput =
fields.length - 1 === i && isTextInput(field.type)
// Remember to set blurOnSubmit to false, to prevent keyboard flickering.
// blurOnSubmit={false}
enhancedFieldProps.blurOnSubmit = false
// Worth to mention, that onSubmitEditing callback is called after blur event.
// So the keyboard may go crazy if focused on next element immediately.
// So it might be helpful to set blurOnSubmit={false} to all elements in form but
// leave at true on last element, to allow Done button to blur the last input.
if (isLastAndTextInput) {
enhancedFieldProps.blurOnSubmit = false //?????
enhancedFieldProps.onSubmitEditing = this.props.onSubmit
enhancedFieldProps.returnKeyType = 'send'
}
// Adding a Ref to second TextInput
// ref={(input) => { this.secondTextInput = input; }}
enhancedFieldProps.ref = this._ref(field.name)
// Bind focus function to first TextInput's onSubmitEditing event.
// onSubmitEditing={() => { this.secondTextInput.focus(); }}
const nextField = fields[i + 1]
if (nextField && isTextInput(nextField.type)) {
enhancedFieldProps.returnKeyType = 'next'
enhancedFieldProps.onSubmitEditing = this._focus(nextField.name)
} else if (nextField) {
enhancedFieldProps.onSubmitEditing = this._blur(field.name)
enhancedFieldProps.returnKeyType = 'next'
}
return (
<Field
key={field.name}
name={field.name}
type={field.type}
label={field.label}
onChange={onChange}
value={get(values, field.name)} // support . operator
fieldProps={enhancedFieldProps}
/>
)
})
}
}
Fields.defaultProps = {
fields: [],
}
Fields.propTypes = {
onChange: PT.func.isRequired,
onSubmit: PT.func.isRequired,
fields: PT.arrayOf(
PT.shape({
name: PT.string.isRequired,
type: PT.string.isRequired,
label: PT.string,
})
),
}
export default Fields
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment