feat(numericRefinementList): create numericRefinementList widget usin…

…g refinementList component

components/RefinementList/RefinementList.js

@@ -35,7 +35,14 @@ class RefinementList extends React.Component {
       [this.props.cssClasses.active]: facetValue.isRefined
     });
 
-    let key = facetValue[this.props.facetNameKey] + '/' + facetValue.isRefined + '/' + facetValue.count;
+    let key = facetValue[this.props.facetNameKey];
+    if (facetValue.count !== undefined) {
+      key += '/' + facetValue.isRefined;
+    }
+
+    if (facetValue.count !== undefined) {
+      key += '/' + facetValue.count;
+    }
     return (
       <div
         className={cssClassItem}
@@ -79,7 +86,8 @@ class RefinementList extends React.Component {
     let parent = e.target;
 
     while (parent !== e.currentTarget) {
-      if (parent.tagName === 'LABEL' && parent.querySelector('input[type="checkbox"]')) {
+      if (parent.tagName === 'LABEL' && (parent.querySelector('input[type="checkbox"]')
+          || parent.querySelector('input[type="radio"]'))) {
         return;
       }
 

components/RefinementList/__tests__/RefinementList-test.js

@@ -56,8 +56,8 @@ describe('RefinementList', () => {
         </div>
       </div>
     );
-    expect(out.props.children[0].key).toEqual('facet1/undefined/undefined');
-    expect(out.props.children[1].key).toEqual('facet2/undefined/undefined');
+    expect(out.props.children[0].key).toEqual('facet1');
+    expect(out.props.children[1].key).toEqual('facet2');
   });
 
   it('should render default list highlighted', () => {

dev/app.js

@@ -92,6 +92,30 @@ search.addWidget(
   })
 );
 
+search.addWidget(
+  instantsearch.widgets.numericRefinementList({
+    container: '#price-numeric-list',
+    attributeName: 'price',
+    operator: 'or',
+    options: [
+      {name: 'All'},
+      {end: 4, name: 'less than 4'},
+      {start: 4, end: 4, name: '4'},
+      {start: 5, end: 10, name: 'between 5 and 10'},
+      {start: 10, name: 'more than 10'}
+    ],
+    cssClasses: {
+      header: 'facet-title',
+      link: 'facet-value',
+      count: 'facet-count pull-right',
+      active: 'facet-active'
+    },
+    templates: {
+      header: 'Price numeric list'
+    }
+  })
+);
+
 search.addWidget(
   instantsearch.widgets.refinementList({
     container: '#price-range',
@@ -187,4 +211,22 @@ search.once('render', function() {
   document.querySelector('.search').className = 'row search search--visible';
 });
 
+search.addWidget(
+  instantsearch.widgets.priceRanges({
+    container: '#price-ranges',
+    attributeName: 'price',
+    templates: {
+      header: 'Price ranges'
+    },
+    cssClasses: {
+      header: 'facet-title',
+      body: 'nav nav-stacked',
+      range: 'facet-value',
+      form: '',
+      input: 'fixed-input-sm',
+      button: 'btn btn-default btn-sm'
+    }
+  })
+);
+
 search.start();

dev/index.html

@@ -28,6 +28,7 @@ <h1><a href="./">Instant search demo</a> <small>using instantsearch.js</small></
         <div class="facet" id="price"></div>
         <div class="facet" id="categories"></div>
         <div class="facet" id="price-ranges"></div>
+        <div class="facet" id="price-numeric-list"></div>
       </div>
       <div class="col-md-9">
         <div class="form-group">

dev/style.css

@@ -110,3 +110,7 @@ body {
 .ais-price-ranges .ais-price-ranges--input{
   width: 65px;
 }
+
+.ais-refinement-list--label input[type=radio]{
+  margin: 4px 8px 0 0;
+}

docs/_includes/widget-jsdoc/numericRefinementList.md

@@ -0,0 +1,22 @@
+| Param | Description |
+| --- | --- |
+|  <span class='attr-required'>`options.container`</span> | CSS Selector or DOMElement to insert the widget |
+|  <span class='attr-required'>`options.attributeName`</span> | Name of the attribute for filtering |
+|  <span class='attr-optional'>`options.cssClasses`</span> | CSS classes to add to the wrapping elements: root, list, item |
+|  <span class='attr-optional'>`options.cssClasses.root`</span> | CSS class to add to the root element |
+|  <span class='attr-optional'>`options.cssClasses.header`</span> | CSS class to add to the header element |
+|  <span class='attr-optional'>`options.cssClasses.body`</span> | CSS class to add to the body element |
+|  <span class='attr-optional'>`options.cssClasses.footer`</span> | CSS class to add to the footer element |
+|  <span class='attr-optional'>`options.cssClasses.list`</span> | CSS class to add to the list element |
+|  <span class='attr-optional'>`options.cssClasses.label`</span> | CSS class to add to each link element |
+|  <span class='attr-optional'>`options.cssClasses.item`</span> | CSS class to add to each item element |
+|  <span class='attr-optional'>`options.cssClasses.radio`</span> | CSS class to add to each radio element (when using the default template) |
+|  <span class='attr-optional'>`options.cssClasses.active`</span> | CSS class to add to each active element |
+|  <span class='attr-optional'>`options.templates`</span> | Templates to use for the widget |
+|  <span class='attr-optional'>`options.templates.header`</span> | Header template |
+|  <span class='attr-optional'>`options.templates.item`</span> | Item template, provided with `name`, `count`, `isRefined` |
+|  <span class='attr-optional'>`options.templates.footer`</span> | Footer template |
+|  <span class='attr-optional'>`options.transformData`</span> | Function to change the object passed to the item template |
+|  <span class='attr-optional'>`hideContainerWhenNoResults`</span> | Hide the container when there's no results |
+
+<p class="attr-legend">* <span>Required</span></p>

docs/documentation.md

@@ -532,6 +532,54 @@ results that have either the value `a` or `b` will match.
 
 <div  id="brands" class="widget-container"></div>
 
+#### numericRefinementList
+
+<div class="code-box">
+  <div class="code-sample-snippet">
+{% highlight javascript %}
+search.addWidget(
+  instantsearch.widgets.numericRefinementList({
+    container: '#popularity',
+    attributeName: 'popularity',
+    options: [
+	  {name: 'All'},
+	  {end: 4, name: 'less than 4'},
+	  {start: 4, end: 4, name: '4'},
+	  {start: 5, end: 10, name: 'between 5 and 10'},
+	  {start: 10, name: 'more than 10'}
+    ],
+    templates: {
+      header: 'Price'
+    },
+    cssClasses: {
+      root: '',
+      header: '',
+      body: '',
+      footer: '',
+      list: '',
+      link: '',
+      active: ''
+    }
+  })
+);
+{% endhighlight %}
+  </div>
+  <div class="jsdoc" style='display:none'>
+{% highlight javascript %}
+instantsearch.widgets.numericRefinementList(options);
+{% endhighlight %}
+
+{% include widget-jsdoc/refinementList.md %}
+  </div>
+</div>
+
+<img class="widget-icon pull-left" src="../img/icon-widget-refinement.svg">
+This filtering widget lets the user choose one or multiple values for a single faceted attribute. You can specify if you want to filters to be ORed or ANDed. For example, if you filter on `a` and `b` with `OR`, the
+results that have either the value `a` or `b` will match.
+{:.description}
+
+<div  id="popularity" class="widget-container"></div>
+
 #### toggle
 
 <div class="code-box">