From 4d703518483b418f435d5046aea385a2f7a6ef54 Mon Sep 17 00:00:00 2001
From: lukasmartinelli <me@lukasmartinelli.ch>
Date: Tue, 13 Sep 2016 20:30:03 +0200
Subject: [PATCH] Support propagating from different layer types

---
 src/fields/color.jsx      | 10 +++++-----
 src/fields/enum.jsx       | 20 +++++++++++++-------
 src/fields/number.jsx     |  8 ++++----
 src/fields/string.jsx     | 10 +++++-----
 src/layers/background.jsx | 11 +++--------
 src/layers/editor.jsx     |  6 ++++++
 src/layers/fill.jsx       | 13 +++----------
 src/layers/line.jsx       | 16 ++++++++++++++--
 src/layers/symbol.jsx     | 25 +++++++++++++++++++++++--
 9 files changed, 76 insertions(+), 43 deletions(-)

diff --git a/src/fields/color.jsx b/src/fields/color.jsx
index 27d2e1a5..2757e231 100644
--- a/src/fields/color.jsx
+++ b/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>
-			<Label htmlFor={this.props.name} children={this.props.name} />
+		return <div style={inputStyle.property}>
+			<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}
diff --git a/src/fields/enum.jsx b/src/fields/enum.jsx
index 3795de10..10672d24 100644
--- a/src/fields/enum.jsx
+++ b/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
-			onChange={this.onChange.bind(this)}
-			name={this.props.name}
-			options={options}
-			label={this.props.name}
-		/>
+
+		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)}
+			>
+				{options}
+			</select>
+		</div>
 	}
 }
 
diff --git a/src/fields/number.jsx b/src/fields/number.jsx
index 7a3ce7fe..906f3263 100644
--- a/src/fields/number.jsx
+++ b/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>
-			<Label htmlFor={this.props.name} children={this.props.name} />
+		return <div style={inputStyle.property}>
+			<label style={inputStyle.label}>{this.props.name}</label>
 			<input
-				style={inputBase}
+				style={inputStyle.input}
 				type="number"
 				name={this.props.name}
 				placeholder={this.props.default}
diff --git a/src/fields/string.jsx b/src/fields/string.jsx
index 79e938e7..45a3f9de 100644
--- a/src/fields/string.jsx
+++ b/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() {
-		return <div>
-			<Label htmlFor={this.props.name} children={this.props.name} />
+render() {
+	return <div style={inputStyle.property}>
+			<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}
diff --git a/src/layers/background.jsx b/src/layers/background.jsx
index 23ff8672..1a161929 100644
--- a/src/layers/background.jsx
+++ b/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())}
diff --git a/src/layers/editor.jsx b/src/layers/editor.jsx
index d0d4e69a..d39854cb 100644
--- a/src/layers/editor.jsx
+++ b/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)}
 			/>
 		}
 
diff --git a/src/layers/fill.jsx b/src/layers/fill.jsx
index 0e57af74..3b13ca61 100644
--- a/src/layers/fill.jsx
+++ b/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())}
diff --git a/src/layers/line.jsx b/src/layers/line.jsx
index 5be37cc6..40607ef2 100644
--- a/src/layers/line.jsx
+++ b/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 layerType="line" groupType="paint" properties={this.props.layer.get('paint', Immutable.Map())}/>
+			<PropertyGroup
+				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>
 	}
 }
diff --git a/src/layers/symbol.jsx b/src/layers/symbol.jsx
index d0813093..61ce2430 100644
--- a/src/layers/symbol.jsx
+++ b/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 layerType="symbol" groupType="paint" properties={this.props.layer.get('paint', Immutable.Map())}/>
+			<PropertyGroup
+				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>
 	}
 }