Files
deighton-ar/mobile/src/ui/BoundHeader.js
2018-05-28 16:12:20 -07:00

65 lines
1.5 KiB
JavaScript

import React from "react"
import PropTypes from "prop-types"
import { Header } from "."
import { reactAutoBind } from "auto-bind2"
const headerButtonShape = {
icon: PropTypes.string.isRequired,
onPress: PropTypes.func,
}
export class BoundHeader extends React.Component {
static propTypes = {
name: PropTypes.string.isRequired,
title: PropTypes.string,
leftButton: PropTypes.shape(headerButtonShape).isRequired,
rightButton: PropTypes.shape(headerButtonShape),
binder: PropTypes.object.isRequired,
}
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 { title, leftButton } = this.props
let { rightButton } = this.props
const { visible, disabled } = this.state
if (!visible) {
rightButton = null
}
return (
<Header
title={title}
disabled={disabled}
leftButton={leftButton}
rightButton={rightButton}
/>
)
}
}