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