Add DynamicArrayInput for handling variable-length array fields

src/components/fields/SpecField.jsx

@@ -8,6 +8,7 @@ import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
 import MultiButtonInput from '../inputs/MultiButtonInput'
 import ArrayInput from '../inputs/ArrayInput'
+import DynamicArrayInput from '../inputs/DynamicArrayInput'
 import FontInput from '../inputs/FontInput'
 import IconInput from '../inputs/IconInput'
 import capitalize from 'lodash.capitalize'
@@ -105,11 +106,18 @@ export default class SpecField extends React.Component {
             fonts={this.props.fieldSpec.values}
           />
         } else {
-          return <ArrayInput
-            {...commonProps}
-            type={this.props.fieldSpec.value}
-            length={this.props.fieldSpec.length}
-          />
+          if (this.props.fieldSpec.length) {
+            return <ArrayInput
+              {...commonProps}
+              type={this.props.fieldSpec.value}
+              length={this.props.fieldSpec.length}
+            />
+          } else {
+            return <DynamicArrayInput
+              {...commonProps}
+              type={this.props.fieldSpec.value}
+            />
+          }
         }
       default: return null
     }

src/components/inputs/DynamicArrayInput.jsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import StringInput from './StringInput'
+import NumberInput from './NumberInput'
+import Button from '../Button'
+import DeleteIcon from 'react-icons/lib/md/delete'
+import DocLabel from '../fields/DocLabel'
+
+
+class DynamicArrayInput extends React.Component {
+  static propTypes = {
+    value: React.PropTypes.array,
+    type: React.PropTypes.string,
+    default: React.PropTypes.array,
+    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 || []
+  }
+
+  addValue() {
+    const values = this.values.slice(0)
+    if (this.props.type === 'number') {
+      values.push(0)
+    } else {
+      values.push("")
+    }
+    
+
+    this.props.onChange(values)
+  }
+
+  deleteValue(valueIdx) {
+    const values = this.values.slice(0)
+    values.splice(valueIdx, 1)
+
+    this.props.onChange(values)
+  }
+
+  render() {
+    const inputs = this.values.map((v, i) => {
+      const deleteValueBtn= <DeleteValueButton onClick={this.deleteValue.bind(this, i)} />
+      const input = this.props.type === 'number' 
+        ? <NumberInput
+          key={i}
+          value={v}
+          onChange={this.changeValue.bind(this, i)}
+        />
+        : <StringInput
+          key={i}
+          value={v}
+          onChange={this.changeValue.bind(this, i)}
+        />
+
+      return <div
+        style={this.props.style}
+        className="maputnik-array-block"
+        >
+        <div className="maputnik-array-block-action">
+          {deleteValueBtn}
+        </div>
+        <div className="maputnik-array-block-content">
+          {input}
+        </div>
+      </div>
+    })
+
+    return <div className="maputnik-array">
+      {inputs}
+      <Button
+        className="maputnik-array-add-value"
+        onClick={this.addValue.bind(this)}
+      >
+        Add value
+      </Button>
+    </div>
+  }
+}
+
+function DeleteValueButton(props) {
+    return <Button
+      className="maputnik-delete-stop"
+      onClick={props.onClick}
+    >
+      <DocLabel
+        label={<DeleteIcon />}
+        doc={"Remove array entry."}
+      />
+    </Button>
+  }
+
+export default DynamicArrayInput

src/styles/_input.scss

@@ -52,6 +52,25 @@
   > * {
     margin-bottom: $margin-3;
   }
+
+  .maputnik-array-block {
+    .maputnik-array-block-action {
+      vertical-align: top;
+      display: inline-block;
+      width: 14%;
+    }
+
+    .maputnik-array-block-content {
+      vertical-align: top;
+      display: inline-block;
+      width: 86%;
+    }
+  }
+
+  .maputnik-array-add-value {
+    display: inline-block;
+    float: right;
+  }
 }
 
 // SELECT