diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js
index 3e0ddc0f..20c79907 100644
--- a/client/modules/IDE/components/PreviewFrame.js
+++ b/client/modules/IDE/components/PreviewFrame.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
class PreviewFrame extends React.Component {
@@ -9,35 +9,7 @@ class PreviewFrame extends React.Component {
}
}
- clearPreview() {
- const doc = ReactDOM.findDOMNode(this).contentDocument;
- doc.write('');
- doc.close();
- }
-
- renderFrameContents() {
- const doc = ReactDOM.findDOMNode(this).contentDocument;
- if (doc.readyState === 'complete') {
- renderSketch();
- } else {
- setTimeout(this.renderFrameContents, 0);
- }
- }
-
- renderSketch() {
- const doc = ReactDOM.findDOMNode(this).contentDocument;
- this.clearPreview();
- ReactDOM.render(this.props.head, doc.head);
- const p5Script = doc.createElement('script');
- p5Script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js');
- doc.body.appendChild(p5Script);
-
- const sketchScript = doc.createElement('script');
- sketchScript.textContent = this.props.content;
- doc.body.appendChild(sketchScript);
- }
-
- componentDidUpdate(prevProps, prevState) {
+ componentDidUpdate(prevProps) {
if (this.props.isPlaying !== prevProps.isPlaying) {
if (this.props.isPlaying) {
this.renderSketch();
@@ -55,13 +27,50 @@ class PreviewFrame extends React.Component {
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).contentDocument.body);
}
+ clearPreview() {
+ const doc = ReactDOM.findDOMNode(this).contentDocument;
+ doc.write('');
+ doc.close();
+ }
+
+ renderSketch() {
+ const doc = ReactDOM.findDOMNode(this).contentDocument;
+ this.clearPreview();
+ ReactDOM.render(this.props.head, doc.head);
+ const p5Script = doc.createElement('script');
+ p5Script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js');
+ doc.body.appendChild(p5Script);
+
+ const sketchScript = doc.createElement('script');
+ sketchScript.textContent = this.props.content;
+ doc.body.appendChild(sketchScript);
+ }
+
+ renderFrameContents() {
+ const doc = ReactDOM.findDOMNode(this).contentDocument;
+ if (doc.readyState === 'complete') {
+ renderSketch();
+ } else {
+ setTimeout(this.renderFrameContents, 0);
+ }
+ }
+
render() {
- return ;
+ return (
+
+ );
}
}
+PreviewFrame.propTypes = {
+ isPlaying: PropTypes.bool.isRequired,
+ head: PropTypes.string.isRequired,
+ content: PropTypes.string.isRequired
+};
+
export default PreviewFrame;