<commit_before>import React from 'react';
import styled from 'styled-components';
import UIState, { UIStateListener } from 'ui/UIState';
import MainControls from 'ui/components/MainControls';
import ResizeHandle from 'ui/components/ResizeHandle';

const Container = styled.div`
  width: 100%;
  overflow: hidden;
  height: calc(100% - 55px);
  font-size: 13px;
  line-height: 20px;
  font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  background-color: white;
  border-top: 1px solid #e7e7e7;
  bottom: 55px;
  z-index: 2147483645;
`;

const Actions = styled.div`
  display: flex;
  align-items: center;
  padding-left: 8px;
  position: relative;
  justify-content: flex-end;
`;

const Overlay = styled.div`
  position: absolute;
  top: 3px;
  bottom: 25px;
  width: 100%;
  background: transparent;
  z-index: 2147483646;
`;

const ControlBar = styled.div`
  display: flex;
  font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 13px;
  line-height: 20px;
  margin-left: 104px;
  background: white;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1px solid #d8d8d8;
  height: 24px;
  width: calc(100% - 104px);
`;

const SubControlBar = styled.div`
  display: flex;
  font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 13px;
  line-height: 20px;
  background: white;
  position: fixed;
  bottom: 24px;
  left: 0;
  border-top: 1px solid #d8d8d8;
  height: 31px;
  width: 100%;
`;

class Frame extends React.Component {

  componentDidMount() {
    window.addEventListener('keyup', this.closeOnEscape);
  }

  componentWillUnmount() {
    window.removeEventListener('keyup', this.closeOnEscape);
  }

  closeOnEscape = (event) => {
    if (event.keyCode === 27) {
      UIState.update({ viewMode: 'closed' });
    }
  };

  render() {
    const style = {
      width: '100%',
      height: UIState.editorHeight
    };

    const disabledStyle = {
      filter: 'grayscale(100%)',
      opacity: 0.25
    };

    const disabledState = !UIState.mimicEnabled && UIState.viewMode !== 'settings';

    return (
      <div style={ style }>
        <ResizeHandle value="editorHeight"/>

        <Container style={ disabledState ? disabledStyle : {} }>
          { disabledState && <Overlay/> }

          { this.props.children }
        </Container>

        {
          this.props.subControls && <SubControlBar>{ this.props.subControls }</SubControlBar>
        }

        <ControlBar>
          {
            UIState.mimicEnabled &&
            <Actions>
              { this.props.controls }
            </Actions>
          }

          <MainControls/>
        </ControlBar>
      </div>
    );
  }
}

export default UIStateListener(Frame);<commit_msg>add support to import files on drop to frame<commit_after>import React from 'react';
import styled from 'styled-components';
import { DropTarget } from 'react-dnd';
import API from 'api';
import UIState, { UIStateListener } from 'ui/UIState';
import MainControls from 'ui/components/MainControls';
import ResizeHandle from 'ui/components/ResizeHandle';

const dropTarget = {
  drop(props, monitor) {
    if (monitor.didDrop()) {
      return;
    }

    const file = monitor.getItem().files[0];
    const reader = new FileReader();

    reader.onload = function handleFileUpload() {
      API.import(this.result);
      UIState.triggerUpdates()
    };

    reader.readAsText(file);
  }
};

function collect(connector, monitor) {
  return {
    connectDropTarget: connector.dropTarget(),
    isHovered: monitor.isOver()
  };
}

const Container = styled.div`
  width: 100%;
  overflow: hidden;
  height: calc(100% - 55px);
  font-size: 13px;
  line-height: 20px;
  font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  background-color: white;
  border-top: 1px solid #e7e7e7;
  bottom: 55px;
  z-index: 2147483645;
`;

const Actions = styled.div`
  display: flex;
  align-items: center;
  padding-left: 8px;
  position: relative;
  justify-content: flex-end;
`;

const Overlay = styled.div`
  position: absolute;
  top: 3px;
  bottom: 25px;
  width: 100%;
  background: transparent;
  z-index: 2147483646;
`;

const ControlBar = styled.div`
  display: flex;
  font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 13px;
  line-height: 20px;
  margin-left: 104px;
  background: white;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1px solid #d8d8d8;
  height: 24px;
  width: calc(100% - 104px);
`;

const SubControlBar = styled.div`
  display: flex;
  font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 13px;
  line-height: 20px;
  background: white;
  position: fixed;
  bottom: 24px;
  left: 0;
  border-top: 1px solid #d8d8d8;
  height: 31px;
  width: 100%;
`;

const Dropzone = styled.div`
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 3px;
  bottom: 25px;
  width: 100%;
  background: rgba(255, 255, 255, 0.75);
  z-index: 2147483646;
`;

class Frame extends React.Component {

  componentDidMount() {
    window.addEventListener('keyup', this.closeOnEscape);
  }

  componentWillUnmount() {
    window.removeEventListener('keyup', this.closeOnEscape);
  }

  closeOnEscape = (event) => {
    if (event.keyCode === 27) {
      UIState.update({ viewMode: 'closed' });
    }
  };

  render() {
    const style = {
      width: '100%',
      height: UIState.editorHeight
    };

    const disabledStyle = {
      filter: 'grayscale(100%)',
      opacity: 0.25
    };

    const disabledState = !UIState.mimicEnabled && UIState.viewMode !== 'settings';

    return this.props.connectDropTarget(
      <div style={ style }>
        { this.props.isHovered && <Dropzone>Drop here to import</Dropzone> }

        <ResizeHandle value="editorHeight"/>

        <Container style={ disabledState ? disabledStyle : {} }>
          { disabledState && <Overlay/> }

          { this.props.children }
        </Container>

        {
          this.props.subControls && <SubControlBar>{ this.props.subControls }</SubControlBar>
        }

        <ControlBar>
          {
            UIState.mimicEnabled &&
            <Actions>
              { this.props.controls }
            </Actions>
          }

          <MainControls/>
        </ControlBar>
      </div>
    );
  }
}

export default DropTarget('__NATIVE_FILE__', dropTarget, collect)(UIStateListener(Frame));
{'fraction_non_alphanumeric': 0.13337488314116547, 'fraction_numerical': 0.033499532564661885, 'mean_word_length': 2.930802204531537, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 33, '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': '4907882', 'n_tokens_mistral': 2330, 'n_tokens_neox': 2131, 'n_words': 487}