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

fix(client): split Editor panes correctly (#41570)

Browse Source 
* refactor: clean up MultifileEditor

* fix: show correct splitters

* fix: include splitter for JSX
This commit is contained in:
Oliver Eyton-Williams
2021-03-24 21:21:08 +01:00
committed by GitHub
parent 963c3c5af5
commit 73d9b4c194
1 changed files with 42 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
client/src/templates/Challenges/classic/MultifileEditor.js
View File

@ -169,7 +169,7 @@ class MultifileEditor extends Component {
editorRef,
theme,
resizeProps,
visibleEditors
visibleEditors: { indexcss, indexhtml, indexjs, indexjsx }
} = this.props;
const editorTheme = theme === 'night' ? 'vs-dark-custom' : 'vs-custom';
// TODO: the tabs mess up the rendering (scroll doesn't work properly and
@ -185,11 +185,22 @@ class MultifileEditor extends Component {
renderOnResizeRate: 20
};
// TODO: this approach (||ing the visibleEditors) isn't great.
const splitCSS = visibleEditors.indexhtml && visibleEditors.indexcss;
const splitJS =
visibleEditors.indexcss ||
(visibleEditors.indexhtml && visibleEditors.indexjs);
let splitterJSXRight, splitterHTMLRight, splitterCSSRight;
if (indexjsx) {
if (indexhtml || indexcss || indexjs) {
splitterJSXRight = true;
}
}
if (indexhtml) {
if (indexcss || indexjs) {
splitterHTMLRight = true;
}
}
if (indexcss) {
if (indexjs) {
splitterCSSRight = true;
}
}
// TODO: tabs should be dynamically created from the challengeFiles
// TODO: the tabs mess up the rendering (scroll doesn't work properly and
@ -204,7 +215,23 @@ class MultifileEditor extends Component {
>
<ReflexElement flex={10} {...reflexProps} {...resizeProps}>
<ReflexContainer orientation='vertical'>
{visibleEditors.indexhtml && (
{indexjsx && (
<ReflexElement {...reflexProps} {...resizeProps}>
<Editor
challengeFiles={challengeFiles}
containerRef={containerRef}
description={targetEditor === 'indexjsx' ? description : null}
fileKey='indexjsx'
key='indexjsx'
resizeProps={resizeProps}
theme={editorTheme}
/>
</ReflexElement>
)}
{splitterJSXRight && (
<ReflexSplitter propagate={true} {...resizeProps} />
)}
{indexhtml && (
<ReflexElement {...reflexProps} {...resizeProps}>
<Editor
challengeFiles={challengeFiles}
@ -220,8 +247,10 @@ class MultifileEditor extends Component {
/>
</ReflexElement>
)}
{splitCSS && <ReflexSplitter propagate={true} {...resizeProps} />}
{visibleEditors.indexcss && (
{splitterHTMLRight && (
<ReflexSplitter propagate={true} {...resizeProps} />
)}
{indexcss && (
<ReflexElement {...reflexProps} {...resizeProps}>
<Editor
challengeFiles={challengeFiles}
@ -234,9 +263,11 @@ class MultifileEditor extends Component {
/>
</ReflexElement>
)}
{splitJS && <ReflexSplitter propagate={true} {...resizeProps} />}
{splitterCSSRight && (
<ReflexSplitter propagate={true} {...resizeProps} />
)}
{visibleEditors.indexjs && (
{indexjs && (
<ReflexElement {...reflexProps} {...resizeProps}>
<Editor
challengeFiles={challengeFiles}
@ -249,19 +280,6 @@ class MultifileEditor extends Component {
/>
</ReflexElement>
)}
{visibleEditors.indexjsx && (
<ReflexElement {...reflexProps} {...resizeProps}>
<Editor
challengeFiles={challengeFiles}
containerRef={containerRef}
description={targetEditor === 'indexjsx' ? description : null}
fileKey='indexjsx'
key='indexjsx'
resizeProps={resizeProps}
theme={editorTheme}
/>
</ReflexElement>
)}
</ReflexContainer>
</ReflexElement>
</ReflexContainer>