Merge pull request #725 from orangemug/fix/issue-710

Added 'base' to functions

src/components/FieldFunction.jsx

@@ -206,6 +206,7 @@ export default class FieldFunction  extends React.Component {
     if (typeof(value) === "object") {
       if (value.stops) {
         zoomFunc = {
+          base: value.base,
           stops: value.stops.map(stop => {
             return [stop[0].zoom, stop[1] || findDefaultFromSpec(this.props.fieldSpec)];
           })
@@ -213,6 +214,7 @@ export default class FieldFunction  extends React.Component {
       }
       else {
         zoomFunc = {
+          base: value.base,
           stops: [
             [6, findDefaultFromSpec(this.props.fieldSpec)],
             [10, findDefaultFromSpec(this.props.fieldSpec)]
@@ -289,6 +291,7 @@ export default class FieldFunction  extends React.Component {
         dataFunc = {
           property: "",
           type: functionType,
+          base: value.base,
           stops: value.stops.map(stop => {
             return [{zoom: stop[0], value: stopValue}, stop[1] || findDefaultFromSpec(this.props.fieldSpec)];
           })
@@ -298,6 +301,7 @@ export default class FieldFunction  extends React.Component {
         dataFunc = {
           property: "",
           type: functionType,
+          base: value.base,
           stops: [
             [{zoom: 6, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)],
             [{zoom: 10, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)]
@@ -309,6 +313,7 @@ export default class FieldFunction  extends React.Component {
       dataFunc = {
         property: "",
         type: functionType,
+        base: value.base,
         stops: [
           [{zoom: 6, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)],
           [{zoom: 10, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)]

src/components/_DataProperty.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
+import {latest} from '@mapbox/mapbox-gl-style-spec'
 
 import InputButton from './InputButton'
 import InputSpec from './InputSpec'
@@ -167,6 +168,18 @@ export default class DataProperty extends React.Component {
     this.onChange(this.props.fieldName, changedValue)
   }
 
+  changeBase(newValue) {
+    const changedValue = {
+      ...this.props.value,
+      base: newValue
+    }
+
+    if (changedValue.base === undefined) {
+      delete changedValue["base"];
+    }
+    this.props.onChange(this.props.fieldName, changedValue)
+  }
+
   changeDataType(propVal) {
     if (propVal === "interpolate") {
       this.props.onChangeToZoomFunction();
@@ -292,6 +305,7 @@ export default class DataProperty extends React.Component {
         <div className="maputnik-data-fieldset-inner">
           <Block
             label={"Function"}
+            key="function"
           >
             <div className="maputnik-data-spec-property-input">
               <InputSelect
@@ -302,8 +316,24 @@ export default class DataProperty extends React.Component {
               />
             </div>
           </Block>
+          {this.props.value.type !== "identity" &&
+            <Block
+              label={"Base"}
+              key="base"
+            >
+              <div className="maputnik-data-spec-property-input">
+                <InputSpec
+                  fieldName={"base"}
+                  fieldSpec={latest.function.base}
+                  value={this.props.value.base}
+                  onChange={(_, newValue) => this.changeBase(newValue)}
+                />
+              </div>
+            </Block>
+          }
           <Block
             label={"Property"}
+            key="property"
           >
             <div className="maputnik-data-spec-property-input">
               <InputString
@@ -316,6 +346,7 @@ export default class DataProperty extends React.Component {
           {dataFields &&
             <Block
               label={"Default"}
+              key="default"
             >
               <InputSpec
                 fieldName={this.props.fieldName}

src/components/_ZoomProperty.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
+import {latest} from '@mapbox/mapbox-gl-style-spec'
 
 import InputButton from './InputButton'
 import InputSpec from './InputSpec'
@@ -126,6 +127,18 @@ export default class ZoomProperty extends React.Component {
     this.props.onChange(this.props.fieldName, changedValue)
   }
 
+  changeBase(newValue) {
+    const changedValue = {
+      ...this.props.value,
+      base: newValue
+    }
+
+    if (changedValue.base === undefined) {
+      delete changedValue["base"];
+    }
+    this.props.onChange(this.props.fieldName, changedValue)
+  }
+
   changeDataType = (type) => {
     if (type !== "interpolate") {
       this.props.onChangeToDataFunction(type);
@@ -195,6 +208,18 @@ export default class ZoomProperty extends React.Component {
               />
             </div>
           </Block>
+          <Block
+            label={"Base"}
+          >
+            <div className="maputnik-data-spec-property-input">
+              <InputSpec
+                fieldName={"base"}
+                fieldSpec={latest.function.base}
+                value={this.props.value.base}
+                onChange={(_, newValue) => this.changeBase(newValue)}
+              />
+            </div>
+          </Block>
           <div className="maputnik-function-stop">
             <table className="maputnik-function-stop-table maputnik-function-stop-table--zoom">
               <caption>Stops</caption>