From 3d4579288cedf9eacc2fc1439746a2fb27897e69 Mon Sep 17 00:00:00 2001
From: pjsier <pjsier@gmail.com>
Date: Sun, 15 Apr 2018 17:08:54 -0500
Subject: [PATCH 1/2] Handle data functions without zoom

---
 src/components/fields/_DataProperty.jsx | 16 +++++++++++-----
 src/styles/_zoomproperty.scss           |  3 +++
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/fields/_DataProperty.jsx b/src/components/fields/_DataProperty.jsx
index a4aefa22..9fa1e440 100644
--- a/src/components/fields/_DataProperty.jsx
+++ b/src/components/fields/_DataProperty.jsx
@@ -51,7 +51,8 @@ export default class DataProperty extends React.Component {
 
   changeStop(changeIdx, stopData, value) {
     const stops = this.props.value.stops.slice(0)
-    stops[changeIdx] = [stopData, value]
+    const changedStop = stopData.zoom === undefined ? stopData.value : stopData
+    stops[changeIdx] = [changedStop, value]
     const changedValue = {
       ...this.props.value,
       stops: stops,
@@ -75,8 +76,8 @@ export default class DataProperty extends React.Component {
     }
 
     const dataFields = this.props.value.stops.map((stop, idx) => {
-      const zoomLevel = stop[0].zoom
-      const dataLevel = stop[0].value
+      const zoomLevel = typeof stop[0] === 'object' ? stop[0].zoom : undefined;
+      const dataLevel = typeof stop[0] === 'object' ? stop[0].value : stop[0];
       const value = stop[1]
       const deleteStopBtn = <DeleteStopButton onClick={this.props.onDeleteStop.bind(this, idx)} />
 
@@ -94,8 +95,9 @@ export default class DataProperty extends React.Component {
         dataInput = <NumberInput {...dataProps} />
       }
 
-      return <InputBlock key={idx} action={deleteStopBtn} label="">
-        <div className="maputnik-data-spec-property-stop-edit">
+      let zoomInput = null;
+      if(zoomLevel !== undefined) {
+        zoomInput = <div className="maputnik-data-spec-property-stop-edit">
           <NumberInput
             value={zoomLevel}
             onChange={newZoom => this.changeStop(idx, {zoom: newZoom, value: dataLevel}, value)}
@@ -103,6 +105,10 @@ export default class DataProperty extends React.Component {
             max={22}
           />
         </div>
+      }
+
+      return <InputBlock key={idx} action={deleteStopBtn} label="">
+        {zoomInput}
         <div className="maputnik-data-spec-property-stop-data">
           {dataInput}
         </div>
diff --git a/src/styles/_zoomproperty.scss b/src/styles/_zoomproperty.scss
index d6510c9b..04764f98 100644
--- a/src/styles/_zoomproperty.scss
+++ b/src/styles/_zoomproperty.scss
@@ -129,6 +129,9 @@
   }
 
   .maputnik-data-spec-property-stop-data {
+    width: 100%;
+  }
+  .maputnik-data-spec-property-stop-edit + .maputnik-data-spec-property-stop-data {
     width: 78%;
   }
 }

From e936dd16bfa0a2aa2edefc46060e353ff2cf1597 Mon Sep 17 00:00:00 2001
From: pjsier <pjsier@gmail.com>
Date: Mon, 16 Apr 2018 07:44:00 -0500
Subject: [PATCH 2/2] Fix style linting error

---
 src/styles/_zoomproperty.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/_zoomproperty.scss b/src/styles/_zoomproperty.scss
index 04764f98..ca8fd895 100644
--- a/src/styles/_zoomproperty.scss
+++ b/src/styles/_zoomproperty.scss
@@ -131,6 +131,7 @@
   .maputnik-data-spec-property-stop-data {
     width: 100%;
   }
+
   .maputnik-data-spec-property-stop-edit + .maputnik-data-spec-property-stop-data {
     width: 78%;
   }