maputnik/src/components/MessagePanel.jsx

65 lines
1.7 KiB
React
Raw Normal View History

2016-12-31 14:32:04 +01:00
import React from 'react'
import PropTypes from 'prop-types'
import {formatLayerId} from './util/format';
2016-12-31 14:32:04 +01:00
class MessagePanel extends React.Component {
static propTypes = {
errors: PropTypes.array,
infos: PropTypes.array,
2020-02-02 07:41:31 +00:00
mapStyle: PropTypes.object,
onLayerSelect: PropTypes.func,
currentLayer: PropTypes.object,
selectedLayerIndex: PropTypes.number,
}
static defaultProps = {
onLayerSelect: () => {},
2016-12-31 14:32:04 +01:00
}
render() {
const {selectedLayerIndex} = this.props;
const errors = this.props.errors.map((error, idx) => {
let content;
if (error.parsed && error.parsed.type === "layer") {
const {parsed} = error;
const {mapStyle, currentLayer} = this.props;
const layerId = mapStyle.layers[parsed.data.index].id;
content = (
<>
Layer <span>{formatLayerId(layerId)}</span>: {parsed.data.message}
{selectedLayerIndex !== parsed.data.index &&
<>
&nbsp;&mdash;&nbsp;
<button
className="maputnik-message-panel__switch-button"
onClick={() => this.props.onLayerSelect(parsed.data.index)}
>
switch to layer
</button>
</>
}
</>
);
}
else {
content = error.message;
}
return <p key={"error-"+idx} className="maputnik-message-panel-error">
{content}
</p>
2016-12-31 14:32:04 +01:00
})
const infos = this.props.infos.map((m, i) => {
2017-11-08 08:47:36 +00:00
return <p key={"info-"+i}>{m}</p>
2016-12-31 14:32:04 +01:00
})
2017-01-11 14:11:45 +01:00
return <div className="maputnik-message-panel">
2016-12-31 14:32:04 +01:00
{errors}
{infos}
</div>
}
}
export default MessagePanel