Fix bug setting layout/paint props directly on layer

src/components/fields/PropertyGroup.jsx

@@ -9,12 +9,17 @@ import { margins } from '../../config/scales'
 /** Extract field spec by {@fieldName} from the {@layerType} in the
  * style specification from either the paint or layout group */
 function getFieldSpec(layerType, fieldName) {
+  const groupName = getGroupName(layerType, fieldName)
+  const group = GlSpec[groupName + '_' + layerType]
+  return group[fieldName]
+}
+
+function getGroupName(layerType, fieldName) {
   const paint  = GlSpec['paint_' + layerType] || {}
-  const layout = GlSpec['layout_' + layerType] || {}
   if (fieldName in paint) {
-    return paint[fieldName]
+    return 'paint'
   } else {
-    return layout[fieldName]
+    return 'layout'
   }
 }
 
@@ -25,12 +30,17 @@ export default class PropertyGroup extends React.Component {
     onChange: React.PropTypes.func.isRequired,
   }
 
+  onPropertyChange(property, newValue) {
+    const group = getGroupName(this.props.layer.get('type'), property)
+    this.props.onChange(group , property ,newValue)
+  }
+
   render() {
     const fields = this.props.groupFields.map(fieldName => {
       const fieldSpec = getFieldSpec(this.props.layer.get('type'), fieldName)
       const fieldValue = this.props.layer.getIn(['paint', fieldName], this.props.layer.getIn(['layout', fieldName]))
       return <ZoomSpecField
-        onChange={this.props.onChange}
+        onChange={this.onPropertyChange.bind(this)}
         key={fieldName}
         fieldName={fieldName}
         value={fieldValue}

src/components/fields/SpecField.jsx

@@ -41,60 +41,43 @@ export default class SpecField extends React.Component {
     style: React.PropTypes.object,
   }
 
-  onValueChanged(property, value) {
-    return this.props.onChange(property, value)
-  }
-
   render() {
+    const commonProps = {
+      doc: this.props.fieldSpec.doc,
+      style: this.props.style,
+      value: this.props.value,
+      name: this.props.fieldName,
+      onChange: newValue => this.props.onChange(this.props.fieldName, newValue)
+    }
     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}
+          {...commonProps}
           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}
-          style={this.props.style}
         />
       )
       case 'enum': return (
         <EnumField
-          onChange={this.onValueChanged.bind(this, this.props.fieldName)}
-          value={this.props.value}
-          name={this.props.fieldName}
+          {...commonProps}
           allowedValues={Object.keys(this.props.fieldSpec.values)}
-          doc={this.props.fieldSpec.doc}
-          style={this.props.style}
         />
       )
       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}
-          style={this.props.style}
+          {...commonProps}
         />
       )
       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}
-          style={this.props.style}
+          {...commonProps}
         />
       )
       case 'boolean': return (
         <BooleanField
-          onChange={this.onValueChanged.bind(this, this.props.fieldName)}
-          value={this.props.value}
-          name={this.props.fieldName}
-          doc={this.props.fieldSpec.doc}
-          style={this.props.style}
+          {...commonProps}
         />
       )
       default: return null