Fixed eslint errors.

src/components/fields/ColorField.jsx

@@ -30,7 +30,7 @@ class ColorField extends React.Component {
   //but I am too stupid to get it to work together with fixed position
   //and scrollbars so I have to fallback to JavaScript
   calcPickerOffset() {
-    const elem = this.refs.colorInput
+    const elem = this.colorInput
     if(elem) {
       const pos = elem.getBoundingClientRect()
       return {
@@ -99,7 +99,7 @@ class ColorField extends React.Component {
       <div className="maputnik-color-swatch" style={swatchStyle}></div>
       <input
         className="maputnik-color"
-        ref="colorInput"
+        ref={(input) => this.colorInput = input}
         onClick={this.togglePicker.bind(this)}
         style={this.props.style}
         name={this.props.name}

src/components/fields/FunctionSpecField.jsx

@@ -302,49 +302,62 @@ export default class FunctionSpecProperty  extends React.Component {
   }
 }
 
-function MakeFunctionButtons(props) {
-  let makeZoomButton, makeDataButton
-  if (props.fieldSpec['zoom-function']) {
-    makeZoomButton = <Button
-      className="maputnik-make-zoom-function"
-      onClick={props.onZoomClick}
-    >
-      <DocLabel
-        label={<FunctionIcon />}
-        cursorTargetStyle={{ cursor: 'pointer' }}
-        doc={"Turn property into a zoom function to enable a map feature to change with map's zoom level."}
-      />
-    </Button>
+class MakeFunctionButtons extends React.Component {
+  static propTypes = {
+    fieldSpec: PropTypes.object,
+    onZoomClick: PropTypes.func,
+  }
 
-    if (props.fieldSpec['property-function'] && ['piecewise-constant', 'interpolated'].indexOf(props.fieldSpec['function']) !== -1) {
-      makeDataButton = <Button
-        className="maputnik-make-data-function"
-        onClick={props.onDataClick}
+  render() {
+    let makeZoomButton, makeDataButton
+    if (this.props.fieldSpec['zoom-function']) {
+      makeZoomButton = <Button
+        className="maputnik-make-zoom-function"
+        onClick={this.props.onZoomClick}
       >
         <DocLabel
-          label={<MdInsertChart />}
+          label={<FunctionIcon />}
           cursorTargetStyle={{ cursor: 'pointer' }}
-          doc={"Turn property into a data function to enable a map feature to change according to data properties and the map's zoom level."}
+          doc={"Turn property into a zoom function to enable a map feature to change with map's zoom level."}
         />
       </Button>
+
+      if (this.props.fieldSpec['property-function'] && ['piecewise-constant', 'interpolated'].indexOf(this.props.fieldSpec['function']) !== -1) {
+        makeDataButton = <Button
+          className="maputnik-make-data-function"
+          onClick={this.props.onDataClick}
+        >
+          <DocLabel
+            label={<MdInsertChart />}
+            cursorTargetStyle={{ cursor: 'pointer' }}
+            doc={"Turn property into a data function to enable a map feature to change according to data properties and the map's zoom level."}
+          />
+        </Button>
+      }
+      return <div>{makeDataButton}{makeZoomButton}</div>
+    }
+    else {
+      return null
     }
-    return <div>{makeDataButton}{makeZoomButton}</div>
-  }
-  else {
-    return null
   }
 }
 
-function DeleteStopButton(props) {
-  return <Button
-    className="maputnik-delete-stop"
-    onClick={props.onClick}
-  >
-    <DocLabel
-      label={<DeleteIcon />}
-      doc={"Remove zoom level stop."}
-    />
-  </Button>
+class DeleteStopButton extends React.Component {
+  static propTypes = {
+    onClick: PropTypes.func,
+  }
+
+  render() {
+    return <Button
+      className="maputnik-delete-stop"
+      onClick={this.props.onClick}
+    >
+      <DocLabel
+        label={<DeleteIcon />}
+        doc={"Remove zoom level stop."}
+      />
+    </Button>
+  }
 }
 
 function labelFromFieldName(fieldName) {