diff --git a/src/components/fields/SpecField.jsx b/src/components/fields/SpecField.jsx
index 813f65e..4ec1724 100644
--- a/src/components/fields/SpecField.jsx
+++ b/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
+ if (this.props.fieldSpec.length) {
+ return
+ } else {
+ return
+ }
}
default: return null
}
diff --git a/src/components/inputs/DynamicArrayInput.jsx b/src/components/inputs/DynamicArrayInput.jsx
new file mode 100644
index 0000000..e43bc3b
--- /dev/null
+++ b/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=
+ const input = this.props.type === 'number'
+ ?
+ :
+
+ return
+
+ {deleteValueBtn}
+
+
+ {input}
+
+
+ })
+
+ return
+ {inputs}
+
+
+ }
+}
+
+function DeleteValueButton(props) {
+ return
+ }
+
+export default DynamicArrayInput
diff --git a/src/styles/_input.scss b/src/styles/_input.scss
index 11bf197..82ad5a5 100644
--- a/src/styles/_input.scss
+++ b/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