2016-12-31 14:32:04 +01:00
|
|
|
import React from 'react'
|
2017-11-06 15:32:04 +00:00
|
|
|
import PropTypes from 'prop-types'
|
2020-03-28 10:58:47 +00:00
|
|
|
import {formatLayerId} from './util/format';
|
2016-12-31 14:32:04 +01:00
|
|
|
|
|
|
|
class MessagePanel extends React.Component {
|
|
|
|
static propTypes = {
|
2017-11-06 15:32:04 +00:00
|
|
|
errors: PropTypes.array,
|
|
|
|
infos: PropTypes.array,
|
2020-02-02 07:41:31 +00:00
|
|
|
mapStyle: PropTypes.object,
|
2020-02-17 13:19:26 +00:00
|
|
|
onLayerSelect: PropTypes.func,
|
2020-02-17 13:24:14 +00:00
|
|
|
currentLayer: PropTypes.object,
|
2020-03-30 09:47:46 +01:00
|
|
|
selectedLayerIndex: PropTypes.number,
|
2020-02-17 13:19:26 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
static defaultProps = {
|
|
|
|
onLayerSelect: () => {},
|
2016-12-31 14:32:04 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2020-03-30 09:47:46 +01:00
|
|
|
const {selectedLayerIndex} = this.props;
|
2020-01-29 08:22:03 +00:00
|
|
|
const errors = this.props.errors.map((error, idx) => {
|
|
|
|
let content;
|
|
|
|
if (error.parsed && error.parsed.type === "layer") {
|
|
|
|
const {parsed} = error;
|
2020-02-17 13:24:14 +00:00
|
|
|
const {mapStyle, currentLayer} = this.props;
|
2020-02-17 13:19:26 +00:00
|
|
|
const layerId = mapStyle.layers[parsed.data.index].id;
|
2020-01-29 08:22:03 +00:00
|
|
|
content = (
|
|
|
|
<>
|
2020-03-28 10:58:47 +00:00
|
|
|
Layer <span>{formatLayerId(layerId)}</span>: {parsed.data.message}
|
2020-03-30 09:47:46 +01:00
|
|
|
{selectedLayerIndex !== parsed.data.index &&
|
2020-02-17 13:24:14 +00:00
|
|
|
<>
|
|
|
|
—
|
|
|
|
<button
|
|
|
|
className="maputnik-message-panel__switch-button"
|
2020-03-30 09:47:46 +01:00
|
|
|
onClick={() => this.props.onLayerSelect(parsed.data.index)}
|
2020-02-17 13:24:14 +00:00
|
|
|
>
|
|
|
|
switch to layer
|
|
|
|
</button>
|
|
|
|
</>
|
|
|
|
}
|
2020-01-29 08:22:03 +00:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
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
|