ldx-widgets/src/components/search_input.coffee

widgets

React = require 'react'
ReactDOM = require 'react-dom'
Spinner = React.createFactory(require './spinner')

{div, button, input} = React.DOM

###
Search Input Props

@props.wrapClass - String - default: search-input-wrap
  className to apply to the div wrapper

@props.placeholder - String - default: search
  placeholder text for searh field

@props.height - Int - default: 18
  height of the inout

@props.width - Int - default: 260
  width of the input

@props.changeDelay - Int - default: 0
  ms delay before calling change handler

@props.handleChange - function
  method to call when the search term changes

@props.focusOnMount - Boolean - default: false
  whether or not the search input should focus immediately after mounting

@props.tabIndex - int - default: -1
  tab order of the text input

@props.term - String - default: ''
  the value of the search field when first rendered

###

SearchInput = React.createClass
  
  displayName: 'SearchInput'
    

  getDefaultProps: ->
    {
      wrapClass: 'search-input-wrap'
      height: 28
      width: 260
      changeDelay: 0
      placeholder: 'search'
      focusOnMount: no
      term: ''
      loading: false
      inputClass: ''
      tabIndex: -1
      handleChange: ->
    }

  componentDidMount: -> 
    if @props.focusOnMount then @focus()

  render: ->
    {term, handleChange, height, width, wrapClass, placeholder, loading, inputClass, autoComplete, disabled, tabIndex} = @props

    # Autocomplete
    autoComplete = switch typeof autoComplete 
      when 'string' then autoComplete
      when 'boolean'
        if autoComplete then 'on' else 'off'

    div {
      className: wrapClass
      style: {height, width}
    }, [
      input {
        className: "search-input loading-spinner #{inputClass}"
        ref: 'searchInput'
        type: 'text'
        placeholder: placeholder
        key: 'searchField'
        value: term or ''
        onChange: @handleChange
        onKeyDown: @handleKeyDown
        autoComplete: autoComplete
        disabled: disabled
        tabIndex: tabIndex
      }
      div({
          key: 'input-spinner'
          className: 'input-spinner'
        }, 
          Spinner {
            length: 3
          }
      ) if loading
      button {
        className: 'search-clear'
        title: 'Clear Search'
        key: 'searchClearBtn'
        onClick: @clearSearch
        tabIndex: -1
      }, [] if term?.length and not disabled
    ]

  handleChange: (e) ->
    newTerm = e.target.value
    {term} = @props

    # IE fires change events when the field is focused
    # this just ensures that state onlt changes when the data actually change
    return unless newTerm isnt term

    if @changeTimer? 
      clearInterval @changeTimer

    # handleChange will  update the search term
    @changeTimer = setTimeout =>
      @props.handleChange?(newTerm)
    , @props.changeDelay

  handleKeyDown: (e) ->
    e.preventDefault() if e.key is 'Enter'

  clearSearch: ->
    @props.handleChange('')
    

  focus: ->
    ReactDOM.findDOMNode(@refs.searchInput).focus()

  blur: ->
    ReactDOM.findDOMNode(@refs.searchInput).blur()


module.exports = SearchInput