diff --git a/src/components/App.jsx b/src/components/App.jsx index 39bd3ccb..e816eaa0 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -645,6 +645,7 @@ export default class App extends React.Component { /> const layerEditor = selectedLayer ? [v, capitalize(v)]) - if(options.length <= 3 && optionsLabelLength(options) <= 20) { - return - } else { - return - } + return case 'formatted': case 'string': if(iconProperties.indexOf(this.props.fieldName) >= 0) { @@ -119,6 +113,7 @@ export default class SpecField extends React.Component { } else { return } diff --git a/src/components/inputs/DynamicArrayInput.jsx b/src/components/inputs/DynamicArrayInput.jsx index 7d86227b..84d6bb9e 100644 --- a/src/components/inputs/DynamicArrayInput.jsx +++ b/src/components/inputs/DynamicArrayInput.jsx @@ -5,6 +5,8 @@ import NumberInput from './NumberInput' import Button from '../Button' import {MdDelete} from 'react-icons/md' import DocLabel from '../fields/DocLabel' +import EnumInput from '../inputs/SelectInput' +import capitalize from 'lodash.capitalize' class DynamicArrayInput extends React.Component { @@ -14,6 +16,7 @@ class DynamicArrayInput extends React.Component { default: PropTypes.array, onChange: PropTypes.func, style: PropTypes.object, + fieldSpec: PropTypes.object, } changeValue(idx, newValue) { @@ -31,6 +34,11 @@ class DynamicArrayInput extends React.Component { const values = this.values.slice(0) if (this.props.type === 'number') { values.push(0) + } + else if (this.props.type === 'enum') { + const {fieldSpec} = this.props; + const defaultValue = Object.keys(fieldSpec.values)[0]; + values.push(defaultValue); } else { values.push("") } @@ -48,15 +56,28 @@ class DynamicArrayInput extends React.Component { render() { const inputs = this.values.map((v, i) => { const deleteValueBtn= - const input = this.props.type === 'number' - ? - : [v, capitalize(v)]); + + input = + } + else { + input = + } return
{ + sum += label.length + }) + return sum +} + + +class EnumInput extends React.Component { + static propTypes = { + "data-wd-key": PropTypes.string, + value: PropTypes.string, + style: PropTypes.object, + default: PropTypes.string, + onChange: PropTypes.func, + options: PropTypes.array, + } + + render() { + const {options, value, onChange} = this.props; + + if(options.length <= 3 && optionsLabelLength(options) <= 20) { + return + } else { + return + } + } +} + +export default StringInput diff --git a/src/components/inputs/NumberInput.jsx b/src/components/inputs/NumberInput.jsx index 3071e35c..0de1fa48 100644 --- a/src/components/inputs/NumberInput.jsx +++ b/src/components/inputs/NumberInput.jsx @@ -24,11 +24,14 @@ class NumberInput extends React.Component { value: props.value }; } + return {}; } changeValue(newValue) { this.setState({editing: true}); - const value = parseFloat(newValue) + const value = (newValue === "" || newValue === undefined) ? + undefined : + parseFloat(newValue); const hasChanged = this.state.value !== value if(this.isValid(value) && hasChanged) { @@ -38,6 +41,10 @@ class NumberInput extends React.Component { } isValid(v) { + if (v === undefined) { + return true; + } + const value = parseFloat(v) if(isNaN(value)) { return false @@ -76,7 +83,7 @@ class NumberInput extends React.Component { spellCheck="false" className="maputnik-number" placeholder={this.props.default} - value={this.state.value} + value={this.state.value || ""} onChange={e => this.changeValue(e.target.value)} onBlur={this.resetValue} /> diff --git a/src/config/layout.json b/src/config/layout.json index e99b9e03..7d23808a 100644 --- a/src/config/layout.json +++ b/src/config/layout.json @@ -128,11 +128,14 @@ "text-justify", "text-anchor", "text-max-angle", + "text-writing-mode", "text-rotate", "text-keep-upright", "text-transform", "text-offset", - "text-optional" + "text-optional", + "text-variable-anchor", + "text-radial-offset" ] }, {