react-lite-misc/lib/module/search-box.js

Misc Components of jianliao.com

(function() {
  var React, T, div, input, span;

  React = require('react');

  div = React.createFactory('div');

  span = React.createFactory('span');

  input = React.createFactory('input');

  T = React.PropTypes;

  module.exports = React.createClass({
    displayName: 'search-box',
    propTypes: {
      value: T.string.isRequired,
      onChange: T.func.isRequired,
      locale: T.string.isRequired,
      autoFocus: T.bool.isRequired,
      onBlur: T.func,
      onConfirm: T.func,
      onClick: T.func,
      onFocus: T.func
    },
    onChange: function(event) {
      return this.props.onChange(event.target.value);
    },
    onKeyDown: function(event) {
      var base;
      if (event.keyCode === 13) {
        return typeof (base = this.props).onConfirm === "function" ? base.onConfirm(event.target.value) : void 0;
      }
    },
    onBlur: function(event) {
      var base;
      return typeof (base = this.props).onBlur === "function" ? base.onBlur(event.target.value) : void 0;
    },
    onClick: function(event) {
      var base;
      return typeof (base = this.props).onClick === "function" ? base.onClick(event) : void 0;
    },
    onFocus: function(event) {
      var base;
      return typeof (base = this.props).onFocus === "function" ? base.onFocus(event) : void 0;
    },
    render: function() {
      return div({
        className: 'search-box'
      }, span({
        className: 'ti ti-search'
      }), input({
        type: 'text',
        className: 'input',
        placeholder: this.props.locale,
        onChange: this.onChange,
        value: this.props.value,
        onKeyDown: this.onKeyDown,
        onBlur: this.onBlur,
        autoFocus: this.props.autoFocus,
        onClick: this.onClick,
        onFocus: this.onFocus
      }));
    }
  });

}).call(this);