Target tracking location, BoundHeader, WorkItem page done.

mobile/src/ui/BoundHeader.js

@@ -0,0 +1,60 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Header } from '.'
+import autobind from 'autobind-decorator'
+
+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)
+
+    const { name, binder } = this.props
+
+    binder.addListener(name, this.updateValue)
+    this.state = binder.getFieldState(name)
+  }
+
+  @autobind
+  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 { 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} />
+    )
+  }
+}