Debug issues with work item CRUD

mobile/src/ui/BoundInput.js

@@ -20,7 +20,16 @@ export class BoundInput extends React.Component {
 
   constructor(props) {
     super(props)
-    this.state = props.binder.getFieldState(props.name)
+
+    const { name, binder } = this.props
+
+    this.state = binder.getFieldState(name)
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.binder !== this.props.binder) {
+      this.setState(nextProps.binder.getFieldState(nextProps.name))
+    }
   }
 
   @autobind

mobile/src/ui/BoundOptionStrip.js

@@ -1,15 +1,17 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { View, Text } from 'react-native'
-import { OptionStrip } from '.'
-import autobind from 'autobind-decorator'
+import React from "react"
+import PropTypes from "prop-types"
+import { View, Text } from "react-native"
+import { OptionStrip } from "."
+import autobind from "autobind-decorator"
 
 export class BoundOptionStrip extends React.Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     label: PropTypes.string,
     binder: PropTypes.object.isRequired,
-    options: PropTypes.arrayOf(PropTypes.shape({ value: PropTypes.string, text: PropTypes.string })).isRequired,
+    options: PropTypes.arrayOf(
+      PropTypes.shape({ value: PropTypes.string, text: PropTypes.string })
+    ).isRequired,
   }
 
   constructor(props) {
@@ -18,13 +20,8 @@ export class BoundOptionStrip extends React.Component {
   }
 
   @autobind
-  handleValueChange() {
-    const { binder, name } = this.props
-    const state = binder.getFieldState(name)
-
-    if (!state.readOnly && !state.disabled) {
-      this.setState(binder.updateFieldValue(name, !state.value))
-    }
+  handleValueChanged(newValue) {
+    this.setState(this.props.binder.updateFieldValue(this.props.name, newValue))
   }
 
   componentWillReceiveProps(nextProps) {
@@ -38,14 +35,19 @@ export class BoundOptionStrip extends React.Component {
     const { visible, disabled, value } = this.state
 
     return (
-      <View style={{
-          display: visible ? 'flex' : 'none',
-          flexDirection: 'column',
+      <View
+        style={{
+          display: visible ? "flex" : "none",
+          flexDirection: "column",
         }}>
-        <Text style={{ color: 'black', fontSize: 14, marginBottom: 5 }}>{label}</Text>
+        <Text style={{ color: "black", fontSize: 14, marginBottom: 5 }}>
+          {label}
+        </Text>
+        {/* TODO: Handle visible, disabled & read-only */}
         <OptionStrip
           value={value}
           options={options}
+          onValueChanged={this.handleValueChanged}
         />
       </View>
     )

mobile/src/ui/BoundText.js

@@ -0,0 +1,68 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { View, Text, TouchableHighlight } from "react-native"
+import autobind from "autobind-decorator"
+
+export class BoundText extends React.Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    label: PropTypes.string,
+    value: PropTypes.string,
+    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 { name, label, value } = this.props
+    const { visible, disabled } = this.state
+
+    if (!visible) {
+      return null
+    }
+
+    return (
+      <View>
+        <Text style={{ color: "black", fontSize: 14, marginBottom: 5 }}>
+          {label}
+        </Text>
+        <Text
+          style={{
+            paddingLeft: 5,
+            paddingRight: 5,
+            borderColor: "gray",
+            borderWidth: 1,
+            fontSize: 16,
+            paddingTop: 7,
+            paddingBottom: 7,
+          }}>
+          {value}
+        </Text>
+      </View>
+    )
+  }
+}

mobile/src/ui/OptionStrip.js

@@ -1,30 +1,40 @@
-import React, { Component } from 'react'
-import { View, Text, TouchableHighlight } from 'react-native'
-import PropTypes from 'prop-types'
-import autobind from 'autobind-decorator';
+import React, { Component } from "react"
+import { View, Text, TouchableHighlight } from "react-native"
+import PropTypes from "prop-types"
+import autobind from "autobind-decorator"
 
 export class OptionStrip extends Component {
   static propTypes = {
-    options: PropTypes.arrayOf(PropTypes.shape({ value: PropTypes.string, text: PropTypes.string })).isRequired,
-    value: PropTypes.string.isRequired,
+    options: PropTypes.arrayOf(
+      PropTypes.shape({ value: PropTypes.string, text: PropTypes.string })
+    ).isRequired,
+    value: PropTypes.string,
     onValueChanged: PropTypes.func,
   }
 
   constructor(props) {
     super(props)
     this.state = {
-      selectedOption: this.getSelectedOption(props.options, props.value)
+      selectedOption: this.getSelectedOption(props.options, props.value),
     }
   }
 
   @autobind
   getSelectedOption(options, value) {
-    return options.find((option) => (value === option.value)) || options[0]
+    return options.find((option) => value === option.value) || null
   }
 
   componentWillReceiveProps(newProps) {
-    if (newProps.options !== this.props.options || newProps.value !== this.props.value) {
-      this.setState({ selectedIndex: this.getSelectedIndex(newProps.options, newProps.value)})
+    if (
+      newProps.options !== this.props.options ||
+      newProps.value !== this.props.value
+    ) {
+      this.setState({
+        selectedOption: this.getSelectedOption(
+          newProps.options,
+          newProps.value
+        ),
+      })
     }
   }
 
@@ -42,25 +52,50 @@ export class OptionStrip extends Component {
     const { style, options, value } = this.props
     const { selectedOption } = this.state
 
+    // TODO: Handle visible, disabled & read-only
+
     return (
-      <View style={{ flexDirection: 'row' }}>
+      <View style={{ flexDirection: "row" }}>
         {options.map((option, index) => (
           <TouchableHighlight
             key={index}
-            underlayColor='#3BB0FD'
+            underlayColor="#3BB0FD"
             style={[
               { flexGrow: 1, flexBasis: 0, height: 40 },
-              option === selectedOption && { backgroundColor: '#3BB0FD' },
-              index === 0 && { borderTopLeftRadius: 6, borderBottomLeftRadius: 6 },
-              index === options.length - 1 && { borderTopRightRadius: 6, borderBottomRightRadius: 6 }
+              option === selectedOption && { backgroundColor: "#3BB0FD" },
+              index === 0 && {
+                borderTopLeftRadius: 6,
+                borderBottomLeftRadius: 6,
+              },
+              index === options.length - 1 && {
+                borderTopRightRadius: 6,
+                borderBottomRightRadius: 6,
+              },
             ]}
             onPress={() => this.handlePress(option)}>
-            <View style={[
-              { flex: 1, justifyContent: 'center', borderTopWidth: 1, borderBottomWidth: 1, borderLeftWidth: 1, borderColor: 'black' },
-              index === 0 && { borderTopLeftRadius: 6, borderBottomLeftRadius: 6 },
-              index === options.length - 1 && { borderRightWidth: 1, borderTopRightRadius: 6, borderBottomRightRadius: 6 }
-            ]}>
-              <Text style={{ alignSelf: 'center', color: 'black' }}>{option.text}</Text>
+            <View
+              style={[
+                {
+                  flex: 1,
+                  justifyContent: "center",
+                  borderTopWidth: 1,
+                  borderBottomWidth: 1,
+                  borderLeftWidth: 1,
+                  borderColor: "black",
+                },
+                index === 0 && {
+                  borderTopLeftRadius: 6,
+                  borderBottomLeftRadius: 6,
+                },
+                index === options.length - 1 && {
+                  borderRightWidth: 1,
+                  borderTopRightRadius: 6,
+                  borderBottomRightRadius: 6,
+                },
+              ]}>
+              <Text style={{ alignSelf: "center", color: "black" }}>
+                {option.text}
+              </Text>
             </View>
           </TouchableHighlight>
         ))}