gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: simple prototype for dynamic tabs

Browse Source 
While this works for html challenges, it should dynamically generate the
tabs in a predetermined order from the available files.
This commit is contained in:
Oliver Eyton-Williams
2020-05-27 18:14:23 +02:00
committed by Mrugesh Mohapatra
parent 631c2671b6
commit dea30c1397
1 changed files with 25 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
client/src/templates/Challenges/classic/Editor.js
View File

@ -298,7 +298,7 @@ class Editor extends Component {
} }
render() { render() {
const { theme } = this.props; const { challengeFiles, theme } = this.props;
const editorTheme = theme === 'night' ? 'vs-dark-custom' : 'vs-custom'; const editorTheme = theme === 'night' ? 'vs-dark-custom' : 'vs-custom';
// TODO: tabs should be dynamically created from the challengeFiles // TODO: tabs should be dynamically created from the challengeFiles
@ -307,24 +307,30 @@ class Editor extends Component {
<Suspense fallback={<Loader timeout={600} />}> <Suspense fallback={<Loader timeout={600} />}>
<span className='notranslate'> <span className='notranslate'>
<div className='monaco-editor-tabs'> <div className='monaco-editor-tabs'>
<div {challengeFiles['indexhtml'] && (
className='monaco-editor-tab' <div
onClick={() => this.changeTab('indexhtml')} className='monaco-editor-tab'
> onClick={() => this.changeTab('indexhtml')}
index.html >
</div> index.html
<div </div>
className='monaco-editor-tab' )}
onClick={() => this.changeTab('indexjs')} {challengeFiles['indexjs'] && (
> <div
script.js className='monaco-editor-tab'
</div> onClick={() => this.changeTab('indexjs')}
<div >
className='monaco-editor-tab' script.js
onClick={() => this.changeTab('indexcss')} </div>
> )}
styles.css {challengeFiles['indexcss'] && (
</div> <div
className='monaco-editor-tab'
onClick={() => this.changeTab('indexcss')}
>
styles.css
</div>
)}
</div> </div>
<MonacoEditor <MonacoEditor
editorDidMount={this.editorDidMount} editorDidMount={this.editorDidMount}