<commit_before>import React from 'react';
import { DragSource, DropTarget } from 'react-dnd';
import { findDOMNode } from 'react-dom';

import Cell from './cell';

const cellSource = {
  beginDrag(props) {
    return {
      id: props.id,
    };
  },
};

function isDragUpper(props, monitor, component) {
  const hoverBoundingRect = findDOMNode(component).getBoundingClientRect();
  const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;

  const clientOffset = monitor.getClientOffset();
  const hoverClientY = clientOffset.y - hoverBoundingRect.top;

  return hoverClientY < hoverMiddleY;
}

const cellTarget = {
  drop(props, monitor, component) {
    const hoverUpperHalf = isDragUpper(props, monitor, component);
    props.moveCell(monitor.getItem().id, props.id, hoverUpperHalf);
  },

  hover(props, monitor, component) {

    component.setState({ hoverUpperHalf: isDragUpper(props, monitor, component) });
  },
};

function collectSource(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging(),
    connectDragPreview: connect.dragPreview(),
  };
}

function collectTarget(connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
  };
}

class DraggableCell extends React.Component {
  static propTypes = {
    cell: React.PropTypes.any,
    connectDragPreview: React.PropTypes.func.isRequired,
    connectDragSource: React.PropTypes.func.isRequired,
    connectDropTarget: React.PropTypes.func.isRequired,
    id: React.PropTypes.string,
    isDragging: React.PropTypes.bool.isRequired,
    isOver: React.PropTypes.bool.isRequired,
  };

  static contextTypes = {
    dispatch: React.PropTypes.func,
  };

  constructor(props) {
    super(props);
  }

  state = {
    hoverUpperHalf: true,
  };

  componentDidMount() {
    const connectDragPreview = this.props.connectDragPreview;
    const img = new Image();
    img.src = [
      'data:image/png;base64,',
      'iVBORw0KGgoAAAANSUhEUgAAADsAAAAzCAYAAAApdnDeAAAAAXNSR0IArs4c6QAA',
      'AwNJREFUaAXtmlFL3EAUhe9MZptuoha3rLWgYC0W+lj/T3+26INvXbrI2oBdE9km',
      'O9Nzxu1S0LI70AQScyFmDDfkfvdMZpNwlCCccwq7f21MaVM4FPtkU0o59RdoJBMx',
      'WZINBg+DQWGKCAk+2kIKFh9JlSzLYVmOilEpR1Kh/iUbQFiNQTSbzWJrbYJximOJ',
      '<KEY>',
      '<KEY>',
      '<KEY>',
      '<KEY>',
      'GSOfzs42XmM+v5fJ5JvP29/fl8PDw43nhCbUpuzFxYXs7OxKmqZb1WQGkc/P80K+',
      'T6dbnROaVJuyfPY+Pj7aup7h66HP/1Uu5O7u59bnhSTWpmxIEU3l9rBNdbrp6/TK',
      'Nt3xpq7XK9tUp5u+Tm2/s/jYJdfX12LwBHVycrKRK89zmeJhYnZ7K3Fcz3e/2mDP',
      'z7/waZEf8zaC+gSkKa3l4OBA3uztbXdOYFZtsKcfToNKSZNUPp6GnRN0AST3C1Ro',
      'x9qS3yvbFqVC6+yVDe1YW/J7ZduiVGidvbKhHWtLfq9sW5QKrdMri9cxB6OFhQmO',
      'TrDuBHjIRT5CEZZj0i7xOkYnWGeCPOQiHqC8lc/R60cLnNPuvjOkns7dk4t8/Jfv',
      's46mRlWqQiudxebVV3gAj7C9hXsmgZeztnfe/91YODEr3IoF/JY/sE2gbGaVLci3',
      'hh0tRtWNvsm16JmNcOs6N9dW72LP7yOtWbEhjAUkZ+icoJ5HbE6+NSxMjKWe6cKb',
      'GkUWgMwiFbXSlRpFkXelUlF4F70rVd7Bd4oZ/LL8xiDmtPV2Nwyf2zOlTfHERY7i',
      'Haa1+w2+iFqx0aIgvgAAAABJRU5ErkJggg==',
    ].join('');
    img.onload = function dragImageLoaded() {
      connectDragPreview(img);
    };
  }

