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

58 lines
1.4 KiB
React
Raw Normal View History

import React, { PropTypes } from 'react';
2016-08-15 18:12:25 +02:00
class TextOutput extends React.Component {
componentDidMount() {
this.canvasTextOutput.focus();
2016-08-15 18:12:25 +02:00
}
componentDidUpdate(prevProps) {
// if the user explicitly clicks on the play button, want to refocus on the text output
if (this.props.isPlaying && this.props.previewIsRefreshing) {
this.canvasTextOutput.focus();
}
}
2016-08-15 18:12:25 +02:00
render() {
return (
2016-08-16 00:06:09 +02:00
<section
2016-08-16 02:28:18 +02:00
className="text-output"
2016-08-16 00:06:09 +02:00
id="canvas-sub"
ref={(element) => { this.canvasTextOutput = element; }}
2016-08-16 00:06:09 +02:00
tabIndex="0"
aria-label="text-output"
title="canvas text output"
>
2016-09-01 05:07:43 +02:00
<h2> Output </h2>
2016-08-15 18:12:25 +02:00
<section id="textOutput-content">
</section>
2016-08-16 00:06:09 +02:00
<p
tabIndex="0"
2016-08-24 19:10:06 +02:00
role="main"
2016-08-16 00:06:09 +02:00
id="textOutput-content-summary"
aria-label="text output summary"
>
</p>
2016-08-16 03:09:47 +02:00
<table
2016-08-16 00:06:09 +02:00
tabIndex="0"
2016-08-24 19:10:06 +02:00
role="main"
id="textOutput-content-table"
2016-09-01 05:07:43 +02:00
aria-label="text output details"
2016-08-16 00:06:09 +02:00
>
2016-08-15 18:12:25 +02:00
</table>
<div
tabIndex="0"
role="main"
id="textOutput-content-details"
aria-label="text output details"
>
</div>
2016-08-16 00:06:09 +02:00
</section>
2016-08-15 18:12:25 +02:00
);
}
}
TextOutput.propTypes = {
isPlaying: PropTypes.bool.isRequired,
previewIsRefreshing: PropTypes.bool.isRequired
};
2016-08-15 18:12:25 +02:00
export default TextOutput;