feat: more searchBox work

README.md

@@ -65,3 +65,21 @@ npm test # test and lint
 npm run test:watch # developer mode, test only
 npm run test:coverage
 ```
+
+## Available widgets
+
+### searchBox
+
+```html
+  <div id="search-box"></div>
+```
+
+```js
+  instant.addWidget(
+    instantsearch.widgets.searchBox({
+      container: '#search-box',
+      placeholder: 'Search for products',
+      // cssClass: 'form-control'
+    })
+  );
+```

components/SearchBox/index.js

@@ -1,22 +1,20 @@
 'use strict';
 
 var React = require('react');
-var bem = require('../BemHelper')('algolia-magic-search-box');
+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();
   }
 });
 

example/app.js

@@ -8,17 +8,22 @@ var instant = new instantsearch.InstantSearch(
   'bestbuy'
 );
 
-instant.addWidget(instantsearch.widgets.searchbox({
-  container: '#search-box',
-  placeholder: 'Search for products in France...'
-}));
+instant.addWidget(
+  instantsearch.widgets.searchBox({
+    container: '#search-box',
+    placeholder: 'Search for products',
+    cssClass: 'form-control'
+  })
+);
 
-instant.addWidget(instantsearch.widgets.results({
+instant.addWidget(
+  instantsearch.widgets.results({
   container: '#hits',
-  templates: {
-    noResults: require('./templates/no-results.html'),
-    hit: require('./templates/hit.html')
-  }
-}));
+    templates: {
+      noResults: require('./templates/no-results.html'),
+      hit: require('./templates/hit.html')
+    }
+  })
+);
 
 instant.start();

index.js

@@ -3,7 +3,7 @@
 module.exports = {
   InstantSearch: require('./lib/InstantSearch'),
   widgets: {
-    searchbox: require('./widgets/searchbox'),
-    results: require('./widgets/hits')
+    searchBox: require('./widgets/search-box/'),
+    results: require('./widgets/hits/')
   }
 };

widgets/search-box/index.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+
+var utils = require('../../lib/widgetUtils');
+var bind = require('lodash/function/bind');
+
+function searchbox(params) {
+  var SearchBox = require('../../components/SearchBox');
+  var container = utils.getContainerNode(params.container);
+
+  return {
+    init: function(initialState, helper) {
+      React.render(
+        <SearchBox
+          setQuery={bind(helper.setQuery, helper)}
+          search={bind(helper.search, helper)}
+          placeholder={params.placeholder}
+          inputClass={params.cssClass} />, container
+      );
+    }
+  };
+}
+
+module.exports = searchbox;