<commit_before>import React from 'react';
import ReactDOM from 'react-dom';
import CSSCore from 'fbjs/lib/CSSCore';

export default class Slider extends React.Component {
  constructor(props) {
    super(props);
    this.state = {children: {current: props.children}};
  }

  componentWillReceiveProps(nextProps) {
    // TODO: take a prop to identify what are we rendering instead of
    // infering it from children keys so we can accept more than one
    // child (we are already wrapping them).
    if (this.state.children.current.key != nextProps.children.key) {
      this.setState({
        children: {
          current: nextProps.children,
          prev: this.state.children.current
        }
      });
      this.animate = true;
    } else {
      this.setState({children: {current: nextProps.children}});
    }
  }

  componentDidUpdate() {
    if (this.animate) {
      this.animate = false;

      const { current, prev } = this.state.children;
      const { reverse, transitionName } = this.props;
      const currentComponent = this.refs[current.key];
      const prevComponent = this.refs[prev.key];

      const transition = (component, className, delay) => {
        const node = ReactDOM.findDOMNode(component);
        const activeClassName = `${className}-active`;

        CSSCore.addClass(node, className);

        setTimeout(() => CSSCore.addClass(node, activeClassName), 17);

        if (delay) {
          setTimeout(() => {
            CSSCore.removeClass(node, className);
            CSSCore.removeClass(node, activeClassName);
          }, delay);
        }
      };

      const callback = (slide) => {
        currentComponent.componentWillSlideIn(slide);
        const classNamePrefix = reverse ? "reverse-" : "";
        transition(currentComponent, `${classNamePrefix}${transitionName}-enter`, this.props.delay);
        transition(prevComponent, `${classNamePrefix}${transitionName}-leave`);

        this.timeout = setTimeout(() => {
          this.setState({children: {current: this.state.children.current}});
          currentComponent.componentDidSlideIn();
          this.props.onDidSlide();
          this.timeout = null;
        }, this.props.delay);
      };

      this.props.onWillSlide();
      prevComponent.componentWillSlideOut(callback);
    }
  }

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

  render() {
    const {current, prev} = this.state.children;
    const children = prev ? [current, prev] : [current];
    const childrenToRender = children.map(child => {
      return React.cloneElement(
        React.createElement(Child, {}, child),
        {ref: child.key, key: child.key}
      );
    });

    return React.createElement(this.props.component, {}, childrenToRender);
  }
}

Slider.propTypes = {
  component: React.PropTypes.string,
  delay: React.PropTypes.number.isRequired,
  onDidSlide: React.PropTypes.func.isRequired,
  onWillSlide: React.PropTypes.func.isRequired,
  reverse: React.PropTypes.bool.isRequired,
  transitionName: React.PropTypes.string.isRequired
};

Slider.defaultProps = {
  component: "span",
  onSlideIn: () => {},
  onSlideOut: () => {},
  reverse: false
};

class Child extends React.Component {

  constructor(props) {
    super(props);
    this.state = {height: "", originalHeight: "", show: true};
  }

  componentWillSlideIn(slide) {
    const node = ReactDOM.findDOMNode(this);

    this.setState({
      height: slide.height,
      originalHeight: parseInt(window.getComputedStyle(node, null).height, 10),
      show: false
    });
  }

  componentDidSlideIn() {
    const { height, originalHeight } = this.state;

    if (height === originalHeight) {
      this.setState({show: true, height: ""});
    } else {
      const frames = 10;
      let count = 0;
      let current = height;
      const last = originalHeight;
      const step = Math.abs(current - last) / frames;
      const dir =  current < last ? 1 : -1;
      const dh  = step * dir;

      // TODO: rAF
      this.t = setInterval(() => {
        if (count < frames - 1) {
          this.setState({height: current, animating: true});
          current += dh;
          count++;
        } else {
          clearInterval(this.t);
          delete this.t;
          this.setState({height: "", show: true});
        }
      }, 17);
    }
  }

  componentWillSlideOut(cb) {
    const node = ReactDOM.findDOMNode(this);
    const size = window.getComputedStyle(node, null).height;
    cb({height: parseInt(size, 10), reverse: this.reverse});
  }

  render() {
    const { children } = this.props;
    const { height, show } = this.state;

    return (
      <div style={height ? {height: height + "px"} : {}}>
        <div style={{visibility: show ? "inherit" : "hidden"}}>
          {children}
        </div>
      </div>
    );
  }

}
<commit_msg>Fix MultisizeSlide animation<commit_after>import React from 'react';
import ReactDOM from 'react-dom';
import CSSCore from 'fbjs/lib/CSSCore';

