r
/
p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull Requests Releases 1 Wiki Activity

file tree renders, select file works and editor changes content, rename works

This commit is contained in:
catarak 2016-08-23 13:52:31 -04:00
parent 40b70d6c69
commit cbb272ec14
7 changed files with 88 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/modules/IDE/actions/files.js
View File

@ -130,7 +130,6 @@ export function hideFileOptions(fileId) {
} }
export function showEditFileName(id) { export function showEditFileName(id) {
console.log('in show edit file name');
return { return {
type: ActionTypes.SHOW_EDIT_FILE_NAME, type: ActionTypes.SHOW_EDIT_FILE_NAME,
id id

7
client/modules/IDE/actions/ide.js
View File

@ -37,6 +37,13 @@ export function setSelectedFile(fileId) {
}; };
} }
export function resetSelectedFile() {
return (dispatch, getState) => {
const state = getState();
setSelectedFile(state.files[1].id);
};
}
export function dispatchConsoleEvent(...args) { export function dispatchConsoleEvent(...args) {
return { return {
type: ActionTypes.CONSOLE_EVENT, type: ActionTypes.CONSOLE_EVENT,

1
client/modules/IDE/actions/project.js
View File

@ -121,7 +121,6 @@ export function exportProjectAsZip() {
const state = getState(); const state = getState();
const zip = new JSZip(); const zip = new JSZip();
async.each(state.files, (file, cb) => { async.each(state.files, (file, cb) => {
console.log(file);
if (file.url) { if (file.url) {
JSZipUtils.getBinaryContent(file.url, (err, data) => { JSZipUtils.getBinaryContent(file.url, (err, data) => {
zip.file(file.name, data, { binary: true }); zip.file(file.name, data, { binary: true });

129
client/modules/IDE/components/FileNode.js
View File

@ -1,10 +1,12 @@
import React, { PropTypes } from 'react'; import React, { PropTypes } from 'react';
import * as FileActions from '../actions/files'; import * as FileActions from '../actions/files';
import * as IDEActions from '../actions/ide';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import InlineSVG from 'react-inlinesvg'; import InlineSVG from 'react-inlinesvg';
const downArrowUrl = require('../../../images/down-arrow.svg'); const downArrowUrl = require('../../../images/down-arrow.svg');
import classNames from 'classnames'; import classNames from 'classnames';
import { setSelectedFile } from '../reducers/files';
export class FileNode extends React.Component { export class FileNode extends React.Component {
constructor(props) { constructor(props) {
@ -13,6 +15,12 @@ export class FileNode extends React.Component {
this.handleKeyPress = this.handleKeyPress.bind(this); this.handleKeyPress = this.handleKeyPress.bind(this);
this.handleFileNameChange = this.handleFileNameChange.bind(this); this.handleFileNameChange = this.handleFileNameChange.bind(this);
this.validateFileName = this.validateFileName.bind(this); this.validateFileName = this.validateFileName.bind(this);
this.handleFileClick = this.handleFileClick.bind(this);
}
handleFileClick(e) {
e.stopPropagation();
this.props.setSelectedFile(this.props.id);
} }
handleFileNameChange(event) { handleFileNameChange(event) {
@ -46,63 +54,73 @@ export class FileNode extends React.Component {
render() { render() {
let itemClass = classNames({ let itemClass = classNames({
'sidebar__file-item': true, 'sidebar__file-item': this.props.name !== 'root',
'sidebar__file-item--selected': this.props.isSelected, 'sidebar__file-item--selected': this.props.isSelected,
'sidebar__file-item--open': this.props.isOptionsOpen, 'sidebar__file-item--open': this.props.isOptionsOpen,
'sidebar__file-item--editing': this.props.isEditingName 'sidebar__file-item--editing': this.props.isEditingName
}); });
return ( return (
<div className={itemClass}> <div
<a className="sidebar__file-item-name">{this.props.name}</a> className={itemClass}
<input onClick={this.handleFileClick}
type="text" onBlur={() => setTimeout(() => this.props.hideFileOptions(this.props.id), 100)}
className="sidebar__file-item-input" >
value={this.props.name} {(() => { // eslint-disable-line
onChange={this.handleFileNameChange} if (this.props.name !== 'root') {
ref="fileNameInput" return (
onBlur={() => { <div className="file-item__content">
this.validateFileName(); <a className="sidebar__file-item-name">{this.props.name}</a>
this.props.hideEditFileName(this.props.id); <input
}} type="text"
onKeyPress={this.handleKeyPress} className="sidebar__file-item-input"
/> value={this.props.name}
<button onChange={this.handleFileNameChange}
className="sidebar__file-item-show-options" ref="fileNameInput"
aria-label="view file options" onBlur={() => {
onClick={() => this.props.showFileOptions(this.props.id)} this.validateFileName();
> this.props.hideEditFileName(this.props.id);
<InlineSVG src={downArrowUrl} /> }}
</button> onKeyPress={this.handleKeyPress}
<div ref="fileOptions" className="sidebar__file-item-options"> />
<ul title="file options"> <button
<li> className="sidebar__file-item-show-options"
<a aria-label="view file options"
onClick={() => { onClick={() => this.props.showFileOptions(this.props.id)}
console.log('before show edit file name'); >
this.originalFileName = this.props.name; <InlineSVG src={downArrowUrl} />
this.props.showEditFileName(this.props.id); </button>
setTimeout(() => this.refs.fileNameInput.focus(), 0); <div ref="fileOptions" className="sidebar__file-item-options">
}} <ul title="file options">
> <li>
Rename <a
</a> onClick={() => {
</li> this.originalFileName = this.props.name;
<li> this.props.showEditFileName(this.props.id);
<a setTimeout(() => this.refs.fileNameInput.focus(), 0);
onClick={() => { }}
if (window.confirm(`Are you sure you want to delete ${this.props.name}?`)) { >
this.props.deleteFile(this.props.id); Rename
this.props.resetSelectedFile(); </a>
} </li>
}} <li>
> <a
Delete onClick={() => {
</a> if (window.confirm(`Are you sure you want to delete ${this.props.name}?`)) {
</li> this.props.deleteFile(this.props.id);
</ul> this.props.resetSelectedFile();
</div> }
}}
>
Delete
</a>
</li>
</ul>
</div>
</div>
);
}
})()}
{(() => { // eslint-disable-line {(() => { // eslint-disable-line
console.log(this.props.children);
if (this.props.children) { if (this.props.children) {
return ( return (
<ul> <ul>
@ -124,22 +142,21 @@ FileNode.propTypes = {
isOptionsOpen: PropTypes.bool, isOptionsOpen: PropTypes.bool,
isEditingName: PropTypes.bool, isEditingName: PropTypes.bool,
setSelectedFile: PropTypes.func.isRequired, setSelectedFile: PropTypes.func.isRequired,
fileIndex: PropTypes.number.isRequired,
showFileOptions: PropTypes.func.isRequired, showFileOptions: PropTypes.func.isRequired,
hideFileOptions: PropTypes.func.isRequired, hideFileOptions: PropTypes.func.isRequired,
deleteFile: PropTypes.func.isRequired, deleteFile: PropTypes.func.isRequired,
resetSelectedFile: PropTypes.func.isRequired,
showEditFileName: PropTypes.func.isRequired, showEditFileName: PropTypes.func.isRequired,
hideEditFileName: PropTypes.func.isRequired, hideEditFileName: PropTypes.func.isRequired,
updateFileName: PropTypes.func.isRequired updateFileName: PropTypes.func.isRequired,
resetSelectedFile: PropTypes.func.isRequired
}; };
function mapStateToProps(state, ownProps) { function mapStateToProps(state, ownProps) {
return state.files.find((file) => file.id === ownProps.id); return setSelectedFile(state.files, state.ide.selectedFile).find((file) => file.id === ownProps.id);
} }
function mapDispatchToProps(dispatch) { function mapDispatchToProps(dispatch) {
return bindActionCreators(FileActions, dispatch); return bindActionCreators(Object.assign(FileActions, IDEActions), dispatch);
} }
const ConnectedFileNode = connect(mapStateToProps, mapDispatchToProps)(FileNode); const ConnectedFileNode = connect(mapStateToProps, mapDispatchToProps)(FileNode);

6
client/modules/IDE/components/Sidebar.js
View File

@ -13,7 +13,7 @@ class Sidebar extends React.Component {
} }
resetSelectedFile() { resetSelectedFile() {
this.props.setSelectedFile(this.props.files[0].id); this.props.setSelectedFile(this.props.files[1].id);
} }
render() { render() {
@ -50,7 +50,7 @@ class Sidebar extends React.Component {
</button> </button>
</div> </div>
</div> </div>
<ul className="sidebar__file-list" title="project files"> { /* <ul className="sidebar__file-list" title="project files">
{this.props.files.map((file, fileIndex) => {this.props.files.map((file, fileIndex) =>
<SidebarItem <SidebarItem
key={file.id} key={file.id}
@ -66,7 +66,7 @@ class Sidebar extends React.Component {
updateFileName={this.props.updateFileName} updateFileName={this.props.updateFileName}
/> />
)} )}
</ul> </ul> */ }
<ConnectedFileNode id={'0'} /> <ConnectedFileNode id={'0'} />
</nav> </nav>
); );

1
client/modules/IDE/pages/IDEView.js
View File

@ -24,7 +24,6 @@ import About from '../components/About';
class IDEView extends React.Component { class IDEView extends React.Component {
constructor(props) { constructor(props) {
console.log(props);
super(props); super(props);
this._handleConsolePaneOnDragFinished = this._handleConsolePaneOnDragFinished.bind(this); this._handleConsolePaneOnDragFinished = this._handleConsolePaneOnDragFinished.bind(this);
this._handleSidebarPaneOnDragFinished = this._handleSidebarPaneOnDragFinished.bind(this); this._handleSidebarPaneOnDragFinished = this._handleSidebarPaneOnDragFinished.bind(this);

10
client/modules/IDE/reducers/files.js
View File

@ -33,6 +33,11 @@ const defaultCSS =
// if the project has never been saved, // if the project has never been saved,
const initialState = [ const initialState = [
{
name: 'root',
id: '0',
children: ['1', '2', '3']
},
{ {
name: 'sketch.js', name: 'sketch.js',
content: defaultSketch, content: defaultSketch,
@ -47,11 +52,6 @@ const initialState = [
name: 'style.css', name: 'style.css',
content: defaultCSS, content: defaultCSS,
id: '3' id: '3'
},
{
name: 'root',
id: '0',
children: ['1', '2', '3']
}]; }];