fix: reduce the dependency between REACT components and helper

At first when I saw the component had a propType that included the
full helper I thought "Maybe that's too much".

What do you think @bobylito?

Would this also help testing/exporting individual react component in
npm modules?

Author: vvo

components/SearchBox/index.js

@@ -4,19 +4,17 @@ var React = require('react');
 var bem = require('../BemHelper')('as-search-box');
 var cx = require('classnames');
 
-var AlgoliasearchHelper = require('algoliasearch-helper/src/algoliasearch.helper');
-var SearchResults = require('algoliasearch-helper/src/SearchResults');
-
 var SearchBox = React.createClass({
   propTypes: {
-    helper: React.PropTypes.instanceOf(AlgoliasearchHelper),
-    results: React.PropTypes.instanceOf(SearchResults),
-    onFocus: React.PropTypes.func,
     placeholder: React.PropTypes.string,
-    inputClass: React.PropTypes.string
+    inputClass: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.array
+    ]),
+    setQuery: React.PropTypes.func,
+    search: React.PropTypes.func
   },
   render: function() {
-    var onFocus = this.props.onFocus;
     var classNames = cx(bem('input'), this.props.inputClass);
 
     return (
@@ -28,15 +26,12 @@ var SearchBox = React.createClass({
       autoComplete="off"
       autoFocus="autofocus"
       onChange={this.change}
-      onFocus={onFocus}
       role="textbox" />
     );
   },
   change: function(e) {
-    var value = e.target.value;
-    var helper = this.props.helper;
-
-    helper.setQuery(value).search();
+    this.props.setQuery(e.target.value);
+    this.props.search();
   }
 });
 

widgets/searchbox/index.js

@@ -3,6 +3,7 @@
 var React = require('react');
 
 var utils = require('../../lib/widgetUtils');
+var bind = require('lodash/function/bind');
 
 function searchbox(params) {
   var SearchBox = require('../../components/SearchBox');
@@ -12,7 +13,8 @@ function searchbox(params) {
     init: function(initialState, helper) {
       React.render(
         <SearchBox
-          helper={helper}
+          setQuery={bind(helper.setQuery, helper)}
+          search={bind(helper.search, helper)}
           placeholder={params.placeholder}
           inputClass={params.addClass} />, container
       );