<commit_before>import styled from 'styled-components';
import React from 'react';
import TextField from 'material-ui/TextField';
import PropTypes from 'prop-types';

const StyledHorizontalMenuFilter = styled.div`
  .reset-button {
    display: inline-block;
    font-size: 22px;
    opacity: 0.5;
    cursor: pointer;
    margin-left: 10px;

    &:hover {
      opacity: 1;
    }
  }
`;

const HorizontalMenuFilter = ({
  handleChange,
  value,
  setInputRef,
  reset,
  filterText,
}) => (
  <StyledHorizontalMenuFilter>
    <TextField
      ref={setInputRef}
      hintText={filterText}
      value={value}
      onChange={handleChange}
      style={{ width: 150 }}
    />
    <div
      className="reset-button"
      onClick={reset}
      onKeyPress={reset}
      role="button"
      tabIndex="0"
    >
      x
    </div>
  </StyledHorizontalMenuFilter>
);

HorizontalMenuFilter.propTypes = {
  handleChange: PropTypes.func,
  value: PropTypes.number,
  setInputRef: PropTypes.func,
  reset: PropTypes.func,
  filterText: PropTypes.string,
};

export const StyledHeroHorizontalMenu = styled.div`
  width: 100%;
  overflow-x: scroll;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.27);
  padding: 3px;
  min-height: 76px;
  margin-top: 15px;
`;

class HorizontalMenu extends React.Component {
  static propTypes = {
    filterAndRenderElements: PropTypes.func,
    filterText: PropTypes.string,
    strings: PropTypes.shape({}),
  };

  state = {
    searchValue: '',
  };

  componentDidMount() {
    this.horizontalMenuRef.addEventListener('wheel', (e) => {
      e.preventDefault();
      this.horizontalMenuRef.scrollLeft += e.deltaY;
    });
  }

  setInputRef = (input) => {
    this.inputRef = input;
  };
  sethorizontalMenuRef = (node) => {
    this.horizontalMenuRef = node;
  };
  inputRef = null;
  horizontalMenuRef = null;

  resetSearchValue = () => {
    if (this.state.searchValue.length > 0) {<commit_msg>remove wheel event listener on unmount<commit_after>import styled from 'styled-components';
import React from 'react';
import TextField from 'material-ui/TextField';
import PropTypes from 'prop-types';

const StyledHorizontalMenuFilter = styled.div`
  .reset-button {
    display: inline-block;
    font-size: 22px;
    opacity: 0.5;
    cursor: pointer;
    margin-left: 10px;

    &:hover {
      opacity: 1;
    }
  }
`;

const HorizontalMenuFilter = ({
  handleChange,
  value,
  setInputRef,
  reset,
  filterText,
}) => (
  <StyledHorizontalMenuFilter>
    <TextField
      ref={setInputRef}
      hintText={filterText}
      value={value}
      onChange={handleChange}
      style={{ width: 150 }}
    />
    <div
      className="reset-button"
      onClick={reset}
      onKeyPress={reset}
      role="button"
      tabIndex="0"
    >
      x
    </div>
  </StyledHorizontalMenuFilter>
);

HorizontalMenuFilter.propTypes = {
  handleChange: PropTypes.func,
  value: PropTypes.number,
  setInputRef: PropTypes.func,
  reset: PropTypes.func,
  filterText: PropTypes.string,
};

export const StyledHeroHorizontalMenu = styled.div`
  width: 100%;
  overflow-x: scroll;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.27);
  padding: 3px;
  min-height: 76px;
  margin-top: 15px;
`;

class HorizontalMenu extends React.Component {
  static propTypes = {
    filterAndRenderElements: PropTypes.func,
    filterText: PropTypes.string,
    strings: PropTypes.shape({}),
  };

  state = {
    searchValue: '',
  };

  onWheel = (e) => { // eslint-disable-line react/sort-comp
    e.preventDefault();
    this.horizontalMenuRef.scrollLeft += e.deltaY;
  }

  componentDidMount() {
    this.horizontalMenuRef.addEventListener('wheel', this.onWheel);
  }

  componentWillUnmount() {
    this.horizontalMenuRef.removeEventListener('wheel', this.onWheel);
  }

  setInputRef = (input) => {
    this.inputRef = input;
  };
  sethorizontalMenuRef = (node) => {
    this.horizontalMenuRef = node;
  };
  inputRef = null;
  horizontalMenuRef = null;

  resetSearchValue = () => {
    if (this.state.searchValue.length > 0) {
{'fraction_non_alphanumeric': 0.13058504073068378, 'fraction_numerical': 0.01283633670698593, 'mean_word_length': 3.2076843198338527, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 25, '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': '6074027', 'n_tokens_mistral': 1371, 'n_tokens_neox': 1324, 'n_words': 264}