<commit_before>import classNames from 'classnames';
import {Modal} from 'reactjs-components';
import React from 'react';

import IconBack from '../icons/IconBack';
import {keyCodes} from '../../utils/KeyboardUtil';

const METHODS_TO_BIND = [
  'handleClick',
  'handleKeyPress'
];

class ImageViewerModal extends React.Component {
  constructor() {
    super(...arguments);

    this.state = {isLoadingImage: false};

    METHODS_TO_BIND.forEach((method) => {
      this[method] = this[method].bind(this);
    });

    if (this.props.open) {
      global.window.addEventListener('keydown', this.handleKeyPress, true);
    }
  }

  componentWillReceiveProps(nextProps) {
    let {props} = this;
    if (props.open && !nextProps.open) {
      // Closes
      global.window.removeEventListener('keydown', this.handleKeyPress, true);
    }

    if (!props.open && nextProps.open) {
      // Opens
      global.window.addEventListener('keydown', this.handleKeyPress, true);
    }
  }

  componentWillUpdate(nextProps, {isLoadingImage}) {
    let {images, selectedImage} = this.props;
    let nextImages = nextProps.images;
    let nextSelectedImage = nextProps.selectedImage;
    // Two images in a row are the same, img.onLoad will never be called, so
    // here we are updating manually
    if (isLoadingImage &&
        images[selectedImage] === nextImages[nextSelectedImage]) {
      this.handleLoadingImageChange(false);
    }
  }

  handleKeyPress(event) {
    let {images} = this.props;
    // Should do nothing if the key event was already consumed, or there is only
    // one or no images
    if (event.defaultPrevented || !images || images.length < 2) {
      return;
    }

    if (event.keyCode === keyCodes.leftArrow) {
      this.handleClick('left');
    }

    if (event.keyCode === keyCodes.rightArrow) {
      this.handleClick('right');
    }

    // Consume the event for suppressing "double action".
    event.preventDefault();
  }

  handleClick(direction) {
    if (direction === 'left') {
      this.props.onLeftClick();
    }

    if (direction === 'right') {
      this.props.onRightClick();
    }

    this.handleLoadingImageChange(true);
  }

  handleLoadingImageChange(isLoadingImage) {
    this.setState({isLoadingImage});
  }

  getSelectedImage() {
    let {props} = this;

    return (
      <div className="fill-image-contianer">
        <img
          className="fill-image"
          onLoad={this.handleLoadingImageChange.bind(this, false)}
          src={props.images[props.selectedImage]} />
      </div>
    );
  }

  getFooter() {
    return (
      <div onKeyPress={this.handleKeyPress}>
        <span
          onClick={this.handleClick.bind(this, 'left')}
          className="clickable arrow-container">
          <IconBack className="icon icon-back icon-small arrow" />
        </span>
        <span
          className="clickable arrow-container forward"
          onClick={this.handleClick.bind(this, 'left')}>
          <IconBack
            className="icon icon-back icon-small arrow"
            isForward={true} />
        </span><commit_msg>Using key to update image and trigger img.onLoad<commit_after>import classNames from 'classnames';
import {Modal} from 'reactjs-components';
import React from 'react';

import IconBack from '../icons/IconBack';
import {keyCodes} from '../../utils/KeyboardUtil';

const METHODS_TO_BIND = [
  'handleClick',
  'handleKeyPress'
];

class ImageViewerModal extends React.Component {
  constructor() {
    super(...arguments);

    this.state = {isLoadingImage: false};

    METHODS_TO_BIND.forEach((method) => {
      this[method] = this[method].bind(this);
    });

    if (this.props.open) {
      global.window.addEventListener('keydown', this.handleKeyPress, true);
    }
  }

  componentWillReceiveProps(nextProps) {
    let {props} = this;
    if (props.open && !nextProps.open) {
      // Closes
      global.window.removeEventListener('keydown', this.handleKeyPress, true);
    }

    if (!props.open && nextProps.open) {
      // Opens
      global.window.addEventListener('keydown', this.handleKeyPress, true);
    }
  }

  handleKeyPress(event) {
    let {images} = this.props;
    // Should do nothing if the key event was already consumed, or there is only
    // one or no images
    if (event.defaultPrevented || !images || images.length < 2) {
      return;
    }

    if (event.keyCode === keyCodes.leftArrow) {
      this.handleClick('left');
    }

    if (event.keyCode === keyCodes.rightArrow) {
      this.handleClick('right');
    }

    // Consume the event for suppressing "double action".
    event.preventDefault();
  }

  handleClick(direction) {
    if (direction === 'left') {
      this.props.onLeftClick();
    }

    if (direction === 'right') {
      this.props.onRightClick();
    }

    this.handleLoadingImageChange(true);
  }

  handleLoadingImageChange(isLoadingImage) {
    this.setState({isLoadingImage});
  }

  getSelectedImage() {
    let {props} = this;

    return (
      <div className="fill-image-contianer">
        <img
          className="fill-image"
          onLoad={this.handleLoadingImageChange.bind(this, false)}
           key={props.selectedImage}
          src={props.images[props.selectedImage]} />
      </div>
    );
  }

  getFooter() {
    return (
      <div onKeyPress={this.handleKeyPress}>
        <span
          onClick={this.handleClick.bind(this, 'left')}
          className="clickable arrow-container">
          <IconBack className="icon icon-back icon-small arrow" />
        </span>
        <span
          className="clickable arrow-container forward"
          onClick={this.handleClick.bind(this, 'left')}>
          <IconBack
            className="icon icon-back icon-small arrow"
            isForward={true} />
        </span>
{'fraction_non_alphanumeric': 0.1352890422778257, 'fraction_numerical': 0.0003451251078515962, 'mean_word_length': 2.722543352601156, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 25, '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': '2130639', 'n_tokens_mistral': 1740, 'n_tokens_neox': 1714, 'n_words': 355}