68 lines
1.9 KiB
JavaScript
68 lines
1.9 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { View, Text, TouchableHighlight } from 'react-native'
|
|
import { reactAutoBind } from 'auto-bind2'
|
|
|
|
export class BoundButton extends React.Component {
|
|
static propTypes = {
|
|
name: PropTypes.string.isRequired,
|
|
title: PropTypes.string,
|
|
binder: PropTypes.object.isRequired,
|
|
submit: PropTypes.string,
|
|
onPress: PropTypes.func,
|
|
width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
reactAutoBind(this)
|
|
|
|
let { name, binder } = this.props
|
|
|
|
binder.addListener(name, this.updateValue)
|
|
this.state = binder.getFieldState(name)
|
|
}
|
|
|
|
updateValue(e) {
|
|
this.setState(e.state)
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.props.binder.removeListener(this.props.name, this.updateValue)
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
if (nextProps.binder !== this.props.binder) {
|
|
this.props.binder.removeListener(this.props.name, this.updateValue)
|
|
nextProps.binder.addListener(nextProps.name, this.updateValue)
|
|
this.setState(nextProps.binder.getFieldState(nextProps.name))
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { name, title, submit, width, onPress } = this.props
|
|
const { visible, disabled } = this.state
|
|
|
|
if (!visible) {
|
|
return null
|
|
}
|
|
|
|
if (disabled) {
|
|
return (
|
|
<View style={{ flexDirection: 'column', justifyContent: 'center', paddingHorizontal: 10, height: 40, width , backgroundColor: '#E0E0E0' }}>
|
|
<Text style={{ alignSelf: 'center', color: '#AAAAAA' }}>{title}</Text>
|
|
</View>
|
|
)
|
|
} else {
|
|
return (
|
|
<TouchableHighlight
|
|
onPress={onPress}
|
|
style={{ justifyContent: 'center', paddingHorizontal: 10, height: 40, width, backgroundColor: '#3BB0FD' }}
|
|
underlayColor='#1A72AC'>
|
|
<Text style={{ alignSelf: 'center', color: 'black' }}>{title}</Text>
|
|
</TouchableHighlight>
|
|
)
|
|
}
|
|
}
|
|
}
|