From a3dc950e49adf084b0fd5fccf0e00924406a46a9 Mon Sep 17 00:00:00 2001
From: Marie-Laure Thuret <mthuret@users.noreply.github.com>
Date: Fri, 10 Feb 2017 09:17:04 +0100
Subject: [PATCH] feat(MultiRange): add an all range (#1959)

BREAKING CHANGE:
- MultiRange/connectMultiRange: will add a "All" range to allow unselection of range without the usage of CurrentRefinements. This range can be either filtered or ramove via CSS if not needed. The label can be changed by using our translations system.
---
 .../src/components/MultiRange.js              |  14 +-
 .../src/components/MultiRange.test.js         |  22 ++-
 .../__snapshots__/MultiRange.test.js.snap     | 159 +++++++++++++++++-
 .../src/connectors/connectMultiRange.js       |  13 ++
 .../src/connectors/connectMultiRange.test.js  | 116 +++++++------
 .../src/widgets/MultiRange.js                 |   2 +
 6 files changed, 260 insertions(+), 66 deletions(-)

diff --git a/packages/react-instantsearch/src/components/MultiRange.js b/packages/react-instantsearch/src/components/MultiRange.js
index 524df96e97..c6ac0b0bc7 100644
--- a/packages/react-instantsearch/src/components/MultiRange.js
+++ b/packages/react-instantsearch/src/components/MultiRange.js
@@ -1,6 +1,7 @@
 import React, {PropTypes, Component} from 'react';
 import List from './List';
 import classNames from './classNames.js';
+import translatable from '../core/translatable';
 
 const cx = classNames('MultiRange');
 
@@ -15,6 +16,7 @@ class MultiRange extends Component {
     refine: PropTypes.func.isRequired,
     transformItems: PropTypes.func,
     canRefine: PropTypes.bool.isRequired,
+    translate: PropTypes.func.isRequired,
   };
 
   static contextTypes = {
@@ -30,10 +32,10 @@ class MultiRange extends Component {
   }
 
   renderItem = item => {
-    const {refine} = this.props;
-
+    const {refine, translate} = this.props;
+    const label = item.value === '' ? translate('all') : item.label;
     return (
-      <label>
+      <label {...cx(item.value === '' && 'itemAll')}>
         <input
           {...cx('itemRadio', item.isRefined && 'itemRadioSelected')}
           type="radio"
@@ -43,7 +45,7 @@ class MultiRange extends Component {
         />
         <span {...cx('itemBox', 'itemBox', item.isRefined && 'itemBoxSelected')}></span>
         <span {...cx('itemLabel', 'itemLabel', item.isRefined && 'itemLabelSelected')}>
-          {item.label}
+          {label}
         </span>
       </label>
     );
@@ -64,4 +66,6 @@ class MultiRange extends Component {
   }
 }
 
-export default MultiRange;
+export default translatable({
+  all: 'All',
+})(MultiRange);
diff --git a/packages/react-instantsearch/src/components/MultiRange.test.js b/packages/react-instantsearch/src/components/MultiRange.test.js
index 7af5094629..7d12b5e108 100644
--- a/packages/react-instantsearch/src/components/MultiRange.test.js
+++ b/packages/react-instantsearch/src/components/MultiRange.test.js
@@ -17,6 +17,7 @@ describe('MultiRange', () => {
           {label: 'label2', value: '10:20', isRefined: false, noRefinement: false},
           {label: 'label3', value: '20:30', isRefined: false, noRefinement: false},
           {label: 'label4', value: '30:', isRefined: false, noRefinement: false},
+          {label: 'All', value: '', isRefined: true, noRefinement: false},
         ]}
         canRefine={true}
       />
@@ -34,6 +35,25 @@ describe('MultiRange', () => {
           {label: 'label2', value: '10:20', isRefined: true, noRefinement: false},
           {label: 'label3', value: '20:30', isRefined: false, noRefinement: false},
           {label: 'label4', value: '30:', isRefined: false, noRefinement: false},
+          {label: 'All', value: '', isRefined: false, noRefinement: false},
+        ]}
+        canRefine={true}
+      />
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('no refinements', () => {
+    const tree = renderer.create(
+      <MultiRange
+        createURL={() => '#'}
+        refine={() => null}
+        items={[
+          {label: 'label1', value: '10:', isRefined: false, noRefinement: true},
+          {label: 'label2', value: '10:20', isRefined: false, noRefinement: true},
+          {label: 'label3', value: '20:30', isRefined: false, noRefinement: true},
+          {label: 'label4', value: '30:', isRefined: false, noRefinement: true},
+          {label: 'All', value: '', isRefined: true, noRefinement: false},
         ]}
         canRefine={true}
       />
@@ -47,7 +67,7 @@ describe('MultiRange', () => {
         <MultiRange
           refine={refine}
           items={[
-            {label: 'label', value: '10:', isRefined: false, noRefinement: false},
+          {label: 'label', value: '10:', isRefined: false, noRefinement: false},
             {label: 'label', value: '10:20', isRefined: false, noRefinement: false},
             {label: 'label', value: '20:30', isRefined: false, noRefinement: false},
             {label: 'label', value: '30:', isRefined: false, noRefinement: false},
diff --git a/packages/react-instantsearch/src/components/__snapshots__/MultiRange.test.js.snap b/packages/react-instantsearch/src/components/__snapshots__/MultiRange.test.js.snap
index a4ec867653..9b7fcb2f3e 100644
--- a/packages/react-instantsearch/src/components/__snapshots__/MultiRange.test.js.snap
+++ b/packages/react-instantsearch/src/components/__snapshots__/MultiRange.test.js.snap
@@ -1,3 +1,102 @@
+exports[`MultiRange no refinements 1`] = `
+<div
+  className="ais-MultiRange__root">
+  <div
+    className="ais-MultiRange__items">
+    <div
+      className="ais-MultiRange__item ais-MultiRange__itemNoRefinement">
+      <label
+        className="">
+        <input
+          checked={false}
+          className="ais-MultiRange__itemRadio"
+          disabled={true}
+          onChange={[Function]}
+          type="radio" />
+        <span
+          className="ais-MultiRange__itemBox ais-MultiRange__itemBox" />
+        <span
+          className="ais-MultiRange__itemLabel ais-MultiRange__itemLabel">
+          label1
+        </span>
+      </label>
+    </div>
+    <div
+      className="ais-MultiRange__item ais-MultiRange__itemNoRefinement">
+      <label
+        className="">
+        <input
+          checked={false}
+          className="ais-MultiRange__itemRadio"
+          disabled={true}
+          onChange={[Function]}
+          type="radio" />
+        <span
+          className="ais-MultiRange__itemBox ais-MultiRange__itemBox" />
+        <span
+          className="ais-MultiRange__itemLabel ais-MultiRange__itemLabel">
+          label2
+        </span>
+      </label>
+    </div>
+    <div
+      className="ais-MultiRange__item ais-MultiRange__itemNoRefinement">
+      <label
+        className="">
+        <input
+          checked={false}
+          className="ais-MultiRange__itemRadio"
+          disabled={true}
+          onChange={[Function]}
+          type="radio" />
+        <span
+          className="ais-MultiRange__itemBox ais-MultiRange__itemBox" />
+        <span
+          className="ais-MultiRange__itemLabel ais-MultiRange__itemLabel">
+          label3
+        </span>
+      </label>
+    </div>
+    <div
+      className="ais-MultiRange__item ais-MultiRange__itemNoRefinement">
+      <label
+        className="">
+        <input
+          checked={false}
+          className="ais-MultiRange__itemRadio"
+          disabled={true}
+          onChange={[Function]}
+          type="radio" />
+        <span
+          className="ais-MultiRange__itemBox ais-MultiRange__itemBox" />
+        <span
+          className="ais-MultiRange__itemLabel ais-MultiRange__itemLabel">
+          label4
+        </span>
+      </label>
+    </div>
+    <div
+      className="ais-MultiRange__item ais-MultiRange__itemSelected">
+      <label
+        className="ais-MultiRange__itemAll">
+        <input
+          checked={true}
+          className="ais-MultiRange__itemRadio ais-MultiRange__itemRadioSelected"
+          disabled={false}
+          onChange={[Function]}
+          type="radio" />
+        <span
+          className="ais-MultiRange__itemBox ais-MultiRange__itemBox ais-MultiRange__itemBoxSelected" />
+        <span
+          className="ais-MultiRange__itemLabel ais-MultiRange__itemLabel ais-MultiRange__itemLabelSelected">
+          All
+        </span>
+      </label>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`MultiRange supports having a selected item 1`] = `
 <div
   className="ais-MultiRange__root">
@@ -5,7 +104,8 @@ exports[`MultiRange supports having a selected item 1`] = `
     className="ais-MultiRange__items">
     <div
       className="ais-MultiRange__item">
-      <label>
+      <label
+        className="">
         <input
           checked={false}
           className="ais-MultiRange__itemRadio"
@@ -22,7 +122,8 @@ exports[`MultiRange supports having a selected item 1`] = `
     </div>
     <div
       className="ais-MultiRange__item ais-MultiRange__itemSelected">
-      <label>
+      <label
+        className="">
         <input
           checked={true}
           className="ais-MultiRange__itemRadio ais-MultiRange__itemRadioSelected"
@@ -39,7 +140,8 @@ exports[`MultiRange supports having a selected item 1`] = `
     </div>
     <div
       className="ais-MultiRange__item">
-      <label>
+      <label
+        className="">
         <input
           checked={false}
           className="ais-MultiRange__itemRadio"
@@ -56,7 +158,8 @@ exports[`MultiRange supports having a selected item 1`] = `
     </div>
     <div
       className="ais-MultiRange__item">
-      <label>
+      <label
+        className="">
         <input
           checked={false}
           className="ais-MultiRange__itemRadio"
@@ -71,6 +174,24 @@ exports[`MultiRange supports having a selected item 1`] = `
         </span>
       </label>
     </div>
+    <div
+      className="ais-MultiRange__item">
+      <label
+        className="ais-MultiRange__itemAll">
+        <input
+          checked={false}
+          className="ais-MultiRange__itemRadio"
+          disabled={false}
+          onChange={[Function]}
+          type="radio" />
+        <span
+          className="ais-MultiRange__itemBox ais-MultiRange__itemBox" />
+        <span
+          className="ais-MultiRange__itemLabel ais-MultiRange__itemLabel">
+          All
+        </span>
+      </label>
+    </div>
   </div>
 </div>
 `;
@@ -82,7 +203,8 @@ exports[`MultiRange supports passing items values 1`] = `
     className="ais-MultiRange__items">
     <div
       className="ais-MultiRange__item">
-      <label>
+      <label
+        className="">
         <input
           checked={false}
           className="ais-MultiRange__itemRadio"
@@ -99,7 +221,8 @@ exports[`MultiRange supports passing items values 1`] = `
     </div>
     <div
       className="ais-MultiRange__item">
-      <label>
+      <label
+        className="">
         <input
           checked={false}
           className="ais-MultiRange__itemRadio"
@@ -116,7 +239,8 @@ exports[`MultiRange supports passing items values 1`] = `
     </div>
     <div
       className="ais-MultiRange__item">
-      <label>
+      <label
+        className="">
         <input
           checked={false}
           className="ais-MultiRange__itemRadio"
@@ -133,7 +257,8 @@ exports[`MultiRange supports passing items values 1`] = `
     </div>
     <div
       className="ais-MultiRange__item">
-      <label>
+      <label
+        className="">
         <input
           checked={false}
           className="ais-MultiRange__itemRadio"
@@ -148,6 +273,24 @@ exports[`MultiRange supports passing items values 1`] = `
         </span>
       </label>
     </div>
+    <div
+      className="ais-MultiRange__item ais-MultiRange__itemSelected">
+      <label
+        className="ais-MultiRange__itemAll">
+        <input
+          checked={true}
+          className="ais-MultiRange__itemRadio ais-MultiRange__itemRadioSelected"
+          disabled={false}
+          onChange={[Function]}
+          type="radio" />
+        <span
+          className="ais-MultiRange__itemBox ais-MultiRange__itemBox ais-MultiRange__itemBoxSelected" />
+        <span
+          className="ais-MultiRange__itemLabel ais-MultiRange__itemLabel ais-MultiRange__itemLabelSelected">
+          All
+        </span>
+      </label>
+    </div>
   </div>
 </div>
 `;
diff --git a/packages/react-instantsearch/src/connectors/connectMultiRange.js b/packages/react-instantsearch/src/connectors/connectMultiRange.js
index 32611ad3b1..46ef4f9e2e 100644
--- a/packages/react-instantsearch/src/connectors/connectMultiRange.js
+++ b/packages/react-instantsearch/src/connectors/connectMultiRange.js
@@ -87,6 +87,7 @@ export default createConnector({
   },
 
   getProvidedProps(props, searchState, searchResults) {
+    const attributeName = props.attributeName;
     const currentRefinement = getCurrentRefinement(props, searchState);
     const items = props.items.map(item => {
       const value = stringifyItem(item);
@@ -99,6 +100,18 @@ export default createConnector({
       };
     });
 
+    const stats = searchResults.results && searchResults.results.getFacetByName(attributeName) ?
+      searchResults.results.getFacetStats(attributeName) : null;
+    const refinedItem = find(items, item => item.isRefined === true);
+    if (!items.some(item => item.value === '')) {
+      items.push({
+        value: '',
+        isRefined: isEmpty(refinedItem),
+        noRefinement: !stats,
+        label: 'All',
+      });
+    }
+
     return {
       items: props.transformItems ? props.transformItems(items) : items,
       currentRefinement,
diff --git a/packages/react-instantsearch/src/connectors/connectMultiRange.test.js b/packages/react-instantsearch/src/connectors/connectMultiRange.test.js
index fd54d98659..f718f6df52 100644
--- a/packages/react-instantsearch/src/connectors/connectMultiRange.test.js
+++ b/packages/react-instantsearch/src/connectors/connectMultiRange.test.js
@@ -17,20 +17,29 @@ let props;
 let params;
 
 describe('connectMultiRange', () => {
-  it('provides the correct props to the component', () => {
-    let results = {
-      getFacetStats: () => ({min: 0, max: 300}),
-      getFacetByName: () => true,
-    };
+  const results = {
+    getFacetStats: () => ({min: 0, max: 300}),
+    getFacetByName: () => true,
+  };
 
+  it('provides the correct props to the component', () => {
     props = getProvidedProps({
+      items: [],
+    }, {}, {results});
+    expect(props).toEqual({
       items: [
-        {label: 'All'},
+        {label: 'All', value: '', isRefined: true, noRefinement: false},
       ],
+      currentRefinement: '',
+      canRefine: true,
+    });
+
+    props = getProvidedProps({
+      items: [{label: 'ALL'}],
     }, {}, {results});
     expect(props).toEqual({
       items: [
-        {label: 'All', value: '', isRefined: true, noRefinement: false},
+        {label: 'ALL', value: '', isRefined: true, noRefinement: false},
       ],
       currentRefinement: '',
       canRefine: true,
@@ -38,14 +47,13 @@ describe('connectMultiRange', () => {
 
     props = getProvidedProps({
       items: [
-        {label: 'All'},
         {label: 'Ok', start: 100},
       ],
     }, {}, {results});
     expect(props).toEqual({
       items: [
-        {label: 'All', value: '', isRefined: true, noRefinement: false},
         {label: 'Ok', value: '100:', isRefined: false, noRefinement: false},
+        {label: 'All', value: '', isRefined: true, noRefinement: false},
       ],
       currentRefinement: '',
       canRefine: true,
@@ -53,14 +61,13 @@ describe('connectMultiRange', () => {
 
     props = getProvidedProps({
       items: [
-        {label: 'All'},
         {label: 'Not ok', end: 200},
       ],
     }, {}, {results});
     expect(props).toEqual({
       items: [
-        {label: 'All', value: '', isRefined: true, noRefinement: false},
         {label: 'Not ok', value: ':200', isRefined: false, noRefinement: false},
+        {label: 'All', value: '', isRefined: true, noRefinement: false},
       ],
       currentRefinement: '',
       canRefine: true,
@@ -68,7 +75,6 @@ describe('connectMultiRange', () => {
 
     props = getProvidedProps({
       items: [
-        {label: 'All'},
         {label: 'Ok', start: 100},
         {label: 'Not ok', end: 200},
         {label: 'Maybe ok?', start: 100, end: 200},
@@ -76,70 +82,76 @@ describe('connectMultiRange', () => {
     }, {}, {results});
     expect(props).toEqual({
       items: [
-        {label: 'All', value: '', isRefined: true, noRefinement: false},
         {label: 'Ok', value: '100:', isRefined: false, noRefinement: false},
         {label: 'Not ok', value: ':200', isRefined: false, noRefinement: false},
         {label: 'Maybe ok?', value: '100:200', isRefined: false, noRefinement: false},
+        {label: 'All', value: '', isRefined: true, noRefinement: false},
       ],
       currentRefinement: '',
       canRefine: true,
     });
+  });
 
-    it('no items define', () => {
-      props = getProvidedProps({attributeName: 'ok', items: []}, {multiRange: {ok: 'wat'}}, {});
-      expect(props).toEqual({items: [], currentRefinement: 'wat', canRefine: false});
+  it('no items define', () => {
+    props = getProvidedProps({attributeName: 'ok', items: []}, {multiRange: {ok: 'wat'}}, {results});
+    expect(props).toEqual({
+      items: [
+        {label: 'All', value: '', isRefined: true, noRefinement: false},
+      ],
+      currentRefinement: 'wat', canRefine: true});
 
-      props = getProvidedProps({attributeName: 'ok', items: []}, {multiRange: {ok: 'wat'}}, {});
-      expect(props).toEqual({items: [], currentRefinement: 'wat', canRefine: false});
+    props = getProvidedProps({attributeName: 'ok', items: []}, {multiRange: {ok: 'wat'}}, {});
+    expect(props).toEqual({
+      items: [
+        {label: 'All', value: '', isRefined: true, noRefinement: true},
+      ],
+      currentRefinement: 'wat', canRefine: false});
 
-      props = getProvidedProps({attributeName: 'ok', items: [], defaultRefinement: 'wat'}, {}, {});
-      expect(props).toEqual({items: [], currentRefinement: 'wat', canRefine: false});
-    });
+    props = getProvidedProps({attributeName: 'ok', items: [], defaultRefinement: 'wat'}, {}, {});
+    expect(props).toEqual({
+      items: [
+        {label: 'All', value: '', isRefined: true, noRefinement: true},
+      ], currentRefinement: 'wat', canRefine: false});
+  });
 
-    it('use the transform items props if passed', () => {
-      const transformItems = jest.fn(() => ['items']);
-      props = getProvidedProps({
-        items: [
-        {label: 'All'},
+  it('use the transform items props if passed', () => {
+    const transformItems = jest.fn(() => ['items']);
+    props = getProvidedProps({
+      items: [
         {label: 'Ok', start: 100},
         {label: 'Not ok', end: 200},
         {label: 'Maybe ok?', start: 100, end: 200},
-        ],
-        transformItems,
-      }, {}, {results});
-      expect(transformItems.mock.calls[0][0]).toEqual([
-        {label: 'All', value: '', isRefined: true, noRefinement: false},
+      ],
+      transformItems,
+    }, {}, {results});
+    expect(transformItems.mock.calls[0][0]).toEqual([
         {label: 'Ok', value: '100:', isRefined: false, noRefinement: false},
         {label: 'Not ok', value: ':200', isRefined: false, noRefinement: false},
         {label: 'Maybe ok?', value: '100:200', isRefined: false, noRefinement: false},
-      ]);
-      expect(props.items).toEqual(['items']);
-    });
-
-    it('compute the no refinement value for each item range when stats exists', () => {
-      results = {
-        getFacetStats: () => ({min: 250, max: 300}),
-        getFacetByName: () => true,
-      };
+        {label: 'All', value: '', isRefined: true, noRefinement: false},
+    ]);
+    expect(props.items).toEqual(['items']);
+  });
 
-      props = getProvidedProps({
-        items: [
+  it('compute the no refinement value for each item range when stats exists', () => {
+    props = getProvidedProps({
+      items: [
           {label: '1', start: 100},
           {label: '2', start: 400},
           {label: '3', end: 200},
           {label: '4', start: 100, end: 200},
-        ],
-      }, {}, {results});
-      expect(props).toEqual({
-        items: [
+      ],
+    }, {}, {results});
+    expect(props).toEqual({
+      items: [
           {label: '1', value: '100:', isRefined: false, noRefinement: false},
           {label: '2', value: '400:', isRefined: false, noRefinement: true},
-          {label: '3', value: ':200', isRefined: false, noRefinement: true},
-          {label: '4', value: '100:200', isRefined: false, noRefinement: true},
-        ],
-        currentRefinement: '',
-        canRefine: true,
-      });
+          {label: '3', value: ':200', isRefined: false, noRefinement: false},
+          {label: '4', value: '100:200', isRefined: false, noRefinement: false},
+          {label: 'All', value: '', isRefined: true, noRefinement: false},
+      ],
+      currentRefinement: '',
+      canRefine: true,
     });
   });
 
diff --git a/packages/react-instantsearch/src/widgets/MultiRange.js b/packages/react-instantsearch/src/widgets/MultiRange.js
index 54d04aa617..4acb2d492a 100644
--- a/packages/react-instantsearch/src/widgets/MultiRange.js
+++ b/packages/react-instantsearch/src/widgets/MultiRange.js
@@ -19,6 +19,8 @@ import MultiRangeComponent from '../components/MultiRange.js';
  * @themeKey ais-MultiRange__itemRadioSelected - The selected radio item
  * @themeKey ais-MultiRange__noRefinement - present when there is no refinement for all ranges
  * @themeKey ais-MultiRange__itemNoRefinement - present when there is no refinement for one range
+ * @themeKey ais-MultiRange__itemAll - indicate the range that will contain all the results
+ * @translationkey all - The label of the largest range added automatically by react instantsearch
  * @example
  * import React from 'react';
  *