<commit_before>import React from 'react';
import Icon from '../icon/icon';
import * as cc from './country_codes';
import * as su from '../utils/string_utils';

function cycle(xs, x) {
  const next = xs.skipWhile(y => y !== x).get(1);
  return next || xs.get(0);
}

export default class LocationSelect extends React.Component {
  constructor(props) {
    super(props);
    this.state = {filteredCountryCodes: cc.countryCodes, highlighted: null};
  }

  render() {
    const { autoFocus, selectHandler } = this.props;
    const { filteredCountryCodes, highlighted } = this.state;

    return (
      <div className="auth0-lock-select-country">
        <div className="auth0-lock-search">
          <div className="auth0-lock-input-wrap">
            <Icon name="location"/>
            <input className="auth0-lock-input auth0-lock-input-search"
              onChange={::this.handleSearchChange}
              onKeyDown={::this.handleKeyDown}
              type="text"
              placeholder="Select your country"
              autoFocus={autoFocus} />
          </div>
        </div>
        <LocationList countryCodes={filteredCountryCodes}
          highlighted={highlighted}
          highlightHandler={::this.handleHighlight}
          selectHandler={selectHandler} />
      </div>
    );
  }

  handleSearchChange(e) {
    const searchString = e.target.value ;
    const filteredCountryCodes = cc.countryCodes.filter(x => {
      return su.matches(searchString, cc.country(x)) ||
        su.matches(searchString, cc.isoCode(x)) ||
        su.matches(searchString, cc.dialingCode(x));
    });

    const { highlighted } = this.state;
    const newHighlighted = filteredCountryCodes.includes(highlighted) ?
      highlighted : null;

    this.setState({
      filteredCountryCodes: filteredCountryCodes,
      highlighted: newHighlighted
    });
  }

  handleHighlight(location) {
    this.setState({highlighted: location});
  }

  highlightPrev() {
    const { filteredCountryCodes, highlighted } = this.state;
    this.setState({highlighted: cycle(filteredCountryCodes.reverse(), highlighted)});
  }

  highlightNext() {
    const { filteredCountryCodes, highlighted } = this.state;
    this.setState({highlighted: cycle(filteredCountryCodes, highlighted)});
  }

  selectHighlighted() {
    const { highlighted } = this.state;
    if (highlighted) {
      this.props.selectHandler(highlighted);
    }
  }

  cancel() {
    this.props.cancelHandler();
  }

  handleKeyDown(e) {
    switch(e.key) {
      case "ArrowDown":
        e.preventDefault();
        this.highlightNext();
        break;
      case "ArrowUp":
        e.preventDefault();
        this.highlightPrev();
        break;
      case "Enter":
        e.preventDefault();
        this.selectHighlighted();
        break;
      case "Escape":
        e.preventDefault();
        this.cancel();
      default:
        // no-op
    }
  }
}

class LocationList extends React.Component {
  render() {
    const { countryCodes, highlighted, highlightHandler, selectHandler } = this.props;

    const items = countryCodes.map(x => {
      const key = cc.locationString(x).replace(/ /g, '-');

      return (
        <LocationListItem location={x}
          key={key}
          highlighted={highlighted === x}
          highlightHandler={highlightHandler}
          selectHandler={selectHandler} />
      );
    });

    return (
      <div className="auth0-lock-list-code" onMouseLeave={::this.handleMouseLeave}>
        <ul>{items}</ul>
      </div>
    );
  }

  handleMouseLeave() {
    this.props.highlightHandler(null);
  }
}

class LocationListItem extends React.Component {
  render() {
    const { highlighted, location } = this.props;
    const className = highlighted ? "auth0-lock-list-code-highlighted" : "";

    return (
      <li className={className}
        onClick={::this.handleClick}
        onMouseMove={::this.handleMouseMove}>
          <span className="auth0-lock-list-code-iso">
            {cc.isoCode(location)}
          </span>
          { " " }
          <span className="auth0-lock-list-code-string">
            {cc.locationString(location)}
          </span>
      </li>
    );
  }

  handleClick(e) {
    e.preventDefault();
    const { location, selectHandler } = this.props;
    selectHandler(location);
  }

  handleMouseMove(e) {
    const { location, highlightHandler } = this.props;
    highlightHandler(location);
  }
}
<commit_msg>Put the iso code at the end of a location item<commit_after>import React from 'react';
import Icon from '../icon/icon';
import * as cc from './country_codes';
import * as su from '../utils/string_utils';

