add Sidebar click to change Editor content

This commit is contained in:
catarak 2016-07-08 15:58:49 -04:00
parent 7a84137e9b
commit ebfd1fce0d
5 changed files with 26 additions and 12 deletions

View file

@ -17,3 +17,10 @@ export function stopSketch() {
type: ActionTypes.STOP_SKETCH
};
}
export function setSelectedFile(fileId) {
return {
type: ActionTypes.SET_SELECTED_FILE,
selectedFile: fileId
};
}

View file

@ -8,21 +8,22 @@ class Editor extends React.Component {
componentDidMount() {
this._cm = CodeMirror(this.refs.container, { // eslint-disable-line
theme: 'p5-widget',
value: this.props.content,
value: this.props.file.content,
lineNumbers: true,
styleActiveLine: true,
mode: 'javascript'
});
this._cm.on('change', () => { // eslint-disable-line
this.props.updateFileContent('sketch.js', this._cm.getValue());
// this.props.updateFileContent('sketch.js', this._cm.getValue());
this.props.updateFileContent(this.props.file.name, this._cm.getValue());
});
this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
}
componentDidUpdate(prevProps) {
if (this.props.content !== prevProps.content &&
this.props.content !== this._cm.getValue()) {
this._cm.setValue(this.props.content); // eslint-disable-line no-underscore-dangle
if (this.props.file.content !== prevProps.file.content &&
this.props.file.content !== this._cm.getValue()) {
this._cm.setValue(this.props.file.content); // eslint-disable-line no-underscore-dangle
}
if (this.props.fontSize !== prevProps.fontSize) {
this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
@ -41,7 +42,10 @@ class Editor extends React.Component {
}
Editor.propTypes = {
content: PropTypes.string.isRequired,
file: PropTypes.shape({
name: PropTypes.string.isRequired,
content: PropTypes.string.isRequired
}),
updateFileContent: PropTypes.func.isRequired,
fontSize: PropTypes.number.isRequired
};

View file

@ -14,6 +14,7 @@ function Sidebar(props) {
<li
className={itemClass}
key={file.id}
onClick={() => props.setSelectedFile(file.id)}
>{file.name}</li>
);
})}
@ -26,7 +27,8 @@ Sidebar.propTypes = {
files: PropTypes.array.isRequired,
selectedFile: PropTypes.shape({
id: PropTypes.string.isRequired
})
}),
setSelectedFile: PropTypes.func.isRequired
};
export default Sidebar;

View file

@ -49,9 +49,10 @@ class IDEView extends React.Component {
<Sidebar
files={this.props.files}
selectedFile={this.props.selectedFile}
setSelectedFile={this.props.setSelectedFile}
/>
<Editor
content={this.props.selectedFile.content}
file={this.props.selectedFile}
updateFileContent={this.props.updateFileContent}
fontSize={this.props.preferences.fontSize}
files={this.props.files}
@ -96,9 +97,10 @@ IDEView.propTypes = {
files: PropTypes.array.isRequired,
updateFileContent: PropTypes.func.isRequired,
selectedFile: PropTypes.shape({
id: PropTypes.string,
id: PropTypes.string.isRequired,
content: PropTypes.string.isRequired
})
}),
setSelectedFile: PropTypes.func.isRequired
};
function mapStateToProps(state) {

View file

@ -1,10 +1,9 @@
.sidebar__file-list {
padding: #{4 / $base-font-size}rem #{20 / $base-font-size}rem;
border-top: 1px solid $ide-border-color;
}
.sidebar__file-item {
padding: #{4 / $base-font-size}rem 0;
padding: #{8 / $base-font-size}rem #{20 / $base-font-size}rem;
color: $light-inactive-text-color;
}