export default class Slider extends React.Component {
  constructor(props) {
    super(props);
    this.state = {children: {current: props.children}};
  }

  componentWillReceiveProps(nextProps) {
    // TODO: take a prop to identify what are we rendering instead of
    // infering it from children keys so we can accept more than one
    // child (we are already wrapping them).
    if (this.state.children.current.key != nextProps.children.key) {
      this.setState({
        children: {
          current: nextProps.children,
          prev: this.state.children.current
        }
      });
      this.animate = true;
    } else if (!this.timeout) {
      this.setState({children: {current: nextProps.children}});
    }
  }

  componentDidUpdate() {
    if (this.animate) {
      this.animate = false;

      const { current, prev } = this.state.children;
      const { reverse, transitionName } = this.props;
      const currentComponent = this.refs[current.key];
      const prevComponent = this.refs[prev.key];

      const transition = (component, className, delay) => {
        const node = ReactDOM.findDOMNode(component);
        const activeClassName = `${className}-active`;

        CSSCore.addClass(node, className);

        setTimeout(() => CSSCore.addClass(node, activeClassName), 17);

        if (delay) {
          setTimeout(() => {
            CSSCore.removeClass(node, className);
            CSSCore.removeClass(node, activeClassName);
          }, delay);
        }
      };

      const callback = (slide) => {
        currentComponent.componentWillSlideIn(slide);
        const classNamePrefix = reverse ? "reverse-" : "";
        transition(currentComponent, `${classNamePrefix}${transitionName}-enter`, this.props.delay);
        transition(prevComponent, `${classNamePrefix}${transitionName}-leave`);

        this.timeout = setTimeout(() => {
          this.setState({children: {current: this.state.children.current}});
          currentComponent.componentDidSlideIn();
          this.props.onDidSlide();
          this.timeout = null;
        }, this.props.delay);
      };

      this.props.onWillSlide();
      prevComponent.componentWillSlideOut(callback);
    }
  }

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

  render() {
    const {current, prev} = this.state.children;
    const children = prev ? [current, prev] : [current];
    const childrenToRender = children.map(child => {
      return React.cloneElement(
        React.createElement(Child, {}, child),
        {ref: child.key, key: child.key}
      );
    });

    return React.createElement(this.props.component, {}, childrenToRender);
  }
}

Slider.propTypes = {
  component: React.PropTypes.string,
  delay: React.PropTypes.number.isRequired,
  onDidSlide: React.PropTypes.func.isRequired,
  onWillSlide: React.PropTypes.func.isRequired,
  reverse: React.PropTypes.bool.isRequired,
  transitionName: React.PropTypes.string.isRequired
};

Slider.defaultProps = {
  component: "span",
  onSlideIn: () => {},
  onSlideOut: () => {},
  reverse: false
};

class Child extends React.Component {

  constructor(props) {
    super(props);
    this.state = {height: "", originalHeight: "", show: true};
  }

  componentWillSlideIn(slide) {
    const node = ReactDOM.findDOMNode(this);

    this.setState({
      height: slide.height,
      originalHeight: parseInt(window.getComputedStyle(node, null).height, 10),
      show: false
    });
  }

  componentDidSlideIn() {
    const { height, originalHeight } = this.state;

    if (height === originalHeight) {
      this.setState({show: true, height: ""});
    } else {
      const frames = 10;
      let count = 0;
      let current = height;
      const last = originalHeight;
      const step = Math.abs(current - last) / frames;
      const dir =  current < last ? 1 : -1;
      const dh  = step * dir;

      // TODO: rAF
      this.t = setInterval(() => {
        if (count < frames - 1) {
          this.setState({height: current, animating: true});
          current += dh;
          count++;
        } else {
          clearInterval(this.t);
          delete this.t;
          this.setState({height: "", show: true});
        }
      }, 17);
    }
  }

  componentWillSlideOut(cb) {
    const node = ReactDOM.findDOMNode(this);
    const size = window.getComputedStyle(node, null).height;
    cb({height: parseInt(size, 10), reverse: this.reverse});
  }

  render() {
    const { children } = this.props;
    const { height, show } = this.state;

    return (
      <div style={height ? {height: height + "px"} : {}}>
        <div style={{visibility: show ? "inherit" : "hidden"}}>
          {children}
        </div>
      </div>
    );
  }

}

{'fraction_non_alphanumeric': 0.13721456490434067, 'fraction_numerical': 0.002880065830076116, 'mean_word_length': 2.6198808637379, 'pattern_counts': {'":': 0, '<': 15, '<?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': '6598683', 'n_tokens_mistral': 2873, 'n_tokens_neox': 2824, 'n_words': 622}