Support propagating from different layer types

src/fields/color.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import { Label, Input } from 'rebass'
-import {inputBase} from '../theme'
+import inputStyle from './input.js'
 
 /*** Number fields with support for min, max and units and documentation*/
 class ColorField extends React.Component {
 static propTypes = {
     onChange: React.PropTypes.func.isRequired,
 		name: React.PropTypes.string.isRequired,
-    value: React.PropTypes.number,
+    value: React.PropTypes.string,
     default: React.PropTypes.number,
     doc: React.PropTypes.string,
   }
@@ -17,10 +17,10 @@ static propTypes = {
 	}
 
 	render() {
-		return <div>
+		return <div style={inputStyle.property}>
-			<Label htmlFor={this.props.name} children={this.props.name} />
+			<label style={inputStyle.label}>{this.props.name}</label>
 			<input
-				style={inputBase}
+				style={inputStyle.input}
 				name={this.props.name}
 				placeholder={this.props.default}
 				value={this.props.value}

src/fields/enum.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Select, Input } from 'rebass'
+import inputStyle from './input.js'
 
 class EnumField extends React.Component {
 	static propTypes = {
@@ -16,14 +17,19 @@ class EnumField extends React.Component {
 
 	render() {
 		const options = this.props.allowedValues.map(val => {
-			return {children: val, value: val}
+			return <option key={val} value={val}>{val}</option>
 		})
-		return <Select
+
+		return <div style={inputStyle.property}>
+			<label style={inputStyle.label}>{this.props.name}</label>
+			<select
+				style={inputStyle.select}
+				value={this.props.value}
 				onChange={this.onChange.bind(this)}
-			name={this.props.name}
+			>
-			options={options}
+				{options}
-			label={this.props.name}
+			</select>
-		/>
+		</div>
 	}
 }
 

src/fields/number.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Label, Input } from 'rebass'
-import {inputBase} from '../theme'
+import inputStyle from './input.js'
 
 /*** Number fields with support for min, max and units and documentation*/
 class NumberField extends React.Component {
@@ -20,10 +20,10 @@ class NumberField extends React.Component {
 	}
 
 	render() {
-		return <div>
+		return <div style={inputStyle.property}>
-			<Label htmlFor={this.props.name} children={this.props.name} />
+			<label style={inputStyle.label}>{this.props.name}</label>
 			<input
-				style={inputBase}
+				style={inputStyle.input}
 				type="number"
 				name={this.props.name}
 				placeholder={this.props.default}

src/fields/string.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Label, Input } from 'rebass'
-import {inputBase} from '../theme'
+import inputStyle from './input.js'
 
 /*** Number fields with support for min, max and units and documentation*/
 class StringField extends React.Component {
@@ -16,11 +16,11 @@ static propTypes = {
 		return this.props.onChange(e.target.value)
 	}
 
-	render() {
+render() {
-		return <div>
+	return <div style={inputStyle.property}>
-			<Label htmlFor={this.props.name} children={this.props.name} />
+			<label style={inputStyle.label}>{this.props.name}</label>
 			<input
-				style={inputBase}
+				style={inputStyle.input}
 				name={this.props.name}
 				placeholder={this.props.default}
 				value={this.props.value}

src/layers/background.jsx

@@ -7,7 +7,8 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
 export default class BackgroundLayer extends React.Component {
 	static propTypes = {
 		layer: React.PropTypes.instanceOf(Immutable.Map).isRequired,
-		onPaintChanged: React.PropTypes.func.isRequired
+		onPaintChanged: React.PropTypes.func.isRequired,
+    onLayoutChanged: React.PropTypes.func.isRequired,
 	}
 
 	constructor(props) {
@@ -15,16 +16,10 @@ export default class BackgroundLayer extends React.Component {
 		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
 	}
 
-	onPaintChanged(property, value) {
-		if (property == "background-opacity" && !isNaN(parseFloat(value))) {
-			value = parseFloat(value)
-		}
-		this.props.onPaintChanged(property, value)
-	}
-
 	render() {
 		return <div>
 			<PropertyGroup
+				onChange={this.props.onLayoutChanged.bind(this)}
 				layerType="background"
 				groupType="layout"
 				properties={this.props.layer.get('layout', Immutable.Map())}

src/layers/editor.jsx

@@ -80,6 +80,7 @@ export class LayerEditor extends React.Component {
 			return <FillLayer
 				layer={this.props.layer}
 				onPaintChanged={this.onPaintChanged.bind(this)}
+				onLayoutChanged={this.onLayoutChanged.bind(this)}
 			/>
 		}
 
@@ -87,18 +88,23 @@ export class LayerEditor extends React.Component {
 			return <BackgroundLayer
 				layer={this.props.layer}
 				onPaintChanged={this.onPaintChanged.bind(this)}
+				onLayoutChanged={this.onLayoutChanged.bind(this)}
 			/>
 		}
 
 		if (type === "line") {
 			return <LineLayer
 				layer={this.props.layer}
+				onPaintChanged={this.onPaintChanged.bind(this)}
+				onLayoutChanged={this.onLayoutChanged.bind(this)}
 			/>
 		}
 
 		if (type === "symbol") {
 			return <SymbolLayer
 				layer={this.props.layer}
+				onPaintChanged={this.onPaintChanged.bind(this)}
+				onLayoutChanged={this.onLayoutChanged.bind(this)}
 			/>
 		}
 

src/layers/fill.jsx

@@ -7,7 +7,8 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
 export default class FillLayer extends React.Component {
 	static propTypes = {
 		layer: React.PropTypes.instanceOf(Immutable.Map).isRequired,
-    onPaintChanged: React.PropTypes.func.isRequired
+    onPaintChanged: React.PropTypes.func.isRequired,
+    onLayoutChanged: React.PropTypes.func.isRequired,
   }
 
 	constructor(props) {
@@ -15,18 +16,10 @@ export default class FillLayer extends React.Component {
 		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
 	}
 
-	onPaintChanged(property, e) {
-		let value = e.target.value
-		if (property == "fill-opacity") {
-			value = parseFloat(value)
-		}
-
-		this.props.onPaintChanged(property, value)
-	}
-
 	render() {
 		return <div>
 			<PropertyGroup
+				onChange={this.props.onLayoutChanged.bind(this)}
 				layerType="fill"
 				groupType="layout"
 				properties={this.props.layer.get('layout', Immutable.Map())}

src/layers/line.jsx

@@ -5,12 +5,24 @@ import { PropertyGroup } from '../fields/spec'
 export default class LineLayer extends React.Component {
 	static propTypes = {
 		layer: React.PropTypes.instanceOf(Immutable.Map).isRequired,
+		onPaintChanged: React.PropTypes.func.isRequired,
+    onLayoutChanged: React.PropTypes.func.isRequired,
   }
 
 	render() {
 		return <div>
-			<PropertyGroup layerType="line" groupType="layout" properties={this.props.layer.get('layout', Immutable.Map())}/>
+			<PropertyGroup
-			<PropertyGroup layerType="line" groupType="paint" properties={this.props.layer.get('paint', Immutable.Map())}/>
+				onChange={this.props.onLayoutChanged.bind(this)}
+				layerType="line"
+				groupType="layout"
+				properties={this.props.layer.get('layout', Immutable.Map())}
+			/>
+			<PropertyGroup
+				onChange={this.props.onPaintChanged.bind(this)}
+				layerType="line"
+				groupType="paint"
+				properties={this.props.layer.get('paint', Immutable.Map())}
+			/>
 		</div>
 	}
 }

src/layers/symbol.jsx

@@ -1,10 +1,31 @@
 import React from 'react'
 
 export default class SymbolLayer extends React.Component {
+	static propTypes = {
+		layer: React.PropTypes.instanceOf(Immutable.Map).isRequired,
+		onPaintChanged: React.PropTypes.func.isRequired,
+    onLayoutChanged: React.PropTypes.func.isRequired,
+	}
+
+	constructor(props) {
+		super(props);
+		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+	}
+
 	render() {
 		return <div>
-			<PropertyGroup layerType="symbol" groupType="layout" properties={this.props.layer.get('layout', Immutable.Map())}/>
+			<PropertyGroup
-			<PropertyGroup layerType="symbol" groupType="paint" properties={this.props.layer.get('paint', Immutable.Map())}/>
+				onChange={this.props.onLayoutChanged.bind(this)}
+				layerType="symbol"
+				groupType="layout"
+				properties={this.props.layer.get('layout', Immutable.Map())}
+			/>
+			<PropertyGroup
+				onChange={this.props.onPaintChanged.bind(this)}
+				layerType="symbol"
+				groupType="paint"
+				properties={this.props.layer.get('paint', Immutable.Map())}
+			/>
 		</div>
 	}
 }