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