diff --git a/.babelrc b/.babelrc
index adae42d..27baf2a 100644
--- a/.babelrc
+++ b/.babelrc
@@ -5,9 +5,9 @@
"test": {
"plugins": [
["istanbul", {
- exclude: ["node_modules/**", "test/**"]
+ "exclude": ["node_modules/**", "test/**"]
}]
]
}
}
-}
+}
\ No newline at end of file
diff --git a/src/components/App.jsx b/src/components/App.jsx
index e317f92..b2355ab 100644
--- a/src/components/App.jsx
+++ b/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 =
+ 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..77ee1ad 100644
--- a/src/components/Toolbar.jsx
+++ b/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) {
- 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 = 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 {
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..cb77be2 100644
--- a/src/components/layers/LayerEditor.jsx
+++ b/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. */
diff --git a/src/components/layers/LayerList.jsx b/src/components/layers/LayerList.jsx
index 83ebe33..dcabe6b 100644
--- a/src/components/layers/LayerList.jsx
+++ b/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,15 +42,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 +59,7 @@ class LayerListContainer extends React.Component {
})
}
- toggleLayers() {
+ toggleLayers = () => {
let idx=0
let newGroups=[]
@@ -179,7 +173,7 @@ class LayerListContainer extends React.Component {
diff --git a/src/components/layers/LayerListItem.jsx b/src/components/layers/LayerListItem.jsx
index 5c65188..805e50f 100644
--- a/src/components/layers/LayerListItem.jsx
+++ b/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
diff --git a/src/components/layers/LayerSourceBlock.jsx b/src/components/layers/LayerSourceBlock.jsx
index 3773f73..9a6b9e2 100644
--- a/src/components/layers/LayerSourceBlock.jsx
+++ b/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 {
diff --git a/src/components/layers/LayerSourceLayerBlock.jsx b/src/components/layers/LayerSourceLayerBlock.jsx
index 804e93f..15b48b5 100644
--- a/src/components/layers/LayerSourceLayerBlock.jsx
+++ b/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 {
diff --git a/src/components/map/FeatureLayerPopup.jsx b/src/components/map/FeatureLayerPopup.jsx
index 5d14d01..2d0eacb 100644
--- a/src/components/map/FeatureLayerPopup.jsx
+++ b/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) {
diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx
index eb27609..d0e3850 100644
--- a/src/components/map/MapboxGlMap.jsx
+++ b/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'
diff --git a/src/components/map/OpenLayers3Map.jsx b/src/components/map/OpenLayers3Map.jsx
index 113781a..9cfcbf0 100644
--- a/src/components/map/OpenLayers3Map.jsx
+++ b/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'
diff --git a/src/components/modals/AddModal.jsx b/src/components/modals/AddModal.jsx
index b42b736..0cdac51 100644
--- a/src/components/modals/AddModal.jsx
+++ b/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 {
}