<commit_before>import {React, Component, PropTypes} from '../imports';
import {TypeHandler} from './types/type-handler';

/**
 * This class describes a Preact/React component which renders a inline-edit element.
 * The inline-edit component can be used everywhere in block where you want to have ability to change value.
 * As an example you can use it in div blocks, rows, tables.
 */
export class WSInlineEdit extends Component {
  /**
   * Create default onUpdate function to prevent errors if user don't use it
   */
  static defaultProps = {
    value: '',
    options: {},
    type: 'text',
    look: 'default',
    disabled: false,
    onChange: () => {}
  };

  /**
   * Types of properties
   */
  static propTypes = {
    value: PropTypes.string,
    options: PropTypes.object,
    type: PropTypes.oneOf(['text', 'number', 'price']),
    look: PropTypes.oneOf(['narrow', 'default']),
    disabled: PropTypes.bool,
    onChange: PropTypes.func
  };

  /**
   * @param {Object} props Preact props
   * @constructor
   */
  constructor(props) {
    super(props);
    this.state = this.createState(props);
  }

  /**
   * Bind event listeners
   * @returns {void}
   */
  componentDidMount() {
    this.input.addEventListener('focus', this.onFocus);
    this.input.addEventListener('keyup', this.onKeyUp);
    this.input.addEventListener('keydown', this.onKeyDown);
    this.input.addEventListener('change', this.onChange);
    this.resizeInput();
  }

  /**
   * @param {Object} props React props
   * @returns {void}
   */
  componentWillReceiveProps(props) {
    this.setState(this.createState(props));
  }

  /**
   * Unbind event listeners
   * @returns {void}
   */
  componentWillUnmount() {
    this.input.removeEventListener('focus', this.onFocus);
    this.input.removeEventListener('keydown', this.onKeyDown);
    this.input.removeEventListener('keyup', this.onKeyUp);
    this.input.removeEventListener('change', this.onChange);
  }

  /**
   * Handles click on value to enable editing
   * @param {Event} event JavaScript event object
   * @returns {void}
   */
  onFocus = event => {
    event.stopPropagation();

    if (!this.state.isEditing) {
      this.resizeInput();<commit_msg>fix(inline-edit): Resize inline edit when value changes from outside (#198)<commit_after>import {React, Component, PropTypes} from '../imports';
import {TypeHandler} from './types/type-handler';

/**
 * This class describes a Preact/React component which renders a inline-edit element.
 * The inline-edit component can be used everywhere in block where you want to have ability to change value.
 * As an example you can use it in div blocks, rows, tables.
 */
export class WSInlineEdit extends Component {
  /**
   * Create default onUpdate function to prevent errors if user don't use it
   */
  static defaultProps = {
    value: '',
    options: {},
    type: 'text',
    look: 'default',
    disabled: false,
    onChange: () => {}
  };

  /**
   * Types of properties
   */
  static propTypes = {
    value: PropTypes.string,
    options: PropTypes.object,
    type: PropTypes.oneOf(['text', 'number', 'price']),
    look: PropTypes.oneOf(['narrow', 'default']),
    disabled: PropTypes.bool,
    onChange: PropTypes.func
  };

  /**
   * @param {Object} props Preact props
   * @constructor
   */
  constructor(props) {
    super(props);
    this.state = this.createState(props);
  }

  /**
   * Bind event listeners
   * @returns {void}
   */
  componentDidMount() {
    this.input.addEventListener('focus', this.onFocus);
    this.input.addEventListener('keyup', this.onKeyUp);
    this.input.addEventListener('keydown', this.onKeyDown);
    this.input.addEventListener('change', this.onChange);
    this.resizeInput();
  }

  /**
   * @param {Object} props React props
   * @returns {void}
   */
  componentWillReceiveProps(props) {
    this.setState(this.createState(props), () => {
      this.resizeInput();
    });
  }

  /**
   * Unbind event listeners
   * @returns {void}
   */
  componentWillUnmount() {
    this.input.removeEventListener('focus', this.onFocus);
    this.input.removeEventListener('keydown', this.onKeyDown);
    this.input.removeEventListener('keyup', this.onKeyUp);
    this.input.removeEventListener('change', this.onChange);
  }

  /**
   * Handles click on value to enable editing
   * @param {Event} event JavaScript event object
   * @returns {void}
   */
  onFocus = event => {
    event.stopPropagation();

    if (!this.state.isEditing) {
      this.resizeInput();
{'fraction_non_alphanumeric': 0.1401019729549989, 'fraction_numerical': 0.0006650410108623365, 'mean_word_length': 3.2767772511848343, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 8, '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': '1541979', 'n_tokens_mistral': 1342, 'n_tokens_neox': 1343, 'n_words': 345}