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 {