<commit_before>import React, { Component, PropTypes } from 'react';
import styles from '../Chat.css';
import ToggleDisplay from '../utils/ToggleDisplay';
import convertMedia from '../utils/convertMedia';

export default class UserMenu extends Component {
  static propTypes = {
    menuShow: PropTypes.bool,
    onMessage: PropTypes.func
  };
  changeVideoInp = (e) => {
    let media = convertMedia(e.target.value, 150, true);
    let videoContainer = this.videoInpContainer;
    let mediaContainer = document.createElement('span');

    mediaContainer.innerHTML = media;
    if (videoContainer.children.length === 2) videoContainer.appendChild(mediaContainer);
    else videoContainer.replaceChild(mediaContainer, videoContainer.children[2]);


    if (e.nativeEvent.keyCode === 13) {
      const input = e.target;
      const txt = e.target.value;
      if (txt === '') return;
      const that = this;
      this.props.onMessage({ txt: txt }, function success() {
        input.value = '';
        that.submenuShow = false;
        mediaContainer.innerHTML = '';
      });
    }
  };
  handleClick = (opt, e) => {
    switch (opt) {
      case 0: {
        break;
      }
      case 1: {
        break;
      }
      case 2: {
        this.submenuShow = true;
        const that = this;
        setTimeout(function() {
          that.videoInp.focus();
        }, 0);
        break;
      }
      default:
    }
  };
  handleClose = (e) => {
    this.submenuShow = false;
  };

  render() {
    return (<div className={styles.userContainer}>
      <ToggleDisplay show={this.props.menuShow}>
        <ul className={styles.usermenu}>
          <li onClick={this.handleClick.bind(this, 0)}>
            <span className="icon-mic"></span><a href="#">Dictate text</a>
          </li>
          <li onClick={this.handleClick.bind(this, 1)}>
            <span className="icon-insert-comment"></span><a href="#">Translate a phrase</a>
          </li>
          <li onClick={this.handleClick.bind(this, 2)}>
            <span className="icon-ondemand-video"></span><a href="#">Insert video</a>
          </li>
        </ul>
      </ToggleDisplay>
        <ToggleDisplay show={this.submenuShow}>
          <div ref={(ref) => this.videoInpContainer = ref} className={styles.videoInpContainer}>
            <input ref={(ref) => this.videoInp = ref} placeholder="Video url (youtube, vimeo)" onKeyUp={this.changeVideoInp}/>
            <div style={{position: 'fixed', left: 0, bottom: '23px', height: '30px' }} onClick={this.handleClose}>
              <p className="icon-clear" ref={(ref) => this.usermsg = ref}></p>
            </div>
          </div>
        </ToggleDisplay>
      </div>
    );
  }
}
<commit_msg>Add box for translate<commit_after>import React, { Component, PropTypes } from 'react';
import styles from '../Chat.css';
import ToggleDisplay from '../utils/ToggleDisplay';
import convertMedia from '../utils/convertMedia';

export default class UserMenu extends Component {
  static propTypes = {
    menuShow: PropTypes.bool,
    onMessage: PropTypes.func
  };
  changeVideoInp = (e) => {
    let media = convertMedia(e.target.value, 150, true);
    let videoContainer = this.videoInpContainer;
    let mediaContainer = document.createElement('span');

    mediaContainer.innerHTML = media;
    if (videoContainer.children.length === 3) videoContainer.appendChild(mediaContainer);
    else videoContainer.replaceChild(mediaContainer, videoContainer.children[3]);


    if (e.nativeEvent.keyCode === 13) {
      const input = e.target;
      const txt = e.target.value;
      if (txt === '') return;
      const that = this;
      this.props.onMessage({ txt: txt }, function success() {
        input.value = '';
        that.submenuShow = false;
        that.videoInpContainer.removeChild(mediaContainer);
      });
    }
  };
  insertTranslation = (e) => {

  };
  handleClick = (opt, e) => {
    switch (opt) {
      case 0: {
        break;
      }
      case 1: {
        this.submenuShow = true;
        const that = this;
        setTimeout(function() {
          that.translateInp.focus();
        }, 0);
        this.videoInp.style.display = 'none';
        this.translateInp.style.display = 'block';
        break;
      }
      case 2: {
        this.submenuShow = true;
        const that = this;
        setTimeout(function() {
          that.videoInp.focus();
        }, 0);
        this.translateInp.style.display = 'none';
        this.videoInp.style.display = 'block';
        break;
      }
      default:
    }
  };
  handleClose = (e) => {
    this.submenuShow = false;
    this.videoInp.value = '';
    this.translateInp.value = '';
    if (this.videoInpContainer.childNodes.length > 3) this.videoInpContainer.removeChild(this.videoInpContainer.childNodes[3]);
  };

  render() {
    return (<div className={styles.userContainer}>
        <ToggleDisplay show={this.props.menuShow}>
          <ul className={styles.usermenu}>
            <li onClick={this.handleClick.bind(this, 0)}>
              <span className="icon-mic"></span><a href="#">Dictate text</a>
            </li>
            <li onClick={this.handleClick.bind(this, 1)}>
              <span className="icon-insert-comment"></span><a href="#">Translate a phrase</a>
            </li>
            <li onClick={this.handleClick.bind(this, 2)}>
              <span className="icon-ondemand-video"></span><a href="#">Insert video</a>
            </li>
          </ul>
        </ToggleDisplay>
        <ToggleDisplay show={this.submenuShow}>
          <div ref={(ref) => this.videoInpContainer = ref} className={styles.videoInpContainer}>
            <input ref={(ref) => this.videoInp = ref} placeholder="Video url (youtube, vimeo)" onKeyUp={this.changeVideoInp}/>
            <input ref={(ref) => this.translateInp = ref} placeholder="Tape a phrase to be translated" onKeyUp={this.insertTranslation}/>
            <div style={{position: 'fixed', left: 0, bottom: '23px', height: '30px' }} onClick={this.handleClose}>
              <p className="icon-clear" ref={(ref) => this.usermsg = ref}></p>
            </div>
          </div>
        </ToggleDisplay>
      </div>
    );
  }
}

{'fraction_non_alphanumeric': 0.1526247569669475, 'fraction_numerical': 0.006642903434867142, 'mean_word_length': 2.4660303200449185, 'pattern_counts': {'":': 0, '<': 70, '<?xml version=': 0, '>': 85, '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': '4862294', 'n_tokens_mistral': 1856, 'n_tokens_neox': 1815, 'n_words': 384}