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

87 lines
2.5 KiB
React
Raw Normal View History

2016-08-18 00:13:17 +02:00
import React, { PropTypes } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import PreviewFrame from '../components/PreviewFrame';
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);
}
render() {
return (
<div className="fullscreen-preview">
<h1 className="fullscreen-preview__title">
{this.props.project.name} {this.props.project.owner ? `by ${this.props.project.owner.username}` : ''}
</h1>
<div className="fullscreen-preview__frame-wrapper">
<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-09 00:52:32 +02:00
fullView
2016-08-18 00:13:17 +02:00
isPlaying
/>
</div>
</div>
);
}
}
FullView.propTypes = {
params: PropTypes.shape({
project_id: PropTypes.string
}).isRequired,
2016-08-18 00:13:17 +02: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-18 00:13:17 +02: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-18 00:13:17 +02:00
};
function mapStateToProps(state) {
return {
user: state.user,
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);