Merge remote-tracking branch 'upstream/master' into fix/remove-componentWillUpdate

Conflicts:
	src/components/map/MapboxGlMap.jsx
	src/components/modals/ExportModal.jsx

src/components/fields/ColorField.jsx

@@ -19,17 +19,14 @@ class ColorField extends React.Component {
     default: PropTypes.string,
   }
 
-  constructor(props) {
-    super(props)
-    this.state = {
-      pickerOpened: false,
-    }
+  state = {
+    pickerOpened: false
   }
 
   //TODO: I much rather would do this with absolute positioning
   //but I am too stupid to get it to work together with fixed position
   //and scrollbars so I have to fallback to JavaScript
-  calcPickerOffset() {
+  calcPickerOffset = () => {
     const elem = this.colorInput
     if(elem) {
       const pos = elem.getBoundingClientRect()
@@ -45,7 +42,7 @@ class ColorField extends React.Component {
     }
   }
 
-  togglePicker() {
+  togglePicker = () => {
     this.setState({ pickerOpened: !this.state.pickerOpened })
   }
 
@@ -85,7 +82,7 @@ class ColorField extends React.Component {
       />
       <div
         className="maputnik-color-picker-offset"
-        onClick={this.togglePicker.bind(this)}
+        onClick={this.togglePicker}
         style={{
           zIndex: -1,
           position: 'fixed',
@@ -108,7 +105,7 @@ class ColorField extends React.Component {
         spellCheck="false"
         className="maputnik-color"
         ref={(input) => this.colorInput = input}
-        onClick={this.togglePicker.bind(this)}
+        onClick={this.togglePicker}
         style={this.props.style}
         name={this.props.name}
         placeholder={this.props.default}

src/components/fields/DocLabel.jsx

@@ -17,7 +17,7 @@ export default class DocLabel extends React.Component {
         <div className="maputnik-doc-popup">
           {this.props.doc}
         </div>
-      </div >
+      </div>
     </label>
   }
 }

src/components/fields/FunctionSpecField.jsx

@@ -32,7 +32,7 @@ export default class FunctionSpecProperty  extends React.Component {
     ]),
   }
 
-  addStop() {
+  addStop = () => {
     const stops = this.props.value.stops.slice(0)
     const lastStop = stops[stops.length - 1]
     if (typeof lastStop[0] === "object") {
@@ -53,7 +53,7 @@ export default class FunctionSpecProperty  extends React.Component {
     this.props.onChange(this.props.fieldName, changedValue)
   }
 
-  deleteStop(stopIdx) {
+  deleteStop = (stopIdx) => {
     const stops = this.props.value.stops.slice(0)
     stops.splice(stopIdx, 1)
 
@@ -69,7 +69,7 @@ export default class FunctionSpecProperty  extends React.Component {
     this.props.onChange(this.props.fieldName, changedValue)
   }
 
-  makeZoomFunction() {
+  makeZoomFunction = () => {
     const zoomFunc = {
       stops: [
         [6, this.props.value],
@@ -79,7 +79,7 @@ export default class FunctionSpecProperty  extends React.Component {
     this.props.onChange(this.props.fieldName, zoomFunc)
   }
 
-  makeDataFunction() {
+  makeDataFunction = () => {
     const dataFunc = {
       property: "",
       type: "categorical",
@@ -102,8 +102,8 @@ export default class FunctionSpecProperty  extends React.Component {
           fieldName={this.props.fieldName}
           fieldSpec={this.props.fieldSpec}
           value={this.props.value}
-          onDeleteStop={this.deleteStop.bind(this)}
-          onAddStop={this.addStop.bind(this)}
+          onDeleteStop={this.deleteStop}
+          onAddStop={this.addStop}
         />
       )
     }
@@ -114,8 +114,8 @@ export default class FunctionSpecProperty  extends React.Component {
           fieldName={this.props.fieldName}
           fieldSpec={this.props.fieldSpec}
           value={this.props.value}
-          onDeleteStop={this.deleteStop.bind(this)}
-          onAddStop={this.addStop.bind(this)}
+          onDeleteStop={this.deleteStop}
+          onAddStop={this.addStop}
         />
       )
     }
@@ -126,8 +126,8 @@ export default class FunctionSpecProperty  extends React.Component {
           fieldName={this.props.fieldName}
           fieldSpec={this.props.fieldSpec}
           value={this.props.value}
-          onZoomClick={this.makeZoomFunction.bind(this)}
-          onDataClick={this.makeDataFunction.bind(this)} 
+          onZoomClick={this.makeZoomFunction}
+          onDataClick={this.makeDataFunction} 
         />
       )
     }

src/components/fields/PropertyGroup.jsx

@@ -42,7 +42,7 @@ export default class PropertyGroup extends React.Component {
     spec: PropTypes.object.isRequired,
   }
 
-  onPropertyChange(property, newValue) {
+  onPropertyChange = (property, newValue) => {
     const group = getGroupName(this.props.spec, this.props.layer.type, property)
     this.props.onChange(group , property, newValue)
   }
@@ -56,7 +56,7 @@ export default class PropertyGroup extends React.Component {
       const fieldValue = fieldName in paint ? paint[fieldName] : layout[fieldName]
 
       return <FunctionSpecField
-        onChange={this.onPropertyChange.bind(this)}
+        onChange={this.onPropertyChange}
         key={fieldName}
         fieldName={fieldName}
         value={fieldValue === undefined ? fieldSpec.default : fieldValue}

src/components/fields/SpecField.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import color from 'color'
 
 import ColorField from './ColorField'
 import NumberInput from '../inputs/NumberInput'

src/components/fields/_ZoomProperty.jsx

@@ -53,12 +53,8 @@ export default class ZoomProperty extends React.Component {
     ]),
   }
 
-
-  constructor() {
-    super()
-    this.state = {
-      refs: {}
-    }
+  state = {
+    refs: {}
   }
 
   componentDidMount() {