Added layer comments via 'metadata.maputnik:comment' (issue #28)

src/components/inputs/StringInput.jsx

@@ -20,16 +20,33 @@ class StringInput extends React.Component {
   }
 
   render() {
-    return <input
-      className="maputnik-string"
-      style={this.props.style}
-      value={this.state.value}
-      placeholder={this.props.default}
-      onChange={e => 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)
-      }}
-    />
+      }
+    });
   }
 }
 

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 <InputBlock label={"Comments"}>
+      <StringInput
+        multi={true}
+        value={this.props.value}
+        onChange={this.props.onChange}
+        default="Comment..."
+      />
+    </InputBlock>
+  }
+}
+
+export default MetadataBlock

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 <div>
         <LayerIdBlock
@@ -140,6 +146,10 @@ export default class LayerEditor extends React.Component {
           value={this.props.layer.maxzoom}
           onChange={v => this.changeProperty(null, 'maxzoom', v)}
         />
+        <CommentBlock
+          value={comment}
+          onChange={v => this.changeProperty('metadata', 'maputnik:comment', v == ""  ? undefined : v)}
+        />
       </div>
       case 'filter': return <div>
         <div className="maputnik-filter-editor-wrapper">

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
-    }
   }
 }

src/styles/_input.scss

@@ -15,6 +15,11 @@
 
 .maputnik-string {
   @extend .maputnik-input;
+
+  &--multi {
+    resize: vertical;
+    height: 78px;
+  }
 }
 
 .maputnik-number {