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

src/components/App.jsx

@@ -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

@@ -107,16 +107,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/_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

@@ -60,7 +60,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 +105,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,14 +27,13 @@ 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)
     } else {
       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

@@ -36,7 +36,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

@@ -45,15 +45,12 @@ 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,
-      }
-    }
   }
 
   toggleModal(modalName) {
@@ -65,7 +62,7 @@ class LayerListContainer extends React.Component {
     })
   }
 
-  toggleLayers() {
+  toggleLayers = () => {
     let idx=0
 
     let newGroups=[]
@@ -179,7 +176,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/modals/AddModal.jsx

@@ -22,7 +22,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 +151,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/ExportModal.jsx

@@ -21,14 +21,11 @@ class Gist extends React.Component {
     onStyleChanged: PropTypes.func.isRequired,
   }
 
-  constructor(props) {
+  state = {
-    super(props);
+    preview: false,
-    this.state = {
+    public: false,
-      preview: false,
+    saving: false,
-      public: false,
+    latestGist: null,
-      saving: false,
-      latestGist: null,
-    }
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {

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

@@ -11,10 +11,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');