<commit_before>import React, { PropTypes } from 'react';
import _ from 'lodash';
import { Header, Icon, Input } from 'semantic-ui-react';
import './InlineEditable.scss';

class InlineEditable extends React.Component {

  constructor(props) {
    super();
    this.state = {
      isHovered: false,
      isEditing: false,
      editorValue: props.value
    };
    _.bindAll(this,
      'handleMouseEnter',
      'handleMouseLeave',
      'toggleEditor',
      'handleSave',
      'handleChange',
      'handleBlur');
  }

  componentWillReceiveProps(newProps) {
    this.setState({
      editorValue: newProps.value
    });
  }

  handleMouseEnter() {
    this.setState({
      isHovered: true
    });
  }

  handleMouseLeave() {
    this.setState({
      isHovered: false
    });
  }

  toggleEditor() {
    this.setState({
      isEditing: !this.state.isEditing,
      isHovered: false
    });
  }

  handleSave() {
    const data = {};
    data[this.props.name] = this.state.editorValue;
    this.props.onChange(data);
    this.toggleEditor();
    this.setState({
      editorValue: this.props.value
    });
  }

  handleChange(event) {
    this.setState({
      editorValue: event.target.value
    });
  }

  handleBlur() {
    this.setState({
      editorValue: this.props.value,
      isEditing: false
    });
  }

  renderText() {
    return (
      <span>
        <a onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} onClick={this.toggleEditor}>
          {this.props.value}
          <Icon name="edit" className={!this.state.isHovered ? 'hidden' : ''} />
        </a>
      </span>
    );
  }

  renderEditor() {
    return (
      <span>
        <Input
          autoFocus
          size="small"
          onChange={this.handleChange}
          onBlur={this.handleBlur}
          action={{color: 'green', icon: 'check', onClick: this.handleSave}}
          defaultValue={this.props.value}
        />
      </span>
    );
  }

  render() {
    return (
      <div className="inlineEditable">
        {this.props.header && <Header sub>{this.props.header}</Header>}
        {this.state.isEditing ? this.renderEditor() : this.renderText()}
      </div>
    )
  }
}

InlineEditable.PropTypes = {
  name: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  value: PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.number
  ]),
  header: PropTypes.string<commit_msg>Add keypress handler for inlineeditable<commit_after>import React, { PropTypes } from 'react';
import _ from 'lodash';
import { Header, Icon, Input } from 'semantic-ui-react';
import './InlineEditable.scss';

class InlineEditable extends React.Component {

  constructor(props) {
    super();
    this.state = {
      isHovered: false,
      isEditing: false,
      editorValue: props.value
    };
    _.bindAll(this,
      'handleMouseEnter',
      'handleMouseLeave',
      'handleKeyPress',
      'toggleEditor',
      'handleSave',
      'handleChange',
      'handleBlur');
  }

  componentWillReceiveProps(newProps) {
    this.setState({
      editorValue: newProps.value
    });
  }

  handleMouseEnter() {
    this.setState({
      isHovered: true
    });
  }

  handleMouseLeave() {
    this.setState({
      isHovered: false
    });
  }

  handleKeyPress(event) {
    if (event.key == 'Enter') {
      this.handleSave();
    }
  }

  toggleEditor() {
    this.setState({
      isEditing: !this.state.isEditing,
      isHovered: false
    });
  }

  handleSave() {
    const data = {};
    data[this.props.name] = this.state.editorValue;
    this.props.onChange(data);
    this.toggleEditor();
    this.setState({
      editorValue: this.props.value
    });
  }

  handleChange(event) {
    this.setState({
      editorValue: event.target.value
    });
  }

  handleBlur() {
    this.setState({
      editorValue: this.props.value,
      isEditing: false
    });
  }

  renderText() {
    return (
      <span>
        <a onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} onClick={this.toggleEditor}>
          {this.props.value}
          <Icon name="edit" className={!this.state.isHovered ? 'hidden' : ''} />
        </a>
      </span>
    );
  }

  renderEditor() {
    return (
      <span>
        <Input
          autoFocus
          size="small"
          onChange={this.handleChange}
          onBlur={this.handleBlur}
          onKeyPress={this.handleKeyPress}
          action={{color: 'green', icon: 'check', onClick: this.handleSave}}
          defaultValue={this.props.value}
        />
      </span>
    );
  }

  render() {
    return (
      <div className="inlineEditable">
        {this.props.header && <Header sub>{this.props.header}</Header>}
        {this.state.isEditing ? this.renderEditor() : this.renderText()}
      </div>
    )
  }
}

InlineEditable.PropTypes = {
  name: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  value: PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.number
  ]),
  header: PropTypes.string
{'fraction_non_alphanumeric': 0.1414141414141414, 'fraction_numerical': 0.0, 'mean_word_length': 2.4098582039162726, 'pattern_counts': {'":': 0, '<': 27, '<?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': '4328920', 'n_tokens_mistral': 1620, 'n_tokens_neox': 1620, 'n_words': 262}