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>
+	}
+}

src/layers/background.jsx

@@ -1,10 +1,12 @@
 import React from 'react'
+import Immutable from 'immutable'
 import { Input } from 'rebass'
+import { PropertyGroup } from '../fields/spec'
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 export default class BackgroundLayer extends React.Component {
 	static propTypes = {
-		layer: React.PropTypes.object.isRequired,
+		layer: React.PropTypes.instanceOf(Immutable.Map).isRequired,
 		onPaintChanged: React.PropTypes.func.isRequired
 	}
 
@@ -22,10 +24,9 @@ export default class BackgroundLayer extends React.Component {
 	}
 
 	render() {
-		const paint = this.props.layer.get('paint')
 		return <div>
-			<Input name="background-color" label="Background color" onChange={this.onPaintChanged.bind(this, "background-color")} value={paint.get("background-color")} />
+			<PropertyGroup layerType="background" groupType="layout" properties={this.props.layer.get('layout', Immutable.Map())}/>
-			<Input name="background-opacity" label="Background opacity" onChange={this.onPaintChanged.bind(this, "background-opacity")} value={paint.get("background-opacity")} />
+			<PropertyGroup layerType="background" groupType="paint" properties={this.props.layer.get('paint', Immutable.Map())}/>
 		</div>
 	}
 }

src/layers/fill.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import Immutable from 'immutable'
 import { Checkbox, Input } from 'rebass'
+import { PropertyGroup } from '../fields/spec'
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 export default class FillLayer extends React.Component {
@@ -24,14 +25,9 @@ export default class FillLayer extends React.Component {
 	}
 
 	render() {
-		const paint = this.props.layer.get('paint')
 		return <div>
-			<Input name="fill-color" label="Fill color" onChange={this.onPaintChanged.bind(this, "fill-color")} value={paint.get("fill-color")} />
+			<PropertyGroup layerType="fill" groupType="layout" properties={this.props.layer.get('layout', Immutable.Map())}/>
-			<Input name="fill-outline-color" label="Fill outline color" onChange={this.onPaintChanged.bind(this, "fill-outline-color")} value={paint.get("fill-outline-color")} />
+			<PropertyGroup layerType="fill" groupType="paint" properties={this.props.layer.get('paint', Immutable.Map())}/>
-			<Input name="fill-translate" label="Fill translate" onChange={this.onPaintChanged.bind(this, "fill-translate")} value={paint.get("fill-translate")} />
-			<Input name="fill-translate-anchor" label="Fill translate anchor" onChange={this.onPaintChanged.bind(this, "fill-translate-anchor")} value={paint.get("fill-translate-anchor")} />
-			<Checkbox name="fill-antialias" label="Antialias" onChange={this.onPaintChanged.bind(this, "fill-antialias")} checked={paint.get("fill-antialias")} />
-			<Input name="fill-opacity" label="Opacity" onChange={this.onPaintChanged.bind(this, "fill-opacity")} value={paint.get("fill-opacity")} />
 		</div>
 	}
 }

src/layers/line.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import Immutable from 'immutable'
-import spec from 'mapbox-gl-style-spec/reference/latest.min.js'
+import { PropertyGroup } from '../fields/spec'
-import EnumField from '../fields/enum.jsx'
 
 export default class LineLayer extends React.Component {
 	static propTypes = {
@@ -9,31 +8,9 @@ export default class LineLayer extends React.Component {
   }
 
 	render() {
-		const enumFieldFromType = (key, field) => {
+		return <div>
-				if(field.type === 'enum') {
+			<PropertyGroup layerType="line" groupType="layout" properties={this.props.layer.get('layout', Immutable.Map())}/>
-					return <EnumField
+			<PropertyGroup layerType="line" groupType="paint" properties={this.props.layer.get('paint', Immutable.Map())}/>
-						key={key}
+		</div>
-						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>
 	}
 }

src/layers/symbol.jsx

@@ -2,6 +2,9 @@ import React from 'react'
 
 export default class SymbolLayer extends React.Component {
 	render() {
-		return <div></div>
+		return <div>
+			<PropertyGroup layerType="symbol" groupType="layout" properties={this.props.layer.get('layout', Immutable.Map())}/>
+			<PropertyGroup layerType="symbol" groupType="paint" properties={this.props.layer.get('paint', Immutable.Map())}/>
+		</div>
 	}
 }