<commit_before>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { createComponent } from 'olymp-fela';
import { cloudinaryUrl } from './image';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';

const StyledCrop = createComponent(
  ({ theme }) => ({
    '> .ReactCrop--crop-wrapper': {
      backgroundColor: 'white',
    },
  }),
  p => <ReactCrop {...p} />,
  p => Object.keys(p)
);

class Crop extends Component {
  state = {
    isOpen: true,
  };

  render() {
    const { value, onChange } = this.props;
    const crop = value.crop || [value.width, value.height, 0, 0];
    const aspect = this.props.aspect || (this.state.isSquare && 1);
    const width = crop[0] / value.width * 100;
    const height = crop[1] / value.height * 100;
    const x = crop[2] / value.width * 100;
    const y = crop[3] / value.height * 100;

    if (!value) { return <div />; }

    return (
      <div
        onKeyDown={e => this.setState({ isSquare: e && e.shiftKey })}
        onKeyUp={e => this.setState({ isSquare: false })}
      >
        <StyledCrop
          src={cloudinaryUrl({ ...value, crop: undefined })}
          onChange={(p, { width, height, x, y }) =>
            onChange([width, height, x, y])}
          crop={
            crop
              ? {
                width,
                height,
                x,
                y,
                aspect,
              }
              : { aspect }
          }
        />
      </div>
    );<commit_msg>fix crop<commit_after>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { createComponent } from 'olymp-fela';
import { cloudinaryUrl } from './image';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';

const StyledCrop = createComponent(
  ({ theme }) => ({
    '> .ReactCrop--crop-wrapper': {
      backgroundColor: 'white',
    },
  }),
  p => <ReactCrop {...p} />,
  p => Object.keys(p),
);

class Crop extends Component {
  state = {
    isOpen: true,
  };

  onChange = ({ width, height, x, y }) => {
    const { value } = this.props;
    this.props.onChange([
      Math.floor(value.width / 100 * width),
      Math.floor(value.height / 100 * height),
      Math.floor(value.width / 100 * x),
      Math.floor(value.height / 100 * y),
    ]);
  };

  render() {
    const { value } = this.props;
    const crop = value.crop || [value.width, value.height, 0, 0];
    const aspect = this.props.aspect || (this.state.isSquare && 1);
    const width = crop[0] / value.width * 100;
    const height = crop[1] / value.height * 100;
    const x = crop[2] / value.width * 100;
    const y = crop[3] / value.height * 100;
    console.log('value', value, crop, width, height, x, y);

    if (!value) {
      return <div />;
    }

    return (
      <div
        onKeyDown={e => this.setState({ isSquare: e && e.shiftKey })}
        onKeyUp={e => this.setState({ isSquare: false })}
      >
        <StyledCrop
          src={cloudinaryUrl({ ...value, crop: undefined })}
          onChange={this.onChange}
          crop={
            crop ? (
              {
                width,
                height,
                x,
                y,
                aspect,
              }
            ) : (
              { aspect }
            )
          }
        />
      </div>
    );
{'fraction_non_alphanumeric': 0.1595399587142436, 'fraction_numerical': 0.014744913005013271, 'mean_word_length': 1.812603648424544, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 27, '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': '1996766', 'n_tokens_mistral': 1137, 'n_tokens_neox': 1092, 'n_words': 254}