From 4d1609a826c52de257c09205d1f61f8a653645e9 Mon Sep 17 00:00:00 2001
From: lukasmartinelli <me@lukasmartinelli.ch>
Date: Mon, 12 Sep 2016 19:47:28 +0200
Subject: [PATCH] Add color field

---
 src/fields/color.jsx  | 21 +++++++++++++++++++++
 src/fields/enum.jsx   |  2 +-
 src/fields/number.jsx |  2 +-
 src/fields/spec.jsx   |  8 ++++++++
 4 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 src/fields/color.jsx

diff --git a/src/fields/color.jsx b/src/fields/color.jsx
new file mode 100644
index 0000000..1b95669
--- /dev/null
+++ b/src/fields/color.jsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { Select, Input } from 'rebass'
+
+/*** Number fields with support for min, max and units and documentation*/
+class ColorField extends React.Component {
+static propTypes = {
+		name: React.PropTypes.string.isRequired,
+    value: React.PropTypes.number,
+    default: React.PropTypes.number,
+    doc: React.PropTypes.string,
+  }
+
+	render() {
+		return <Input
+			label={this.props.name}
+			name={this.props.name}
+		/>
+	}
+}
+
+export default ColorField
diff --git a/src/fields/enum.jsx b/src/fields/enum.jsx
index fcd165c..44b8eaa 100644
--- a/src/fields/enum.jsx
+++ b/src/fields/enum.jsx
@@ -4,7 +4,7 @@ import { Select, Input } from 'rebass'
 class EnumField extends React.Component {
 	static propTypes = {
 		name: React.PropTypes.string.isRequired,
-    value: React.PropTypes.string.isRequired,
+    value: React.PropTypes.string,
     allowedValues: React.PropTypes.array.isRequired,
     doc: React.PropTypes.string,
   }
diff --git a/src/fields/number.jsx b/src/fields/number.jsx
index 84442a9..da32a25 100644
--- a/src/fields/number.jsx
+++ b/src/fields/number.jsx
@@ -5,7 +5,7 @@ import { Select, Input } from 'rebass'
 class NumberField extends React.Component {
 	static propTypes = {
 		name: React.PropTypes.string.isRequired,
-    value: React.PropTypes.number.isRequired,
+    value: React.PropTypes.number,
     default: React.PropTypes.number,
     unit: React.PropTypes.string,
     min: React.PropTypes.number,
diff --git a/src/fields/spec.jsx b/src/fields/spec.jsx
index d596cdd..270cb50 100644
--- a/src/fields/spec.jsx
+++ b/src/fields/spec.jsx
@@ -3,6 +3,7 @@ import Immutable from 'immutable'
 import GlSpec from 'mapbox-gl-style-spec/reference/latest.min.js'
 import NumberField from './number'
 import EnumField from './enum'
+import ColorField from './color'
 
 class SpecField extends React.Component {
 	static propTypes = {
@@ -36,6 +37,13 @@ class SpecField extends React.Component {
 					doc={this.props.fieldSpec.doc}
 				/>
 			)
+			case 'color': return (
+				<ColorField
+					value={this.props.value}
+					name={this.props.fieldName}
+					doc={this.props.fieldSpec.doc}
+				/>
+			)
 			default: return null
 		}
 	}