<commit_before>import React, {Component, PropTypes} from 'react'

import ColorDropdown from 'shared/components/ColorDropdown'

import {
  COLOR_TYPE_MIN,
  COLOR_TYPE_MAX,
  GAUGE_COLORS,
} from 'src/dashboards/constants/gaugeColors'

class GaugeThreshold extends Component {
  constructor(props) {
    super(props)

    this.state = {
      workingValue: this.props.threshold.value,
      valid: true,
    }
  }

  handleChangeWorkingValue = e => {
    const {threshold, onValidateColorValue, onUpdateColorValue} = this.props

    const valid = onValidateColorValue(threshold, e)

    if (valid) {
      onUpdateColorValue(threshold, e.target.value)
    }

    this.setState({valid, workingValue: e.target.value})
  }

  handleBlur = () => {
    this.setState({workingValue: this.props.threshold.value, valid: true})
  }

  render() {
    const {
      threshold,
      threshold: {type, hex, name},
      disableMaxColor,
      onChooseColor,
      onDeleteThreshold,
    } = this.props
    const {workingValue, valid} = this.state
    const selectedColor = {hex, name}

    const labelClass =
      type === COLOR_TYPE_MIN || type === COLOR_TYPE_MAX
        ? 'gauge-controls--label'
        : 'gauge-controls--label-editable'

    const canBeDeleted = !(type === COLOR_TYPE_MIN || type === COLOR_TYPE_MAX)

    let label = 'Threshold'
    if (type === COLOR_TYPE_MIN) {
      label = 'Minimum'
    }
    if (type === COLOR_TYPE_MAX) {
      label = 'Maximum'
    }

    const blargh = valid ? null : {color: '#ff0000'}

    return (
      <div className="gauge-controls--section">
        <div className={labelClass}>
          {label}
        </div>
        {canBeDeleted
          ? <button
              className="btn btn-default btn-sm btn-square gauge-controls--delete"
              onClick={onDeleteThreshold(threshold)}
            >
              <span className="icon remove" />
            </button>
          : null}
        <input
          value={workingValue}
          className="form-control input-sm gauge-controls--input"
          type="number"
          onChange={this.handleChangeWorkingValue}
          onBlur={this.handleBlur}
          min={0}
          style={blargh}
        /><commit_msg>Use error state input from theme when gauge threshold has bad value<commit_after>import React, {Component, PropTypes} from 'react'

import ColorDropdown from 'shared/components/ColorDropdown'

import {
  COLOR_TYPE_MIN,
  COLOR_TYPE_MAX,
  GAUGE_COLORS,
} from 'src/dashboards/constants/gaugeColors'

class GaugeThreshold extends Component {
  constructor(props) {
    super(props)

    this.state = {
      workingValue: this.props.threshold.value,
      valid: true,
    }
  }

  handleChangeWorkingValue = e => {
    const {threshold, onValidateColorValue, onUpdateColorValue} = this.props

    const valid = onValidateColorValue(threshold, e)

    if (valid) {
      onUpdateColorValue(threshold, e.target.value)
    }

    this.setState({valid, workingValue: e.target.value})
  }

  handleBlur = () => {
    this.setState({workingValue: this.props.threshold.value, valid: true})
  }

  render() {
    const {
      threshold,
      threshold: {type, hex, name},
      disableMaxColor,
      onChooseColor,
      onDeleteThreshold,
    } = this.props
    const {workingValue, valid} = this.state
    const selectedColor = {hex, name}

    const labelClass =
      type === COLOR_TYPE_MIN || type === COLOR_TYPE_MAX
        ? 'gauge-controls--label'
        : 'gauge-controls--label-editable'

    const canBeDeleted = !(type === COLOR_TYPE_MIN || type === COLOR_TYPE_MAX)

    let label = 'Threshold'
    if (type === COLOR_TYPE_MIN) {
      label = 'Minimum'
    }
    if (type === COLOR_TYPE_MAX) {
      label = 'Maximum'
    }

    const inputClass = valid
      ? 'form-control input-sm gauge-controls--input'
      : 'form-control input-sm gauge-controls--input form-volcano'

    return (
      <div className="gauge-controls--section">
        <div className={labelClass}>
          {label}
        </div>
        {canBeDeleted
          ? <button
              className="btn btn-default btn-sm btn-square gauge-controls--delete"
              onClick={onDeleteThreshold(threshold)}
            >
              <span className="icon remove" />
            </button>
          : null}
        <input
          value={workingValue}
          className={inputClass}
          type="number"
          onChange={this.handleChangeWorkingValue}
          onBlur={this.handleBlur}
          min={0}
        />
{'fraction_non_alphanumeric': 0.11620727673649393, 'fraction_numerical': 0.001323042998897464, 'mean_word_length': 2.4285714285714284, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 21, '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': '6073037', 'n_tokens_mistral': 1366, 'n_tokens_neox': 1339, 'n_words': 276}