diff --git a/src/components/inputs/StringInput.jsx b/src/components/inputs/StringInput.jsx index 34a550a..5b7753e 100644 --- a/src/components/inputs/StringInput.jsx +++ b/src/components/inputs/StringInput.jsx @@ -20,16 +20,33 @@ class StringInput extends React.Component { } render() { - return this.setState({ value: e.target.value })} - onBlur={() => { + let tag; + let classes; + + if(!!this.props.multi) { + tag = "textarea" + classes = [ + "maputnik-string", + "maputnik-string--multi" + ] + } + else { + tag = "input" + classes = [ + "maputnik-string" + ] + } + + return React.createElement(tag, { + className: classes.join(" "), + style: this.props.style, + value: this.state.value, + placeholder: this.props.default, + onChange: e => this.setState({ value: e.target.value }), + onBlur: () => { if(this.state.value!==this.props.value) this.props.onChange(this.state.value) - }} - /> + } + }); } } diff --git a/src/components/layers/CommentBlock.jsx b/src/components/layers/CommentBlock.jsx new file mode 100644 index 0000000..996ca1c --- /dev/null +++ b/src/components/layers/CommentBlock.jsx @@ -0,0 +1,24 @@ +import React from 'react' + +import InputBlock from '../inputs/InputBlock' +import StringInput from '../inputs/StringInput' + +class MetadataBlock extends React.Component { + static propTypes = { + value: React.PropTypes.string, + onChange: React.PropTypes.func.isRequired, + } + + render() { + return + + + } +} + +export default MetadataBlock diff --git a/src/components/layers/LayerEditor.jsx b/src/components/layers/LayerEditor.jsx index 27003f2..4494b85 100644 --- a/src/components/layers/LayerEditor.jsx +++ b/src/components/layers/LayerEditor.jsx @@ -8,6 +8,7 @@ import LayerTypeBlock from './LayerTypeBlock' import LayerIdBlock from './LayerIdBlock' import MinZoomBlock from './MinZoomBlock' import MaxZoomBlock from './MaxZoomBlock' +import CommentBlock from './CommentBlock' import LayerSourceBlock from './LayerSourceBlock' import LayerSourceLayerBlock from './LayerSourceLayerBlock' @@ -110,6 +111,11 @@ export default class LayerEditor extends React.Component { } renderGroupType(type, fields) { + let comment = "" + if(this.props.layer.metadata) { + comment = this.props.layer.metadata['maputnik:comment'] + } + switch(type) { case 'layer': return
this.changeProperty(null, 'maxzoom', v)} /> + this.changeProperty('metadata', 'maputnik:comment', v == "" ? undefined : v)} + />
case 'filter': return
diff --git a/src/libs/layer.js b/src/libs/layer.js index 7092fdb..f018c46 100644 --- a/src/libs/layer.js +++ b/src/libs/layer.js @@ -27,18 +27,41 @@ export function changeType(layer, newType) { * to a {@newValue}. */ export function changeProperty(layer, group, property, newValue) { - if(group) { - return { - ...layer, - [group]: { - ...layer[group], + // Remove the property if undefined + if(newValue === undefined) { + if(group) { + const newLayer = { + ...layer + }; + delete newLayer[group][property]; + + // Remove the group if it is now empty + if(Object.keys(newLayer[group]).length < 1) { + delete newLayer[group]; + } + return newLayer; + } else { + const newLayer = { + ...layer + }; + delete newLayer[property]; + return newLayer; + } + } + else { + if(group) { + return { + ...layer, + [group]: { + ...layer[group], + [property]: newValue + } + } + } else { + return { + ...layer, [property]: newValue } } - } else { - return { - ...layer, - [property]: newValue - } } } diff --git a/src/styles/_input.scss b/src/styles/_input.scss index 3f6682c..11bf197 100644 --- a/src/styles/_input.scss +++ b/src/styles/_input.scss @@ -15,6 +15,11 @@ .maputnik-string { @extend .maputnik-input; + + &--multi { + resize: vertical; + height: 78px; + } } .maputnik-number {