From 7c7c8b7111aa7f9c6bf3446d915af72824504b2b Mon Sep 17 00:00:00 2001
From: lukasmartinelli <me@lukasmartinelli.ch>
Date: Mon, 12 Sep 2016 20:10:49 +0200
Subject: [PATCH] Reactivate on change for background layer

---
 src/fields/color.jsx      |  2 ++
 src/fields/enum.jsx       |  8 +++++++-
 src/fields/number.jsx     |  2 ++
 src/fields/spec.jsx       | 11 +++++++++++
 src/fields/string.jsx     |  2 ++
 src/layers/background.jsx | 16 ++++++++++++----
 src/layers/fill.jsx       | 13 +++++++++++--
 7 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/src/fields/color.jsx b/src/fields/color.jsx
index 6ca92af..4c1895c 100644
--- a/src/fields/color.jsx
+++ b/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}
diff --git a/src/fields/enum.jsx b/src/fields/enum.jsx
index 44b8eaa..dc74020 100644
--- a/src/fields/enum.jsx
+++ b/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}
+		/>
 	}
 }
 
diff --git a/src/fields/number.jsx b/src/fields/number.jsx
index da32a25..4b764a7 100644
--- a/src/fields/number.jsx
+++ b/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}
diff --git a/src/fields/spec.jsx b/src/fields/spec.jsx
index 47affd5..b20ff5d 100644
--- a/src/fields/spec.jsx
+++ b/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}
diff --git a/src/fields/string.jsx b/src/fields/string.jsx
index 494e1ca..b1b1f2d 100644
--- a/src/fields/string.jsx
+++ b/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}
diff --git a/src/layers/background.jsx b/src/layers/background.jsx
index a744008..23ff867 100644
--- a/src/layers/background.jsx
+++ b/src/layers/background.jsx
@@ -15,8 +15,7 @@ export default class BackgroundLayer extends React.Component {
 		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
 	}
 
-	onPaintChanged(property, e) {
-		let value = e.target.value
+	onPaintChanged(property, 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 layerType="background" groupType="paint" properties={this.props.layer.get('paint', Immutable.Map())}/>
+			<PropertyGroup
+				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>
 	}
 }
diff --git a/src/layers/fill.jsx b/src/layers/fill.jsx
index cb75453..0e57af7 100644
--- a/src/layers/fill.jsx
+++ b/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 layerType="fill" groupType="paint" properties={this.props.layer.get('paint', Immutable.Map())}/>
+			<PropertyGroup
+				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>
 	}
 }