-
- {/* Keyboard accessible quick links */}
-
-
+
+ );
}
}
diff --git a/src/components/LayerEditor.jsx b/src/components/LayerEditor.jsx
index f4dbb8ec..5b0ce5b5 100644
--- a/src/components/LayerEditor.jsx
+++ b/src/components/LayerEditor.jsx
@@ -1,47 +1,46 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton'
+import PropTypes from "prop-types";
+import React from "react";
+import { Button, Menu, MenuItem, Wrapper } from "react-aria-menubutton";
-import FieldJson from './FieldJson'
-import FilterEditor from './FilterEditor'
-import PropertyGroup from './PropertyGroup'
-import LayerEditorGroup from './LayerEditorGroup'
-import FieldType from './FieldType'
-import FieldId from './FieldId'
-import FieldMinZoom from './FieldMinZoom'
-import FieldMaxZoom from './FieldMaxZoom'
-import FieldComment from './FieldComment'
-import FieldSource from './FieldSource'
-import FieldSourceLayer from './FieldSourceLayer'
-import {Accordion} from 'react-accessible-accordion';
+import { Accordion } from "react-accessible-accordion";
+import FieldComment from "./FieldComment";
+import FieldId from "./FieldId";
+import FieldJson from "./FieldJson";
+import FieldMaxZoom from "./FieldMaxZoom";
+import FieldMinZoom from "./FieldMinZoom";
+import FieldSource from "./FieldSource";
+import FieldSourceLayer from "./FieldSourceLayer";
+import FieldType from "./FieldType";
+import FilterEditor from "./FilterEditor";
+import LayerEditorGroup from "./LayerEditorGroup";
+import PropertyGroup from "./PropertyGroup";
-import {MdMoreVert} from 'react-icons/md'
+import { MdMoreVert } from "react-icons/md";
-import { changeType, changeProperty } from '../libs/layer'
-import layout from '../config/layout.json'
-import {formatLayerId} from '../util/format';
+import layout from "../config/layout.json";
+import { changeProperty, changeType } from "../libs/layer";
+import { formatLayerId } from "../util/format";
-
-function getLayoutForType (type) {
+function getLayoutForType(type) {
return layout[type] ? layout[type] : layout.invalid;
}
function layoutGroups(layerType) {
const layerGroup = {
- title: 'Layer',
- type: 'layer'
- }
+ title: "Layer",
+ type: "layer",
+ };
const filterGroup = {
- title: 'Filter',
- type: 'filter'
- }
+ title: "Filter",
+ type: "filter",
+ };
const editorGroup = {
- title: 'JSON Editor',
- type: 'jsoneditor'
- }
+ title: "JSON Editor",
+ type: "jsoneditor",
+ };
return [layerGroup, filterGroup]
.concat(getLayoutForType(layerType).groups)
- .concat([editorGroup])
+ .concat([editorGroup]);
}
/** Layer editor supporting multiple types of layers. */
@@ -61,277 +60,320 @@ export default class LayerEditor extends React.Component {
isLastLayer: PropTypes.bool,
layerIndex: PropTypes.number,
errors: PropTypes.array,
- }
+ };
static defaultProps = {
onLayerChanged: () => {},
onLayerIdChange: () => {},
onLayerDestroyed: () => {},
- }
+ };
static childContextTypes = {
- reactIconBase: PropTypes.object
- }
+ reactIconBase: PropTypes.object,
+ };
constructor(props) {
- super(props)
+ super(props);
//TODO: Clean this up and refactor into function
- const editorGroups = {}
- layoutGroups(this.props.layer.type).forEach(group => {
- editorGroups[group.title] = true
- })
+ const editorGroups = {};
+ layoutGroups(this.props.layer.type).forEach((group) => {
+ editorGroups[group.title] = true;
+ });
- this.state = { editorGroups }
+ this.state = { editorGroups };
}
static getDerivedStateFromProps(props, state) {
- const additionalGroups = { ...state.editorGroups }
+ const additionalGroups = { ...state.editorGroups };
- getLayoutForType(props.layer.type).groups.forEach(group => {
- if(!(group.title in additionalGroups)) {
- additionalGroups[group.title] = true
+ getLayoutForType(props.layer.type).groups.forEach((group) => {
+ if (!(group.title in additionalGroups)) {
+ additionalGroups[group.title] = true;
}
- })
+ });
return {
- editorGroups: additionalGroups
+ editorGroups: additionalGroups,
};
}
- getChildContext () {
+ getChildContext() {
return {
reactIconBase: {
size: 14,
- color: '#8e8e8e',
- }
- }
+ color: "#8e8e8e",
+ },
+ };
}
changeProperty(group, property, newValue) {
this.props.onLayerChanged(
this.props.layerIndex,
changeProperty(this.props.layer, group, property, newValue)
- )
+ );
}
onGroupToggle(groupTitle, active) {
const changedActiveGroups = {
...this.state.editorGroups,
[groupTitle]: active,
- }
+ };
this.setState({
- editorGroups: changedActiveGroups
- })
+ editorGroups: changedActiveGroups,
+ });
}
renderGroupType(type, fields) {
- let comment = ""
- if(this.props.layer.metadata) {
- comment = this.props.layer.metadata['maputnik:comment']
+ let comment = "";
+ if (this.props.layer.metadata) {
+ comment = this.props.layer.metadata["maputnik:comment"];
}
- const {errors, layerIndex} = this.props;
+ const { errors, layerIndex } = this.props;
const errorData = {};
- errors.forEach(error => {
+ errors.forEach((error) => {
if (
error.parsed &&
error.parsed.type === "layer" &&
error.parsed.data.index == layerIndex
) {
errorData[error.parsed.data.key] = {
- message: error.parsed.data.message
+ message: error.parsed.data.message,
};
}
- })
+ });
let sourceLayerIds;
- if(this.props.sources.hasOwnProperty(this.props.layer.source)) {
+ if (this.props.sources.hasOwnProperty(this.props.layer.source)) {
sourceLayerIds = this.props.sources[this.props.layer.source].layers;
}
- switch(type) {
- case 'layer': return
- this.props.onLayerIdChange(this.props.layerIndex, this.props.layer.id, newId)}
- />
- this.props.onLayerChanged(
- this.props.layerIndex,
- changeType(this.props.layer, newType)
- )}
- />
- {this.props.layer.type !== 'background' && this.changeProperty(null, 'source', v)}
- />
- }
- {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.props.layer.type) < 0 &&
- this.changeProperty(null, 'source-layer', v)}
- />
- }
- this.changeProperty(null, 'minzoom', v)}
- />
- this.changeProperty(null, 'maxzoom', v)}
- />
- this.changeProperty('metadata', 'maputnik:comment', v == "" ? undefined : v)}
- />
-
- case 'filter': return
-
-
+
+ this.props.onLayerIdChange(
+ this.props.layerIndex,
+ this.props.layer.id,
+ newId
+ )
+ }
+ />
+
+ this.props.onLayerChanged(
+ this.props.layerIndex,
+ changeType(this.props.layer, newType)
+ )
+ }
+ />
+ {this.props.layer.type !== "background" && (
+ this.changeProperty(null, "source", v)}
+ />
+ )}
+ {["background", "raster", "hillshade", "heatmap"].indexOf(
+ this.props.layer.type
+ ) < 0 && (
+ this.changeProperty(null, "source-layer", v)}
+ />
+ )}
+ this.changeProperty(null, "minzoom", v)}
+ />
+ this.changeProperty(null, "maxzoom", v)}
+ />
+
+ this.changeProperty(
+ "metadata",
+ "maputnik:comment",
+ v == "" ? undefined : v
+ )
+ }
+ />
+
+ );
+ case "filter":
+ return (
+
+
+ this.changeProperty(null, "filter", f)}
+ />
+
+
+ );
+ case "properties":
+ return (
+
this.changeProperty(null, 'filter', f)}
+ layer={this.props.layer}
+ groupFields={fields}
+ spec={this.props.spec}
+ onChange={this.changeProperty.bind(this)}
/>
-
-