Add ArrayInput

src/components/fields/SpecField.jsx

@@ -8,6 +8,7 @@ import CheckboxInput from '../inputs/CheckboxInput'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
 import MultiButtonInput from '../inputs/MultiButtonInput'
+import ArrayInput from '../inputs/ArrayInput'
 import capitalize from 'lodash.capitalize'
 
 
@@ -41,6 +42,7 @@ export default class SpecField extends React.Component {
     value: React.PropTypes.oneOfType([
       React.PropTypes.string,
       React.PropTypes.number,
+      React.PropTypes.array,
     ]),
     /** Override the style of the field */
     style: React.PropTypes.object,
@@ -91,6 +93,14 @@ export default class SpecField extends React.Component {
           {...commonProps}
         />
       )
+      case 'array': return (
+        <ArrayInput
+          {...commonProps}
+          type={this.props.fieldSpec.value}
+          length={this.props.fieldSpec.length}
+          default={this.props.fieldSpec.default}
+        />
+      )
       default: return null
     }
   }

src/components/inputs/ArrayInput.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import input from '../../config/input.js'
+import StringInput from './StringInput'
+import NumberInput from './StringInput'
+
+import { margins } from '../../config/scales.js'
+
+class ArrayInput extends React.Component {
+  static propTypes = {
+    value: React.PropTypes.array,
+    type: React.PropTypes.string,
+    length: React.PropTypes.number,
+    default: React.PropTypes.array,
+    style: React.PropTypes.object,
+    onChange: React.PropTypes.func,
+  }
+
+  render() {
+    const values = this.props.value || this.props.default || []
+    const commonStyle = {
+      width: '15%',
+      marginRight: margins[0],
+    }
+    const inputs = values.map((v, i) => {
+      if(this.props.type === 'number') {
+        return <NumberInput key={i} value={v} style={commonStyle} />
+      }
+      return <StringInput key={i} value={v} style={commonStyle} />
+    })
+
+    return <div style={{display: 'inline-block', width: '51%'}}>
+      {inputs}
+    </div>
+  }
+}
+
+export default ArrayInput