<commit_before>import React, { Component, PropTypes } from 'react';
import { categoryIcons, colors, IDEA_CATEGORY_PLACE } from 'app/constants';

class TripIdeaCategoryDropdown extends Component {
  componentDidMount() {
    window.addEventListener('click', () => this.dismissDropdown());
  }

  constructor(props) {
    super(props);

    this.state = { visible: false };
  }

  render() {
    const { selectedCategory } = this.props;
    const { visible } = this.state;
    const defaultCategory = IDEA_CATEGORY_PLACE;
    const defaultCategoryIcon = (
      <img src="../assets/place-idea-icon.png" style={styles.defaultIcon} />
    );

    const categoryDropdown = (
      <div style={styles.dropdown}>
        {Object.keys(categoryIcons).map(key => {
          return (
            <div style={this.loadDropdownFieldStyle(key === selectedCategory)}>
              <div style={styles.categoryFieldIcon}>
                {categoryIcons[key]}
              </div>
              <div style={styles.dropdownFieldLabel}>
                {key}
              </div>
            </div>
          );
        })}
        <div style={
          this.loadDropdownFieldStyle(defaultCategory === selectedCategory)
        }>
          {defaultCategoryIcon}
          <div style={styles.dropdownFieldLabel}>
            {IDEA_CATEGORY_PLACE}
          </div>
        </div>
      </div>
    );

    return (
      <div>
        <div
          onClick={this.toggleVisible.bind(this)}
          style={styles.categoryField}
        >
          <div style={styles.categoryFieldIcon}>
            {categoryIcons[selectedCategory] || defaultCategoryIcon}
          </div>
          <div style={styles.categoryFieldLabel}>
            {selectedCategory}
          </div>
          <div>
            <img src="../assets/expand-arrow.png" />
          </div>
        </div>
        {visible && categoryDropdown}
      </div>
    )
  }

  loadDropdownFieldStyle(current) {
    const style = styles.dropdownField;
    return current ? {
      ...style,
      backgroundColor: "#f2f2f2",
      borderRight: "1px solid #dddddd"
    } : style;
  }

  toggleVisible(e) {
    e && e.stopPropagation();
    this.setState({ visible: !this.state.visible });
  }

  dismissDropdown() {
    return this.state.visible && this.toggleVisible();
  }
}
<commit_msg>Highlight dropdown fields on hover<commit_after>import React, { Component, PropTypes } from 'react';
import { categoryIcons, colors, IDEA_CATEGORY_PLACE } from 'app/constants';

class TripIdeaCategoryDropdown extends Component {
  componentDidMount() {
    window.addEventListener('click', () => this.dismissDropdown());
  }

  constructor(props) {
    super(props);

    this.state = {
      hover: '',
      visible: false
    };
  }

  render() {
    const { selectedCategory } = this.props;
    const { visible } = this.state;
    const defaultCategory = IDEA_CATEGORY_PLACE;
    const defaultCategoryIcon = (
      <img src="../assets/place-idea-icon.png" style={styles.defaultIcon} />
    );

    const categoryDropdown = (
      <div style={styles.dropdown}>
        {Object.keys(categoryIcons).map(key => {
          return (
            <div
              key={key}
              onMouseOver={this.onHover.bind(this, key)}
              onMouseOut={this.clearHover.bind(this)}
              style={this.loadDropdownFieldStyle(key)}
            >
              <div style={styles.categoryFieldIcon}>
                {categoryIcons[key]}
              </div>
              <div style={styles.dropdownFieldLabel}>
                {key}
              </div>
            </div>
          );
        })}
        <div
          onMouseOver={this.onHover.bind(this, defaultCategory)}
          onMouseOut={this.clearHover.bind(this)}
          style={this.loadDropdownFieldStyle(defaultCategory)}
        >
          {defaultCategoryIcon}
          <div style={styles.dropdownFieldLabel}>
            {IDEA_CATEGORY_PLACE}
          </div>
        </div>
      </div>
    );

    return (
      <div>
        <div
          onClick={this.toggleVisible.bind(this)}
          style={styles.categoryField}
        >
          <div style={styles.categoryFieldIcon}>
            {categoryIcons[selectedCategory] || defaultCategoryIcon}
          </div>
          <div style={styles.categoryFieldLabel}>
            {selectedCategory}
          </div>
          <div>
            <img src="../assets/expand-arrow.png" />
          </div>
        </div>
        {visible && categoryDropdown}
      </div>
    )
  }

  loadDropdownFieldStyle(category) {
    const { selectedCategory } = this.props;
    const { hover } = this.state;
    const style = styles.dropdownField;
    const isHighlighted = category === selectedCategory || category === hover;
    return isHighlighted ? {
      ...style,
      backgroundColor: "#f2f2f2",
      borderRight: "1px solid #dddddd"
    } : style;
  }

  toggleVisible(e) {
    e && e.stopPropagation();
    this.setState({ visible: !this.state.visible });
  }

  dismissDropdown() {
    return this.state.visible && this.toggleVisible();
  }

  onHover(category) {
    this.setState({ hover: category });
  }

  clearHover() {
    this.setState({ hover: '' });
  }
}

{'fraction_non_alphanumeric': 0.13222349789513968, 'fraction_numerical': 0.0015308075009567547, 'mean_word_length': 2.0710928319623974, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 55, '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': '5439233', 'n_tokens_mistral': 1525, 'n_tokens_neox': 1497, 'n_words': 256}