p5.js-web-editor/client/modules/IDE/components/EditorAccessibility.jsx

48 lines
1.2 KiB
React
Raw Normal View History

import PropTypes from 'prop-types';
import React from 'react';
2016-08-11 19:24:02 +02:00
2016-08-11 19:29:30 +02:00
class EditorAccessibility extends React.Component {
2016-08-11 19:24:02 +02:00
componentDidMount() {
}
render() {
const messages = [];
2016-08-11 21:38:32 +02:00
if (this.props.lintMessages.length > 0) {
2016-08-24 23:54:26 +02:00
this.props.lintMessages.forEach((lintMessage, i) => {
2016-08-11 21:38:32 +02:00
messages.push(
<li key={lintMessage.id}>
2016-08-24 23:54:26 +02:00
{lintMessage.severity} in line
{lintMessage.line} :
{lintMessage.message}
2016-08-11 21:38:32 +02:00
</li>
);
2016-08-24 23:54:26 +02:00
});
2016-08-11 21:38:32 +02:00
} else {
2016-08-11 19:24:02 +02:00
messages.push(
2016-08-25 19:45:35 +02:00
<li tabIndex="0" key={0}> There are no lint messages </li>
2016-08-11 19:24:02 +02:00
);
}
return (
2016-08-11 21:38:32 +02:00
<div className="editor-accessibility">
2016-08-11 22:02:21 +02:00
<ul className="editor-lintmessages" title="lint messages">
2016-08-11 19:24:02 +02:00
{messages}
</ul>
2016-08-11 22:02:21 +02:00
<p> Current line
2016-08-25 18:32:06 +02:00
<span className="editor-linenumber" aria-live="polite" aria-atomic="true" id="current-line"> </span>
2016-08-11 22:02:21 +02:00
</p>
2016-08-11 19:24:02 +02:00
</div>
);
}
}
2016-08-11 19:29:30 +02:00
EditorAccessibility.propTypes = {
lintMessages: PropTypes.arrayOf(PropTypes.shape({
severity: PropTypes.string.isRequired,
line: PropTypes.number.isRequired,
message: PropTypes.string.isRequired,
id: PropTypes.number.isRequired
})).isRequired,
2016-08-11 19:24:02 +02:00
};
2016-08-11 19:29:30 +02:00
export default EditorAccessibility;