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