Fixed eslint errors.

package.json

@@ -67,7 +67,7 @@
     "plugins": [
       "react"
     ],
-    "extend": [
+    "extends": [
       "plugin:react/recommended"
     ],
     "env": {

src/components/Button.jsx

@@ -7,6 +7,7 @@ class Button extends React.Component {
     onClick: PropTypes.func,
     style: PropTypes.object,
     className: PropTypes.string,
+    children: PropTypes.node
   }
 
   render() {

src/components/MessagePanel.jsx

@@ -9,11 +9,11 @@ class MessagePanel extends React.Component {
 
   render() {
     const errors = this.props.errors.map((m, i) => {
-      return <p className="maputnik-message-panel-error">{m}</p>
+      return <p key={"error-"+i} className="maputnik-message-panel-error">{m}</p>
     })
 
     const infos = this.props.infos.map((m, i) => {
-      return <p key={i}>{m}</p>
+      return <p key={"info-"+i}>{m}</p>
     })
 
     return <div className="maputnik-message-panel">

src/components/ScrollContainer.jsx

@@ -1,9 +1,16 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
-const ScrollContainer = (props) => {
-  return <div className="maputnik-scroll-container">
-    {props.children}
-  </div>
+class ScrollContainer extends React.Component {
+  static propTypes = {
+    children: PropTypes.node
+  }
+
+  render() {
+    return <div className="maputnik-scroll-container">
+      {this.props.children}
+    </div>
+  }
 }
 
 export default ScrollContainer

src/components/Toolbar.jsx

@@ -25,27 +25,46 @@ import OpenModal from './modals/OpenModal'
 
 import style from '../libs/style'
 
-function IconText(props) {
-  return <span className="maputnik-icon-text">{props.children}</span>
+class IconText extends React.Component {
+  static propTypes = {
+    children: PropTypes.node,
+  }
+
+  render() {
+    return <span className="maputnik-icon-text">{this.props.children}</span>
+  }
 }
 
-function ToolbarLink(props) {
-  return <a
-    className={classnames('maputnik-toolbar-link', props.className)}
-    href={props.href}
-    target={"blank"}
-  >
-    {props.children}
-  </a>
+class ToolbarLink extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node,
+  }
+
+  render() {
+    return <a
+      className={classnames('maputnik-toolbar-link', this.props.className)}
+      href={this.props.href}
+      target={"blank"}
+    >
+      {this.props.children}
+    </a>
+  }
 }
 
-function ToolbarAction(props) {
-  return <a
-    className='maputnik-toolbar-action'
-    onClick={props.onClick}
-  >
-    {props.children}
-  </a>
+class ToolbarAction extends React.Component {
+  static propTypes = {
+    children: PropTypes.node
+  }
+
+  render() {
+    return <a
+      className='maputnik-toolbar-action'
+      onClick={this.props.onClick}
+    >
+      {this.props.children}
+    </a>
+  }
 }
 
 export default class Toolbar extends React.Component {
@@ -57,7 +76,8 @@ export default class Toolbar extends React.Component {
     onStyleOpen: PropTypes.func.isRequired,
     // A dict of source id's and the available source layers
     sources: PropTypes.object.isRequired,
-    onInspectModeToggle: PropTypes.func.isRequired
+    onInspectModeToggle: PropTypes.func.isRequired,
+    children: PropTypes.node
   }
 
   constructor(props) {

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) {

src/components/inputs/AutocompleteInput.jsx

@@ -17,7 +17,7 @@ class AutocompleteInput extends React.Component {
   }
 
   render() {
-    const AutocompleteMenu = (items, value, style) => <div className={"maputnik-autocomplete-menu"} children={items} />
+    const AutocompleteMenu = (items, value, style) => <div className={"maputnik-autocomplete-menu"}>{items}</div>
 
     return <Autocomplete
       wrapperProps={{

src/components/inputs/DynamicArrayInput.jsx

@@ -13,6 +13,7 @@ class DynamicArrayInput extends React.Component {
     type: PropTypes.string,
     default: PropTypes.array,
     onChange: PropTypes.func,
+    style: PropTypes.object,
   }
 
   changeValue(idx, newValue) {
@@ -84,10 +85,15 @@ class DynamicArrayInput extends React.Component {
   }
 }
 
-function DeleteValueButton(props) {
+class DeleteValueButton extends React.Component {
+  static propTypes = {
+    onClick: PropTypes.func,
+  }
+
+  render() {
     return <Button
       className="maputnik-delete-stop"
-      onClick={props.onClick}
+      onClick={this.props.onClick}
     >
       <DocLabel
         label={<DeleteIcon />}
@@ -95,5 +101,6 @@ function DeleteValueButton(props) {
       />
     </Button>
   }
+}
 
 export default DynamicArrayInput

src/components/inputs/FontInput.jsx

@@ -5,6 +5,7 @@ import AutocompleteInput from './AutocompleteInput'
 class FontInput extends React.Component {
   static propTypes = {
     value: PropTypes.array.isRequired,
+    default: PropTypes.array,
     fonts: PropTypes.array,
     style: PropTypes.object,
     onChange: PropTypes.func.isRequired,

src/components/inputs/InputBlock.jsx

@@ -14,6 +14,7 @@ class InputBlock extends React.Component {
     action: PropTypes.element,
     children: PropTypes.element.isRequired,
     style: PropTypes.object,
+    onChange: PropTypes.func,
   }
 
   onChange(e) {

src/components/inputs/StringInput.jsx

@@ -7,6 +7,7 @@ class StringInput extends React.Component {
     style: PropTypes.object,
     default: PropTypes.string,
     onChange: PropTypes.func,
+    multi: PropTypes.bool,
   }
 
   constructor(props) {

src/components/map/FeatureLayerPopup.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import LayerIcon from '../icons/LayerIcon'
@@ -14,6 +15,10 @@ function groupFeaturesBySourceLayer(features) {
 }
 
 class FeatureLayerPopup extends React.Component {
+  static propTypes = {
+    features: PropTypes.array
+  }
+
   render() {
     const sources = groupFeaturesBySourceLayer(this.props.features)
 

src/components/map/FeaturePropertyPopup.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 
@@ -31,6 +32,9 @@ function renderFeature(feature) {
 }
 
 class FeaturePropertyPopup extends React.Component {
+  static propTypes = {
+    features: PropTypes.array
+  }
 
   render() {
     const features = this.props.features

src/components/map/OpenLayers3Map.jsx

@@ -69,6 +69,7 @@ class OpenLayers3Map extends React.Component {
     onDataChange: PropTypes.func,
     mapStyle: PropTypes.object.isRequired,
     accessToken: PropTypes.string,
+    style: PropTypes.object,
   }
 
   static defaultProps = {

src/components/modals/Modal.jsx

@@ -8,6 +8,7 @@ class Modal extends React.Component {
     isOpen: PropTypes.bool.isRequired,
     title: PropTypes.string.isRequired,
     onOpenToggle: PropTypes.func.isRequired,
+    children: PropTypes.node,
   }
 
   render() {

src/components/modals/OpenModal.jsx

@@ -77,7 +77,7 @@ class OpenModal extends React.Component {
   }
 
   onOpenUrl() {
-    const url = this.refs.styleUrl.value;
+    const url = this.styleUrlElement.value;
     this.onStyleSelect(url);
   }
 
@@ -151,7 +151,7 @@ class OpenModal extends React.Component {
         <p>
           Load from a URL. Note that the URL must have <a href="https://enable-cors.org" target="_blank" rel="noopener noreferrer">CORS enabled</a>.
         </p>
-        <input type="text" ref="styleUrl" className="maputnik-input" placeholder="Enter URL..."/>
+        <input type="text" ref={(input) => this.styleUrlElement = input} className="maputnik-input" placeholder="Enter URL..."/>
         <div>
           <Button className="maputnik-big-button" onClick={this.onOpenUrl.bind(this)}>Open URL</Button>
         </div>