From cda65878d0adf02909c6d46881a521a1cb41e3b2 Mon Sep 17 00:00:00 2001 From: Dan Kaufhold Date: Wed, 29 Mar 2017 08:35:53 +0200 Subject: [PATCH] Added RNBaseSelectInput.js Added select input based on Picker component compatible with react-get-form-data --- src/RNBaseSelectInput.js | 90 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 src/RNBaseSelectInput.js diff --git a/src/RNBaseSelectInput.js b/src/RNBaseSelectInput.js new file mode 100644 index 0000000..0c0062f --- /dev/null +++ b/src/RNBaseSelectInput.js @@ -0,0 +1,90 @@ +import React, { Component } from 'react' +import { Picker, StyleSheet } from 'react-native' +import { Formfield } from 'react-get-form-data' + + +class BaseSelectInput extends Component { + + static propTypes = { + valueInitial: React.PropTypes.number.isRequired, + choices: React.PropTypes.array.isRequired, + name: React.PropTypes.string.isRequired, + onChange: React.PropTypes.func, + } + + constructor (props) { + super(props) + this.state = { value: props.valueInitial } + } + + handleValueChange = (value) => { + let { name, onChange } = this.props + let { formContext } = this.context + this.setState({ value: value }) + if (formContext && formContext.handleChange) { + formContext.handleChange('', name, value, true) + } + if (onChange) { + onChange(value) + } + } + + componentDidMount = () => { + let { formContext } = this.context + if (formContext && formContext.handleChange) { + formContext.handleChange('', this.props.name, this.state.value, false) + if (this.props.onChange) { + this.props.onChange(this.state.value) + } + } + } + + componentWillReceiveProps = (nextProps) => { + if (this.props.valueInitial !== nextProps.valueInitial) { + let value = this.getValue(nextProps.type, nextProps.valueInitial) + this.setState({ value: value }) + let { formContext } = this.context + + /* istanbul ignore next */ + if (formContext && formContext.handleChange) { + formContext.handleChange('', nextProps.name, value, false) + if (nextProps.onChange) { + nextProps.onChange(value) + } + } + } + } + + getDisplayValue = (value) => { + if (value === null) { + return this.props.name + } + if (value === undefined) { + return this.props.name + } + return value + } + + render () { + let { choices } = this.props + return ( + + {choices.map(choice => )} + + + ) + } +} + +const styles = StyleSheet.create({ + base: {} +}) + + +export default Formfield(BaseSelectInput)