fix(Slider): default precision to 2

There was currently no precision formatting within the Slider.

While sometime the computed interpolated value for the slider would be
23.0000003 we would refine Algolia with that and this would end up
showing in other widgets.

So we default to precision 2 within all number formatting within the
slider by default.

fixes
#1254 (comment)
and linked to https://github.com/algolia/algoliasearch-
magento/issues/546

package.json

@@ -89,7 +89,6 @@
     "classnames": "2.2.5",
     "events": "1.1.0",
     "hogan.js": "3.0.2",
-    "is-integer": "1.0.6",
     "lodash": "4.15.0",
     "react": "15.3.1",
     "react-dom": "15.3.1",

src/components/Slider/Slider.js

@@ -38,10 +38,7 @@ class Slider extends React.Component {
         mode: 'positions',
         density: 3,
         values: [0, 50, 100],
-        stepped: true,
-        format: {
-          to: this.props.pipsFormatter
-        }
+        stepped: true
       };
     } else {
       pips = this.props.pips;
@@ -51,7 +48,7 @@ class Slider extends React.Component {
       <Nouislider
         // NoUiSlider also accepts a cssClasses prop, but we don't want to
         // provide one.
-        {...omit(this.props, ['cssClasses', 'pipsFormatter'])}
+        {...omit(this.props, ['cssClasses'])}
         animate={false}
         behaviour={'snap'}
         connect
@@ -79,8 +76,7 @@ Slider.propTypes = {
         to: React.PropTypes.func
       })
     )
-  ]),
-  pipsFormatter: React.PropTypes.func.isRequired
+  ])
 };
 
 export default Slider;

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

@@ -22,7 +22,7 @@ describe('Slider', () => {
 
     props = {
       range: {min: 0, max: 5000},
-      pipsFormatter: () => {}
+      format: {to: () => {}, from: () => {}}
     };
   });
 
@@ -35,10 +35,10 @@ describe('Slider', () => {
         behaviour="snap"
         connect
         cssPrefix="ais-range-slider--"
+        format={{to: () => {}, from: () => {}}}
         onChange={() => {}}
         pips={{
           density: 3,
-          format: {to: function noRefCheck() {}},
           mode: 'positions',
           stepped: true,
           values: [0, 50, 100]

src/widgets/range-slider/__tests__/range-slider-test.js

@@ -98,7 +98,7 @@ describe('rangeSlider()', () => {
           transformData: undefined,
           useCustomCompileOptions: {footer: false, header: false}
         },
-        pipsFormatter: () => {},
+        format: {to: () => {}, from: () => {}},
         tooltips: true
       };
 
@@ -181,7 +181,7 @@ describe('rangeSlider()', () => {
           transformData: undefined,
           useCustomCompileOptions: {footer: false, header: false}
         },
-        pipsFormatter: () => {},
+        format: {to: () => {}, from: () => {}},
         tooltips: true
       };
 
@@ -243,7 +243,7 @@ describe('rangeSlider()', () => {
           transformData: undefined,
           useCustomCompileOptions: {footer: false, header: false}
         },
-        pipsFormatter: () => {},
+        format: {to: () => {}, from: () => {}},
         tooltips: true
       };
 
@@ -292,7 +292,7 @@ describe('rangeSlider()', () => {
           transformData: undefined,
           useCustomCompileOptions: {footer: false, header: false}
         },
-        pipsFormatter: () => {},
+        format: {to: () => {}, from: () => {}},
         tooltips: true
       };
 
@@ -343,7 +343,7 @@ describe('rangeSlider()', () => {
           transformData: undefined,
           useCustomCompileOptions: {footer: false, header: false}
         },
-        pipsFormatter: () => {},
+        format: {to: () => {}, from: () => {}},
         tooltips: true
       };
 

src/widgets/range-slider/range-slider.js

@@ -10,7 +10,6 @@ import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
 import headerFooterHOC from '../../decorators/headerFooter.js';
 import cx from 'classnames';
 import SliderComponent from '../../components/Slider/Slider.js';
-import isInteger from 'is-integer';
 
 const bem = bemHelper('ais-range-slider');
 const defaultTemplates = {
@@ -72,12 +71,20 @@ function rangeSlider({
     pips = true,
     autoHideContainer = true,
     min: userMin,
-    max: userMax
+    max: userMax,
+    precision = 2
   } = {}) {
   if (!container || !attributeName) {
     throw new Error(usage);
   }
 
+  const formatToNumber = v => Number(Number(v).toFixed(precision));
+
+  const sliderFormatter = {
+    from: v => v,
+    to: v => formatToNumber(v).toLocaleString()
+  };
+
   const containerNode = getContainerNode(container);
   let Slider = headerFooterHOC(SliderComponent);
   if (autoHideContainer === true) {
@@ -141,10 +148,10 @@ function rangeSlider({
     _refine(helper, oldValues, newValues) {
       helper.clearRefinements(attributeName);
       if (newValues[0] > oldValues.min) {
-        helper.addNumericRefinement(attributeName, '>=', newValues[0]);
+        helper.addNumericRefinement(attributeName, '>=', formatToNumber(newValues[0]));
       }
       if (newValues[1] < oldValues.max) {
-        helper.addNumericRefinement(attributeName, '<=', newValues[1]);
+        helper.addNumericRefinement(attributeName, '<=', formatToNumber(newValues[1]));
       }
       helper.search();
     },
@@ -162,10 +169,6 @@ function rangeSlider({
         max: null
       };
 
-      const pipsFormatter = isInteger(step) ?
-        v => Math.round(Number(v)).toLocaleString() :
-        v => Number(v).toLocaleString();
-
       if (userMin !== undefined) stats.min = userMin;
       if (userMax !== undefined) stats.max = userMax;
 
@@ -187,7 +190,7 @@ function rangeSlider({
           step={step}
           templateProps={this._templateProps}
           tooltips={tooltips}
-          pipsFormatter={pipsFormatter}
+          format={sliderFormatter}
         />,
         containerNode
       );