From 799ae55abd2cfee5f3b8049b7384b2cfa294169b Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Thu, 4 Oct 2018 01:18:54 +0530 Subject: [PATCH] new file template n add file support --- src/components/ContentWrap2.jsx | 91 +++++++---------------- src/components/CreateNewModal.jsx | 4 ++ src/components/SidePane.jsx | 116 ++++++++++++++++++++++++++++++ src/components/app.jsx | 33 +++++++-- src/style.css | 20 +++++- 5 files changed, 192 insertions(+), 72 deletions(-) create mode 100644 src/components/SidePane.jsx diff --git a/src/components/ContentWrap2.jsx b/src/components/ContentWrap2.jsx index 6b694e0..40df847 100644 --- a/src/components/ContentWrap2.jsx +++ b/src/components/ContentWrap2.jsx @@ -8,35 +8,11 @@ import { trackEvent } from '../analytics'; import CodeMirror from '../CodeMirror'; import CodeMirrorBox from './CodeMirrorBox'; import { deferred } from '../deferred'; +import { SidePane } from './SidePane'; const minCodeWrapSize = 33; /* global htmlCodeEl, jsCodeEl, cssCodeEl, logCountEl */ -class Sidebar extends Component { - render() { - return ( -
- Sidebar - {this.props.files.map(file => ( -
- -
- ))} -
- ); - } -} - export default class ContentWrap2 extends Component { constructor(props) { super(props); @@ -66,6 +42,15 @@ export default class ContentWrap2 extends Component { this.props.prefs !== nextProps.prefs ); } + componentWillUpdate(nextProps) { + if ( + this.props.currentItem.createdOn !== nextProps.currentItem.createdOn || + this.props.currentItem.id !== nextProps.currentItem.id + ) { + this.fileBuffers = {}; + this.state.selectedFile = null; + } + } componentDidUpdate() { if ( this.props.currentItem && @@ -97,7 +82,7 @@ export default class ContentWrap2 extends Component { mode = modes[HtmlModes.HTML].cmMode; } console.log('mode', mode); - this.fileBuffers[file.name] = CodeMirror.Doc(file.content, mode); + this.fileBuffers[file.name] = CodeMirror.Doc(file.content || '', mode); } onHtmlCodeChange(editor, change) { @@ -195,38 +180,12 @@ export default class ContentWrap2 extends Component { ? this.detachedWindow.document.querySelector('iframe') : this.frame; - const cssMode = this.props.currentItem.cssMode; - var htmlPromise = computeHtml( - currentCode.html, - this.props.currentItem.htmlMode - ); - var cssPromise = computeCss( - cssMode === CssModes.ACSS ? currentCode.html : currentCode.css, - cssMode, - this.props.currentItem.cssSettings - ); - var jsPromise = computeJs( - currentCode.js, - this.props.currentItem.jsMode, - true, - this.props.prefs.infiniteLoopTimeout - ); - Promise.all([htmlPromise, cssPromise, jsPromise]).then(result => { - /* if (cssMode === CssModes.ACSS) { - this.cm.css.setValue(result[1].code || ''); - } */ - - this.createPreviewFile( - result[0].code || '', - result[1].code || '', - result[2].code || '' - ); - result.forEach(resultItem => { - if (resultItem.errors) { - this.showErrors(resultItem.errors.lang, resultItem.errors.data); - } - }); - }); + this.createPreviewFile(); + // result.forEach(resultItem => { + // if (resultItem.errors) { + // this.showErrors(resultItem.errors.lang, resultItem.errors.data); + // } + // }); this.codeInPreview.html = currentCode.html; this.codeInPreview.css = currentCode.css; @@ -406,12 +365,12 @@ export default class ContentWrap2 extends Component { updateHtmlMode(value) { // this.props.onCodeModeChange('html', value); // this.props.currentItem.htmlMode = value; - this.cm.setOption('mode', modes[value].cmMode); - CodeMirror.autoLoadMode( - this.cm, - modes[value].cmPath || modes[value].cmMode - ); - return this.handleModeRequirements(value); + // this.cm.setOption('mode', modes[value].cmMode); + // CodeMirror.autoLoadMode( + // this.cm, + // modes[value].cmPath || modes[value].cmMode + // ); + // return this.handleModeRequirements(value); } updateCssMode(value) { // this.props.onCodeModeChange('css', value); @@ -474,9 +433,11 @@ export default class ContentWrap2 extends Component { onDragEnd={this.mainSplitDragEndHandler.bind(this)} >
-
diff --git a/src/components/CreateNewModal.jsx b/src/components/CreateNewModal.jsx index 7145860..8dc1699 100644 --- a/src/components/CreateNewModal.jsx +++ b/src/components/CreateNewModal.jsx @@ -7,6 +7,7 @@ export function CreateNewModal({ show, closeHandler, onBlankTemplateSelect, + onBlankFileTemplateSelect, onTemplateSelect }) { return ( @@ -15,6 +16,9 @@ export function CreateNewModal({ +
Or choose from a template: diff --git a/src/components/SidePane.jsx b/src/components/SidePane.jsx new file mode 100644 index 0000000..4d92b2c --- /dev/null +++ b/src/components/SidePane.jsx @@ -0,0 +1,116 @@ +import { h, Component } from 'preact'; +const ENTER_KEY = 13; +const ESCAPE_KEY = 27; + +function FileIcon({ fileName }) { + if (!fileName) fileName = 'sd.sd'; + + const type = fileName.match(/.(\w+)$/)[1]; + console.log(type); + switch (type) { + case 'html': + return ( + + + + ); + case 'js': + return ( + + + + ); + case 'css': + return ( + + + + ); + } +} + +export class SidePane extends Component { + addFileButtonClickHandler() { + this.setState({ isEditing: true }); + setTimeout(() => { + this.newFileNameInput.focus(); + }, 1); + } + + addFile() { + // This gets called twice when enter is pressed, because blur also fires. + if (!this.newFileNameInput) { + return; + } + const fileName = this.newFileNameInput.value; + if (fileName) { + this.props.onAddFile(fileName); + } + this.setState({ isEditing: false }); + } + newFileNameInputKeyDownHandler(e) { + if (e.which === ENTER_KEY) { + this.addFile(); + } else if (e.which === ESCAPE_KEY) { + this.setState({ isEditing: false }); + } + } + render() { + const { files, onFileSelect, selectedFile } = this.props; + + return ( +
+
+ Files +
+ +
+
+ {this.state.isEditing ? ( +
+ (this.newFileNameInput = el)} + onBlur={this.addFile.bind(this)} + onKeyUp={this.newFileNameInputKeyDownHandler.bind(this)} + /> +
+ ) : null} + {files.map(file => ( +
+ +
+ ))} +
+ ); + } +} diff --git a/src/components/app.jsx b/src/components/app.jsx index 22432be..a7419d1 100644 --- a/src/components/app.jsx +++ b/src/components/app.jsx @@ -264,7 +264,7 @@ export default class App extends Component { alertsService.add(`"${sourceItem.title}" was forked`); trackEvent('fn', 'itemForked'); } - createNewItem(isProject = true) { + createNewItem(isFileMode = false) { const d = new Date(); let item = { title: @@ -275,15 +275,17 @@ export default class App extends Component { '-' + d.getHours() + ':' + - d.getMinutes() + d.getMinutes(), + createdOn: +d, + content: '' }; - if (isProject) { + if (isFileMode) { item = { ...item, files: [ - { name: 'index.html' }, - { name: 'style.css' }, - { name: 'script.js' } + { name: 'index.html', content: '' }, + { name: 'style.css', content: '' }, + { name: 'script.js', content: '' } ] }; } else { @@ -1165,6 +1167,10 @@ export default class App extends Component { this.createNewItem(); this.setState({ isCreateNewModalOpen: false }); } + blankFileTemplateSelectHandler() { + this.createNewItem(true); + this.setState({ isCreateNewModalOpen: false }); + } templateSelectHandler(template) { fetch(`templates/template-${template.id}.json`) @@ -1174,6 +1180,17 @@ export default class App extends Component { }); this.setState({ isCreateNewModalOpen: false }); } + addFileHandler(fileName) { + this.setState({ + currentItem: { + ...this.state.currentItem, + files: [ + ...this.state.currentItem.files, + { name: fileName, content: '' } + ] + } + }); + } render() { return ( @@ -1204,6 +1221,7 @@ export default class App extends Component { prefs={this.state.prefs} onEditorFocus={this.editorFocusHandler.bind(this)} onSplitUpdate={this.splitUpdateHandler.bind(this)} + onAddFile={this.addFileHandler.bind(this)} />