feat(range-slider): use rheostat as slider component (#2142)

* feat(range-slider): use `rheostat` as slider component
* doc(range-slider): widget documentation
* doc(migration): add note about new range slider
* refactor(Slider): `_.range` never includes max value
* doc(range-slider): missing usage options
* fix(range-slider): set default templates

Author: Maxime Janton

docgen/src/guides/migration.md

@@ -88,6 +88,17 @@ As of now, we consider the engine used to build the widgets in InstantSearch.js
 as an implementation detail. Since we do not expose it anymore, we'll be able
 to change it and use the best solution for each release.
 
+## RangeSlider widget is using Rheostat as Slider Component
+
+Slider compoments are hard to implement and that's why we rely on an external
+component for that. We are taking the opportunity of this new version
+to switch to the current state of the art of sliders: [Rheostat](https://github.com/airbnb/rheostat).
+
+If you want to customize the style, some CSS classes have changed. You can find
+examples of stylesheets by clicking [here](https://github.com/airbnb/rheostat/tree/master/css).
+
+We are still providing a look which is similar as the one in the V1.
+
 ## searchFunction can be used to modify parameters
 
 Introduced in 1.3.0, `searchFunction` was originally meant as a way to modify

package.json

@@ -108,7 +108,7 @@
     "lodash": "^4.17.4",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
-    "react-nouislider": "^1.14.2",
+    "rheostat": "^2.1.0",
     "to-factory": "^1.0.0"
   },
   "license": "MIT"

src/components/Slider/Pit.js

@@ -0,0 +1,34 @@
+import React, {PropTypes} from 'react';
+import cx from 'classnames';
+
+const Pit = ({style, children}) => {
+  // first, end & middle
+  const positionValue = Math.round(parseFloat(style.left));
+  const shouldDisplayValue = [0, 50, 100].includes(positionValue);
+
+  return (
+    <div
+      style={ {...style, marginLeft: positionValue === 100 ? '-2px' : 0} }
+      className={ cx('ais-range-slider--marker ais-range-slider--marker-horizontal', {
+        'ais-range-slider--marker-large': shouldDisplayValue,
+      }) }
+    >
+      { shouldDisplayValue
+          ? <div className="ais-range-slider--value">{ Math.round(children * 100) / 100 }</div>
+          : null }
+    </div>
+  );
+};
+
+Pit.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.number.isRequired,
+    PropTypes.string.isRequired,
+  ]),
+  style: PropTypes.shape({
+    position: PropTypes.string.isRequired,
+    left: PropTypes.string.isRequired,
+  }),
+};
+
+export default Pit;

src/components/Slider/Slider.js

@@ -1,92 +1,98 @@
-import React from 'react';
-import omit from 'lodash/omit';
+import times from 'lodash/times';
+import range from 'lodash/range';
+import has from 'lodash/has';
 
-import Nouislider from 'react-nouislider';
+import React, {Component, PropTypes} from 'react';
+import Rheostat from 'rheostat';
+import cx from 'classnames';
 
-const cssPrefix = 'ais-range-slider--';
-
-import isEqual from 'lodash/isEqual';
+import Pit from './Pit.js';
 
 import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
 import headerFooterHOC from '../../decorators/headerFooter.js';
 
-export class RawSlider extends React.Component {
-  componentWillMount() {
-    this.handleChange = this.handleChange.bind(this);
+class Slider extends Component {
+
+  static propTypes = {
+    refine: PropTypes.func.isRequired,
+    min: PropTypes.number.isRequired,
+    max: PropTypes.number.isRequired,
+    values: PropTypes.arrayOf(PropTypes.number).isRequired,
+    pips: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.object,
+    ]),
+    step: PropTypes.number.isRequired,
+    tooltips: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.shape({format: PropTypes.func.isRequired}),
+    ]),
   }
 
