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 { } @@ -182,7 +182,7 @@ class OpenModal extends React.Component {

this.styleUrlElement = input} className="maputnik-input" placeholder="Enter URL..."/>
- +
diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx index b7da0a1..36f8b29 100644 --- a/src/components/modals/SettingsModal.jsx +++ b/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, diff --git a/src/components/modals/ShortcutsModal.jsx b/src/components/modals/ShortcutsModal.jsx index 6a17e4b..2ab8f9a 100644 --- a/src/components/modals/ShortcutsModal.jsx +++ b/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 = [ { diff --git a/src/components/modals/SurveyModal.jsx b/src/components/modals/SurveyModal.jsx index e1ae021..7f10bc3 100644 --- a/src/components/modals/SurveyModal.jsx +++ b/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');