57 lines
1.4 KiB
JavaScript
57 lines
1.4 KiB
JavaScript
import React, { PropTypes } from 'react';
|
|
|
|
class TextOutput extends React.Component {
|
|
componentDidMount() {
|
|
this.canvasTextOutput.focus();
|
|
}
|
|
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();
|
|
}
|
|
}
|
|
render() {
|
|
return (
|
|
<section
|
|
className="text-output"
|
|
id="canvas-sub"
|
|
ref={(element) => { this.canvasTextOutput = element; }}
|
|
tabIndex="0"
|
|
aria-label="text-output"
|
|
title="canvas text output"
|
|
>
|
|
<h2> Output </h2>
|
|
<section id="textOutput-content">
|
|
</section>
|
|
<p
|
|
tabIndex="0"
|
|
role="main"
|
|
id="textOutput-content-summary"
|
|
aria-label="text output summary"
|
|
>
|
|
</p>
|
|
<table
|
|
tabIndex="0"
|
|
role="main"
|
|
id="textOutput-content-table"
|
|
aria-label="text output details"
|
|
>
|
|
</table>
|
|
<div
|
|
tabIndex="0"
|
|
role="main"
|
|
id="textOutput-content-details"
|
|
aria-label="text output details"
|
|
>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
}
|
|
|
|
TextOutput.propTypes = {
|
|
isPlaying: PropTypes.bool.isRequired,
|
|
previewIsRefreshing: PropTypes.bool.isRequired
|
|
};
|
|
|
|
export default TextOutput;
|