Fixed changing between zoom/data functions.

src/components/FieldFunction.jsx

@@ -200,12 +200,35 @@ export default class FieldFunction  extends React.Component {
   }
 
   makeZoomFunction = () => {
-    const zoomFunc = {
+    const {value} = this.props;
-      stops: [
+
-        [6, this.props.value || findDefaultFromSpec(this.props.fieldSpec)],
+    let zoomFunc;
-        [10, this.props.value || findDefaultFromSpec(this.props.fieldSpec)]
+    if (typeof(value) === "object") {
-      ]
+      if (value.stops) {
+        zoomFunc = {
+          stops: value.stops.map(stop => {
+            return [stop[0].zoom, stop[1] || findDefaultFromSpec(this.props.fieldSpec)];
+          })
+        }
+      }
+      else {
+        zoomFunc = {
+          stops: [
+            [6, findDefaultFromSpec(this.props.fieldSpec)],
+            [10, findDefaultFromSpec(this.props.fieldSpec)]
+          ]
+        }
+      }
     }
+    else {
+      zoomFunc = {
+        stops: [
+          [6, value || findDefaultFromSpec(this.props.fieldSpec)],
+          [10, value || findDefaultFromSpec(this.props.fieldSpec)]
+        ]
+      }
+    }
+
     this.props.onChange(this.props.fieldName, zoomFunc)
   }
 
@@ -255,17 +278,44 @@ export default class FieldFunction  extends React.Component {
     this.props.onChange(this.props.fieldName, expression);
   }
 
-  makeDataFunction = () => {
+  makeDataFunction = (functionType) => {
-    const functionType = this.getFieldFunctionType(this.props.fieldSpec);
+    functionType = functionType || this.getFieldFunctionType(this.props.fieldSpec);
     const stopValue = functionType === 'categorical' ? '' : 0;
-    const dataFunc = {
+    const {value} = this.props;
-      property: "",
+    let dataFunc;
-      type: functionType,
+
-      stops: [
+    if (typeof(value) === "object") {
-        [{zoom: 6, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)],
+      if (value.stops) {
-        [{zoom: 10, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)]
+        dataFunc = {
-      ]
+          property: "",
+          type: functionType,
+          stops: value.stops.map(stop => {
+            return [{zoom: stop[0], value: stopValue}, stop[1] || findDefaultFromSpec(this.props.fieldSpec)];
+          })
+        }
+      }
+      else {
+        dataFunc = {
+          property: "",
+          type: functionType,
+          stops: [
+            [{zoom: 6, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)],
+            [{zoom: 10, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)]
+          ]
+        }
+      }
     }
+    else {
+      dataFunc = {
+        property: "",
+        type: functionType,
+        stops: [
+          [{zoom: 6, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)],
+          [{zoom: 10, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)]
+        ]
+      }
+    }
+
     this.props.onChange(this.props.fieldName, dataFunc)
   }
 
@@ -310,6 +360,7 @@ export default class FieldFunction  extends React.Component {
           value={this.props.value}
           onDeleteStop={this.deleteStop}
           onAddStop={this.addStop}
+          onChangeToDataFunction={this.makeDataFunction}
           onExpressionClick={this.makeExpression} 
         />
       )
@@ -326,6 +377,7 @@ export default class FieldFunction  extends React.Component {
           value={this.props.value}
           onDeleteStop={this.deleteStop}
           onAddStop={this.addStop}
+          onChangeToZoomFunction={this.makeZoomFunction}
           onExpressionClick={this.makeExpression} 
         />
       )

src/components/_DataProperty.jsx

@@ -91,7 +91,7 @@ export default class DataProperty extends React.Component {
 
   getDataFunctionTypes(fieldSpec) {
     if (fieldSpec.expression.interpolated) {
-      return ["categorical", "interval", "exponential", "identity"]
+      return ["interpolate", "categorical", "interval", "exponential", "identity"]
     }
     else {
       return ["categorical", "interval", "identity"]
@@ -167,6 +167,18 @@ export default class DataProperty extends React.Component {
     this.onChange(this.props.fieldName, changedValue)
   }
 
+  changeDataType(propVal) {
+    if (propVal === "interpolate") {
+      this.props.onChangeToZoomFunction();
+    }
+    else {
+      this.onChange(this.props.fieldName, {
+        ...this.props.value,
+        type: propVal,
+      });
+    }
+  }
+
   changeDataProperty(propName, propVal) {
     if (propVal) {
       this.props.value[propName] = propVal
@@ -284,7 +296,7 @@ export default class DataProperty extends React.Component {
             <div className="maputnik-data-spec-property-input">
               <InputSelect
                 value={this.props.value.type}
-                onChange={propVal => this.changeDataProperty("type", propVal)}
+                onChange={propVal => this.changeDataType(propVal)}
                 title={"Select a type of data scale (default is 'categorical')."}
                 options={this.getDataFunctionTypes(this.props.fieldSpec)}
               />

src/components/_ZoomProperty.jsx

@@ -126,6 +126,12 @@ export default class ZoomProperty extends React.Component {
     this.props.onChange(this.props.fieldName, changedValue)
   }
 
+  changeDataType = (type) => {
+    if (type !== "interpolate") {
+      this.props.onChangeToDataFunction(type);
+    }
+  }
+
   render() {
     const {fieldName, fieldType, errors} = this.props;
 
@@ -183,7 +189,7 @@ export default class ZoomProperty extends React.Component {
             <div className="maputnik-data-spec-property-input">
               <InputSelect
                 value={"interpolate"}
-                onChange={propVal => this.changeDataProperty("type", propVal)}
+                onChange={propVal => this.changeDataType(propVal)}
                 title={"Select a type of data scale (default is 'categorical')."}
                 options={this.getDataFunctionTypes(this.props.fieldSpec)}
               />
@@ -227,11 +233,11 @@ export default class ZoomProperty extends React.Component {
   }
 
   getDataFunctionTypes(fieldSpec) {
-    if (fieldSpec.expression.interpolated) {
+    if (fieldSpec['property-type'] === 'data-driven') {
-      return ["categorical", "interval", "exponential", "identity", "interpolate"]
+      return ["interpolate", "categorical", "interval", "exponential", "identity"];
     }
     else {
-      return ["categorical", "interval", "identity", "interpolate"]
+      return ["interpolate"];
     }
   }