Manage to display dynamic fields

src/fields/enum.jsx

@@ -1,18 +1,20 @@
 import React from 'react'
 import { Select, Input } from 'rebass'
 
-export default class EnumField extends React.Component {
+class EnumField extends React.Component {
 	static propTypes = {
 		name: React.PropTypes.string.isRequired,
-    values: React.PropTypes.array.isRequired,
     value: React.PropTypes.string.isRequired,
+    allowedValues: React.PropTypes.array.isRequired,
     doc: React.PropTypes.string,
   }
 
 	render() {
-		const options = this.props.values.map(val => {
+		const options = this.props.allowedValues.map(val => {
 			return {children: val, value: val}
 		})
 		return <Select name={this.props.name} options={options} label={this.props.name} />
 	}
 }
+
+export default EnumField

src/fields/number.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Select, Input } from 'rebass'
+
+/*** Number fields with support for min, max and units and documentation*/
+class NumberField extends React.Component {
+	static propTypes = {
+		name: React.PropTypes.string.isRequired,
+    value: React.PropTypes.number.isRequired,
+    default: React.PropTypes.number,
+    unit: React.PropTypes.string,
+    min: React.PropTypes.number,
+    max: React.PropTypes.number,
+    doc: React.PropTypes.string,
+  }
+
+	render() {
+		return <Input type="number"
+			label={this.props.name}
+			name={this.props.name}
+			message={this.props.doc}
+		/>
+	}
+}
+
+export default NumberField

src/fields/spec.jsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import Immutable from 'immutable'
+import GlSpec from 'mapbox-gl-style-spec/reference/latest.min.js'
+import NumberField from './number'
+import EnumField from './enum'
+
+class SpecField extends React.Component {
+	static propTypes = {
+    fieldName: React.PropTypes.string.isRequired,
+    fieldSpec: React.PropTypes.object.isRequired,
+		value: React.PropTypes.oneOfType([
+      React.PropTypes.object,
+      React.PropTypes.string,
+      React.PropTypes.number,
+    ]).isRequired,
+  }
+
+	render() {
+		switch(this.props.fieldSpec.type) {
+			case 'number': return (
+				<NumberField
+					value={this.props.value}
+					name={this.props.fieldName}
+					default={this.props.fieldSpec.default}
+					min={this.props.fieldSpec.min}
+					max={this.props.fieldSpec.max}
+					unit={this.props.fieldSpec.unit}
+					doc={this.props.fieldSpec.doc}
+				/>
+			)
+			case 'enum': return (
+				<EnumField
+					value={this.props.value}
+					name={this.props.fieldName}
+					allowedValues={this.props.fieldSpec.values}
+					doc={this.props.fieldSpec.doc}
+				/>
+			)
+			default: return null
+		}
+	}
+}
+
+export class PropertyGroup extends React.Component {
+	static propTypes = {
+		properties: React.PropTypes.instanceOf(Immutable.Map).isRequired,
+		layerType: React.PropTypes.oneOf(['fill', 'background', 'line']).isRequired,
+		groupType: React.PropTypes.oneOf(['paint', 'layout']).isRequired,
+  }
+
+	render() {
+		const layerTypeSpec = GlSpec[this.props.groupType + "_" + this.props.layerType]
+		const specFields = Object.keys(layerTypeSpec).map(propName => {
+			const fieldSpec = layerTypeSpec[propName]
+			const propValue = this.props.properties.get(propName)
+			return <SpecField
+				key={propName}
+				value={propValue}
+				fieldName={propName}
+				fieldSpec={fieldSpec}
+			/>
+		})
+		return <div>
+			{specFields}
+		</div>
+	}
+}