/** @jsx React.DOM */

var Colors = require('./Colors');
var React = require('react');
var StyleSet = require('./StyleSet');

var PropTypes = React.PropTypes;
var cx = React.addons.classSet;

var SearchBox = React.createClass({
  propTypes: {
    onQueryChange: PropTypes.func.isRequired,
    onQuerySubmit: PropTypes.func.isRequired,
    query: PropTypes.string.isRequired,
  },

  _onQueryKeyDown(e) {
    if (e.key === 'Enter') {
      this.props.onQuerySubmit(this.props.query);
    }
  },

  _onQueryChange(e) {
    this.props.onQueryChange(e.target.value);
  },

  _onSearchClick() {
    this.props.onQuerySubmit(this.props.query);
  },

  render() /*object*/ {
    return (
      <span className={cx(this.props.className, 'SearchBox')}>
        <input
          className={Classes.input}
          value={this.props.query}
          onChange={this._onQueryChange}
          onKeyDown={this._onQueryKeyDown}
          type="search"
        />
        <button
          className={Classes.button}
          onClick={this._onSearchClick}
          type="button">
          Search
        </button>
      </span>
    );
  }
});

var {Classes, Styles} = StyleSet('SearchBox', {
  input: {
    marginRight: '8px',
    width: '400px',
  },

  button: {
    background: Colors.accent,
    color: 'white',
  },
});

module.exports = SearchBox;

@@ -89,19 +89,21 @@
 ar Style
-Set
+Mixin
  = requi
@@ -113,19 +113,21 @@
 './Style
-Set
+Mixin
 ');%0A%0Avar
@@ -374,24 +374,227 @@
 ired,%0A  %7D,%0A%0A
+  mixins: %5B%0A    StyleMixin(%7B%0A      input: %7B%0A        marginRight: '8px',%0A        width: '400px',%0A      %7D,%0A%0A      button: %7B%0A        background: Colors.accent,%0A        color: 'white',%0A      %7D,%0A    %7D)%0A  %5D,%0A%0A
   _onQueryKe
@@ -980,21 +980,25 @@
 ssName=%7B
-Class
+this.styl
 es.input
@@ -1190,21 +1190,25 @@
 ssName=%7B
-Class
+this.styl
 es.butto
@@ -1331,16 +1331,16 @@
 %0A    );%0A
+
   %7D%0A%7D);%0A
@@ -1344,190 +1344,8 @@
 );%0A%0A
-var %7BClasses, Styles%7D = StyleSet('SearchBox', %7B%0A  input: %7B%0A    marginRight: '8px',%0A    width: '400px',%0A  %7D,%0A%0A  button: %7B%0A    background: Colors.accent,%0A    color: 'white',%0A  %7D,%0A%7D);%0A%0A
 modu

Convert SearchBox to StyleMixin