<commit_before>import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Option from './option';
import styles from './dropdown.css';

export default class Dropdown extends Component {
  constructor(props) {
    super(props);

    this.state = { value: props.value, dropdown: false, hover: false };
    this.onClick = this.onClick.bind(this);
    this.optionChange = this.optionChange.bind(this);
    this.mouseOver = this.mouseOver.bind(this);
    this.mouseOut = this.mouseOut.bind(this);
    this.handleDocumentClick = this.handleDocumentClick.bind(this);
  }

  componentDidMount() {
    document.addEventListener('click', this.handleDocumentClick, false);
    document.addEventListener('touchend', this.handleDocumentClick, false);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.handleDocumentClick, false);
    document.removeEventListener('touchend', this.handleDocumentClick, false);
  }

  onClick() {
    const dropdown = this.state.dropdown;
    this.setState({ dropdown: !dropdown, hover: false });
  }

  mouseOver() {
    this.setState({ hover: true });
  }

  mouseOut() {
    this.setState({ hover: false });
  }

  optionChange(value) {
    this.setState({ value });
    this.props.onChange();
  }

  handleDocumentClick() {
    if (!ReactDOM.findDOMNode(this).contains(event.target)) {
      this.setState({ dropdown: false });
    }
  }

  renderOptions() {
    let options = this.props.options.map((option) => {
      const selected = (option === this.state.value);
      const opt = (<Option
        key={option}
        selected={selected}
        value={option}
        onChange={this.optionChange}
      />);
      return opt;
    });
    let optionsContainer;
    if (options.length > 0) {
      optionsContainer = <div className="dropdown-options" style={styles.options}>{options}</div>;
    }
    return optionsContainer;
  }

  render() {
    let dropdownStyle = styles.dropdown;
    let arrowStyle = styles.arrow;
    let placeholderStyle = styles.placeholder;
    const containerStyle = Object.assign({}, styles.container, this.props.style);

    if (this.state.hover) {
      dropdownStyle = Object.assign({}, dropdownStyle, styles.dropdownHover);
      arrowStyle = Object.assign({}, arrowStyle, styles.arrowHover);
    }

    const selected = (this.props.value !== this.state.value);<commit_msg>fix lint<commit_after>import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Option from './option';
import styles from './dropdown.css';

export default class Dropdown extends Component {
  constructor(props) {
    super(props);

    this.state = { value: props.value, dropdown: false, hover: false };
    this.onClick = this.onClick.bind(this);
    this.optionChange = this.optionChange.bind(this);
    this.mouseOver = this.mouseOver.bind(this);
    this.mouseOut = this.mouseOut.bind(this);
    this.handleDocumentClick = this.handleDocumentClick.bind(this);
  }

  componentDidMount() {
    document.addEventListener('click', this.handleDocumentClick, false);
    document.addEventListener('touchend', this.handleDocumentClick, false);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.handleDocumentClick, false);
    document.removeEventListener('touchend', this.handleDocumentClick, false);
  }

  onClick() {
    const dropdown = this.state.dropdown;
    this.setState({ dropdown: !dropdown, hover: false });
  }

  mouseOver() {
    this.setState({ hover: true });
  }

  mouseOut() {
    this.setState({ hover: false });
  }

  optionChange(value) {
    this.setState({ value });
    this.props.onChange();
  }

  handleDocumentClick() {
    if (!ReactDOM.findDOMNode(this).contains(event.target)) {
      this.setState({ dropdown: false });
    }
  }

  renderOptions() {
    const options = this.props.options.map((option) => {
      const selected = (option === this.state.value);
      const opt = (<Option
        key={option}
        selected={selected}
        value={option}
        onChange={this.optionChange}
      />);
      return opt;
    });
    let optionsContainer;
    if (options.length > 0) {
      optionsContainer = <div className="dropdown-options" style={styles.options}>{options}</div>;
    }
    return optionsContainer;
  }

  render() {
    let dropdownStyle = styles.dropdown;
    let arrowStyle = styles.arrow;
    let placeholderStyle = styles.placeholder;
    const containerStyle = Object.assign({}, styles.container, this.props.style);

    if (this.state.hover) {
      dropdownStyle = Object.assign({}, dropdownStyle, styles.dropdownHover);
      arrowStyle = Object.assign({}, arrowStyle, styles.arrowHover);
    }

    const selected = (this.props.value !== this.state.value);
{'fraction_non_alphanumeric': 0.13971050975456262, 'fraction_numerical': 0.0004195510803440319, 'mean_word_length': 3.4981132075471697, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 13, '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': '1405570', 'n_tokens_mistral': 1387, 'n_tokens_neox': 1360, 'n_words': 280}