81 lines
2.1 KiB
JavaScript
81 lines
2.1 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,
|
|
onPress: PropTypes.func,
|
|
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
reactAutoBind(this)
|
|
|
|
const { name, binder } = this.props
|
|
|
|
binder.addListener(name, this.updateValue)
|
|
this.state = binder.getBindingState(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.getBindingState(nextProps.name))
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { name, title, 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>
|
|
)
|
|
}
|
|
}
|
|
}
|