<commit_before>import React, { PropTypes } from 'react'
import styled from 'styled-components'

const Root = styled.div`
  height: 26px;
  position: relative;
  display: inline-block;
  margin: 0 2.5px;
  outline: none;
  .search {
    ${p => p.theme.input}
    -webkit-app-region: no-drag;
    -webkit-user-select: none;
    height: 26px;
    padding: 0 10px;
    box-sizing: border-box;
    margin-left: auto;
  }
`

class SearchInput extends React.Component {
  handleChange = e => {
    this.props.onChange(e.target.value)
  }

  handleMouseDown = e => {
    e.stopPropagation()
  }

  handleKeyDown = e => {
    switch (e.keyCode) {
      case 27:
        this.props.onChange('')
        window.dispatchEvent(new window.CustomEvent('list:focus'))
        break
      case 13:
        window.dispatchEvent(new window.CustomEvent('list:focus'))
        break
    }
  }

  focus () {
    this.refs.input.select()
    this.refs.input.focus()
  }

  render () {
    return <Root
      innerRef={c => (this.root = c)}
      tabIndex='-1'
      onMouseDown={this.handleMouseDown}
    >
      <input className='search'
        ref='input'
        title='Quickly find notes'
        placeholder='Search...'
        value={this.props.value}
        onChange={this.handleChange}
        onMouseDown={this.handleMouseDown}
        onKeyDown={this.handleKeyDown}
      />
    </Root>
  }
}

SearchInput.propTypes = {
  value: PropTypes.string,
  onChange: PropTypes.func
}
<commit_msg>:art: Improve behavior of SearchInput Add Reset Button Add Search Icon<commit_after>import React, { PropTypes } from 'react'
import styled from 'styled-components'
import Octicon from 'components/Octicon'

const Root = styled.div`
  height: 26px;
  position: relative;
  display: inline-block;
  margin: 0 2.5px;
  outline: none;
  .Octicon {
    position: absolute;
    left: 2px;
    top: 7px;
    height: 12px;
    width: 24px;
    text-align: center;
    fill: ${p => p.theme.inactiveColor};
    pointer-events: none;
  }
  .input {
    ${p => p.theme.input};
    background-color: transparent;
    color: ${p => p.theme.color};
    outline: none;
    -webkit-app-region: no-drag;
    -webkit-user-select: none;
    height: 26px;
    width: 150px;
    padding: 0 28px 0 24px;
    box-sizing: border-box;
    margin-left: auto;
  }
  .reset {
    position: absolute;
    right: 0;
    font-size: 12px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    padding: 0;
    outline: none;
    color: ${p => p.theme.inactiveColor};
    .Octicon {
      fill: currentColor;
    }
    &:hover {
      color: ${p => p.theme.color};
    }
    &:active {
      color: ${p => p.theme.activeColor};
    }
  }
`

class SearchInput extends React.Component {
  handleChange = e => {
    this.props.onChange(e.target.value)
  }

  handleMouseDown = e => {
    e.stopPropagation()
  }

  handleKeyDown = e => {
    switch (e.keyCode) {
      case 27:
        if (this.props.value.length > 0) {
          this.reset()
        } else {
          window.dispatchEvent(new window.CustomEvent('list:focus'))
        }
        break
      case 13:
        window.dispatchEvent(new window.CustomEvent('list:focus'))
        break
    }
  }

  handleResetButtonClick = e => {
    this.reset()
  }

  focus () {
    this.refs.input.select()
    this.refs.input.focus()
  }

  reset () {
    this.props.onChange('')
  }

  render () {
    return <Root
      innerRef={c => (this.root = c)}
      tabIndex='-1'
      onMouseDown={this.handleMouseDown}
    >
      <Octicon icon='search' />
      <input className='input'
        ref='input'
        title='Quickly find notes'
        placeholder='Search...'
        value={this.props.value}
        onChange={this.handleChange}
        onMouseDown={this.handleMouseDown}
        onKeyDown={this.handleKeyDown}
      />
      {this.props.value.length > 0 &&
        <button className='reset'
          onClick={this.handleResetButtonClick}
        >
          <Octicon icon='x' />
        </button>
      }
    </Root>
  }
}

SearchInput.propTypes = {
  value: PropTypes.string,
  onChange: PropTypes.func
}

{'fraction_non_alphanumeric': 0.1378228336953898, 'fraction_numerical': 0.01255129133478156, 'mean_word_length': 2.291501191421763, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 31, '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': '5428289', 'n_tokens_mistral': 1426, 'n_tokens_neox': 1375, 'n_words': 279}