  render() {
    return this.props.connectDropTarget(this.props.connectDragSource(
      <div
        style={{
          opacity: this.props.isDragging ? 0.25 : 1,
          borderTop: (this.props.isOver && this.state.hoverUpperHalf) ?
            '3px lightgray solid' : '3px transparent solid',
          borderBottom: (this.props.isOver && !this.state.hoverUpperHalf) ?
            '3px lightgray solid' : '3px transparent solid',
        }}
        className={'draggable-cell'}>
        {
          <Cell {...this.props}/><commit_msg>Almost there, dear AirBnB<commit_after>import React from 'react';
import { DragSource, DropTarget } from 'react-dnd';
import { findDOMNode } from 'react-dom';

import Cell from './cell';

const cellSource = {
  beginDrag(props) {
    return {
      id: props.id,
    };
  },
};

function isDragUpper(props, monitor, component) {
  const hoverBoundingRect = findDOMNode(component).getBoundingClientRect();
  const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;

  const clientOffset = monitor.getClientOffset();
  const hoverClientY = clientOffset.y - hoverBoundingRect.top;

  return hoverClientY < hoverMiddleY;
}

const cellTarget = {
  drop(props, monitor, component) {
    const hoverUpperHalf = isDragUpper(props, monitor, component);
    props.moveCell(monitor.getItem().id, props.id, hoverUpperHalf);
  },

  hover(props, monitor, component) {
    component.setState({ hoverUpperHalf: isDragUpper(props, monitor, component) });
  },
};

function collectSource(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging(),
    connectDragPreview: connect.dragPreview(),
  };
}

function collectTarget(connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
  };
}

class DraggableCell extends React.Component {
  static propTypes = {
    cell: React.PropTypes.any,
    connectDragPreview: React.PropTypes.func.isRequired,
    connectDragSource: React.PropTypes.func.isRequired,
    connectDropTarget: React.PropTypes.func.isRequired,
    id: React.PropTypes.string,
    isDragging: React.PropTypes.bool.isRequired,
    isOver: React.PropTypes.bool.isRequired,
  };

  static contextTypes = {
    dispatch: React.PropTypes.func,
  };

  state = {
    hoverUpperHalf: true,
  };

  componentDidMount() {
    const connectDragPreview = this.props.connectDragPreview;
    const img = new Image();
    img.src = [
      'data:image/png;base64,',
      'iVBORw0KGgoAAAANSUhEUgAAADsAAAAzCAYAAAApdnDeAAAAAXNSR0IArs4c6QAA',
      'AwNJREFUaAXtmlFL3EAUhe9MZptuoha3rLWgYC0W+lj/T3+26INvXbrI2oBdE9km',
      'O9Nzxu1S0LI70AQScyFmDDfkfvdMZpNwlCCccwq7f21MaVM4FPtkU0o59RdoJBMx',
      '<KEY>',
      '<KEY>',
      '<KEY>',
      '<KEY>',
      '<KEY>',
      '<KEY>
      '<KEY>fPY+Pj7aup7h66HP/1Uu5O7u59bnhSTWpmxIEU3l9rBNdbrp6/TK',
      'Nt3xpq7XK9tUp5u+Tm2/s/jYJdfX12LwBHVycrKRK89zmeJhYnZ7K3Fcz3e/2mDP',
      'z7/waZEf8zaC+gSkKa3l4OBA3uztbXdOYFZtsKcfToNKSZNUPp6GnRN0AST3C1Ro',
      'x9qS3yvbFqVC6+yVDe1YW/J7ZduiVGidvbKhHWtLfq9sW5QKrdMri9cxB6OFhQmO',
      'TrDuBHjIRT5CEZZj0i7xOkYnWGeCPOQiHqC8lc/R60cLnNPuvjOkns7dk4t8/Jfv',
      's46mRlWqQiudxebVV3gAj7C9hXsmgZeztnfe/91YODEr3IoF/JY/sE2gbGaVLci3',
      'hh0tRtWNvsm16JmNcOs6N9dW72LP7yOtWbEhjAUkZ+icoJ5HbE6+NSxMjKWe6cKb',
      'GkUWgMwiFbXSlRpFkXelUlF4F70rVd7Bd4oZ/LL8xiDmtPV2Nwyf2zOlTfHERY7i',
      'Haa1+w2+iFqx0aIgvgAAAABJRU5ErkJggg==',
    ].join('');
    img.onload = function dragImageLoaded() {
      connectDragPreview(img);
    };
  }

  render() {
    return this.props.connectDropTarget(this.props.connectDragSource(
      <div
        style={{
          opacity: this.props.isDragging ? 0.25 : 1,
          borderTop: (this.props.isOver && this.state.hoverUpperHalf) ?
            '3px lightgray solid' : '3px transparent solid',
          borderBottom: (this.props.isOver && !this.state.hoverUpperHalf) ?
            '3px lightgray solid' : '3px transparent solid',
        }}
        className={'draggable-cell'}
      >
        {
          <Cell {...this.props} />
{'fraction_non_alphanumeric': 0.11584022038567493, 'fraction_numerical': 0.03595041322314049, 'mean_word_length': 3.929395790902919, 'pattern_counts': {'":': 0, '<': 20, '<?xml version=': 0, '>': 18, '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': '4923098', 'n_tokens_mistral': 3068, 'n_tokens_neox': 2944, 'n_words': 352}