Merge pull request #366 from loicgasser/maintenance/transform-class-properties-and-arrow-func

Take advantage of transform-class-properties and use arrow functions

.babelrc

@@ -5,7 +5,7 @@
     "test": {
       "plugins": [
         ["istanbul", {
-          exclude: ["node_modules/**", "test/**"]
+          "exclude": ["node_modules/**", "test/**"]
         }]
       ]
     }

src/components/App.jsx

@@ -25,7 +25,7 @@ import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import style from '../libs/style'
 import { initialStyleUrl, loadStyleUrl } from '../libs/urlopen'
 import { undoMessages, redoMessages } from '../libs/diffmessage'
-import { loadDefaultStyle, StyleStore } from '../libs/stylestore'
+import { StyleStore } from '../libs/stylestore'
 import { ApiStyleStore } from '../libs/apistore'
 import { RevisionStore } from '../libs/revisions'
 import LayerWatcher from '../libs/layerwatcher'
@@ -217,7 +217,7 @@ export default class App extends React.Component {
     })
   }
 
-  onStyleChanged(newStyle, save=true) {
+  onStyleChanged = (newStyle, save=true) => {
 
     const errors = styleSpec.validate(newStyle, styleSpec.latest)
     if(errors.length === 0) {
@@ -244,7 +244,7 @@ export default class App extends React.Component {
     this.fetchSources();
   }
 
-  onUndo() {
+  onUndo = () => {
     const activeStyle = this.revisionStore.undo()
     const messages = undoMessages(this.state.mapStyle, activeStyle)
     this.saveStyle(activeStyle)
@@ -254,7 +254,7 @@ export default class App extends React.Component {
     })
   }
 
-  onRedo() {
+  onRedo = () => {
     const activeStyle = this.revisionStore.redo()
     const messages = redoMessages(this.state.mapStyle, activeStyle)
     this.saveStyle(activeStyle)
@@ -264,7 +264,7 @@ export default class App extends React.Component {
     })
   }
 
-  onMoveLayer(move) {
+  onMoveLayer = (move) => {
     let { oldIndex, newIndex } = move;
     let layers = this.state.mapStyle.layers;
     oldIndex = clamp(oldIndex, 0, layers.length-1);
@@ -282,7 +282,7 @@ export default class App extends React.Component {
     this.onLayersChange(layers);
   }
 
-  onLayersChange(changedLayers) {
+  onLayersChange = (changedLayers) => {
     const changedStyle = {
       ...this.state.mapStyle,
       layers: changedLayers
@@ -290,7 +290,7 @@ export default class App extends React.Component {
     this.onStyleChanged(changedStyle)
   }
 
-  onLayerDestroy(layerId) {
+  onLayerDestroy = (layerId) => {
     let layers = this.state.mapStyle.layers;
     const remainingLayers = layers.slice(0);
     const idx = style.indexOfLayer(remainingLayers, layerId)
@@ -298,7 +298,7 @@ export default class App extends React.Component {
     this.onLayersChange(remainingLayers);
   }
 
-  onLayerCopy(layerId) {
+  onLayerCopy = (layerId) => {
     let layers = this.state.mapStyle.layers;
     const changedLayers = layers.slice(0)
     const idx = style.indexOfLayer(changedLayers, layerId)
@@ -309,7 +309,7 @@ export default class App extends React.Component {
     this.onLayersChange(changedLayers)
   }
 
-  onLayerVisibilityToggle(layerId) {
+  onLayerVisibilityToggle = (layerId) => {
     let layers = this.state.mapStyle.layers;
     const changedLayers = layers.slice(0)
     const idx = style.indexOfLayer(changedLayers, layerId)
@@ -324,7 +324,7 @@ export default class App extends React.Component {
   }
 
 
-  onLayerIdChange(oldId, newId) {
+  onLayerIdChange = (oldId, newId) => {
     const changedLayers = this.state.mapStyle.layers.slice(0)
     const idx = style.indexOfLayer(changedLayers, oldId)
 
@@ -336,7 +336,7 @@ export default class App extends React.Component {
     this.onLayersChange(changedLayers)
   }
 
-  onLayerChanged(layer) {
+  onLayerChanged = (layer) => {
     const changedLayers = this.state.mapStyle.layers.slice(0)
     const idx = style.indexOfLayer(changedLayers, layer.id)
     changedLayers[idx] = layer
@@ -344,7 +344,7 @@ export default class App extends React.Component {
     this.onLayersChange(changedLayers)
   }
 
-  changeInspectMode() {
+  changeInspectMode = () => {
     this.setState({
       inspectModeEnabled: !this.state.inspectModeEnabled
     })
@@ -428,7 +428,7 @@ export default class App extends React.Component {
       mapElement = <MapboxGlMap {...mapProps}
         inspectModeEnabled={this.state.inspectModeEnabled}
         highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
-        onLayerSelect={this.onLayerSelect.bind(this)} />
+        onLayerSelect={this.onLayerSelect} />
     }
 
     const elementStyle = {};
@@ -441,7 +441,7 @@ export default class App extends React.Component {
     </div>
   }
 
-  onLayerSelect(layerId) {
+  onLayerSelect = (layerId) => {
     const idx = style.indexOfLayer(this.state.mapStyle.layers, layerId)
     this.setState({ selectedLayerIndex: idx })
   }
@@ -468,19 +468,19 @@ export default class App extends React.Component {
       mapStyle={this.state.mapStyle}
       inspectModeEnabled={this.state.inspectModeEnabled}
       sources={this.state.sources}
-      onStyleChanged={this.onStyleChanged.bind(this)}
+      onStyleChanged={this.onStyleChanged}
-      onStyleOpen={this.onStyleChanged.bind(this)}
+      onStyleOpen={this.onStyleChanged}
-      onInspectModeToggle={this.changeInspectMode.bind(this)}
+      onInspectModeToggle={this.changeInspectMode}
       onToggleModal={this.toggleModal.bind(this)}
     />
 
     const layerList = <LayerList
-      onMoveLayer={this.onMoveLayer.bind(this)}
+      onMoveLayer={this.onMoveLayer}
-      onLayerDestroy={this.onLayerDestroy.bind(this)}
+      onLayerDestroy={this.onLayerDestroy}
-      onLayerCopy={this.onLayerCopy.bind(this)}
+      onLayerCopy={this.onLayerCopy}
-      onLayerVisibilityToggle={this.onLayerVisibilityToggle.bind(this)}
+      onLayerVisibilityToggle={this.onLayerVisibilityToggle}
-      onLayersChange={this.onLayersChange.bind(this)}
+      onLayersChange={this.onLayersChange}
-      onLayerSelect={this.onLayerSelect.bind(this)}
+      onLayerSelect={this.onLayerSelect}
       selectedLayerIndex={this.state.selectedLayerIndex}
       layers={layers}
       sources={this.state.sources}
@@ -494,12 +494,12 @@ export default class App extends React.Component {
       sources={this.state.sources}
       vectorLayers={this.state.vectorLayers}
       spec={this.state.spec}
-      onMoveLayer={this.onMoveLayer.bind(this)}
+      onMoveLayer={this.onMoveLayer}
-      onLayerChanged={this.onLayerChanged.bind(this)}
+      onLayerChanged={this.onLayerChanged}
-      onLayerDestroy={this.onLayerDestroy.bind(this)}
+      onLayerDestroy={this.onLayerDestroy}
-      onLayerCopy={this.onLayerCopy.bind(this)}
+      onLayerCopy={this.onLayerCopy}
-      onLayerVisibilityToggle={this.onLayerVisibilityToggle.bind(this)}
+      onLayerVisibilityToggle={this.onLayerVisibilityToggle}
-      onLayerIdChange={this.onLayerIdChange.bind(this)}
+      onLayerIdChange={this.onLayerIdChange}
     /> : null
 
     const bottomPanel = (this.state.errors.length + this.state.infos.length) > 0 ? <MessagePanel
@@ -515,24 +515,24 @@ export default class App extends React.Component {
       />
       <SettingsModal
         mapStyle={this.state.mapStyle}
-        onStyleChanged={this.onStyleChanged.bind(this)}
+        onStyleChanged={this.onStyleChanged}
         isOpen={this.state.isOpen.settings}
         onOpenToggle={this.toggleModal.bind(this, 'settings')}
       />
       <ExportModal
         mapStyle={this.state.mapStyle}
-        onStyleChanged={this.onStyleChanged.bind(this)}
+        onStyleChanged={this.onStyleChanged}
         isOpen={this.state.isOpen.export}
         onOpenToggle={this.toggleModal.bind(this, 'export')}
       />
       <OpenModal
         isOpen={this.state.isOpen.open}
-        onStyleOpen={this.onStyleChanged.bind(this)}
+        onStyleOpen={this.onStyleChanged}
         onOpenToggle={this.toggleModal.bind(this, 'open')}
       />
       <SourcesModal
         mapStyle={this.state.mapStyle}
-        onStyleChanged={this.onStyleChanged.bind(this)}
+        onStyleChanged={this.onStyleChanged}
         isOpen={this.state.isOpen.sources}
         onOpenToggle={this.toggleModal.bind(this, 'sources')}
       />

src/components/Toolbar.jsx

@@ -1,19 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import FileReaderInput from 'react-file-reader-input'
 import classnames from 'classnames'
 
 import MdFileDownload from 'react-icons/lib/md/file-download'
-import MdFileUpload from 'react-icons/lib/md/file-upload'
 import OpenIcon from 'react-icons/lib/md/open-in-browser'
 import SettingsIcon from 'react-icons/lib/md/settings'
-import MdInfo from 'react-icons/lib/md/info'
 import SourcesIcon from 'react-icons/lib/md/layers'
-import MdSave from 'react-icons/lib/md/save'
-import MdStyle from 'react-icons/lib/md/style'
-import MdMap from 'react-icons/lib/md/map'
-import MdInsertEmoticon from 'react-icons/lib/md/insert-emoticon'
-import MdFontDownload from 'react-icons/lib/md/font-download'
 import HelpIcon from 'react-icons/lib/md/help-outline'
 import InspectionIcon from 'react-icons/lib/md/find-in-page'
 import SurveyIcon from 'react-icons/lib/md/assignment-turned-in'
@@ -21,7 +13,6 @@ import SurveyIcon from 'react-icons/lib/md/assignment-turned-in'
 import logoImage from 'maputnik-design/logos/logo-color.svg'
 import pkgJson from '../../package.json'
 
-import style from '../libs/style'
 
 class IconText extends React.Component {
   static propTypes = {
@@ -107,16 +98,13 @@ export default class Toolbar extends React.Component {
     onToggleModal: PropTypes.func,
   }
 
-  constructor(props) {
+  state = {
-    super(props)
+    isOpen: {
-    this.state = {
+      settings: false,
-      isOpen: {
+      sources: false,
-        settings: false,
+      open: false,
-        sources: false,
+      add: false,
-        open: false,
+      export: false,
-        add: false,
-        export: false,
-      }
     }
   }
 

src/components/fields/ColorField.jsx

@@ -19,17 +19,14 @@ class ColorField extends React.Component {
     default: PropTypes.string,
   }
 
-  constructor(props) {
+  state = {
-    super(props)
+    pickerOpened: false
-    this.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)}
+          onDeleteStop={this.deleteStop}
-          onAddStop={this.addStop.bind(this)}
+          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)}
+          onDeleteStop={this.deleteStop}
-          onAddStop={this.addStop.bind(this)}
+          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)}
+          onZoomClick={this.makeZoomFunction}
-          onDataClick={this.makeDataFunction.bind(this)} 
+          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

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

src/components/filter/FilterEditor.jsx

@@ -9,9 +9,6 @@ import SingleFilterEditor from './SingleFilterEditor'
 import FilterEditorBlock from './FilterEditorBlock'
 import Button from '../Button'
 
-import DeleteIcon from 'react-icons/lib/md/delete'
-import AddIcon from 'react-icons/lib/fa/plus'
-
 function hasCombiningFilter(filter) {
   return combiningFilterOps.indexOf(filter[0]) >= 0
 }
@@ -60,7 +57,7 @@ export default class CombiningFilterEditor extends React.Component {
     this.props.onChange(newFilter)
   }
 
-  addFilterItem() {
+  addFilterItem = () => {
     const newFilterItem = this.combiningFilter().slice(0)
     newFilterItem.push(['==', 'name', ''])
     this.props.onChange(newFilterItem)
@@ -105,7 +102,7 @@ export default class CombiningFilterEditor extends React.Component {
         <Button
           data-wd-key="layer-filter-button"
           className="maputnik-add-filter"
-          onClick={this.addFilterItem.bind(this)}>
+          onClick={this.addFilterItem}>
           Add filter
         </Button>
       </div>

src/components/inputs/AutocompleteInput.jsx

@@ -14,18 +14,15 @@ class AutocompleteInput extends React.Component {
     keepMenuWithinWindowBounds: PropTypes.bool
   }
 
+  state = {
+    maxHeight: MAX_HEIGHT
+  }
+
   static defaultProps = {
     onChange: () => {},
     options: [],
   }
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      maxHeight: MAX_HEIGHT
-    };
-  }
-
   calcMaxHeight() {
     if(this.props.keepMenuWithinWindowBounds) {
       const maxHeight = window.innerHeight - this.autocompleteMenuEl.getBoundingClientRect().top;
@@ -38,6 +35,7 @@ class AutocompleteInput extends React.Component {
       }
     }
   }
+
   componentDidMount() {
     this.calcMaxHeight();
   }

src/components/inputs/DynamicArrayInput.jsx

@@ -27,7 +27,7 @@ class DynamicArrayInput extends React.Component {
     return this.props.value || this.props.default || []
   }
 
-  addValue() {
+  addValue = () => {
     const values = this.values.slice(0)
     if (this.props.type === 'number') {
       values.push(0)
@@ -35,7 +35,6 @@ class DynamicArrayInput extends React.Component {
       values.push("")
     }
 
-
     this.props.onChange(values)
   }
 
@@ -77,7 +76,7 @@ class DynamicArrayInput extends React.Component {
       {inputs}
       <Button
         className="maputnik-array-add-value"
-        onClick={this.addValue.bind(this)}
+        onClick={this.addValue}
       >
         Add value
       </Button>

src/components/inputs/NumberInput.jsx

@@ -49,7 +49,7 @@ class NumberInput extends React.Component {
     return true
   }
 
-  resetValue() {
+  resetValue = () => {
     // Reset explicitly to default value if value has been cleared
     if(this.state.value === "") {
       return this.changeValue(this.props.default)
@@ -72,7 +72,7 @@ class NumberInput extends React.Component {
       placeholder={this.props.default}
       value={this.state.value}
       onChange={e => this.changeValue(e.target.value)}
-      onBlur={this.resetValue.bind(this)}
+      onBlur={this.resetValue}
     />
   }
 }

src/components/layers/LayerEditor.jsx

@@ -16,9 +16,6 @@ import LayerSourceLayerBlock from './LayerSourceLayerBlock'
 
 import MoreVertIcon from 'react-icons/lib/md/more-vert'
 
-import InputBlock from '../inputs/InputBlock'
-import MultiButtonInput from '../inputs/MultiButtonInput'
-
 import { changeType, changeProperty } from '../../libs/layer'
 import layout from '../../config/layout.json'
 
@@ -36,7 +33,7 @@ function layoutGroups(layerType) {
     title: 'JSON Editor',
     type: 'jsoneditor'
   }
-    return [layerGroup, filterGroup].concat(layout[layerType].groups).concat([editorGroup])
+  return [layerGroup, filterGroup].concat(layout[layerType].groups).concat([editorGroup])
 }
 
 /** Layer editor supporting multiple types of layers. */

src/components/layers/LayerList.jsx

@@ -2,13 +2,10 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-import Button from '../Button'
 import LayerListGroup from './LayerListGroup'
 import LayerListItem from './LayerListItem'
-import AddIcon from 'react-icons/lib/md/add-circle-outline'
 import AddModal from '../modals/AddModal'
 
-import style from '../../libs/style.js'
 import {SortableContainer, SortableHandle} from 'react-sortable-hoc';
 
 const layerListPropTypes = {
@@ -45,14 +42,11 @@ class LayerListContainer extends React.Component {
     onLayerSelect: () => {},
   }
 
-  constructor(props) {
+  state = {
-    super(props)
+    collapsedGroups: {},
-    this.state = {
+    areAllGroupsExpanded: false,
-      collapsedGroups: {},
+    isOpen: {
-      areAllGroupsExpanded: false,
+      add: false,
-      isOpen: {
-        add: false,
-      }
     } 
   }
 
@@ -65,7 +59,7 @@ class LayerListContainer extends React.Component {
     })
   }
 
-  toggleLayers() {
+  toggleLayers = () => {
     let idx=0
 
     let newGroups=[]
@@ -179,7 +173,7 @@ class LayerListContainer extends React.Component {
           <div className="maputnik-multibutton">
             <button
               id="skip-menu"
-              onClick={this.toggleLayers.bind(this)}
+              onClick={this.toggleLayers}
               className="maputnik-button">
               {this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}
             </button>

src/components/layers/LayerListItem.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Color from 'color'
 import classnames from 'classnames'
 
 import CopyIcon from 'react-icons/lib/md/content-copy'
@@ -9,7 +8,6 @@ import VisibilityOffIcon from 'react-icons/lib/md/visibility-off'
 import DeleteIcon from 'react-icons/lib/md/delete'
 
 import LayerIcon from '../icons/LayerIcon'
-import LayerEditor from './LayerEditor'
 import {SortableElement, SortableHandle} from 'react-sortable-hoc'
 
 @SortableHandle

src/components/layers/LayerSourceBlock.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 
 import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
 import AutocompleteInput from '../inputs/AutocompleteInput'
 
 class LayerSourceBlock extends React.Component {

src/components/layers/LayerSourceLayerBlock.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 
 import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
 import AutocompleteInput from '../inputs/AutocompleteInput'
 
 class LayerSourceLayer extends React.Component {

src/components/map/FeatureLayerPopup.jsx

@@ -1,7 +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'
 
 function groupFeaturesBySourceLayer(features) {

src/components/map/MapboxGlMap.jsx

@@ -5,7 +5,6 @@ import MapboxGl from 'mapbox-gl'
 import MapboxInspect from 'mapbox-gl-inspect'
 import FeatureLayerPopup from './FeatureLayerPopup'
 import FeaturePropertyPopup from './FeaturePropertyPopup'
-import style from '../../libs/style.js'
 import tokens from '../../config/tokens.json'
 import colors from 'mapbox-gl-inspect/lib/colors'
 import Color from 'color'

src/components/map/OpenLayers3Map.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import style from '../../libs/style.js'
-import isEqual from 'lodash.isequal'
 import { loadJSON } from '../../libs/urlopen'
 import 'ol/ol.css'
 

src/components/modals/AddModal.jsx

@@ -2,8 +2,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import Button from '../Button'
-import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
 import Modal from './Modal'
 
 import LayerTypeBlock from '../layers/LayerTypeBlock'
@@ -22,7 +20,7 @@ class AddModal extends React.Component {
     sources: PropTypes.object.isRequired,
   }
 
-  addLayer() {
+  addLayer = () => {
     const changedLayers = this.props.layers.slice(0)
     const layer = {
       id: this.state.id,
@@ -151,7 +149,7 @@ class AddModal extends React.Component {
       }
       <Button
         className="maputnik-add-layer-button"
-        onClick={this.addLayer.bind(this)}
+        onClick={this.addLayer}
         data-wd-key="add-layer"
       >
         Add Layer

src/components/modals/LoadingModal.jsx

@@ -13,10 +13,6 @@ class LoadingModal extends React.Component {
     message: PropTypes.node.isRequired,
   }
 
-  constructor(props) {
-    super(props);
-  }
-
   underlayOnClick(e) {
     // This stops click events falling through to underlying modals.
     e.stopPropagation();

src/components/modals/OpenModal.jsx

@@ -74,7 +74,7 @@ class OpenModal extends React.Component {
     }
   }
 
-  onStyleSelect(styleUrl) {
+  onStyleSelect = (styleUrl) => {
     this.clearError();
 
     const reqOpts = {
@@ -104,12 +104,12 @@ class OpenModal extends React.Component {
     })
   }
 
-  onOpenUrl() {
+  onOpenUrl = () => {
     const url = this.styleUrlElement.value;
     this.onStyleSelect(url);
   }
 
-  onUpload(_, files) {
+  onUpload = (_, files) => {
     const [e, file] = files[0];
     const reader = new FileReader();
 
@@ -146,7 +146,7 @@ class OpenModal extends React.Component {
         url={style.url}
         title={style.title}
         thumbnailUrl={style.thumbnail}
-        onSelect={this.onStyleSelect.bind(this)}
+        onSelect={this.onStyleSelect}
       />
     })
 
@@ -170,7 +170,7 @@ class OpenModal extends React.Component {
       <section className="maputnik-modal-section">
         <h2>Upload Style</h2>
         <p>Upload a JSON style from your computer.</p>
-        <FileReaderInput onChange={this.onUpload.bind(this)} tabIndex="-1">
+        <FileReaderInput onChange={this.onUpload} tabIndex="-1">
           <Button className="maputnik-upload-button"><FileUploadIcon /> Upload</Button>
         </FileReaderInput>
       </section>
@@ -182,7 +182,7 @@ class OpenModal extends React.Component {
         </p>
         <input data-wd-key="open-modal.url.input" type="text" ref={(input) => this.styleUrlElement = input} className="maputnik-input" placeholder="Enter URL..."/>
         <div>
-          <Button data-wd-key="open-modal.url.button" className="maputnik-big-button" onClick={this.onOpenUrl.bind(this)}>Open URL</Button>
+          <Button data-wd-key="open-modal.url.button" className="maputnik-big-button" onClick={this.onOpenUrl}>Open URL</Button>
         </div>
       </section>
 

src/components/modals/SettingsModal.jsx

@@ -15,10 +15,6 @@ class SettingsModal extends React.Component {
     onOpenToggle: PropTypes.func.isRequired,
   }
 
-  constructor(props) {
-    super(props);
-  }
-
   changeStyleProperty(property, value) {
     const changedStyle = {
       ...this.props.mapStyle,

src/components/modals/ShortcutsModal.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Button from '../Button'
 import Modal from './Modal'
 
 
@@ -11,10 +10,6 @@ class ShortcutsModal extends React.Component {
     onOpenToggle: PropTypes.func.isRequired,
   }
 
-  constructor(props) {
-    super(props);
-  }
-
   render() {
     const help = [
       {

src/components/modals/SurveyModal.jsx

@@ -12,8 +12,6 @@ class SurveyModal extends React.Component {
     onOpenToggle: PropTypes.func.isRequired,
   }
 
-  constructor(props) { super(props); }
-
   onClick = () => {
     window.open('https://gregorywolanski.typeform.com/to/cPgaSY', '_blank');
 

src/libs/style.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import deref from '@mapbox/mapbox-gl-style-spec/deref'
 import tokens from '../config/tokens.json'
 

src/libs/stylestore.js

@@ -1,8 +1,6 @@
-import { colorizeLayers } from './style.js'
 import style from './style.js'
 import { loadStyleUrl } from './urlopen'
 import publicSources from '../config/styles.json'
-import request from 'request'
 
 const storagePrefix = "maputnik"
 const stylePrefix = 'style'

test/functional/history/index.js

@@ -1,7 +1,6 @@
 var assert = require("assert");
 var config = require("../../config/specs");
 var helper = require("../helper");
-var wd     = require("../../wd-helper");
 
 
 describe.skip("history", function() {

test/functional/index.js

@@ -1,6 +1,4 @@
-var assert      = require('assert');
 var config      = require("../config/specs");
-var geoServer   = require("../geojson-server");
 var helper      = require("./helper");
 
 require("./util/webdriverio-ext");

test/functional/map/index.js

@@ -1,5 +1,3 @@
-var assert = require('assert');
-var wd     = require("../../wd-helper");
 var config = require("../../config/specs");
 var helper = require("../helper");
 

test/functional/screenshots/index.js

@@ -1,4 +1,3 @@
-var artifacts = require("../../artifacts");
 var config    = require("../../config/specs");
 var helper    = require("../helper");
 var wd        = require("../../wd-helper");