<commit_before>import React, { PureComponent, PropTypes } from 'react';
import { findDOMNode } from 'react-dom';
import TransitionGroup from 'react-addons-transition-group';
import cn from 'classnames';

import isValidClick from '../utils/EventUtils/isValidClick';
import isValidFocusKeypress from '../utils/EventUtils/isValidFocusKeypress';
import calcPageOffset from '../utils/calcPageOffset';
import calculateHypotenuse from '../utils/NumberUtils/calculateHypotenuse';

import Ink from './Ink';


/**
 * The `InkContainer` is usesd for holding the list of inks that get created by touch,
 * click, or keyboard focus.
 *
 * If the container element has the `type="submit"` attribute, the ink will also be
 * triggered when the user presses enter anywhere in the form.
 */
export default class InkContainer extends PureComponent {
  static propTypes = {
    style: PropTypes.object,
    className: PropTypes.string,
    inkStyle: PropTypes.object,
    inkClassName: PropTypes.string,
    additionalTriggerKeys: PropTypes.arrayOf(PropTypes.number),
    waitForInkTransition: PropTypes.bool,
    disabledInteractions: PropTypes.arrayOf(PropTypes.oneOf(['keyboard', 'mouse', 'touch'])),
    transitionOverlap: PropTypes.number.isRequired,
    transitionEnterTimeout: PropTypes.number.isRequired,
    transitionLeaveTimeout: PropTypes.number.isRequired,
  };

  static defaultProps = {
    transitionOverlap: 150,
    transitionEnterTimeout: 450,
    transitionLeaveTimeout: 300,
  };

  constructor(props) {
    super(props);

    this.state = { inks: [] };
    this.createInk = this.createInk.bind(this);
    this._createInk = this._createInk.bind(this);
    this._removeInk = this._removeInk.bind(this);
    this._setContainers = this._setContainers.bind(this);
    this._maybeDelayClick = this._maybeDelayClick.bind(this);
    this._handleBlur = this._handleBlur.bind(this);
    this._handleKeyUp = this._handleKeyUp.bind(this);
    this._handleMouseDown = this._handleMouseDown.bind(this);
    this._handleMouseUp = this._handleMouseUp.bind(this);
    this._handleMouseLeave = this._handleMouseLeave.bind(this);
    this._handleTouchStart = this._handleTouchStart.bind(this);
    this._handleTouchMove = this._handleTouchMove.bind(this);
    this._handleTouchEnd = this._handleTouchEnd.bind(this);
    this._handleRemove = this._handleRemove.bind(this);
    this._handleSubmit = this._handleSubmit.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    const { disabledInteractions: di } = this.props;
    const { disabledInteractions: ndi } = nextProps;
    if (di === ndi || !this._container) {
      return;
    }

    if (this._isListeneredDisabledDiff('keyboard', di, ndi)) {
      const fn = `${this._isListeneredDisabled('keyboard', ndi) ? 'remove' : 'add'}EventListener`;
      this._container[fn]('keyup', this._handleKeyUp);

      if (this._container.getAttribute('type') === 'submit') {
        window[fn]('submit', this._handleSubmit);
      }
    }

    if (this._isListeneredDisabledDiff('mouse', di, ndi)) {
      const fn = `${this._isListeneredDisabled('mouse', ndi) ? 'remove' : 'add'}EventListener`;
      this._container[fn]('mousedown', this._handleMouseDown);
      this._container[fn]('mouseup', this._handleMouseUp);
    }

    if (this._isListeneredDisabledDiff('touch', di, ndi)) {
      const fn = `${this._isListeneredDisabled('touch', ndi) ? 'remove' : 'add'}EventListener`;
      this._container[fn]('touchstart', this._handleTouchStart);
      this._container[fn]('touchend', this._handleTouchEnd);
    }
  }

  componentWillUnmount() {
    if (this._timeout) {
      clearTimeout(this._timeout);
    }

    if (this._container) {
      const { disabledInteractions } = this.props;
      if (!this._isListeneredDisabled('keyboard', disabledInteractions)) {
        this._container.addEventListener('keyup', this._handleKeyUp);

        if (this._container.getAttribute('type') === 'submit') {
          window.addEventListener('submit', this._handleSubmit);
        }
      }

      if (!this._isListeneredDisabled('mouse', disabledInteractions)) {
        this._container.addEventListener('mousedown', this._handleMouseDown);
        this._container.addEventListener('mouseup', this._handleMouseUp);
      }

      if (!this._isListeneredDisabled('touch', disabledInteractions)) {
        this._container.addEventListener('touchstart', this._handleTouchStart);
        this._container.addEventListener('touchend', this._handleTouchEnd);
      }
    }
  }


  /**
   * Creates an ink from pageX and pageY coordinates. These values should either come
   * from the `changedTouches` or just the base event (if clicked). These coordinates
   * are used to position the ink correctly in the container from touch/click point.
   * If either value is undefined, an ink will be created from the center of the
   * container.
   *
   * It will also automatically remove the ink.
   *
   * @param {number} pageX - The page x coordinate of the click or touch event.
   * @param {number} pageY - The page y coordinate of the click or touch event.
   */
  createInk(pageX, pageY) {
    this._createInk(pageX, pageY);
    this._removeTimeout = setTimeout(() => {
      this._removeTimeout = null;
      this._removeInk();
    }, this.props.transitionOverlap);
  }

