feat(widget): Search for facet values - refinement list (#1753)

This adds options for the refinement list to support search
for facet values. This means that if activated, the widget
will display a search input to look for facet values that are
not in the list. The results are replaced directly in the
list of options.

Author: bobylito

.eslintignore

@@ -1,3 +1,4 @@
 dist/
 dist-es5-module/
 docs/
+node_modules/

dev/app.js

@@ -161,6 +161,30 @@ search.addWidget(
   })
 );
 
+search.addWidget(
+  instantsearch.widgets.refinementList({
+    container: '#searchable-brands',
+    attributeName: 'brand',
+    operator: 'or',
+    limit: 10,
+    cssClasses: {
+      header: 'facet-title',
+      item: 'facet-value checkbox',
+      count: 'facet-count pull-right',
+      active: 'facet-active',
+    },
+    templates: {
+      header: 'Searchable brands',
+    },
+    searchForFacetValues: {
+      placeholder: 'Find other brands...',
+      templates: {
+        noResults: 'No results',
+      },
+    },
+  })
+);
+
 search.addWidget(
   instantsearch.widgets.refinementList({
     collapsible: {

dev/index.html

@@ -22,6 +22,7 @@ <h1><a href="./">Instant search demo</a> <small>using instantsearch.js</small></
       <div class="col-md-3 smooth-search smooth-search--hidden">
         <div class="facet" id="current-refined-values"></div>
         <div class="facet" id="hierarchical-categories"></div>
+        <div class="facet" id="searchable-brands"></div>
         <div class="facet" id="brands"></div>
         <div class="facet" id="brands-2"></div>
         <div class="facet" id="price-range"></div>

scripts/staging-deploy.sh

@@ -15,5 +15,3 @@ rm ./dev/instantsearch.css
 mv ./dev/instantsearch.css.symlink ./dev/instantsearch.css
 rm ./dev/bundle.js
 rm ./dev/bundle.js.map
-rm ./dev/instantsearch.js
-rm ./dev/instantsearch.js.map

src/components/RefinementList/RefinementList.js

@@ -6,6 +6,8 @@ import Template from '../Template.js';
 import RefinementListItem from './RefinementListItem.js';
 import isEqual from 'lodash/isEqual';
 
+import SearchBox from '../SearchBox';
+
 class RefinementList extends React.Component {
   constructor(props) {
     super(props);
@@ -121,6 +123,20 @@ class RefinementList extends React.Component {
     this.setState({isShowMoreOpen});
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (this.searchbox && !nextProps.isFromSearch) {
+      this.searchbox.clearInput();
+    }
+  }
+
+  refineFirstValue() {
+    const firstValue = this.props.facetValues[0];
+    if (firstValue) {
+      const actualValue = firstValue[this.props.attributeNameKey];
+      this.props.toggleRefinement(actualValue);
+    }
+  }
+
   render() {
     // Adding `-lvl0` classes
     const cssClassList = [this.props.cssClasses.list];
@@ -144,9 +160,25 @@ class RefinementList extends React.Component {
         /> :
         undefined;
 
+    const searchInput = this.props.searchFacetValues ?
+      <SearchBox ref={i => { this.searchbox = i; }}
+        placeholder={this.props.searchPlaceholder}
+        onChange={this.props.searchFacetValues}
+        onValidate={() => this.refineFirstValue()}/> :
+      null;
+
+    const noResults = this.props.searchFacetValues && this.props.isFromSearch && this.props.facetValues.length === 0 ?
+      <Template
+        templateKey={'noResults'}
+        {...this.props.templateProps}
+      /> :
+      null;
+
     return (
       <div className={cx(cssClassList)}>
+        {searchInput}
         {displayedFacetValues.map(this._generateFacetItem, this)}
+        {noResults}
         {showMoreBtn}
       </div>
     );
@@ -170,6 +202,9 @@ RefinementList.propTypes = {
   showMore: React.PropTypes.bool,
   templateProps: React.PropTypes.object.isRequired,
   toggleRefinement: React.PropTypes.func.isRequired,
+  searchFacetValues: React.PropTypes.func,
+  searchPlaceholder: React.PropTypes.string,
+  isFromSearch: React.PropTypes.bool,
 };
 
 RefinementList.defaultProps = {

src/components/SearchBox/index.js

@@ -0,0 +1,60 @@
+/* eslint-disable max-len, no-extra-parens */
+import React from 'react';
+
+export default class SearchBox extends React.Component {
+  static propTypes = {
+    placeholder: React.PropTypes.string.isRequired,
+    onChange: React.PropTypes.func.isRequired,
+    onValidate: React.PropTypes.func.isRequired,
+  }
+
+  clearInput() {
+    if (this.input) {
+      this.input.value = '';
+    }
+  }
+
+  validateSearch(e) {
+    e.preventDefault();
+    if (this.input) {
+      const inputValue = this.input.value;
+      if (inputValue) this.props.onValidate();
+    }
+  }
+
+  render() {
+    const {placeholder, onChange} = this.props;
+
+    return (
+      <form noValidate="novalidate"
+        className="searchbox sbx-custom"
+        onReset={() => { onChange(''); }}
+        onSubmit={e => this.validateSearch(e) }
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" style={{display: 'none'}}>
+          <symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-search-12" viewBox="0 0 40 41">
+            <path d="M30.967 27.727l-.03-.03c-.778-.777-2.038-.777-2.815 0l-1.21 1.21c-.78.78-.778 2.04 0 2.817l.03.03 4.025-4.027zm1.083 1.084L39.24 36c.778.778.78 2.037 0 2.816l-1.21 1.21c-.777.778-2.038.78-2.816 0l-7.19-7.19 4.026-4.025zM15.724 31.45c8.684 0 15.724-7.04 15.724-15.724C31.448 7.04 24.408 0 15.724 0 7.04 0 0 7.04 0 15.724c0 8.684 7.04 15.724 15.724 15.724zm0-3.93c6.513 0 11.793-5.28 11.793-11.794 0-6.513-5.28-11.793-11.793-11.793C9.21 3.93 3.93 9.21 3.93 15.725c0 6.513 5.28 11.793 11.794 11.793z"
+            fillRule="evenodd" />
+          </symbol>
+          <symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-clear-2" viewBox="0 0 20 20">
+            <path d="M8.96 10L.52 1.562 0 1.042 1.04 0l.522.52L10 8.96 18.438.52l.52-.52L20 1.04l-.52.522L11.04 10l8.44 8.438.52.52L18.96 20l-.522-.52L10 11.04l-8.438 8.44-.52.52L0 18.96l.52-.522L8.96 10z" fillRule="evenodd" />
+          </symbol>
+        </svg>
+
+        <div role="search" className="sbx-custom__wrapper">
+          <input type="search" name="search" placeholder={placeholder} autoComplete="off" required="required" className="sbx-custom__input" onChange={e => onChange(e.target.value)} ref={i => { this.input = i; }} />
+          <button type="submit" title="Submit your search query." className="sbx-custom__submit">
+            <svg role="img" aria-label="Search">
+              <use xlinkHref="#sbx-icon-search-12"></use>
+            </svg>
+          </button>
+          <button type="reset" title="Clear the search query." className="sbx-custom__reset">
+            <svg role="img" aria-label="Reset">
+              <use xlinkHref="#sbx-icon-clear-2"></use>
+            </svg>
+          </button>
+        </div>
+      </form>
+    );
+  }
+}

src/components/Template.js

@@ -8,7 +8,7 @@ import hogan from 'hogan.js';
 
 import isEqual from 'lodash/isEqual';
 
-export class Template extends React.Component {
+export class PureTemplate extends React.Component {
   shouldComponentUpdate(nextProps) {
     return !isEqual(this.props.data, nextProps.data) || this.props.templateKey !== nextProps.templateKey;
   }
@@ -39,7 +39,7 @@ export class Template extends React.Component {
   }
 }
 
-Template.propTypes = {
+PureTemplate.propTypes = {
   data: React.PropTypes.object,
   rootProps: React.PropTypes.object,
   templateKey: React.PropTypes.string,
@@ -67,7 +67,7 @@ Template.propTypes = {
   useCustomCompileOptions: React.PropTypes.objectOf(React.PropTypes.bool),
 };
 
-Template.defaultProps = {
+PureTemplate.defaultProps = {
   data: {},
   useCustomCompileOptions: {},
   templates: {},
@@ -150,4 +150,4 @@ const withTransformData =
       />;
     };
 
-export default withTransformData(Template);
+export default withTransformData(PureTemplate);

src/components/__tests__/Template-test.js

@@ -4,7 +4,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import expect from 'expect';
 import TestUtils from 'react-addons-test-utils';
-import TemplateWithTransformData, {Template} from '../Template';
+import TemplateWithTransformData, {PureTemplate} from '../Template';
 import sinon from 'sinon';
 import expectJSX from 'expect-jsx';
 expect.extend(expectJSX);
@@ -25,7 +25,7 @@ describe('Template', () => {
         data: {type: 'strings'},
       });
 
-      renderer.render(<Template {...props} />);
+      renderer.render(<PureTemplate {...props} />);
       const out = renderer.getRenderOutput();
 
       const content = 'it works with strings';
@@ -38,7 +38,7 @@ describe('Template', () => {
         data: {type: 'functions'},
       });
 
-      renderer.render(<Template {...props} />);
+      renderer.render(<PureTemplate {...props} />);
       const out = renderer.getRenderOutput();
 
       const content = 'it also works with functions';
@@ -51,7 +51,7 @@ describe('Template', () => {
         data: {type: 'functions'},
       });
 
-      renderer.render(<Template {...props} />);
+      renderer.render(<PureTemplate {...props} />);
       const out = renderer.getRenderOutput();
 
       const content = 'it also works with functions';
@@ -66,7 +66,7 @@ describe('Template', () => {
         templatesConfig: {compileOptions: {delimiters: '<% %>'}},
       });
 
-      renderer.render(<Template {...props} />);
+      renderer.render(<PureTemplate {...props} />);
       const out = renderer.getRenderOutput();
 
       const content = 'it configures compilation delimiters';
@@ -82,7 +82,7 @@ describe('Template', () => {
         templatesConfig: {helpers: {emphasis: (text, render) => `<em>${render(text)}</em>`}},
       });
 
-      renderer.render(<Template {...props} />);
+      renderer.render(<PureTemplate {...props} />);
       const out = renderer.getRenderOutput();
 
       const content = 'it supports <em>helpers</em>';
@@ -105,7 +105,7 @@ describe('Template', () => {
         },
       });
 
-      renderer.render(<Template {...props} />);
+      renderer.render(<PureTemplate {...props} />);
     });
   });
 
@@ -123,7 +123,7 @@ describe('Template', () => {
       renderer.render(<TemplateWithTransformData {...props} />);
 
       const out = renderer.getRenderOutput();
-      const expectedJSX = <Template {...props} data={{feature: 'transformData'}} />;
+      const expectedJSX = <PureTemplate {...props} data={{feature: 'transformData'}} />;
 
       expect(out).toEqualJSX(expectedJSX);
     });
@@ -140,7 +140,7 @@ describe('Template', () => {
       renderer.render(<TemplateWithTransformData {...props} />);
 
       const out = renderer.getRenderOutput();
-      const expectedJSX = <Template {...props} data={{test: 'transformData'}} />;
+      const expectedJSX = <PureTemplate {...props} data={{test: 'transformData'}} />;
 
       expect(out).toEqualJSX(expectedJSX);
     });
@@ -228,7 +228,7 @@ describe('Template', () => {
     function fn() {}
 
     const props = getProps({});
-    renderer.render(<Template rootProps={{className: 'hey', onClick: fn}} {...props}/>);
+    renderer.render(<PureTemplate rootProps={{className: 'hey', onClick: fn}} {...props}/>);
 
     const out = renderer.getRenderOutput();
     const expectedProps = {
@@ -249,25 +249,25 @@ describe('Template', () => {
       props = getProps({
         data: {hello: 'mom'},
       });
-      component = ReactDOM.render(<Template {...props} />, container);
+      component = ReactDOM.render(<PureTemplate {...props} />, container);
       sinon.spy(component, 'render');
     });
 
     it('does not call render when no change in data', () => {
-      ReactDOM.render(<Template {...props} />, container);
+      ReactDOM.render(<PureTemplate {...props} />, container);
       expect(component.render.called).toBe(false);
     });
 
     it('calls render when data changes', () => {
       props.data = {hello: 'dad'};
-      ReactDOM.render(<Template {...props} />, container);
+      ReactDOM.render(<PureTemplate {...props} />, container);
       expect(component.render.called).toBe(true);
     });
 
     it('calls render when templateKey changes', () => {
       props.templateKey += '-rerender';
       props.templates = {[props.templateKey]: ''};
-      ReactDOM.render(<Template {...props} />, container);
+      ReactDOM.render(<PureTemplate {...props} />, container);
       expect(component.render.called).toBe(true);
     });
   });