import React from 'react'
import PropTypes from 'prop-types'

import style from './NoteFilter.css'

const NoteFilter = ({ onChange }) => (
  <div className={style.root}>

    <span>Find notes:</span>

    <input type='text' className={style.input}
           placeholder='Filter by text or tags'
           onChange={event => { onChange(event.target.value) }} />

  </div>
)

NoteFilter.propTypes = {
  onChange: PropTypes.func.isRequired
}

export default NoteFilter

import React from 'react'
import PropTypes from 'prop-types'

import style from './NoteFilter.css'

const NoteFilter = ({ onChange }) => {
  function resetFilter (input) {
    if (input.value) {
      input.value = ''
      onChange(input.value)
    }
  }

  return (
    <div className={style.root}>

      <span>Find notes (ESC to reset):</span>

      <input type='text' className={style.input}
             placeholder='Filter by text or tags'
             onChange={event => { onChange(event.target.value) }}
             onKeyUp={event => { event.keyCode === 27 && resetFilter(event.target) }}/>

    </div>
  )
}

NoteFilter.propTypes = {
  onChange: PropTypes.func.isRequired
}

export default NoteFilter

Use ESC to reset filter
Use ESC to reset filter

Signed-off-by: Vojtech Szocs <c84ddee24d9ec6bf57c82d34e0d78c578d566b77@gmail.com>
