<commit_before>import React, { Component, PropTypes } from 'react';
import classnames from 'classnames';
import PureRenderMixin from 'react-addons-pure-render-mixin';

import { LEFT_MOUSE } from '../constants/keyCodes';
const INK_TRANSITION_TIME = 600;

export default class Ink extends Component {
  constructor(props) {
    super(props);

    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
    this.state = { size: null, timeouts: {} };
  }

  static propTypes = {
    className: PropTypes.string,
    disabled: PropTypes.bool,
    onClick: PropTypes.func,
    focused: PropTypes.bool,
  };

  componentWillReceiveProps(nextProps) {
    if(!this.props.focused && nextProps.focused) {
      this.createInk();
    } else if(!nextProps.focused && this.props.focused) {
      this.handleMouseUp({ button: LEFT_MOUSE });
    }
  }

  componentWillUnmount() {
    const { timeouts } = this.state;
    Object.keys(timeouts).forEach(k => {
      clearTimeout(timeouts[k]);
    });
  }

  createInk = (pageX, pageY) => {
    const { container } = this.refs;
    const node = container.parentNode;
    const size = this.state.size || Math.max(node.offsetWidth, node.offsetHeight);

    let left = 0, top = 0;
    if(typeof pageX !== 'undefined' && typeof pageY !== 'undefined') {
      left = pageX - node.offsetLeft - size / 2;
      top = pageY - node.offsetTop - size / 2;
    }

    let ink = document.createElement('span');
    ink.classList.add('md-ink');
    ink.style.cssText = `left:${left}px;top:${top}px;width:${size}px;height:${size}px;`;
    container.insertBefore(ink, container.firstChild);

    setTimeout(() => ink.classList.add('active'), 25);
    this.setState({ size, ink, timestamp: Date.now() });
  };

  handleMouseDown = ({ pageX, pageY, button, ctrlKey, changedTouches }) => {
    if(this.props.disabled || (!changedTouches && (button !== LEFT_MOUSE || ctrlKey))) { return; }

    if(this.props.onClick) { this.props.onClick(); }
    if(changedTouches) {
      this.createInk(changedTouches[0].pageX, changedTouches[0].pageY);
    } else {
      this.createInk(pageX, pageY);<commit_msg>Fixed ink calculation a bit by looking at material-us's logic for getting the correct position<commit_after>import React, { Component, PropTypes } from 'react';
import classnames from 'classnames';
import PureRenderMixin from 'react-addons-pure-render-mixin';

import { LEFT_MOUSE } from '../constants/keyCodes';
const INK_TRANSITION_TIME = 600;

export default class Ink extends Component {
  constructor(props) {
    super(props);

    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
    this.state = { size: null, timeouts: {} };
  }

  static propTypes = {
    className: PropTypes.string,
    disabled: PropTypes.bool,
    onClick: PropTypes.func,
    focused: PropTypes.bool,
  };

  componentWillReceiveProps(nextProps) {
    if(!this.props.focused && nextProps.focused) {
      this.createInk();
    } else if(!nextProps.focused && this.props.focused) {
      this.handleMouseUp({ button: LEFT_MOUSE });
    }
  }

  componentWillUnmount() {
    const { timeouts } = this.state;
    Object.keys(timeouts).forEach(k => {
      clearTimeout(timeouts[k]);
    });
  }

  calcR = (a, b) => {
    return Math.sqrt((a * a) + (b * b));
  };

  createInk = (pageX, pageY) => {
    const { container } = this.refs;

    let left = 0, top = 0;
    let size;
    if(typeof pageX !== 'undefined' && typeof pageY !== 'undefined') {
      const rect = container.getBoundingClientRect();
      const offset = {
        left: rect.left + document.body.scrollLeft,
        top: rect.top + document.body.scrollTop,
      };

      const x = pageX - offset.left;
      const y = pageY - offset.top;
      const { offsetWidth, offsetHeight } = container;
      const r = Math.max(
        this.calcR(x, y),
        this.calcR(offsetWidth - x, y),
        this.calcR(offsetWidth - x, offsetHeight - y),
        this.calcR(x, offsetHeight - y)
      );

      left = x - r;
      top = y - r;
      size = r * 2;
    } else {
      const node = container.parentNode;
      size = Math.max(node.offsetWidth, node.offsetHeight);
    }

    let ink = document.createElement('span');
    ink.classList.add('md-ink');
    ink.style.cssText = `left:${left}px;top:${top}px;width:${size}px;height:${size}px;`;
    container.insertBefore(ink, container.firstChild);

    setTimeout(() => ink.classList.add('active'), 25);
    this.setState({ ink, timestamp: Date.now() });
  };

  handleMouseDown = ({ pageX, pageY, button, ctrlKey, changedTouches }) => {
    if(this.props.disabled || (!changedTouches && (button !== LEFT_MOUSE || ctrlKey))) { return; }

    if(this.props.onClick) { this.props.onClick(); }
    if(changedTouches) {
      this.createInk(changedTouches[0].pageX, changedTouches[0].pageY);
    } else {
      this.createInk(pageX, pageY);
{'fraction_non_alphanumeric': 0.15128623928133933, 'fraction_numerical': 0.004287464271131074, 'mean_word_length': 3.2452339688041594, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 12, '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': '7203021', 'n_tokens_mistral': 1619, 'n_tokens_neox': 1587, 'n_words': 322}