62 lines
1.5 KiB
JavaScript
62 lines
1.5 KiB
JavaScript
import React from "react"
|
|
import PropTypes from "prop-types"
|
|
import { View, Switch, Text } from "react-native"
|
|
import { reactAutoBind } from "auto-bind2"
|
|
|
|
export class BoundSwitch extends React.Component {
|
|
static propTypes = {
|
|
name: PropTypes.string.isRequired,
|
|
label: PropTypes.string,
|
|
binder: PropTypes.object.isRequired,
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
reactAutoBind(this)
|
|
this.state = props.binder.getBindingState(props.name)
|
|
}
|
|
|
|
handleValueChange(newValue) {
|
|
const { binder, name } = this.props
|
|
const state = binder.getBindingState(name)
|
|
|
|
if (!state.readOnly && !state.disabled) {
|
|
this.setState(binder.updateBindingValue(name, newValue))
|
|
}
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
if (nextProps.binder !== this.props.binder) {
|
|
this.setState(nextProps.binder.getBindingState(nextProps.name))
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { name, label } = this.props
|
|
const { visible, disabled, value } = this.state
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
display: visible ? "flex" : "none",
|
|
flexDirection: "row",
|
|
}}>
|
|
<Switch
|
|
disabled={disabled}
|
|
value={value}
|
|
onValueChange={this.handleValueChange}
|
|
/>
|
|
<Text
|
|
style={{
|
|
color: disabled ? "gray" : "black",
|
|
fontSize: 16,
|
|
paddingLeft: 8,
|
|
alignSelf: "center",
|
|
}}>
|
|
{label}
|
|
</Text>
|
|
</View>
|
|
)
|
|
}
|
|
}
|