<commit_before>import React, { Component, Fragment } from 'react';
import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex';
import PropTypes from 'prop-types';
import { first } from 'lodash-es';
import EditorTabs from './EditorTabs';
import ActionRow from './ActionRow';
import envData from '../../../../../config/env.json';

const { showUpcomingChanges } = envData;

const propTypes = {
  challengeFiles: PropTypes.object,
  editor: PropTypes.element,
  hasEditableBoundries: PropTypes.bool,
  hasPreview: PropTypes.bool,
  instructions: PropTypes.element,
  preview: PropTypes.element,
  resizeProps: PropTypes.shape({
    onStopResize: PropTypes.func,
    onResize: PropTypes.func
  }),
  testOutput: PropTypes.element
};

const reflexProps = {
  propagateDimensions: true,
  renderOnResize: true,
  renderOnResizeRate: 20
};

class DesktopLayout extends Component {
  constructor(props) {
    super(props);
    this.state = { showNotes: false, showPreview: true, showConsole: false };
    this.switchDisplayTab = this.switchDisplayTab.bind(this);
  }

  switchDisplayTab(displayTab) {
    this.setState(state => {
      return {
        [displayTab]: !state[displayTab]
      };
    });
  }

  getChallengeFile() {
    const { challengeFiles } = this.props;
    return first(Object.keys(challengeFiles).map(key => challengeFiles[key]));
  }

  render() {
    const {
      resizeProps,
      instructions,
      editor,
      testOutput,
      hasPreview,
      preview,
      hasEditableBoundries
    } = this.props;

    const { showPreview, showConsole } = this.state;

    const challengeFile = this.getChallengeFile();
    const projectBasedChallenge = showUpcomingChanges && hasEditableBoundries;
    const isPreviewDisplayable = projectBasedChallenge
      ? showPreview && hasPreview
      : hasPreview;
    const isConsoleDisplayable = projectBasedChallenge ? showConsole : true;

    return (
      <Fragment>
        {projectBasedChallenge && (
          <ActionRow switchDisplayTab={this.switchDisplayTab} {...this.state} />
        )}
        <ReflexContainer className='desktop-layout' orientation='vertical'>
          {!projectBasedChallenge && (
            <ReflexElement flex={1} {...resizeProps}>
              {instructions}
            </ReflexElement>
          )}
          {!projectBasedChallenge && (
            <ReflexSplitter propagate={true} {...resizeProps} />
          )}

          <ReflexElement flex={1} {...resizeProps}>
            {challengeFile && (
              <ReflexContainer key={challengeFile.key} orientation='horizontal'>
                <ReflexElement flex={1} {...reflexProps} {...resizeProps}>
                  {
                    <Fragment>
                      {showUpcomingChanges && !hasEditableBoundries && (
                        <EditorTabs />
                      )}
                      {editor}
                    </Fragment>
                  }
                </ReflexElement>
                {isConsoleDisplayable && (
                  <ReflexSplitter propagate={true} {...resizeProps} />
                )}
                {isConsoleDisplayable && (
                  <ReflexElement flex={0.25} {...reflexProps} {...resizeProps}>
                    {testOutput}
                  </ReflexElement>
                )}
              </ReflexContainer>
            )}
          </ReflexElement>
          {isPreviewDisplayable && (
            <ReflexSplitter propagate={true} {...resizeProps} />
          )}
          {isPreviewDisplayable && (
            <ReflexElement flex={0.7} {...resizeProps}>
              {preview}
            </ReflexElement>
          )}
        </ReflexContainer>
      </Fragment>
    );
  }
}

DesktopLayout.displayName = 'DesktopLayout';
DesktopLayout.propTypes = propTypes;

export default DesktopLayout;
<commit_msg>fix: multi editor bottom cut off (#42375)<commit_after>import React, { Component, Fragment } from 'react';
import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex';
import PropTypes from 'prop-types';
import { first } from 'lodash-es';
import EditorTabs from './EditorTabs';
import ActionRow from './ActionRow';
import envData from '../../../../../config/env.json';

const { showUpcomingChanges } = envData;

const propTypes = {
  challengeFiles: PropTypes.object,
  editor: PropTypes.element,
  hasEditableBoundries: PropTypes.bool,
  hasPreview: PropTypes.bool,
  instructions: PropTypes.element,
  preview: PropTypes.element,
  resizeProps: PropTypes.shape({
    onStopResize: PropTypes.func,
    onResize: PropTypes.func
  }),
  testOutput: PropTypes.element
};

const reflexProps = {
  propagateDimensions: true,
  renderOnResize: true,
  renderOnResizeRate: 20
};

class DesktopLayout extends Component {
  constructor(props) {
    super(props);
    this.state = { showNotes: false, showPreview: true, showConsole: false };
    this.switchDisplayTab = this.switchDisplayTab.bind(this);
  }

  switchDisplayTab(displayTab) {
    this.setState(state => {
      return {
        [displayTab]: !state[displayTab]
      };
    });
  }

  getChallengeFile() {
    const { challengeFiles } = this.props;
    return first(Object.keys(challengeFiles).map(key => challengeFiles[key]));
  }

  render() {
    const {
      resizeProps,
      instructions,
      editor,
      testOutput,
      hasPreview,
      preview,
      hasEditableBoundries
    } = this.props;

    const { showPreview, showConsole } = this.state;

    const challengeFile = this.getChallengeFile();
    const projectBasedChallenge = showUpcomingChanges && hasEditableBoundries;
    const isPreviewDisplayable = projectBasedChallenge
      ? showPreview && hasPreview
      : hasPreview;
    const isConsoleDisplayable = projectBasedChallenge ? showConsole : true;

    return (
      <Fragment>
        {projectBasedChallenge && (
          <ActionRow switchDisplayTab={this.switchDisplayTab} {...this.state} />
        )}
        <ReflexContainer className='desktop-layout' orientation='vertical'>
          {!projectBasedChallenge && (
            <ReflexElement flex={1} {...resizeProps}>
              {instructions}
            </ReflexElement>
          )}
          {!projectBasedChallenge && (
            <ReflexSplitter propagate={true} {...resizeProps} />
          )}

          <ReflexElement flex={1} {...resizeProps}>
            {challengeFile && showUpcomingChanges && !hasEditableBoundries && (
              <EditorTabs />
            )}
            {challengeFile && (
              <ReflexContainer key={challengeFile.key} orientation='horizontal'>
                <ReflexElement flex={1} {...reflexProps} {...resizeProps}>
                  {<Fragment>{editor}</Fragment>}
                </ReflexElement>
                {isConsoleDisplayable && (
                  <ReflexSplitter propagate={true} {...resizeProps} />
                )}
                {isConsoleDisplayable && (
                  <ReflexElement flex={0.25} {...reflexProps} {...resizeProps}>
                    {testOutput}
                  </ReflexElement>
                )}
              </ReflexContainer>
            )}
          </ReflexElement>
          {isPreviewDisplayable && (
            <ReflexSplitter propagate={true} {...resizeProps} />
          )}
          {isPreviewDisplayable && (
            <ReflexElement flex={0.7} {...resizeProps}>
              {preview}
            </ReflexElement>
          )}
        </ReflexContainer>
      </Fragment>
    );
  }
}

DesktopLayout.displayName = 'DesktopLayout';
DesktopLayout.propTypes = propTypes;

export default DesktopLayout;

{'fraction_non_alphanumeric': 0.12049770792403405, 'fraction_numerical': 0.0032743942370661427, 'mean_word_length': 2.247979583156104, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 53, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6983906', 'n_tokens_mistral': 2131, 'n_tokens_neox': 2036, 'n_words': 391}