<commit_before>import React from 'react';
import Select from 'react-select';
import './Attribute.scss';

export class Attribute extends React.Component {
  constructor (props) {
    super(props);
    this.onChange = this.onChange.bind(this);
    this.submit = this.submit.bind(this);
    this.state = {
      attribute: this.props.attribute,
      mode: 'view'
    };
  }

  componentWillReceiveProps (nextProps) {
    if (this.state.attribute !== nextProps.attribute) {
      this.setState({ attribute: nextProps.attribute });
    }
  }

  activateEditMode () {
    if (this.state.mode !== 'edit') {
      this.changeState('edit');
    }
  }

  onChange (val) {
    this.setState({ attribute: val });
  }

  changeState (newState) {
    if (this.props.documentState === 'edit') {
      this.setState({ mode: newState });
    }
  }

  submit (event) {
    event.preventDefault();
    if (this.props.attributeIndex === '') {
      this.props.updateTypeSpecifier(this.state.attribute, this.props.elementId);
    } else if (this.props.attributeIndex === this.props.attribute) {
      this.props.updateType(
        this.state.attribute,
        this.props.elementId
      );
    } else if (this.props.tosAttribute) {
      this.props.updateFunctionAttribute(
        this.state.attribute,
        this.props.attributeIndex
      );
    } else {
      this.props.updateAttribute(
        this.state.attribute,
        this.props.attributeIndex,
        this.props.elementId
      );
    }

    setTimeout(() => this.changeState('view'),
      150
    );
  }

  generateAttributeInput (attribute, currentAttribute) {
    if (attribute.values && attribute.values.length) {
      const options = attribute.values.map(option => {
        return {
          value: option.value,
          label: option.value
        };
      });
      return (
        <Select
          autoBlur={false}
          openOnFocus={true}
          className='form-control edit-attribute__input'
          clearable={false}
          value={this.state.attribute}
          onChange={({ value }) => this.onChange(value)}
          onBlur={this.submit}
          autofocus={true}
          options={options}
        />
      );
    } else if (attribute.values.length === 0 || attribute.type) {
      return (
        <form onSubmit={this.submit}>
          <input
            className='col-xs-6 form-control edit-attribute__input'
            value={this.state.attribute}
            onChange={({ target: { value } }) => this.onChange(value)}
            onBlur={this.submit}
            autoFocus={true}
          />
        </form>
      );
    } else {
      return null;
    }
  }

  generateBasicAttributeInput (type, name) {
    if (type === '') {
      return (
        <form onSubmit={this.submit}>
          <input
            className='col-xs-6 form-control edit-attribute__input'
            value={this.state.attribute || ''}
            onChange={({ target: { value } }) => this.onChange(value)}
            onBlur={this.submit}
            autoFocus={true}
          />
        </form>
      );
    } else {
      return this.generateBasicAttributeDropdown(this.props.typeOptions, type);
    }
  }

  generateBasicAttributeDropdown (typeOptions, activeElement) {
    const options = [];
    for (const key in typeOptions) {
      if (typeOptions.hasOwnProperty(key)) {
        options.push({
          label: typeOptions[key].value,
          value: typeOptions[key].value
        });
      }
    }

    return (
      <form onSubmit={this.submit}>
        <Select
          autoBlur={false}
          openOnFocus={true}
          className='col-xs-6 form-control edit-attribute__input'
          clearable={false}
          value={this.state.attribute}
          onChange={({ value }) => this.onChange(value)}
          onBlur={this.submit}
          autofocus={true}
          options={options}
        />
      </form>
    );
  }