function cycle(xs, x) {
  const next = xs.skipWhile(y => y !== x).get(1);
  return next || xs.get(0);
}

export default class LocationSelect extends React.Component {
  constructor(props) {
    super(props);
    this.state = {filteredCountryCodes: cc.countryCodes, highlighted: null};
  }

  render() {
    const { autoFocus, selectHandler } = this.props;
    const { filteredCountryCodes, highlighted } = this.state;

    return (
      <div className="auth0-lock-select-country">
        <div className="auth0-lock-search">
          <div className="auth0-lock-input-wrap">
            <Icon name="location"/>
            <input className="auth0-lock-input auth0-lock-input-search"
              onChange={::this.handleSearchChange}
              onKeyDown={::this.handleKeyDown}
              type="text"
              placeholder="Select your country"
              autoFocus={autoFocus} />
          </div>
        </div>
        <LocationList countryCodes={filteredCountryCodes}
          highlighted={highlighted}
          highlightHandler={::this.handleHighlight}
          selectHandler={selectHandler} />
      </div>
    );
  }

  handleSearchChange(e) {
    const searchString = e.target.value ;
    const filteredCountryCodes = cc.countryCodes.filter(x => {
      return su.matches(searchString, cc.country(x)) ||
        su.matches(searchString, cc.isoCode(x)) ||
        su.matches(searchString, cc.dialingCode(x));
    });

    const { highlighted } = this.state;
    const newHighlighted = filteredCountryCodes.includes(highlighted) ?
      highlighted : null;

    this.setState({
      filteredCountryCodes: filteredCountryCodes,
      highlighted: newHighlighted
    });
  }

  handleHighlight(location) {
    this.setState({highlighted: location});
  }

  highlightPrev() {
    const { filteredCountryCodes, highlighted } = this.state;
    this.setState({highlighted: cycle(filteredCountryCodes.reverse(), highlighted)});
  }

  highlightNext() {
    const { filteredCountryCodes, highlighted } = this.state;
    this.setState({highlighted: cycle(filteredCountryCodes, highlighted)});
  }

  selectHighlighted() {
    const { highlighted } = this.state;
    if (highlighted) {
      this.props.selectHandler(highlighted);
    }
  }

  cancel() {
    this.props.cancelHandler();
  }

  handleKeyDown(e) {
    switch(e.key) {
      case "ArrowDown":
        e.preventDefault();
        this.highlightNext();
        break;
      case "ArrowUp":
        e.preventDefault();
        this.highlightPrev();
        break;
      case "Enter":
        e.preventDefault();
        this.selectHighlighted();
        break;
      case "Escape":
        e.preventDefault();
        this.cancel();
      default:
        // no-op
    }
  }
}

class LocationList extends React.Component {
  render() {
    const { countryCodes, highlighted, highlightHandler, selectHandler } = this.props;

    const items = countryCodes.map(x => {
      const key = cc.locationString(x).replace(/ /g, '-');

      return (
        <LocationListItem location={x}
          key={key}
          highlighted={highlighted === x}
          highlightHandler={highlightHandler}
          selectHandler={selectHandler} />
      );
    });

    return (
      <div className="auth0-lock-list-code" onMouseLeave={::this.handleMouseLeave}>
        <ul>{items}</ul>
      </div>
    );
  }

  handleMouseLeave() {
    this.props.highlightHandler(null);
  }
}

class LocationListItem extends React.Component {
  render() {
    const { highlighted, location } = this.props;
    const className = highlighted ? "auth0-lock-list-code-highlighted" : "";

    return (
      <li className={className}
        onClick={::this.handleClick}
        onMouseMove={::this.handleMouseMove}>
          <span className="auth0-lock-list-code-string">
            {cc.locationString(location)}
          </span>
          { " " }
          <span className="auth0-lock-list-code-iso">
            ({cc.isoCode(location)})
          </span>
      </li>
    );
  }

  handleClick(e) {
    e.preventDefault();
    const { location, selectHandler } = this.props;
    selectHandler(location);
  }

  handleMouseMove(e) {
    const { location, highlightHandler } = this.props;
    highlightHandler(location);
  }
}

{'fraction_non_alphanumeric': 0.13415591699383062, 'fraction_numerical': 0.0024677509814918677, 'mean_word_length': 2.576413959085439, 'pattern_counts': {'":': 8, '<': 43, '<?xml version=': 0, '>': 49, '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': '6317341', 'n_tokens_mistral': 2581, 'n_tokens_neox': 2556, 'n_words': 470}