<commit_before>import React, {PropTypes} from 'react';
import OnClickOutside from 'shared/components/OnClickOutside';

const Dropdown = React.createClass({
  propTypes: {
    children: PropTypes.node.isRequired,
    items: PropTypes.arrayOf(PropTypes.shape({
      text: PropTypes.string.isRequired,
    })).isRequired,
    onChoose: PropTypes.func.isRequired,
    className: PropTypes.string,
  },
  getInitialState() {
    return {
      isOpen: false,
    };
  },
  handleClickOutside() {
    this.setState({isOpen: false});
  },
  handleSelection(item) {
    this.toggleMenu();
    this.props.onChoose(item);
  },
  toggleMenu(e) {
    if (e) {
      e.stopPropagation();
    }
    this.setState({isOpen: !this.state.isOpen});
  },
  render() {
    const self = this;
    const {items, className} = self.props;

    return (
      <div onClick={this.toggleMenu} className={`dropdown ${className}`}>
        <div className="btn btn-sm btn-info dropdown-toggle">
          {this.props.children}
        </div>
        {self.state.isOpen ?
          <ul className="dropdown-menu show">
            {items.map((item, i) => {
              return (
                <li className="dropdown-item" key={i} onClick={() => self.handleSelection(item)}>
                  <a href="#">
                    {item.text}
                  </a>
                </li>
              );
            })}
          </ul>
          : null}
      </div>
    );
  },
});

export default OnClickOutside(Dropdown);<commit_msg>Adding "open" class to dropdown toggle if it is open<commit_after>import React, {PropTypes} from 'react';
import classNames from 'classnames';
import OnClickOutside from 'shared/components/OnClickOutside';

const Dropdown = React.createClass({
  propTypes: {
    children: PropTypes.node.isRequired,
    items: PropTypes.arrayOf(PropTypes.shape({
      text: PropTypes.string.isRequired,
    })).isRequired,
    onChoose: PropTypes.func.isRequired,
    className: PropTypes.string,
  },
  getInitialState() {
    return {
      isOpen: false,
    };
  },
  handleClickOutside() {
    this.setState({isOpen: false});
  },
  handleSelection(item) {
    this.toggleMenu();
    this.props.onChoose(item);
  },
  toggleMenu(e) {
    if (e) {
      e.stopPropagation();
    }
    this.setState({isOpen: !this.state.isOpen});
  },
  render() {
    const self = this;
    const {items, className} = self.props;

    return (
      <div onClick={this.toggleMenu} className={classNames(`dropdown ${className}`, {open: self.state.isOpen})}>
        <div className="btn btn-sm btn-info dropdown-toggle">
          {this.props.children}
        </div>
        {self.state.isOpen ?
          <ul className="dropdown-menu show">
            {items.map((item, i) => {
              return (
                <li className="dropdown-item" key={i} onClick={() => self.handleSelection(item)}>
                  <a href="#">
                    {item.text}
                  </a>
                </li>
              );
            })}
          </ul>
          : null}
      </div>
    );
  },
});

export default OnClickOutside(Dropdown);
{'fraction_non_alphanumeric': 0.14834988785645625, 'fraction_numerical': 0.0, 'mean_word_length': 2.1857142857142855, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 27, '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': '5439932', 'n_tokens_mistral': 950, 'n_tokens_neox': 936, 'n_words': 180}