virtual-selector/src/javascript/components/SelectorFilter.jsx

Virtual selector component for react.js

/**
 * Search element for ReactVirtualSelector.
 * @author artisan.
 * @Date(2015-11-08)
 */

import React from 'react';
import _ from 'underscore';
import classnames from 'classnames';

class SelectorFilter extends React.Component {
  
  /**
   * Component display in react develop tool.
   * 
   * @type {String}
   */
  displayName = 'SelectorFilter';

  /**
   * Define default properties.
   * 
   * @type {Object}
   */
  static defaultProps = {
    value: '',
    onChange: null,
    className: '',
    autoFocus: false
  }

  /**
   * Define property types.
   * 
   * @type {Object}
   */
  static propTypes = {
    value: React.PropTypes.string,
    onChange: React.PropTypes.func,
    className: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.object
    ]),
    autoFocus: React.PropTypes.bool
  }

  /**
   * On change event.
   * 
   * @param  {object} event event.
   * @return {undefind}
   */
  handleChange(event) {
    let { onChange } = this.props;

    if ( _.isFunction(onChange) ) {
      onChange(event.target.value);
    }
  }

  render() {
    return (
      <div className={ classnames('selector-searchable', this.props.className) }>
        <input type="text" className="selector-filter" ref="input" autoFocus={ this.props.autoFocus } onChange={ this.handleChange.bind(this) } defaultValue={ this.props.value } />
      </div>
    );
  }
}

export default SelectorFilter;