-  shouldComponentUpdate(nextProps) {
-    return !isEqual(this.props.range, nextProps.range) ||
-      !isEqual(this.props.start, nextProps.start);
+  handleChange = ({values}) => {
+    const {refine} = this.props;
+    refine(values);
   }
 
-  // we are only interested in rawValues
-  handleChange(formattedValues, handleId, rawValues) {
-    this.props.onChange(rawValues);
+  // creates an array number where to display a pit point on the slider
+  computeDefaultPitPoints({min, max}) {
+    const totalLength = max - min;
+    const steps = 34;
+    const stepsLength = totalLength / steps;
+
+    const pitPoints = [min, ...times(steps - 1, step => min + stepsLength * (step + 1)), max]
+      // bug with `key={ 0 }` and preact, see https://github.com/developit/preact/issues/642
+      .map(pitPoint => pitPoint === 0 ? 0.00001 : pitPoint);
+
+    return pitPoints;
+  }
+
+  // creates an array of values where the slider should snap to
+  computeSnapPoints({min, max, step}) {
+    return [...range(min, max, step), max];
+  }
+
+  createHandleComponent = tooltips => props => {
+    const value = has(tooltips, 'format')
+      ? tooltips.format(props['aria-valuenow'])
+      : props['aria-valuenow'];
+
+    return (
+      <div
+        {...props}
+        className={ cx('ais-range-slider--handle', props.className)}
+      >
+        { tooltips
+            ? <div className="ais-range-slider--tooltip">{value}</div>
+            : null }
+      </div>
+    );
   }
 
   render() {
-    // display a `disabled` state of the `NoUiSlider` when range.min === range.max
-    const {range: {min, max}} = this.props;
-    const isDisabled = min === max;
-
-    // when range.min === range.max, we only want to add a little more to the max
-    // to display the same value in the UI, but the `NoUiSlider` wont
-    // throw an error since they are not the same value.
-    const range = isDisabled
-      ? {min, max: min + 0.0001}
-      : {min, max};
-
-    // setup pips
-    let pips;
-    if (this.props.pips === false) {
-      pips = undefined;
-    } else if (this.props.pips === true || typeof this.props.pips === 'undefined') {
-      pips = {
-        mode: 'positions',
-        density: 3,
-        values: [0, 50, 100],
-        stepped: true,
-      };
-    } else {
-      pips = this.props.pips;
-    }
+    const {tooltips, step, pips, values, min, max} = this.props;
+
+    const snapPoints = this.computeSnapPoints({min, max, step});
+    const pitPoints = pips === true || pips === undefined || pips === false
+      ? this.computeDefaultPitPoints({min, max})
+      : pips;
 
     return (
-      <Nouislider
-        // NoUiSlider also accepts a cssClasses prop, but we don't want to
-        // provide one.
-        {...omit(this.props, ['cssClasses', 'range'])}
-        animate={false}
-        behaviour={'snap'}
-        connect
-        cssPrefix={cssPrefix}
-        onChange={this.handleChange}
-        range={range}
-        disabled={isDisabled}
-        pips={pips}
+      <Rheostat
+        handle={ this.createHandleComponent(tooltips) }
+        onChange={ this.handleChange }
+        min={ min }
+        max={ max }
+        pitComponent={ Pit }
+        pitPoints={ pitPoints }
+        snap={ true }
+        snapPoints={ snapPoints }
+        values={ values }
+        disabled={ min === max }
       />
     );
   }
+
 }
 
-RawSlider.propTypes = {
-  onChange: React.PropTypes.func,
-  onSlide: React.PropTypes.func,
-  pips: React.PropTypes.oneOfType([
-    React.PropTypes.bool,
-    React.PropTypes.object,
-  ]),
-  range: React.PropTypes.object.isRequired,
-  start: React.PropTypes.arrayOf(React.PropTypes.number).isRequired,
-  tooltips: React.PropTypes.oneOfType([
-    React.PropTypes.bool,
-    React.PropTypes.arrayOf(
-      React.PropTypes.shape({
-        to: React.PropTypes.func,
-      })
-    ),
-  ]),
-};
-
-export default autoHideContainerHOC(headerFooterHOC(RawSlider));
+export default autoHideContainerHOC(headerFooterHOC(Slider));

src/components/Slider/__tests__/Slider-test.js

@@ -1,76 +1,23 @@
-import React from 'react';
-import expect from 'expect';
-import TestUtils from 'react-addons-test-utils';
-import expectJSX from 'expect-jsx';
-import {RawSlider as Slider} from '../Slider';
-import Nouislider from 'react-nouislider';
-expect.extend(expectJSX);
-
-describe('Slider', () => {
-   // to ensure the global.window is set
 
-  let renderer;
-  let props;
-
-  beforeEach(() => {
-    const {createRenderer} = TestUtils;
-    renderer = createRenderer();
-
-    props = {
-      range: {min: 0, max: 5000},
-      format: {to: () => {}, from: () => {}},
-      start: [0, 0],
-    };
-  });
+import React from 'react';
+import renderer from 'react-test-renderer';
 
-  it('should render <NouiSlider {...props} />', () => {
-    const out = render();
-    expect(out).toEqualJSX(
-      <Nouislider
-        animate={false}
-        behaviour="snap"
-        connect
-        cssPrefix="ais-range-slider--"
-        format={{to: () => {}, from: () => {}}}
-        onChange={() => {}}
-        pips={{
-          density: 3,
-          mode: 'positions',
-          stepped: true,
-          values: [0, 50, 100],
-        }}
-        range={props.range}
-        start={ props.start }
-      />
-    );
-  });
+import Slider from '../Slider';
 
-  it('should render <NouisLider disabled="true" /> when ranges are equal', () => {
-    props.range.min = props.range.max = 8;
-    const out = render();
-    expect(out).toEqualJSX(
-      <Nouislider
-        animate={ false }
-        behaviour="snap"
-        connect
-        cssPrefix="ais-range-slider--"
-        format={ {to: () => {}, from: () => {}} }
-        onChange={ () => {} }
-        pips={ {
-          density: 3,
-          mode: 'positions',
-          stepped: true,
-          values: [0, 50, 100],
-        } }
-        range={ {min: props.range.min, max: props.range.min + 0.0001} }
-        start={ props.start }
-        disabled
+describe('Slider', () => {
+  it('should render correctly', () => {
+    const tree = renderer.create(
+      <Slider
+        refine={ () => undefined }
+        min={ 0 }
+        max={ 500 }
+        values={ [0, 0] }
+        pips={ true }
+        step={ 2 }
+        tooltips={ true }
+        shouldAutoHideContainer={ false }
       />
-    );
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
   });
-
-  function render() {
-    renderer.render(<Slider {...props} />);
-    return renderer.getRenderOutput();
-  }
 });