<commit_before>import React from 'react';

import Fixture from '../../Fixture';

class RangeKeyboardFixture extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      keydownCount: 0,
      changeCount: 0,
    };
  }

  componentDidMount() {
    this.input.addEventListener('keydown', this.handleKeydown, false);
  }

  componentWillUnmount() {
    this.input.removeEventListener('keydown', this.handleKeydown, false);
  }

  handleChange = () => {
    this.setState(({changeCount}) => {
      return {
        changeCount: changeCount + 1,
      };
    });
  };

  handleKeydown = e => {
    // only interesting in arrow key events
    if (![37, 38, 39, 40].includes(e.keyCode)) return;

    this.setState(({keydownCount}) => {
      return {
        keydownCount: keydownCount + 1,
      };
    });
  };

  handleReset = () => {
    this.setState({
      keydownCount: 0,
      changeCount: 0,
    });
  };

  render() {
    const {keydownCount, changeCount} = this.state;
    const color = keydownCount === changeCount ? 'green' : 'red';

    return (
      <Fixture>
        <input
          type="range"
          ref={r => (this.input = r)}
          onChange={this.handleChange}
        />
        {' '}<commit_msg>Use indexOf instead of includes in RangeKeyboardFixture (#11133)<commit_after>import React from 'react';

import Fixture from '../../Fixture';

class RangeKeyboardFixture extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      keydownCount: 0,
      changeCount: 0,
    };
  }

  componentDidMount() {
    this.input.addEventListener('keydown', this.handleKeydown, false);
  }

  componentWillUnmount() {
    this.input.removeEventListener('keydown', this.handleKeydown, false);
  }

  handleChange = () => {
    this.setState(({changeCount}) => {
      return {
        changeCount: changeCount + 1,
      };
    });
  };

  handleKeydown = e => {
    // only interesting in arrow key events
    if ([37, 38, 39, 40].indexOf(e.keyCode) < 0) {
      return;
    }

    this.setState(({keydownCount}) => {
      return {
        keydownCount: keydownCount + 1,
      };
    });
  };

  handleReset = () => {
    this.setState({
      keydownCount: 0,
      changeCount: 0,
    });
  };

  render() {
    const {keydownCount, changeCount} = this.state;
    const color = keydownCount === changeCount ? 'green' : 'red';

    return (
      <Fixture>
        <input
          type="range"
          ref={r => (this.input = r)}
          onChange={this.handleChange}
        />
        {' '}
{'fraction_non_alphanumeric': 0.14875717017208412, 'fraction_numerical': 0.0130019120458891, 'mean_word_length': 2.3624678663239074, 'pattern_counts': {'":': 0, '<': 8, '<?xml version=': 0, '>': 19, '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': '5566572', 'n_tokens_mistral': 847, 'n_tokens_neox': 807, 'n_words': 166}