  /**
   * Creates an ink from pageX and pageY coordinates. These values should either come
   * from the `changedTouches` or just the base event (if clicked). These coordinates<commit_msg>Fixed bad copy/paste in event listeners for Inks<commit_after>import React, { PureComponent, PropTypes } from 'react';
import { findDOMNode } from 'react-dom';
import TransitionGroup from 'react-addons-transition-group';
import cn from 'classnames';

import isValidClick from '../utils/EventUtils/isValidClick';
import isValidFocusKeypress from '../utils/EventUtils/isValidFocusKeypress';
import calcPageOffset from '../utils/calcPageOffset';
import calculateHypotenuse from '../utils/NumberUtils/calculateHypotenuse';

import Ink from './Ink';


/**
 * The `InkContainer` is usesd for holding the list of inks that get created by touch,
 * click, or keyboard focus.
 *
 * If the container element has the `type="submit"` attribute, the ink will also be
 * triggered when the user presses enter anywhere in the form.
 */
export default class InkContainer extends PureComponent {
  static propTypes = {
    style: PropTypes.object,
    className: PropTypes.string,
    inkStyle: PropTypes.object,
    inkClassName: PropTypes.string,
    additionalTriggerKeys: PropTypes.arrayOf(PropTypes.number),
    waitForInkTransition: PropTypes.bool,
    disabledInteractions: PropTypes.arrayOf(PropTypes.oneOf(['keyboard', 'mouse', 'touch'])),
    transitionOverlap: PropTypes.number.isRequired,
    transitionEnterTimeout: PropTypes.number.isRequired,
    transitionLeaveTimeout: PropTypes.number.isRequired,
  };

  static defaultProps = {
    transitionOverlap: 150,
    transitionEnterTimeout: 450,
    transitionLeaveTimeout: 300,
  };

  constructor(props) {
    super(props);

    this.state = { inks: [] };
    this.createInk = this.createInk.bind(this);
    this._createInk = this._createInk.bind(this);
    this._removeInk = this._removeInk.bind(this);
    this._setContainers = this._setContainers.bind(this);
    this._maybeDelayClick = this._maybeDelayClick.bind(this);
    this._handleBlur = this._handleBlur.bind(this);
    this._handleKeyUp = this._handleKeyUp.bind(this);
    this._handleMouseDown = this._handleMouseDown.bind(this);
    this._handleMouseUp = this._handleMouseUp.bind(this);
    this._handleMouseLeave = this._handleMouseLeave.bind(this);
    this._handleTouchStart = this._handleTouchStart.bind(this);
    this._handleTouchMove = this._handleTouchMove.bind(this);
    this._handleTouchEnd = this._handleTouchEnd.bind(this);
    this._handleRemove = this._handleRemove.bind(this);
    this._handleSubmit = this._handleSubmit.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    const { disabledInteractions: di } = this.props;
    const { disabledInteractions: ndi } = nextProps;
    if (di === ndi || !this._container) {
      return;
    }

    if (this._isListeneredDisabledDiff('keyboard', di, ndi)) {
      const fn = `${this._isListeneredDisabled('keyboard', ndi) ? 'remove' : 'add'}EventListener`;
      this._container[fn]('keyup', this._handleKeyUp);

      if (this._container.getAttribute('type') === 'submit') {
        window[fn]('submit', this._handleSubmit);
      }
    }

    if (this._isListeneredDisabledDiff('mouse', di, ndi)) {
      const fn = `${this._isListeneredDisabled('mouse', ndi) ? 'remove' : 'add'}EventListener`;
      this._container[fn]('mousedown', this._handleMouseDown);
      this._container[fn]('mouseup', this._handleMouseUp);
    }

    if (this._isListeneredDisabledDiff('touch', di, ndi)) {
      const fn = `${this._isListeneredDisabled('touch', ndi) ? 'remove' : 'add'}EventListener`;
      this._container[fn]('touchstart', this._handleTouchStart);
      this._container[fn]('touchend', this._handleTouchEnd);
    }
  }

  componentWillUnmount() {
    if (this._removeTimeout) {
      clearTimeout(this._removeTimeout);
    }

    if (this._container) {
      const { disabledInteractions } = this.props;
      if (!this._isListeneredDisabled('keyboard', disabledInteractions)) {
        this._container.removeEventListener('keyup', this._handleKeyUp);
        this._container.removeEventListener('blur', this._handleBlur);

        if (this._container.getAttribute('type') === 'submit') {
          window.removeEventListener('submit', this._handleSubmit);
        }
      }

      if (!this._isListeneredDisabled('mouse', disabledInteractions)) {
        this._container.removeEventListener('mousedown', this._handleMouseDown);
        this._container.removeEventListener('mouseup', this._handleMouseUp);
      }

      if (!this._isListeneredDisabled('touch', disabledInteractions)) {
        this._container.removeEventListener('touchstart', this._handleTouchStart);
        this._container.removeEventListener('touchend', this._handleTouchEnd);
      }
    }
  }


  /**
   * Creates an ink from pageX and pageY coordinates. These values should either come
   * from the `changedTouches` or just the base event (if clicked). These coordinates
   * are used to position the ink correctly in the container from touch/click point.
   * If either value is undefined, an ink will be created from the center of the
   * container.
   *
   * It will also automatically remove the ink.
   *
   * @param {number} pageX - The page x coordinate of the click or touch event.
   * @param {number} pageY - The page y coordinate of the click or touch event.
   */
  createInk(pageX, pageY) {
    this._createInk(pageX, pageY);
    this._removeTimeout = setTimeout(() => {
      this._removeTimeout = null;
      this._removeInk();
    }, this.props.transitionOverlap);
  }

  /**
   * Creates an ink from pageX and pageY coordinates. These values should either come
   * from the `changedTouches` or just the base event (if clicked). These coordinates
{'fraction_non_alphanumeric': 0.12018018018018017, 'fraction_numerical': 0.0016216216216216215, 'mean_word_length': 3.9293960923623446, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, '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': '6617136', 'n_tokens_mistral': 3194, 'n_tokens_neox': 3177, 'n_words': 740}