Reactivate on change for background layer

src/fields/color.jsx

@@ -4,6 +4,7 @@ import { Select, Input } from 'rebass'
 /*** 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,
     default: React.PropTypes.number,
@@ -12,6 +13,7 @@ static propTypes = {
 
 	render() {
 		return <Input
+			onChange={this.props.onChange}
 			label={this.props.name}
 			name={this.props.name}
 			value={this.props.value}

src/fields/enum.jsx

@@ -3,6 +3,7 @@ import { Select, Input } from 'rebass'
 
 class EnumField extends React.Component {
 	static propTypes = {
+    onChange: React.PropTypes.func.isRequired,
 		name: React.PropTypes.string.isRequired,
     value: React.PropTypes.string,
     allowedValues: React.PropTypes.array.isRequired,
@@ -13,7 +14,12 @@ class EnumField extends React.Component {
 		const options = this.props.allowedValues.map(val => {
 			return {children: val, value: val}
 		})
-		return <Select name={this.props.name} options={options} label={this.props.name} />
+		return <Select
+			onChange={this.props.onChange}
+			name={this.props.name}
+			options={options}
+			label={this.props.name}
+		/>
 	}
 }
 

src/fields/number.jsx

@@ -4,6 +4,7 @@ import { Select, Input } from 'rebass'
 /*** Number fields with support for min, max and units and documentation*/
 class NumberField extends React.Component {
 	static propTypes = {
+    onChange: React.PropTypes.func.isRequired,
 		name: React.PropTypes.string.isRequired,
     value: React.PropTypes.number,
     default: React.PropTypes.number,
@@ -15,6 +16,7 @@ class NumberField extends React.Component {
 
 	render() {
 		return <Input type="number"
+			onChange={this.props.onChange}
 			label={this.props.name}
 			name={this.props.name}
 			message={this.props.doc}

src/fields/spec.jsx

@@ -8,6 +8,7 @@ import StringField from './string'
 
 class SpecField extends React.Component {
 	static propTypes = {
+    onChange: React.PropTypes.func.isRequired,
     fieldName: React.PropTypes.string.isRequired,
     fieldSpec: React.PropTypes.object.isRequired,
 		value: React.PropTypes.oneOfType([
@@ -17,10 +18,15 @@ class SpecField extends React.Component {
     ]).isRequired,
   }
 
+	onValueChanged(property, e) {
+		return this.props.onChange(property, e.target.value)
+	}
+
 	render() {
 		switch(this.props.fieldSpec.type) {
 			case 'number': return (
 				<NumberField
+					onChange={this.onValueChanged.bind(this, this.props.fieldName)}
 					value={this.props.value}
 					name={this.props.fieldName}
 					default={this.props.fieldSpec.default}
@@ -32,6 +38,7 @@ class SpecField extends React.Component {
 			)
 			case 'enum': return (
 				<EnumField
+					onChange={this.onValueChanged.bind(this, this.props.fieldName)}
 					value={this.props.value}
 					name={this.props.fieldName}
 					allowedValues={this.props.fieldSpec.values}
@@ -40,6 +47,7 @@ class SpecField extends React.Component {
 			)
 			case 'string': return (
 				<StringField
+					onChange={this.onValueChanged.bind(this, this.props.fieldName)}
 					value={this.props.value}
 					name={this.props.fieldName}
 					doc={this.props.fieldSpec.doc}
@@ -47,6 +55,7 @@ class SpecField extends React.Component {
 			)
 			case 'color': return (
 				<ColorField
+					onChange={this.onValueChanged.bind(this, this.props.fieldName)}
 					value={this.props.value}
 					name={this.props.fieldName}
 					doc={this.props.fieldSpec.doc}
@@ -59,6 +68,7 @@ class SpecField extends React.Component {
 
 export class PropertyGroup extends React.Component {
 	static propTypes = {
+    onChange: React.PropTypes.func.isRequired,
 		properties: React.PropTypes.instanceOf(Immutable.Map).isRequired,
 		layerType: React.PropTypes.oneOf(['fill', 'background', 'line']).isRequired,
 		groupType: React.PropTypes.oneOf(['paint', 'layout']).isRequired,
@@ -70,6 +80,7 @@ export class PropertyGroup extends React.Component {
 			const fieldSpec = layerTypeSpec[propName]
 			const propValue = this.props.properties.get(propName)
 			return <SpecField
+				onChange={this.props.onChange}
 				key={propName}
 				value={propValue}
 				fieldName={propName}

src/fields/string.jsx

@@ -4,6 +4,7 @@ import { Input } from 'rebass'
 /*** Number fields with support for min, max and units and documentation*/
 class StringField extends React.Component {
 static propTypes = {
+    onChange: React.PropTypes.func.isRequired,
 		name: React.PropTypes.string.isRequired,
     value: React.PropTypes.number,
     default: React.PropTypes.number,
@@ -12,6 +13,7 @@ static propTypes = {
 
 	render() {
 		return <Input
+			onChange={this.props.onChange}
 			label={this.props.name}
 			name={this.props.name}
 			value={this.props.value}

src/layers/background.jsx

@@ -15,8 +15,7 @@ export default class BackgroundLayer extends React.Component {
 		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
 	}
 
-	onPaintChanged(property, e) {
+	onPaintChanged(property, value) {
-		let value = e.target.value
 		if (property == "background-opacity" && !isNaN(parseFloat(value))) {
 			value = parseFloat(value)
 		}
@@ -25,8 +24,17 @@ export default class BackgroundLayer extends React.Component {
 
 	render() {
 		return <div>
-			<PropertyGroup layerType="background" groupType="layout" properties={this.props.layer.get('layout', Immutable.Map())}/>
+			<PropertyGroup
-			<PropertyGroup layerType="background" groupType="paint" properties={this.props.layer.get('paint', Immutable.Map())}/>
+				layerType="background"
+				groupType="layout"
+				properties={this.props.layer.get('layout', Immutable.Map())}
+			/>
+			<PropertyGroup
+				onChange={this.props.onPaintChanged.bind(this)}
+				layerType="background"
+				groupType="paint"
+				properties={this.props.layer.get('paint', Immutable.Map())}
+			/>
 		</div>
 	}
 }

src/layers/fill.jsx

@@ -26,8 +26,17 @@ export default class FillLayer extends React.Component {
 
 	render() {
 		return <div>
-			<PropertyGroup layerType="fill" groupType="layout" properties={this.props.layer.get('layout', Immutable.Map())}/>
+			<PropertyGroup
-			<PropertyGroup layerType="fill" groupType="paint" properties={this.props.layer.get('paint', Immutable.Map())}/>
+				layerType="fill"
+				groupType="layout"
+				properties={this.props.layer.get('layout', Immutable.Map())}
+			/>
+			<PropertyGroup
+				onChange={this.props.onPaintChanged.bind(this)}
+				layerType="fill"
+				groupType="paint"
+				properties={this.props.layer.get('paint', Immutable.Map())}
+			/>
 		</div>
 	}
 }