diff --git a/package-lock.json b/package-lock.json
index 0ef5f7e..8c89644 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "maputnik",
- "version": "1.1.0-beta",
+ "version": "1.1.0-beta3",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -7945,9 +7945,9 @@
}
},
"mapbox-gl-inspect": {
- "version": "1.2.4",
- "resolved": "https://registry.npmjs.org/mapbox-gl-inspect/-/mapbox-gl-inspect-1.2.4.tgz",
- "integrity": "sha1-7WD6SfXlS4JieOFKthJQqYYKYjU=",
+ "version": "1.2.6",
+ "resolved": "https://registry.npmjs.org/mapbox-gl-inspect/-/mapbox-gl-inspect-1.2.6.tgz",
+ "integrity": "sha512-4qOIuLa+I81Nj67NEtcxn+AdigysIMkY57j1cb1C0k1/yHTvq5viCZozjfTRavhLRBj1NDmoWJTi0A1mGpz2JQ==",
"requires": {
"lodash.isequal": "4.5.0",
"randomcolor": "0.4.4"
diff --git a/package.json b/package.json
index 0c04693..855fcac 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "maputnik",
- "version": "1.1.0-beta",
+ "version": "1.1.0-beta3",
"description": "A MapboxGL visual style editor",
"main": "''",
"scripts": {
@@ -33,7 +33,7 @@
"lodash.isequal": "^4.5.0",
"lodash.throttle": "^4.1.1",
"mapbox-gl": "^0.43.0",
- "mapbox-gl-inspect": "^1.2.4",
+ "mapbox-gl-inspect": "^1.2.6",
"maputnik-design": "github:maputnik/design",
"mousetrap": "^1.6.1",
"ol-mapbox-style": "^1.0.1",
diff --git a/src/components/App.jsx b/src/components/App.jsx
index cd74f74..8d7efee 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -266,7 +266,8 @@ export default class App extends React.Component {
} else {
return
+ highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
+ onLayerSelect={this.onLayerSelect.bind(this)} />
}
}
diff --git a/src/components/inputs/AutocompleteInput.jsx b/src/components/inputs/AutocompleteInput.jsx
index ded6828..a81ab51 100644
--- a/src/components/inputs/AutocompleteInput.jsx
+++ b/src/components/inputs/AutocompleteInput.jsx
@@ -6,11 +6,24 @@ import Autocomplete from 'react-autocomplete'
const MAX_HEIGHT = 140;
-class AutocompleteMenu extends React.Component {
+class AutocompleteInput extends React.Component {
static propTypes = {
- keepMenuWithinWindowBounds: PropTypes.bool,
- style: PropTypes.object,
- children: PropTypes.node
+ value: PropTypes.string,
+ options: PropTypes.array,
+ onChange: PropTypes.func,
+ keepMenuWithinWindowBounds: PropTypes.bool
+ }
+
+ static defaultProps = {
+ onChange: () => {},
+ options: [],
+ }
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ maxHeight: MAX_HEIGHT
+ };
}
calcMaxHeight() {
@@ -33,87 +46,46 @@ class AutocompleteMenu extends React.Component {
this.calcMaxHeight();
}
- constructor(props) {
- super(props);
- this.state = {
- maxHeight: MAX_HEIGHT
- };
- }
-
- static defaultProps = {
- style: {}
- }
-
render() {
- const maxHeight = this.state.maxHeight - this.props.style.marginBottom || 0;
- const style = {
- maxHeight: maxHeight+"px"
- }
-
- return (
-
{
- this.autocompleteMenuEl = el;
+ return
{
+ this.autocompleteMenuEl = el;
+ }}
+ >
+
- {this.props.children}
-
- )
- }
-}
-
-class AutocompleteInput extends React.Component {
- static propTypes = {
- value: PropTypes.string,
- options: PropTypes.array,
- onChange: PropTypes.func,
- keepMenuWithinWindowBounds: PropTypes.bool
- }
-
- static defaultProps = {
- onChange: () => {},
- options: [],
- }
-
- render() {
- return
{
- return
- {items}
-
- }}
- inputProps={{
- className: "maputnik-string"
- }}
- value={this.props.value}
- items={this.props.options}
- getItemValue={(item) => item[0]}
- onSelect={v => {
- console.log("@@ onSelect", v)
- this.props.onChange(v)
- }}
- onChange={(e, v) => {
- console.log("@@ onChange", v)
- this.props.onChange(v)
- }}
- renderItem={(item, isHighlighted) => (
-
- {item[1]}
-
- )}
- />
+ wrapperProps={{
+ className: "maputnik-autocomplete",
+ style: null
+ }}
+ inputProps={{
+ className: "maputnik-string"
+ }}
+ value={this.props.value}
+ items={this.props.options}
+ getItemValue={(item) => item[0]}
+ onSelect={v => this.props.onChange(v)}
+ onChange={(e, v) => this.props.onChange(v)}
+ shouldItemRender={(item, value) => {
+ return item[0].toLowerCase().indexOf(value.toLowerCase()) > -1
+ }}
+ renderItem={(item, isHighlighted) => (
+
+ {item[1]}
+
+ )}
+ />
+
}
}
diff --git a/src/components/layers/LayerList.jsx b/src/components/layers/LayerList.jsx
index 0d56734..d0706ff 100644
--- a/src/components/layers/LayerList.jsx
+++ b/src/components/layers/LayerList.jsx
@@ -165,7 +165,7 @@ class LayerListContainer extends React.Component {
data-wd-key={[groupPrefix, idx].join('-')}
key={[groupPrefix, idx].join('-')}
title={groupPrefix}
- isActive={!this.isCollapsed(groupPrefix, idx)}
+ isActive={!this.isCollapsed(groupPrefix, idx) || idx === this.props.selectedLayerIndex}
onActiveToggle={this.toggleLayerGroup.bind(this, groupPrefix, idx)}
/>
listItems.push(grp)
@@ -173,9 +173,10 @@ class LayerListContainer extends React.Component {
layers.forEach((layer, idxInGroup) => {
const groupIdx = findClosestCommonPrefix(this.props.layers, idx)
+
const listItem = 1 && this.isCollapsed(groupPrefix, groupIdx),
+ 'maputnik-layer-list-item-collapsed': layers.length > 1 && this.isCollapsed(groupPrefix, groupIdx) && idx !== this.props.selectedLayerIndex,
'maputnik-layer-list-item-group-last': idxInGroup == layers.length - 1 && layers.length > 1
})}
index={idx}
diff --git a/src/components/map/FeatureLayerPopup.jsx b/src/components/map/FeatureLayerPopup.jsx
index c9196a7..5d14d01 100644
--- a/src/components/map/FeatureLayerPopup.jsx
+++ b/src/components/map/FeatureLayerPopup.jsx
@@ -29,6 +29,7 @@ function groupFeaturesBySourceLayer(features) {
class FeatureLayerPopup extends React.Component {
static propTypes = {
+ onLayerSelect: PropTypes.func.isRequired,
features: PropTypes.array
}
@@ -40,6 +41,9 @@ class FeatureLayerPopup extends React.Component {
return