fix(rangeSlider): round pips numbers when step is integer (#1255)

The default rounding strategy for pips in nouislider is to use
Math.round().

We used Number(v).toLocaleString() but on safari this led to weird
results because 10.100001.toLocaleString() => '10.1000001' and on
chrome it's  '10' for example.

Thus now we will Math.round the number before passing it to
toLocaleString only if the step parameter of the slider is an integer.

We use an npm module for Number.isInteger() because no IE nor safari
version has it.

fixes #1254

Author: vvo

package.json

@@ -89,6 +89,7 @@
     "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

@@ -40,7 +40,7 @@ class Slider extends React.Component {
         values: [0, 50, 100],
         stepped: true,
         format: {
-          to: v => Number(v).toLocaleString()
+          to: this.props.pipsFormatter
         }
       };
     } else {
@@ -51,7 +51,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')}
+        {...omit(this.props, ['cssClasses', 'pipsFormatter'])}
         animate={false}
         behaviour={'snap'}
         connect
@@ -79,7 +79,8 @@ Slider.propTypes = {
         to: React.PropTypes.func
       })
     )
-  ])
+  ]),
+  pipsFormatter: React.PropTypes.func.isRequired
 };
 
 export default Slider;

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

@@ -21,7 +21,8 @@ describe('Slider', () => {
     renderer = createRenderer();
 
     props = {
-      range: {min: 0, max: 5000}
+      range: {min: 0, max: 5000},
+      pipsFormatter: () => {}
     };
   });
 

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

@@ -98,6 +98,7 @@ describe('rangeSlider()', () => {
           transformData: undefined,
           useCustomCompileOptions: {footer: false, header: false}
         },
+        pipsFormatter: () => {},
         tooltips: true
       };
 
@@ -180,6 +181,7 @@ describe('rangeSlider()', () => {
           transformData: undefined,
           useCustomCompileOptions: {footer: false, header: false}
         },
+        pipsFormatter: () => {},
         tooltips: true
       };
 
@@ -241,6 +243,7 @@ describe('rangeSlider()', () => {
           transformData: undefined,
           useCustomCompileOptions: {footer: false, header: false}
         },
+        pipsFormatter: () => {},
         tooltips: true
       };
 
@@ -289,6 +292,7 @@ describe('rangeSlider()', () => {
           transformData: undefined,
           useCustomCompileOptions: {footer: false, header: false}
         },
+        pipsFormatter: () => {},
         tooltips: true
       };
 
@@ -339,6 +343,7 @@ describe('rangeSlider()', () => {
           transformData: undefined,
           useCustomCompileOptions: {footer: false, header: false}
         },
+        pipsFormatter: () => {},
         tooltips: true
       };
 

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

@@ -10,6 +10,7 @@ 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 = {
@@ -161,6 +162,10 @@ 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;
 
@@ -182,6 +187,7 @@ function rangeSlider({
           step={step}
           templateProps={this._templateProps}
           tooltips={tooltips}
+          pipsFormatter={pipsFormatter}
         />,
         containerNode
       );