From 61d24fdb2b85b71e205b0110b53f0d7a3a960fe3 Mon Sep 17 00:00:00 2001
From: lukasmartinelli <me@lukasmartinelli.ch>
Date: Sat, 10 Sep 2016 22:58:15 +0200
Subject: [PATCH] Example how to display fields from spec

---
 src/fields/enum.jsx   | 18 ++++++++++++++++++
 src/layers/editor.jsx |  8 ++++++--
 src/layers/fill.jsx   |  3 ++-
 src/layers/line.jsx   | 34 +++++++++++++++++++++++++++++++++-
 4 files changed, 59 insertions(+), 4 deletions(-)
 create mode 100644 src/fields/enum.jsx

diff --git a/src/fields/enum.jsx b/src/fields/enum.jsx
new file mode 100644
index 0000000..1b6a22b
--- /dev/null
+++ b/src/fields/enum.jsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { Select, Input } from 'rebass'
+
+export default class EnumField extends React.Component {
+	static propTypes = {
+		name: React.PropTypes.string.isRequired,
+    values: React.PropTypes.array.isRequired,
+    value: React.PropTypes.string.isRequired,
+    doc: React.PropTypes.string,
+  }
+
+	render() {
+		const options = this.props.values.map(val => {
+			return {children: val, value: val}
+		})
+		return <Select name={this.props.name} options={options} label={this.props.name} />
+	}
+}
diff --git a/src/layers/editor.jsx b/src/layers/editor.jsx
index 023ba20..d0d4e69 100644
--- a/src/layers/editor.jsx
+++ b/src/layers/editor.jsx
@@ -91,11 +91,15 @@ export class LayerEditor extends React.Component {
 		}
 
 		if (type === "line") {
-			return <LineLayer />
+			return <LineLayer
+				layer={this.props.layer}
+			/>
 		}
 
 		if (type === "symbol") {
-			return <SymbolLayer />
+			return <SymbolLayer
+				layer={this.props.layer}
+			/>
 		}
 
 		return <UnsupportedLayer />
diff --git a/src/layers/fill.jsx b/src/layers/fill.jsx
index 6e4f9c8..1a9623d 100644
--- a/src/layers/fill.jsx
+++ b/src/layers/fill.jsx
@@ -1,10 +1,11 @@
 import React from 'react'
+import Immutable from 'immutable'
 import { Checkbox, Input } from 'rebass'
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 export default class FillLayer extends React.Component {
 	static propTypes = {
-    layer: React.PropTypes.object.isRequired,
+		layer: React.PropTypes.instanceOf(Immutable.Map).isRequired,
     onPaintChanged: React.PropTypes.func.isRequired
   }
 
diff --git a/src/layers/line.jsx b/src/layers/line.jsx
index 898f4f9..da4838a 100644
--- a/src/layers/line.jsx
+++ b/src/layers/line.jsx
@@ -1,7 +1,39 @@
 import React from 'react'
+import Immutable from 'immutable'
+import spec from 'mapbox-gl-style-spec/reference/latest.min.js'
+import EnumField from '../fields/enum.jsx'
 
 export default class LineLayer extends React.Component {
+	static propTypes = {
+		layer: React.PropTypes.instanceOf(Immutable.Map).isRequired,
+  }
+
 	render() {
-		return <div></div>
+		const enumFieldFromType = (key, field) => {
+				if(field.type === 'enum') {
+					return <EnumField
+						key={key}
+						name={key}
+						values={field.values}
+						value={this.props.layer.getIn(['layout', key], field.default)}
+						doc={field.doc}/>
+				}
+		}
+
+		const layoutLineFields = () => {
+			const type = spec["layout_line"]
+			return Object.keys(type).map(key => {
+				return enumFieldFromType(key, type[key])
+			})
+		}
+
+		const paintLineFields = () => {
+			const type = spec["paint_line"]
+			return Object.keys(type).map(key => {
+				return enumFieldFromType(key, type[key])
+			})
+		}
+
+		return <div>{layoutLineFields()}{paintLineFields()}</div>
 	}
 }