Target tracking location, BoundHeader, WorkItem page done.

mobile/src/ui/BoundButton.js

@@ -8,7 +8,6 @@ export class BoundButton extends React.Component {
     name: PropTypes.string.isRequired,
     title: PropTypes.string,
     binder: PropTypes.object.isRequired,
-    submit: PropTypes.string,
     onPress: PropTypes.func,
     width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
   }
@@ -16,7 +15,7 @@ export class BoundButton extends React.Component {
   constructor(props) {
     super(props)
 
-    let { name, binder } = this.props
+    const { name, binder } = this.props
 
     binder.addListener(name, this.updateValue)
     this.state = binder.getFieldState(name)
@@ -40,7 +39,7 @@ export class BoundButton extends React.Component {
   }
 
   render() {
-    const { name, title, submit, width, onPress } = this.props
+    const { name, title, width, onPress } = this.props
     const { visible, disabled } = this.state
 
     if (!visible) {

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} />
+    )
+  }
+}

mobile/src/ui/BoundInput.js

@@ -10,7 +10,12 @@ export class BoundInput extends React.Component {
     label: PropTypes.string,
     binder: PropTypes.object.isRequired,
     password: PropTypes.bool,
-    placeholder: PropTypes.string
+    placeholder: PropTypes.string,
+    lines: PropTypes.number,
+  }
+
+  static defaultProps = {
+    lines: 1,
   }
 
   constructor(props) {
@@ -29,19 +34,30 @@ export class BoundInput extends React.Component {
   }
 
   render() {
-    const { label, password, name, placeholder, message } = this.props
+    const { label, password, name, placeholder, message, lines } = this.props
     const { visible, disabled, value, valid } = this.state
 
     if (!visible) {
       return null
     }
 
-    // TODO: Disabled
-
     return (
       <View style={{ width: '100%' }}>
         <Text style={{ color: 'black', fontSize: 14, marginBottom: 5 }}>{label}</Text>
-        <TextInput style={{ width: '100%', paddingLeft: 5, paddingRight: 5, height: 40, borderColor: 'gray', borderWidth: 1, fontSize: 16 }}
+        <TextInput
+          style={{
+            width: '100%',
+            paddingLeft: 5,
+            paddingRight: 5,
+            borderColor: 'gray',
+            borderWidth: 1,
+            fontSize: 16,
+            paddingTop: 7,
+            paddingBottom: 7,
+          }}
+          multiline={lines > 1}
+          numberOfLines={lines}
+          editable={!disabled}
           autoCapitalize='none'
           underlineColorAndroid='white'
           value={value}

mobile/src/ui/Header.js

@@ -9,17 +9,36 @@ const headerButtonShape = { icon: PropTypes.string.isRequired, onPress: PropType
 export class Header extends Component {
   static propTypes = {
     title: PropTypes.string.isRequired,
-    leftButton: PropTypes.shape(headerButtonShape),
+    leftButton: PropTypes.shape(headerButtonShape).isRequired,
     rightButton: PropTypes.shape(headerButtonShape),
+    disabled: PropTypes.bool,
   }
 
   static defaultProps = {
     rightButton: { icon: 'none' },
     leftButton: { icon: 'none' },
+    visible: true,
   }
 
   render() {
-    const { title, leftButton, rightButton } = this.props
+    const { title, leftButton, rightButton, disabled, visible } = this.props
+    let right = null
+
+    if (!rightButton) {
+      right = (
+        <Icon name='' size={24} style={{ marginRight: 15 }} />
+      )
+    } else if (disabled) {
+      right = (
+        <Icon name={rightButton.icon} size={24} style={{ marginRight: 15, tintColor: 'lightgrey' }} />
+      )
+    } else {
+      right = (
+        <TouchableOpacity onPress={rightButton.onPress}>
+          <Icon name={rightButton.icon} size={24} style={{ marginRight: 15, tintColor: 'grey' }} />
+        </TouchableOpacity>
+      )
+    }
 
     return (
       <View style={{
@@ -35,9 +54,7 @@ export class Header extends Component {
           <Icon name={leftButton.icon} size={24} style={{ marginLeft: 15, tintColor: 'gray' }} />
         </TouchableOpacity>
         <Text style={{ color: 'gray', fontSize: 18, }}>{title}</Text>
-        <TouchableOpacity onPress={rightButton.onPress}>
-          <Icon name={rightButton.icon} size={24} style={{ marginRight: 15, tintColor: 'gray' }} />
-        </TouchableOpacity>
+        {right}
       </View>
     )
   }

mobile/src/ui/Icon.js

@@ -13,6 +13,7 @@ const images = {
   settings: require('./images/settings.png'),
   add: require('./images/add.png'),
   done: require('./images/done.png'),
+  target: require('./images/target.png'),
 }
 
 export class Icon extends Component {

mobile/src/ui/OptionStrip.js

@@ -23,7 +23,7 @@ export class OptionStrip extends Component {
   }
 
   componentWillReceiveProps(newProps) {
-    if (newProps.options !== props.options || newProps.value !== props.value) {
+    if (newProps.options !== this.props.options || newProps.value !== this.props.value) {
       this.setState({ selectedIndex: this.getSelectedIndex(newProps.options, newProps.value)})
     }
   }

mobile/src/ui/index.js

@@ -1,8 +1,9 @@
-export { BoundSwitch } from './BoundSwitch'
-export { BoundInput } from './BoundInput'
-export { BoundButton } from './BoundButton'
-export { BoundOptionStrip } from './BoundOptionStrip'
 export { Icon } from './Icon'
 export { Header } from './Header'
 export { PhotoButton } from './PhotoButton'
 export { OptionStrip } from './OptionStrip'
+export { BoundSwitch } from './BoundSwitch'
+export { BoundInput } from './BoundInput'
+export { BoundButton } from './BoundButton'
+export { BoundOptionStrip } from './BoundOptionStrip'
+export { BoundHeader } from './BoundHeader'