<commit_before>import React, { Component, PropTypes } from 'react'
import ReactDOM from 'react-dom'
import ReactSwipe from 'react-swipe'
import animatedScrollTo from 'animated-scrollto'

class StepThrough extends Component {
  constructor(props) {
    super(props);
    this.goPrevious = this.goPrevious.bind(this);
    this.goNext = this.goNext.bind(this);
    this.goTo = this.goTo.bind(this);
    this.handleStep = this.handleStep.bind(this);
    this.handleKeyDown = this.handleKeyDown.bind(this);
    this.renderControls = this.renderControls.bind(this);
    this.state = {
      render: false,
      step: props.defaultStep,
    };
  }

  componentDidMount() {
    addEventListener('keydown', this.handleKeyDown);
    this.refs.swiper.swipe.setup();
  }

  componentWillUnmount() {
    removeEventListener('keydown', this.handleKeyDown);
  }

  goPrevious() {
    this.refs.swiper.swipe.prev();
    this.handleScroll();
  }

  goNext() {
    this.refs.swiper.swipe.next();
    this.handleScroll();
  }

  goTo(index) {
    this.refs.swiper.swipe.slide(index);
    this.handleScroll();
  }

  handleStep(total, index) {
    this.setState({
      step: (index % total + total) % total,
    });
  }

  handleKeyDown(e) {
    switch (e.which) {
      // left
      case 37:
        e.preventDefault();
        this.goPrevious();
        break;
      // right
      case 39:
        e.preventDefault();
        this.goNext();
        break;
    }
  }

  handleScroll() {
    const reactSwipeNode = ReactDOM.findDOMNode(this.refs.swiper);
    setTimeout(animatedScrollTo(reactSwipeNode, reactSwipeNode.offsetTop, 0), 500);
  }

  renderControls(childrenCount) {
    if (childrenCount === 1) {
      return null;
    } else {
      const allSteps = Array.from(Array(childrenCount).keys());
      return (
        <div className="step-through-controls" style={{position: 'relative'}}>
          <button 
            type="button" 
            className="step-through-direction step-through-previous" 
            aria-label="Previous step" 
            title="Previous" 
            disabled={this.state.step === 0} 
            onClick={this.goPrevious}
          >
            ◀
          </button>
          
          <span className="step-through-pips">
            {allSteps.map(thisStep =>
              <label key={thisStep} className="step-through-pip" title={`Step ${thisStep + 1}`}>
                <input 
                  type="radio" 
                  className="step-through-pip-input" 
                  aria-label={`Step ${thisStep + 1} of ${childrenCount}`}
                  checked={thisStep === this.state.step} 
                  autoFocus={thisStep === this.state.step} 
                  onChange={this.goTo.bind(this, thisStep)}
                />
                <span className="step-through-pip-number">{thisStep + 1}</span>
              </label>
            )}
          </span>

          <button 
            type="button" 
            className="step-through-direction step-through-next" 
            aria-label="Next step" title="Next" 
            disabled={this.state.step === childrenCount - 1} 
            onClick={this.goNext}
          >
            ▶
          </button>

        </div>
      );
    }
  }

  render() {
    const childrenCount = React.Children.count(this.props.children);
    return (
      <div className="step-through" {...this.props}>
        <ReactSwipe 
          ref="swiper" 
          className="step-through-content" 
          startSlide={this.state.step} 
          continuous={false} 
          callback={this.handleStep.bind(this, childrenCount)}
        >
          {this.props.children}
        </ReactSwipe>
        {this.renderControls(childrenCount)}
      </div>
    );
  }
}

StepThrough.propTypes = {
  defaultStep: React.PropTypes.number,
}<commit_msg>Fix unknown props in StepThrough<commit_after>import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import ReactSwipe from 'react-swipe';
import animatedScrollTo from 'animated-scrollto';

class StepThrough extends Component {
  constructor(props) {
    super(props);
    this.goPrevious = this.goPrevious.bind(this);
    this.goNext = this.goNext.bind(this);
    this.goTo = this.goTo.bind(this);
    this.handleStep = this.handleStep.bind(this);
    this.handleKeyDown = this.handleKeyDown.bind(this);
    this.renderControls = this.renderControls.bind(this);
    this.state = {
      render: false,
      step: props.defaultStep,
    };
  }

  componentDidMount() {
    addEventListener('keydown', this.handleKeyDown);
    this.refs.swiper.swipe.setup();
  }

  componentWillUnmount() {
    removeEventListener('keydown', this.handleKeyDown);
  }

  goPrevious() {
    this.refs.swiper.swipe.prev();
    this.handleScroll();
  }

  goNext() {
    this.refs.swiper.swipe.next();
    this.handleScroll();
  }

  goTo(index) {
    this.refs.swiper.swipe.slide(index);
    this.handleScroll();
  }

  handleStep(total, index) {
    this.setState({
      step: (index % total + total) % total,
    });
  }

  handleKeyDown(e) {
    switch (e.which) {
      // left
      case 37:
        e.preventDefault();
        this.goPrevious();
        break;
      // right
      case 39:
        e.preventDefault();
        this.goNext();
        break;
    }
  }

  handleScroll() {
    const reactSwipeNode = ReactDOM.findDOMNode(this.refs.swiper);
    setTimeout(animatedScrollTo(reactSwipeNode, reactSwipeNode.offsetTop, 0), 500);
  }

  renderControls(childrenCount) {
    if (childrenCount === 1) {
      return null;
    } else {
      const allSteps = Array.from(Array(childrenCount).keys());
      return (
        <div className="step-through-controls" style={{position: 'relative'}}>
          <button 
            type="button" 
            className="step-through-direction step-through-previous" 
            aria-label="Previous step" 
            title="Previous" 
            disabled={this.state.step === 0} 
            onClick={this.goPrevious}
          >
            ◀
          </button>
          
          <span className="step-through-pips">
            {allSteps.map(thisStep =>
              <label key={thisStep} className="step-through-pip" title={`Step ${thisStep + 1}`}>
                <input 
                  type="radio" 
                  className="step-through-pip-input" 
                  aria-label={`Step ${thisStep + 1} of ${childrenCount}`}
                  checked={thisStep === this.state.step} 
                  autoFocus={thisStep === this.state.step} 
                  onChange={this.goTo.bind(this, thisStep)}
                />
                <span className="step-through-pip-number">{thisStep + 1}</span>
              </label>
            )}
          </span>

          <button 
            type="button" 
            className="step-through-direction step-through-next" 
            aria-label="Next step" title="Next" 
            disabled={this.state.step === childrenCount - 1} 
            onClick={this.goNext}
          >
            ▶
          </button>

        </div>
      );
    }
  }

  render() {
    const childrenCount = React.Children.count(this.props.children);
    return (
      <div className="step-through" className={this.props.className} style={this.props.style}>
        <ReactSwipe 
          ref="swiper" 
          className="step-through-content" 
          startSlide={this.state.step} 
          continuous={false} 
          callback={this.handleStep.bind(this, childrenCount)}
        >
          {this.props.children}
        </ReactSwipe>
        {this.renderControls(childrenCount)}
      </div>
    );
  }
}

StepThrough.propTypes = {
  defaultStep: React.PropTypes.number,
}
{'fraction_non_alphanumeric': 0.1350407450523865, 'fraction_numerical': 0.0036217824343551933, 'mean_word_length': 2.044094488188976, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 39, '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': '2738825', 'n_tokens_mistral': 2361, 'n_tokens_neox': 2248, 'n_words': 363}