From 8e92984d48ddf8fb6ac7125f58d23c0698d858ff Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Sun, 18 Dec 2016 20:08:20 +0100
Subject: [PATCH] Add rudimentary boolean field

---
 src/fields/boolean.jsx | 27 +++++++++++++++++++++++++++
 src/fields/spec.jsx    | 10 ++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 src/fields/boolean.jsx

diff --git a/src/fields/boolean.jsx b/src/fields/boolean.jsx
new file mode 100644
index 0000000..d149410
--- /dev/null
+++ b/src/fields/boolean.jsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import inputStyle from './input.js'
+
+class BooleanField extends React.Component {
+  static propTypes = {
+    onChange: React.PropTypes.func.isRequired,
+    name: React.PropTypes.string.isRequired,
+    value: React.PropTypes.bool,
+    doc: React.PropTypes.string,
+  }
+
+  render() {
+    return <div style={inputStyle.property}>
+      <label style={inputStyle.label}>{this.props.name}</label>
+      <input
+        type="checkbox"
+        style={inputStyle.checkbox}
+        value={this.props.value}
+        onChange={e => {this.props.onChange(!this.props.value)}}
+        checked={this.props.value}
+      >
+      </input>
+    </div>
+  }
+}
+
+export default BooleanField
diff --git a/src/fields/spec.jsx b/src/fields/spec.jsx
index 9cf2146..dac6463 100644
--- a/src/fields/spec.jsx
+++ b/src/fields/spec.jsx
@@ -5,6 +5,7 @@ import color from 'color'
 import GlSpec from 'mapbox-gl-style-spec/reference/latest.min.js'
 import NumberField from './number'
 import EnumField from './enum'
+import BooleanField from './boolean'
 import ColorField from './color'
 import StringField from './string'
 import inputStyle from './input.js'
@@ -30,6 +31,7 @@ class ZoomSpecField extends React.Component {
       React.PropTypes.object,
       React.PropTypes.string,
       React.PropTypes.number,
+      React.PropTypes.bool,
     ]),
   }
 
@@ -122,6 +124,14 @@ class SpecField extends React.Component {
           doc={this.props.fieldSpec.doc}
         />
       )
+      case 'boolean': return (
+        <BooleanField
+          onChange={this.onValueChanged.bind(this, this.props.fieldName)}
+          value={this.props.value}
+          name={label}
+          doc={this.props.fieldSpec.doc}
+        />
+      )
       default: return null
     }
   }