<commit_before>/* @jsx React.DOM */

var React = require('react');
var cloneWithProps = require('react/lib/cloneWithProps');

var Clones = React.createClass({
  childrenWithPositions () {
    return React.Children.map(this.props.children, (child) => {
      var style = this.props.positions[child.key];
      style.position = 'absolute';
      return cloneWithProps(child, { style });
    });
  },

  render () {
    var styles = {
      color: 'red'
    };

    return <div
      className="MagicMoveClones"
      style={styles}
    >{this.childrenWithPositions()}</div>
  }
});

var MagicMove = React.createClass({

  displayName: 'MagicMove',

  componentWillReceiveProps (nextProps) {
    this.props.animating = true;
    this.props.positions = this.getPositions();
    this.renderClones(this.props);
  },

  componentDidUpdate (prevProps) {
    prevProps.positions = this.getPositions();
    this.renderClones(prevProps, () => {
      setTimeout(() => {
        React.unmountComponentAtNode(this.refs.clones.getDOMNode());
      }, 500);
    });
  },

  getPositions () {
    var positions = {};
    React.Children.forEach(this.props.children, (child) => {
      var ref = child.key;
      var node = this.refs[ref].getDOMNode();
      var rect = node.getBoundingClientRect();
      var computedStyle = getComputedStyle(node);
      var marginTop = parseInt(computedStyle.marginTop, 10);
      var marginLeft = parseInt(computedStyle.marginLeft, 10);
      var position = {
        top: (rect.top - marginTop),
        left: (rect.left - marginLeft),
        width: rect.width,
        height: rect.height
      };
      positions[ref] = position;
    });
    return positions;
  },

  renderClones (props, cb) {
    React.render(<Clones {...props}/>, this.refs.clones.getDOMNode(), cb);
  },

  childrenWithRefs () {
    return React.Children.map(this.props.children, (child) => {
      return cloneWithProps(child, { ref: child.key});
    });
  },

  render () {
    return (
      <div>
        <div ref="actual">{this.childrenWithRefs()}</div>
        <div ref="clones"></div>
      </div>
    );<commit_msg>and that's a wrap ... almost<commit_after>/* @jsx React.DOM */

var React = require('react');
var cloneWithProps = require('react/lib/cloneWithProps');

var Clones = React.createClass({
  childrenWithPositions () {
    return React.Children.map(this.props.children, (child) => {
      var style = this.props.positions[child.key];
      return cloneWithProps(child, { style });
    });
  },

  render () {
    return <div
      className="MagicMoveClones"
    >{this.childrenWithPositions()}</div>
  }
});

function debounce(fn) {
  var timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(fn, 0);
  }
}

var MagicMove = React.createClass({

  displayName: 'MagicMove',

  getInitialState () {
    return {
      animating: false
    };
  },

  componentDidMount () {
    this.addTransitionEndEvent();
  },

  componentWillReceiveProps () {
    this.startAnimation();
  },

  componentDidUpdate (prevProps) {
    if (this.state.animating)
      this.renderClonesToNewPositions(prevProps);
  },

  addTransitionEndEvent() {
    this.refs.clones.getDOMNode().
      addEventListener('transitionend', debounce(this.finishAnimation));
  },

  finishAnimation () {
    React.unmountComponentAtNode(this.refs.clones.getDOMNode());
    this.setState({ animating: false });
  },

  startAnimation () {
    this.props.animating = true;
    this.props.positions = this.getPositions();
    this.renderClones(this.props);
    this.setState({ animating: true });
  },

  renderClonesToNewPositions (prevProps) {
    prevProps.positions = this.getPositions();
    this.renderClones(prevProps);
  },

  getPositions () {
    var positions = {};
    React.Children.forEach(this.props.children, (child) => {
      var ref = child.key;
      var node = this.refs[ref].getDOMNode();
      var rect = node.getBoundingClientRect();
      var computedStyle = getComputedStyle(node);
      var marginTop = parseInt(computedStyle.marginTop, 10);
      var marginLeft = parseInt(computedStyle.marginLeft, 10);
      var position = {
        top: (rect.top - marginTop),
        left: (rect.left - marginLeft),
        width: rect.width,
        height: rect.height,
        position: 'absolute'
      };
      positions[ref] = position;
    });
    return positions;
  },

  renderClones (props, cb) {
    React.render(<Clones {...props}/>, this.refs.clones.getDOMNode(), cb);
  },

  childrenWithRefs () {
    return React.Children.map(this.props.children, (child) => {
      return cloneWithProps(child, { ref: child.key});
    });
  },

  render () {
    var style = { opacity: this.state.animating ? 0 : 1 };
    return (
      <div>
        <div ref="actual" style={style}>{this.childrenWithRefs()}</div>
        <div ref="clones"></div>
      </div>
    );
{'fraction_non_alphanumeric': 0.1521427106827968, 'fraction_numerical': 0.002870617182694279, 'mean_word_length': 2.924376508447305, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 29, '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': '3287020', 'n_tokens_mistral': 1570, 'n_tokens_neox': 1521, 'n_words': 273}