p5.js-web-editor/client/modules/IDE/pages/FullView.jsx

114 lines
3.4 KiB
React
Raw Normal View History

import PropTypes from 'prop-types';
import React from 'react';
import Helmet from 'react-helmet';
2016-08-17 22:13:17 +00:00
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import PreviewFrame from '../components/PreviewFrame';
import PreviewNav from '../../../components/PreviewNav';
2016-08-17 22:13:17 +00:00
import { getHTMLFile, getJSFiles, getCSSFiles } from '../reducers/files';
import * as ProjectActions from '../actions/project';
class FullView extends React.Component {
componentDidMount() {
this.props.getProject(this.props.params.project_id);
document.body.className = this.props.theme;
}
componentWillUpdate(nextProps) {
if (nextProps.theme !== this.props.theme) {
document.body.className = nextProps.theme;
}
2016-08-17 22:13:17 +00:00
}
ident = () => {}
2016-08-17 22:13:17 +00:00
render() {
return (
<div className="fullscreen-preview">
<Helmet>
<title>{this.props.project.name}</title>
</Helmet>
<PreviewNav
owner={{ username: this.props.project.owner ? `${this.props.project.owner.username}` : '' }}
project={{ name: this.props.project.name, id: this.props.params.project_id }}
/>
<div className="preview-frame-holder">
2016-08-17 22:13:17 +00:00
<PreviewFrame
htmlFile={this.props.htmlFile}
jsFiles={this.props.jsFiles}
cssFiles={this.props.cssFiles}
files={this.props.files}
head={
<link type="text/css" rel="stylesheet" href="/preview-styles.css" />
}
2016-10-08 22:52:32 +00:00
fullView
2016-08-17 22:13:17 +00:00
isPlaying
isAccessibleOutputPlaying={false}
textOutput={false}
gridOutput={false}
soundOutput={false}
dispatchConsoleEvent={this.ident}
endSketchRefresh={this.ident}
previewIsRefreshing={false}
setBlobUrl={this.ident}
stopSketch={this.ident}
expandConsole={this.ident}
2016-08-17 22:13:17 +00:00
/>
</div>
</div>
);
}
}
FullView.propTypes = {
theme: PropTypes.string.isRequired,
2016-08-17 22:13:17 +00:00
params: PropTypes.shape({
project_id: PropTypes.string
}).isRequired,
2016-08-17 22:13:17 +00:00
project: PropTypes.shape({
name: PropTypes.string,
owner: PropTypes.shape({
username: PropTypes.string
})
}).isRequired,
htmlFile: PropTypes.shape({
id: PropTypes.string.isRequired,
content: PropTypes.string.isRequired,
name: PropTypes.string.isRequired
}).isRequired,
jsFiles: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
content: PropTypes.string.isRequired,
name: PropTypes.string.isRequired
})).isRequired,
cssFiles: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
content: PropTypes.string.isRequired,
name: PropTypes.string.isRequired
})).isRequired,
2016-08-17 22:13:17 +00:00
getProject: PropTypes.func.isRequired,
files: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
content: PropTypes.string.isRequired,
name: PropTypes.string.isRequired
})).isRequired,
2016-08-17 22:13:17 +00:00
};
function mapStateToProps(state) {
return {
user: state.user,
theme: state.preferences.theme,
2016-08-17 22:13:17 +00:00
htmlFile: getHTMLFile(state.files),
jsFiles: getJSFiles(state.files),
cssFiles: getCSSFiles(state.files),
project: state.project,
files: state.files
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(ProjectActions, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(FullView);