Support updating of ArrayInput #39

src/components/inputs/ArrayInput.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import input from '../../config/input.js'
 import StringInput from './StringInput'
-import NumberInput from './StringInput'
+import NumberInput from './NumberInput'
 
 import { margins } from '../../config/scales.js'
 
@@ -15,17 +15,38 @@ class ArrayInput extends React.Component {
     onChange: React.PropTypes.func,
   }
 
+  changeValue(idx, newValue) {
+    console.log(idx, newValue)
+    const values = this.values.slice(0)
+    values[idx] = newValue
+    this.props.onChange(values)
+  }
+
+  get values() {
+    return this.props.value || this.props.default || []
+  }
+
   render() {
-    const values = this.props.value || this.props.default || []
     const commonStyle = {
       width: '49%',
       marginRight: '1%',
     }
-    const inputs = values.map((v, i) => {
+    const inputs = this.values.map((v, i) => {
       if(this.props.type === 'number') {
-        return <NumberInput key={i} value={v} style={commonStyle} />
+        return <NumberInput
+          key={i}
+          value={v}
+          style={commonStyle}
+          onChange={this.changeValue.bind(this, i)}
+        />
+      } else {
+        return <StringInput
+          key={i}
+          value={v}
+          style={commonStyle}
+          onChange={this.changeValue.bind(this, i)}
+        />
       }
-      return <StringInput key={i} value={v} style={commonStyle} />
     })
 
     return <div style={{display: 'inline-block', width: '50%'}}>