♻️ refactor call to PreviewFrame#renderSketch
This commit is contained in:
ghalestrilo
parent
a11bc44634
commit
776c3d2caf
2 changed files with 54 additions and 77 deletions
|
|
@ -22,6 +22,24 @@ import {
|
|||
import { hijackConsoleErrorsScript, startTag, getAllScriptOffsets }
|
||||
from '../../../utils/consoleUtils';
|
||||
|
||||
|
||||
// Kept inside class just for linter's
|
||||
const shouldRenderSketch = (props, prevProps = undefined) => {
|
||||
const { isPlaying, previewIsRefreshing, fullView } = props;
|
||||
|
||||
// if the user explicitly clicks on the play button
|
||||
if (isPlaying && previewIsRefreshing) return true;
|
||||
|
||||
if (!prevProps) return false;
|
||||
|
||||
return (props.isPlaying !== prevProps.isPlaying // if sketch starts or stops playing, want to rerender
|
||||
|| props.isAccessibleOutputPlaying !== prevProps.isAccessibleOutputPlaying // if user switches textoutput preferences
|
||||
|| props.textOutput !== prevProps.textOutput
|
||||
|| props.gridOutput !== prevProps.gridOutput
|
||||
|| props.soundOutput !== prevProps.soundOutput
|
||||
|| (fullView && props.files[0].id !== prevProps.files[0].id));
|
||||
};
|
||||
|
||||
class PreviewFrame extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -29,54 +47,18 @@ class PreviewFrame extends React.Component {
|
|||
}
|
||||
|
||||
componentDidMount() {
|
||||
console.log(`componentDidMount: ${this.props.isPlaying}`);
|
||||
window.addEventListener('message', this.handleConsoleEvent);
|
||||
|
||||
// TODO: maybe encapsulate this into a function (together with code from componentDidUpdate)
|
||||
if (this.props.isPlaying && this.props.previewIsRefreshing) {
|
||||
this.renderSketch();
|
||||
}
|
||||
const props = {
|
||||
...this.props,
|
||||
previewIsRefreshing: this.props.previewIsRefreshing,
|
||||
isAccessibleOutputPlaying: this.props.isAccessibleOutputPlaying
|
||||
};
|
||||
if (shouldRenderSketch(props)) this.renderSketch();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
console.log(`componentDidUpdate: ${this.props.isPlaying}`);
|
||||
// if sketch starts or stops playing, want to rerender
|
||||
if (this.props.isPlaying !== prevProps.isPlaying) {
|
||||
this.renderSketch();
|
||||
return;
|
||||
}
|
||||
|
||||
// if the user explicitly clicks on the play button
|
||||
if (this.props.isPlaying && this.props.previewIsRefreshing) {
|
||||
this.renderSketch();
|
||||
return;
|
||||
}
|
||||
|
||||
// if user switches textoutput preferences
|
||||
if (this.props.isAccessibleOutputPlaying !== prevProps.isAccessibleOutputPlaying) {
|
||||
this.renderSketch();
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.props.textOutput !== prevProps.textOutput) {
|
||||
this.renderSketch();
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.props.gridOutput !== prevProps.gridOutput) {
|
||||
this.renderSketch();
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.props.soundOutput !== prevProps.soundOutput) {
|
||||
this.renderSketch();
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.props.fullView && this.props.files[0].id !== prevProps.files[0].id) {
|
||||
this.renderSketch();
|
||||
}
|
||||
|
||||
if (shouldRenderSketch(this.props, prevProps)) this.renderSketch();
|
||||
// small bug - if autorefresh is on, and the usr changes files
|
||||
// in the sketch, preview will reload
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/* eslint-disable */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Link } from 'react-router';
|
||||
|
|
@ -13,8 +14,6 @@ import * as PreferencesActions from '../IDE/actions/preferences';
|
|||
import * as ConsoleActions from '../IDE/actions/console';
|
||||
import * as FilesActions from '../IDE/actions/files';
|
||||
|
||||
import FullView from '../IDE/pages/FullView';
|
||||
|
||||
import { getHTMLFile } from '../IDE/reducers/files';
|
||||
|
||||
|
||||
|
|
@ -24,7 +23,7 @@ import { remSize } from '../../theme';
|
|||
|
||||
const Content = styled.div`
|
||||
z-index: 0;
|
||||
margin-top: ${remSize(48)};
|
||||
margin-top: ${remSize(68)};
|
||||
`;
|
||||
|
||||
const IconLinkWrapper = styled(Link)`
|
||||
|
|
@ -41,7 +40,7 @@ const MobileSketchView = (props) => {
|
|||
// const files = useSelector(state => state.files);
|
||||
|
||||
const {
|
||||
htmlFile, files, selectedFile
|
||||
htmlFile, files, selectedFile, projectName
|
||||
} = props;
|
||||
|
||||
// Actions
|
||||
|
|
@ -66,43 +65,37 @@ const MobileSketchView = (props) => {
|
|||
<ExitIcon viewBox="0 0 16 16" />
|
||||
</IconLinkWrapper>
|
||||
<div>
|
||||
<h2>Hello</h2>
|
||||
<h2>{projectName}</h2>
|
||||
<h3><br /></h3>
|
||||
</div>
|
||||
</Header>
|
||||
<Content>
|
||||
<h1>Hello</h1>
|
||||
<section className="preview-frame-holder">
|
||||
<PreviewFrame
|
||||
htmlFile={htmlFile}
|
||||
files={files}
|
||||
head={
|
||||
<link type="text/css" rel="stylesheet" href="/preview-styles.css" />
|
||||
}
|
||||
<PreviewFrame
|
||||
htmlFile={htmlFile}
|
||||
files={files}
|
||||
head={<link type="text/css" rel="stylesheet" href="/preview-styles.css" />}
|
||||
|
||||
content={selectedFile.content}
|
||||
content={selectedFile.content}
|
||||
|
||||
fullView
|
||||
isPlaying
|
||||
isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying}
|
||||
previewIsRefreshing={ide.previewIsRefreshing}
|
||||
isPlaying
|
||||
isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying}
|
||||
previewIsRefreshing={ide.previewIsRefreshing}
|
||||
|
||||
textOutput={preferences.textOutput}
|
||||
gridOutput={preferences.gridOutput}
|
||||
soundOutput={preferences.soundOutput}
|
||||
autorefresh={preferences.autorefresh}
|
||||
textOutput={preferences.textOutput}
|
||||
gridOutput={preferences.gridOutput}
|
||||
soundOutput={preferences.soundOutput}
|
||||
autorefresh={preferences.autorefresh}
|
||||
|
||||
setTextOutput={setTextOutput}
|
||||
setGridOutput={setGridOutput}
|
||||
setSoundOutput={setSoundOutput}
|
||||
dispatchConsoleEvent={dispatchConsoleEvent}
|
||||
endSketchRefresh={endSketchRefresh}
|
||||
stopSketch={stopSketch}
|
||||
setBlobUrl={setBlobUrl}
|
||||
expandConsole={expandConsole}
|
||||
clearConsole={clearConsole}
|
||||
/>
|
||||
</section>
|
||||
setTextOutput={setTextOutput}
|
||||
setGridOutput={setGridOutput}
|
||||
setSoundOutput={setSoundOutput}
|
||||
dispatchConsoleEvent={dispatchConsoleEvent}
|
||||
endSketchRefresh={endSketchRefresh}
|
||||
stopSketch={stopSketch}
|
||||
setBlobUrl={setBlobUrl}
|
||||
expandConsole={expandConsole}
|
||||
clearConsole={clearConsole}
|
||||
/>
|
||||
</Content>
|
||||
</Screen>);
|
||||
};
|
||||
|
|
@ -171,6 +164,8 @@ MobileSketchView.propTypes = {
|
|||
uploadFileModalVisible: PropTypes.bool.isRequired
|
||||
}).isRequired,
|
||||
|
||||
projectName: PropTypes.func.isRequired,
|
||||
|
||||
setTextOutput: PropTypes.func.isRequired,
|
||||
setGridOutput: PropTypes.func.isRequired,
|
||||
setSoundOutput: PropTypes.func.isRequired,
|
||||
|
|
@ -185,7 +180,7 @@ MobileSketchView.propTypes = {
|
|||
function mapStateToProps(state) {
|
||||
return {
|
||||
htmlFile: getHTMLFile(state.files),
|
||||
project: state.project,
|
||||
projectName: state.project.name,
|
||||
files: state.files,
|
||||
ide: state.ide,
|
||||
preferences: state.preferences,
|
||||
|
|
|
|||
Loading…
Reference in a new issue