<commit_before>import PropTypes from 'prop-types'
import React, {useState} from 'react'
import {react} from 'tocco-util'

import {StyledSearchBox, StyledSearchBoxInput} from './StyledSearchBox'
import {StyledEditableWrapper} from '../EditableValue/StyledEditableValue'
import StatedValue from '../StatedValue'

const SearchBox = React.forwardRef((props, ref) => {
  const {value, minInputLength, onSearch, placeholder} = props
  const [inputValue, setInputValue] = useState(value || '')

  const onChange = e => {
    const newValue = e.target.value
    setInputValue(newValue)

    if ((newValue.length === 0 || newValue.length >= minInputLength)) {
      onSearch(newValue)
    }
  }

  return (
    <StyledSearchBox className="StyledSearchBox">
      <StatedValue
        hasValue={!!inputValue}
        label={placeholder}
      >
        <StyledEditableWrapper>
          <StyledSearchBoxInput
            ref={ref}
            onChange={onChange}
            value={inputValue}
          />
        </StyledEditableWrapper>
      </StatedValue>
    </StyledSearchBox>
  )
})

SearchBox.defaultProps = {
  debounce: 200,
  minInputLength: 3
}

SearchBox.propTypes = {
  /**
   * Optional default value
   */
  value: PropTypes.string,
  /**
   * Function that will be triggered. The input value will be passed as argument.
   */
  onSearch: PropTypes.func.isRequired,
  /**
   * Placeholder of the input field.
   */
  placeholder: PropTypes.string,
  /**
   * onSearch is only called when the input has at least the length of minInputLength or 0
   */
  minInputLength: PropTypes.number
}

export default react.Debouncer(SearchBox, 300, 'onSearch')<commit_msg>refactor(tocco-ui): decrease debounce time of searchbox<commit_after>import PropTypes from 'prop-types'
import React, {useState} from 'react'
import {react} from 'tocco-util'

import {StyledSearchBox, StyledSearchBoxInput} from './StyledSearchBox'
import {StyledEditableWrapper} from '../EditableValue/StyledEditableValue'
import StatedValue from '../StatedValue'

const SearchBox = React.forwardRef((props, ref) => {
  const {value, minInputLength, onSearch, placeholder} = props
  const [inputValue, setInputValue] = useState(value || '')

  const onChange = e => {
    const newValue = e.target.value
    setInputValue(newValue)

    if ((newValue.length === 0 || newValue.length >= minInputLength)) {
      onSearch(newValue)
    }
  }

  return (
    <StyledSearchBox className="StyledSearchBox">
      <StatedValue
        hasValue={!!inputValue}
        label={placeholder}
      >
        <StyledEditableWrapper>
          <StyledSearchBoxInput
            ref={ref}
            onChange={onChange}
            value={inputValue}
          />
        </StyledEditableWrapper>
      </StatedValue>
    </StyledSearchBox>
  )
})

SearchBox.defaultProps = {
  debounce: 200,
  minInputLength: 3
}

SearchBox.propTypes = {
  /**
   * Optional default value
   */
  value: PropTypes.string,
  /**
   * Function that will be triggered. The input value will be passed as argument.
   */
  onSearch: PropTypes.func.isRequired,
  /**
   * Placeholder of the input field.
   */
  placeholder: PropTypes.string,
  /**
   * onSearch is only called when the input has at least the length of minInputLength or 0
   */
  minInputLength: PropTypes.number
}

export default react.Debouncer(SearchBox, 100, 'onSearch')
{'fraction_non_alphanumeric': 0.11203319502074689, 'fraction_numerical': 0.005334914048606995, 'mean_word_length': 3.171817058096415, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 23, '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': '2880240', 'n_tokens_mistral': 1048, 'n_tokens_neox': 1012, 'n_words': 250}