diff --git a/src/components/fields/SpecField.jsx b/src/components/fields/SpecField.jsx index 1702b3fe..1f2aac6d 100644 --- a/src/components/fields/SpecField.jsx +++ b/src/components/fields/SpecField.jsx @@ -11,6 +11,7 @@ import ArrayInput from '../inputs/ArrayInput' import DynamicArrayInput from '../inputs/DynamicArrayInput' import FontInput from '../inputs/FontInput' import IconInput from '../inputs/IconInput' +import EnumInput from '../inputs/SelectInput' import capitalize from 'lodash.capitalize' const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image'] @@ -70,17 +71,10 @@ export default class SpecField extends React.Component { case 'enum': const options = Object.keys(this.props.fieldSpec.values).map(v => [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..8600ff98 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 { @@ -31,6 +33,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 +55,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/config/layout.json b/src/config/layout.json index e99b9e03..99344fb6 100644 --- a/src/config/layout.json +++ b/src/config/layout.json @@ -24,7 +24,8 @@ "line-cap", "line-join", "line-miter-limit", - "line-round-limit" + "line-round-limit", + "line-sort-key" ] } ] @@ -56,6 +57,13 @@ "fill-translate", "fill-translate-anchor" ] + }, + { + "title": "Layout properties", + "type": "properties", + "fields": [ + "fill-sort-key" + ] } ] }, @@ -93,7 +101,8 @@ "circle-pitch-scale", "circle-translate", "circle-translate-anchor", - "circle-pitch-alignment" + "circle-pitch-alignment", + "circle-sort-key" ] } ] @@ -107,7 +116,8 @@ "symbol-placement", "symbol-spacing", "symbol-avoid-edges", - "symbol-z-order" + "symbol-z-order", + "symbol-sort-key" ] }, { @@ -128,6 +138,7 @@ "text-justify", "text-anchor", "text-max-angle", + "text-writing-mode", "text-rotate", "text-keep-upright", "text-transform",