96 lines
2.3 KiB
JavaScript
96 lines
2.3 KiB
JavaScript
import React from "react"
|
|
import PropTypes from "prop-types"
|
|
import { TextInput, Text, View, Platform } from "react-native"
|
|
import { reactAutoBind } from "auto-bind2"
|
|
|
|
export class BoundInput extends React.Component {
|
|
static propTypes = {
|
|
name: PropTypes.string.isRequired,
|
|
message: PropTypes.string,
|
|
label: PropTypes.string,
|
|
binder: PropTypes.object.isRequired,
|
|
password: PropTypes.bool,
|
|
placeholder: PropTypes.string,
|
|
lines: PropTypes.number,
|
|
}
|
|
|
|
static defaultProps = {
|
|
lines: 1,
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
reactAutoBind(this)
|
|
|
|
const { name, binder } = this.props
|
|
|
|
this.state = binder.getBindingState(name)
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
if (nextProps.binder !== this.props.binder) {
|
|
this.setState(nextProps.binder.getBindingState(nextProps.name))
|
|
}
|
|
}
|
|
|
|
handleChangeText(newText) {
|
|
const { binder, name } = this.props
|
|
|
|
if (binder) {
|
|
this.setState(binder.updateBindingValue(name, newText))
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { label, password, name, placeholder, message, lines } = this.props
|
|
const { visible, disabled, readOnly, value, valid } = this.state
|
|
|
|
if (!visible) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<View style={{ width: "100%" }}>
|
|
<Text
|
|
style={{
|
|
color: "black",
|
|
fontSize: 14,
|
|
marginBottom: 5,
|
|
}}>
|
|
{label}
|
|
</Text>
|
|
<TextInput
|
|
style={{
|
|
width: "100%",
|
|
paddingLeft: 5,
|
|
paddingRight: 5,
|
|
borderColor: "gray",
|
|
borderWidth: 1,
|
|
fontSize: 16,
|
|
paddingTop: 7,
|
|
paddingBottom: Platform.OS === "ios" ? 7 : 0,
|
|
textAlignVertical: "top",
|
|
marginBottom: 5,
|
|
}}
|
|
multiline={lines > 1}
|
|
numberOfLines={lines}
|
|
editable={!disabled && !readOnly}
|
|
autoCapitalize="none"
|
|
underlineColorAndroid="white"
|
|
value={value}
|
|
secureTextEntry={password}
|
|
onChangeText={this.handleChangeText}
|
|
placeholder={placeholder}
|
|
/>
|
|
<Text
|
|
style={{
|
|
fontSize: 12,
|
|
color: "red",
|
|
}}>
|
|
{valid ? " " : message}
|
|
</Text>
|
|
</View>
|
|
)
|
|
}
|
|
}
|