Added ability to switch to layer from global error panel.

This commit is contained in:
orangemug 2020-02-17 13:19:26 +00:00
parent d1cb2690fc
commit adea3d0f13
3 changed files with 20 additions and 1 deletions

View file

@ -732,6 +732,7 @@ export default class App extends React.Component {
/> : null /> : null
const bottomPanel = (this.state.errors.length + this.state.infos.length) > 0 ? <MessagePanel const bottomPanel = (this.state.errors.length + this.state.infos.length) > 0 ? <MessagePanel
onLayerSelect={this.onLayerSelect}
mapStyle={this.state.mapStyle} mapStyle={this.state.mapStyle}
errors={this.state.errors} errors={this.state.errors}
infos={this.state.infos} infos={this.state.infos}

View file

@ -6,6 +6,11 @@ class MessagePanel extends React.Component {
errors: PropTypes.array, errors: PropTypes.array,
infos: PropTypes.array, infos: PropTypes.array,
mapStyle: PropTypes.object, mapStyle: PropTypes.object,
onLayerSelect: PropTypes.func,
}
static defaultProps = {
onLayerSelect: () => {},
} }
render() { render() {
@ -14,9 +19,16 @@ class MessagePanel extends React.Component {
if (error.parsed && error.parsed.type === "layer") { if (error.parsed && error.parsed.type === "layer") {
const {parsed} = error; const {parsed} = error;
const {mapStyle} = this.props; const {mapStyle} = this.props;
const layerId = mapStyle.layers[parsed.data.index].id;
content = ( content = (
<> <>
Layer <span>&apos;{mapStyle.layers[parsed.data.index].id}&apos;</span>: {parsed.data.message} Layer <span>&apos;{layerId}&apos;</span>: {parsed.data.message} &mdash;&nbsp;
<button
className="maputnik-message-panel__switch-button"
onClick={() => this.props.onLayerSelect(layerId)}
>
switch to layer
</button>
</> </>
); );
} }

View file

@ -212,6 +212,12 @@
&-error { &-error {
color: $color-red; color: $color-red;
} }
&__switch-button {
all: unset;
text-decoration: underline;
cursor: pointer;
}
} }
.maputnik-dialog { .maputnik-dialog {