Support displaying basic zoom fields

src/fields/spec.jsx

@@ -1,21 +1,75 @@
 import React from 'react'
 import Immutable from 'immutable'
+import color from 'color'
+
 import GlSpec from 'mapbox-gl-style-spec/reference/latest.min.js'
 import NumberField from './number'
 import EnumField from './enum'
 import ColorField from './color'
 import StringField from './string'
+import inputStyle from './input.js'
+import theme from '../theme.js'
 
-class SpecField extends React.Component {
-	static propTypes = {
+function isZoomField(value) {
+  return Immutable.Map.isMap(value)
+}
+
+const specFieldProps =  {
   onChange: React.PropTypes.func.isRequired,
   fieldName: React.PropTypes.string.isRequired,
   fieldSpec: React.PropTypes.object.isRequired,
+}
+
+/** Supports displaying spec field for zoom function objects
+ * https://www.mapbox.com/mapbox-gl-style-spec/#types-function-zoom-property
+ */
+class ZoomSpecField extends React.Component {
+  static propTypes = {
+    ...specFieldProps,
     value: React.PropTypes.oneOfType([
       React.PropTypes.object,
       React.PropTypes.string,
       React.PropTypes.number,
-    ]).isRequired,
+    ]),
+  }
+
+  render() {
+    if(isZoomField(this.props.value)) {
+      const zoomFields = this.props.value.get('stops').map(stop => {
+        console.log(stop)
+        const zoomLevel = stop.get(0)
+        const value = stop.get(1)
+        console.log(zoomLevel, value)
+
+        return <div key={zoomLevel}>
+          <b><span style={inputStyle.label}>Zoom Level {zoomLevel}</span></b>
+          <SpecField {...this.props} value={value} />
+        </div>
+      }).toSeq()
+      return <div style={{
+          border: 1,
+          borderStyle: 'solid',
+          borderColor: color(theme.colors.gray).lighten(0.1).hexString(),
+          padding: theme.scale[1],
+        }}>
+        {zoomFields}
+      </div>
+    } else {
+      return <SpecField {...this.props} />
+    }
+  }
+}
+
+/** Display any field from the Mapbox GL style spec and
+ * choose the correct field component based on the @{fieldSpec}
+ * to display @{value}. */
+class SpecField extends React.Component {
+  static propTypes = {
+    ...specFieldProps,
+    value: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.number,
+    ]),
   }
 
   onValueChanged(property, value) {
@@ -79,7 +133,7 @@ export class PropertyGroup extends React.Component {
     const specFields = Object.keys(layerTypeSpec).map(propName => {
       const fieldSpec = layerTypeSpec[propName]
       const propValue = this.props.properties.get(propName)
-			return <SpecField
+      return <ZoomSpecField
         onChange={this.props.onChange}
         key={propName}
         value={propValue}