  render () {
    const { attribute, attributeIndex, showAttributes, attributeKey, attributeTypes, editable, type } = this.props;
    let attributeValue;
    if (editable === false && attribute !== null) {
      return (
        <a className='list-group-item col-xs-6'>
          <strong>{attributeIndex}:</strong>
          <div>{attribute}</div>
        </a>
      );
    }
    if (this.state.mode === 'view') {
      attributeValue = <div className='table-value'>{this.state.attribute}</div>;
    }
    if (this.state.mode === 'edit') {
      if (type === 'attribute') {
        attributeValue = this.generateAttributeInput(attributeTypes[attributeIndex], attribute);
      }
      if (type === 'basic') {
        attributeValue = this.generateBasicAttributeInput(attributeIndex, attribute);
      }
    }

    if (attribute !== null) {
      return (
        <a
          onClick={() => this.activateEditMode()}
          className={'list-group-item col-xs-6 attribute ' + (showAttributes ? 'visible' : 'hidden')}>
          <span className='table-key'>
            { attributeKey }
            { type === 'attribute' &&<commit_msg>Add the ability to clear values from record attributes<commit_after>import React from 'react';
import Select from 'react-select';
import './Attribute.scss';

export class Attribute extends React.Component {
  constructor (props) {
    super(props);
    this.onChange = this.onChange.bind(this);
    this.submit = this.submit.bind(this);
    this.state = {
      attribute: this.props.attribute,
      mode: 'view'
    };
  }

  componentWillReceiveProps (nextProps) {
    if (this.state.attribute !== nextProps.attribute) {
      this.setState({ attribute: nextProps.attribute });
    }
  }

  activateEditMode () {
    if (this.state.mode !== 'edit') {
      this.changeState('edit');
    }
  }

  onChange (val) {
    this.setState({ attribute: val });
  }

  changeState (newState) {
    if (this.props.documentState === 'edit') {
      this.setState({ mode: newState });
    }
  }

  submit (event) {
    event.preventDefault();
    if (this.props.attributeIndex === '') {
      this.props.updateTypeSpecifier(this.state.attribute, this.props.elementId);
    } else if (this.props.attributeIndex === this.props.attribute) {
      this.props.updateType(
        this.state.attribute,
        this.props.elementId
      );
    } else if (this.props.tosAttribute) {
      this.props.updateFunctionAttribute(
        this.state.attribute,
        this.props.attributeIndex
      );
    } else {
      this.props.updateAttribute(
        this.state.attribute,
        this.props.attributeIndex,
        this.props.elementId
      );
    }

    setTimeout(() => this.changeState('view'),
      150
    );
  }

  generateAttributeInput (attribute, currentAttribute) {
    if (attribute.values && attribute.values.length) {
      const options = attribute.values.map(option => {
        return {
          value: option.value,
          label: option.value
        };
      });
      return (
        <Select
          autoBlur={false}
          openOnFocus={true}
          className='form-control edit-attribute__input'
          clearable={true}
          value={this.state.attribute}
          onChange={(option) => this.onChange(option ? option.value : null)}
          onBlur={this.submit}
          autofocus={true}
          options={options}
        />
      );
    } else if (attribute.values.length === 0 || attribute.type) {
      return (
        <form onSubmit={this.submit}>
          <input
            className='col-xs-6 form-control edit-attribute__input'
            value={this.state.attribute}
            onChange={({ target: { value } }) => this.onChange(value)}
            onBlur={this.submit}
            autoFocus={true}
          />
        </form>
      );
    } else {
      return null;
    }
  }

  generateBasicAttributeInput (type, name) {
    if (type === '') {
      return (
        <form onSubmit={this.submit}>
          <input
            className='col-xs-6 form-control edit-attribute__input'
            value={this.state.attribute || ''}
            onChange={({ target: { value } }) => this.onChange(value)}
            onBlur={this.submit}
            autoFocus={true}
          />
        </form>
      );
    } else {
      return this.generateBasicAttributeDropdown(this.props.typeOptions, type);
    }
  }

  generateBasicAttributeDropdown (typeOptions, activeElement) {
    const options = [];
    for (const key in typeOptions) {
      if (typeOptions.hasOwnProperty(key)) {
        options.push({
          label: typeOptions[key].value,
          value: typeOptions[key].value
        });
      }
    }

    return (
      <form onSubmit={this.submit}>
        <Select
          autoBlur={false}
          openOnFocus={true}
          className='col-xs-6 form-control edit-attribute__input'
          clearable={true}
          value={this.state.attribute}
          onChange={(option) => this.onChange(option ? option.value : null)}
          onBlur={this.submit}
          autofocus={true}
          options={options}
        />
      </form>
    );
  }

  render () {
    const { attribute, attributeIndex, showAttributes, attributeKey, attributeTypes, editable, type } = this.props;
    let attributeValue;
    if (editable === false && attribute !== null) {
      return (
        <a className='list-group-item col-xs-6'>
          <strong>{attributeIndex}:</strong>
          <div>{attribute}</div>
        </a>
      );
    }
    if (this.state.mode === 'view') {
      attributeValue = <div className='table-value'>{this.state.attribute}</div>;
    }
    if (this.state.mode === 'edit') {
      if (type === 'attribute') {
        attributeValue = this.generateAttributeInput(attributeTypes[attributeIndex], attribute);
      }
      if (type === 'basic') {
        attributeValue = this.generateBasicAttributeInput(attributeIndex, attribute);
      }
    }

    if (attribute !== null || (attribute === null && type === 'basic')) {
      return (
        <a
          onClick={() => this.activateEditMode()}
          className={'list-group-item col-xs-6 attribute ' + (showAttributes ? 'visible' : 'hidden')}>
          <span className='table-key'>
            { attributeKey }
            { type === 'attribute' &&
{'fraction_non_alphanumeric': 0.140776224459869, 'fraction_numerical': 0.0017597028057483625, 'mean_word_length': 2.1467240848969547, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 57, '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': '2966893', 'n_tokens_mistral': 2891, 'n_tokens_neox': 2892, 'n_words': 522}