diff --git a/src/components/App.jsx b/src/components/App.jsx
index e317f92..4a2652d 100644
--- a/src/components/App.jsx
+++ b/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 =
+ onLayerSelect={this.onLayerSelect} />
}
const elementStyle = {};
@@ -441,7 +441,7 @@ export default class App extends React.Component {
}
- 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)}
- onStyleOpen={this.onStyleChanged.bind(this)}
- onInspectModeToggle={this.changeInspectMode.bind(this)}
+ onStyleChanged={this.onStyleChanged}
+ onStyleOpen={this.onStyleChanged}
+ onInspectModeToggle={this.changeInspectMode}
onToggleModal={this.toggleModal.bind(this)}
/>
const layerList = : null
const bottomPanel = (this.state.errors.length + this.state.infos.length) > 0 ?
diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index ede36f2..87a209f 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -107,16 +107,13 @@ export default class Toolbar extends React.Component {
onToggleModal: PropTypes.func,
}
- constructor(props) {
- super(props)
- this.state = {
- isOpen: {
- settings: false,
- sources: false,
- open: false,
- add: false,
- export: false,
- }
+ state = {
+ isOpen: {
+ settings: false,
+ sources: false,
+ open: false,
+ add: false,
+ export: false,
}
}
diff --git a/src/components/fields/ColorField.jsx b/src/components/fields/ColorField.jsx
index 6e538c9..9a40090 100644
--- a/src/components/fields/ColorField.jsx
+++ b/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 {
/>
this.colorInput = input}
- onClick={this.togglePicker.bind(this)}
+ onClick={this.togglePicker}
style={this.props.style}
name={this.props.name}
placeholder={this.props.default}
diff --git a/src/components/fields/DocLabel.jsx b/src/components/fields/DocLabel.jsx
index 9af6a86..65d7193 100644
--- a/src/components/fields/DocLabel.jsx
+++ b/src/components/fields/DocLabel.jsx
@@ -17,7 +17,7 @@ export default class DocLabel extends React.Component {
{this.props.doc}
-
+
}
}
diff --git a/src/components/fields/FunctionSpecField.jsx b/src/components/fields/FunctionSpecField.jsx
index 981bb1c..3067c1b 100644
--- a/src/components/fields/FunctionSpecField.jsx
+++ b/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}
/>
)
}
diff --git a/src/components/fields/PropertyGroup.jsx b/src/components/fields/PropertyGroup.jsx
index 5d3c72c..efb567b 100644
--- a/src/components/fields/PropertyGroup.jsx
+++ b/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 {
const newFilterItem = this.combiningFilter().slice(0)
newFilterItem.push(['==', 'name', ''])
this.props.onChange(newFilterItem)
@@ -105,7 +105,7 @@ export default class CombiningFilterEditor extends React.Component {
diff --git a/src/components/inputs/AutocompleteInput.jsx b/src/components/inputs/AutocompleteInput.jsx
index d33bdbd..2ba6ef8 100644
--- a/src/components/inputs/AutocompleteInput.jsx
+++ b/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();
}
diff --git a/src/components/inputs/DynamicArrayInput.jsx b/src/components/inputs/DynamicArrayInput.jsx
index 5596e24..6e58d56 100644
--- a/src/components/inputs/DynamicArrayInput.jsx
+++ b/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}
diff --git a/src/components/inputs/NumberInput.jsx b/src/components/inputs/NumberInput.jsx
index 447fab8..f3f3e77 100644
--- a/src/components/inputs/NumberInput.jsx
+++ b/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}
/>
}
}
diff --git a/src/components/layers/LayerEditor.jsx b/src/components/layers/LayerEditor.jsx
index 7d7291d..90ca341 100644
--- a/src/components/layers/LayerEditor.jsx
+++ b/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. */
diff --git a/src/components/layers/LayerList.jsx b/src/components/layers/LayerList.jsx
index 83ebe33..0387b63 100644
--- a/src/components/layers/LayerList.jsx
+++ b/src/components/layers/LayerList.jsx
@@ -45,15 +45,12 @@ class LayerListContainer extends React.Component {
onLayerSelect: () => {},
}
- constructor(props) {
- super(props)
- this.state = {
- collapsedGroups: {},
- areAllGroupsExpanded: false,
- isOpen: {
- add: false,
- }
- }
+ state = {
+ collapsedGroups: {},
+ areAllGroupsExpanded: 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 {
diff --git a/src/components/modals/AddModal.jsx b/src/components/modals/AddModal.jsx
index b42b736..0c9bcfe 100644
--- a/src/components/modals/AddModal.jsx
+++ b/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 {
}