<commit_before>/** @jsx React.DOM */

var ActionMenuButton = React.createClass({
  getInitialState: function () {
    return {
      title: 'Region',
      visible: false
    };
  },
  showMenu: function (e) {
    this.setState({visible: true});
  },
  hideMenu: function (e) {
    this.setState({visible: false});
  },
  render: function () {
    return (
      <div className="rs-dropdown">
        <ActionButton title={this.state.title} showMenu={this.showMenu}/>
        <ActionMenu visible={this.state.visible} hideMenu={this.hideMenu}/>
      </div>
    )
  }
});

var ActionButton = React.createClass({
  render: function () {
    return (
      <button className="rs-btn rs-btn-action rs-dropdown-toggle" onClick={this.props.showMenu}>
        <span className="rs-cog"></span> {this.props.title} <span className="rs-caret"></span>
      </button>
    )
  }
});

var ActionMenu = React.createClass({
  componentWillUnmount: function (e) {
    document.body.removeEventListener('click', this.props.hideMenu, false);
  },
  componentDidMount: function () {
    document.body.addEventListener('click', this.props.hideMenu, false);
  },
  render: function () {
    var visible = this.props.visible ? 'visible' : 'hidden';

    return (
      <ul className={"rs-dropdown-menu " + visible}>
        <li className="rs-dropdown-item"><span className="rs-dropdown-category" id="first">Identify</span></li>
        <li className="rs-dropdown-item"><a className="rs-dropdown-link" href="#">Rename Server...</a></li>
        <li className="rs-dropdown-item"><a className="rs-dropdown-link" href="#">Tag Server...</a></li>
      </ul>
    )
  }
});
<commit_msg>Broke the menu items into reach components<commit_after>/** @jsx React.DOM */

var ActionMenuButton = React.createClass({
  getInitialState: function () {
    return {
      title: 'Region',
      visible: false
    };
  },
  showMenu: function (e) {
    this.setState({visible: true});
  },
  hideMenu: function (e) {
    this.setState({visible: false});
  },
  render: function () {
    return (
      <div className="rs-dropdown">
        <ActionButton title={this.state.title} showMenu={this.showMenu} />
        <ActionMenu visible={this.state.visible} hideMenu={this.hideMenu} />
      </div>
    )
  }
});

var ActionButton = React.createClass({
  render: function () {
    return (
      <button className="rs-btn rs-btn-action rs-dropdown-toggle" onClick={this.props.showMenu}>
        <span className="rs-cog"></span> {this.props.title} <span className="rs-caret"></span>
      </button>
    )
  }
});

var ActionMenu = React.createClass({
  componentWillUnmount: function (e) {
    document.body.removeEventListener('click', this.props.hideMenu, false);
  },
  componentDidMount: function () {
    document.body.addEventListener('click', this.props.hideMenu, false);
  },
  render: function () {
    var visible = this.props.visible ? 'visible' : 'hidden';

    return (
      <ul className={"rs-dropdown-menu " + visible}>
        <GlobalRegion title="All Regions (Global)" />
        <GeographicalRegion title="United States" />
        <LocalRegion title="Northern Virginia (IAD)" />
        <LocalRegion title="Chicago (ORD)" />
        <LocalRegion title="Dallas (DFW)" />
        <GeographicalRegion title="Europe" />
        <LocalRegion title="London (LON)" />
        <GeographicalRegion title="Asia-Pacific" />
        <LocalRegion title="Sydney (SYD)" />
        <LocalRegion title="Hong Kong (HKG)" />
      </ul>
    )
  }
});

var GlobalRegion = React.createClass({
  render: function () {
    return (
      <li className="rs-dropdown-item">
        <span className="region-checkbox"></span>
        <span className="region global-region">{this.props.title}</span>
      </li>
    )
  }
});

var GeographicalRegion = React.createClass({
  render: function () {
    return (
      <li className="rs-dropdown-item">
        <span className="region-checkbox"></span>
        <span className="region geographical-region">{this.props.title}</span>
      </li>
    )
  }
});

var LocalRegion = React.createClass({
  render: function () {
    return (
      <li className="rs-dropdown-item">
        <span className="region-checkbox"></span>
        <span className="region local-region">{this.props.title}</span>
      </li>
    )
  }
});

{'fraction_non_alphanumeric': 0.17014371812702828, 'fraction_numerical': 0.0, 'mean_word_length': 3.044048734770384, 'pattern_counts': {'":': 0, '<': 67, '<?xml version=': 0, '>': 67, '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': '6143258', 'n_tokens_mistral': 1313, 'n_tokens_neox': 1305, 'n_words': 249}