fix(Range): handle float, allow reset and respect boundaries

* feat(RangeInput): handle min / max validation on input

* refactor(RangeInput): remove useless stop propagation call

* chore(deps): add enzyme to JSON

* refactor(RangeInput): handle min / max as placeholder + validation on input

* refactor(RangeInput): always send values to refine

* refactor(RangeInput): remove unused import

* chore(stories): sort RangeInput stories

* refactor(connectRange): handle boundaries on refine

* refactor(connectRange): throw an error when default refinement is out of range

* fix(RangeInput): update placeholder color same as SeachBox

* refactor(RangeInput): throw error on refine earlier

* feat(RangeInput): handle precision with step

* feat(connectRange): add precision props

* refactor(connectRange): compute range with precision

* refactor(connectRange): compute current refinement from range

* refactor(connectRange): avoid useless variable and simplify test

* chore(stories): add RangeInput story for precision

* chore: add enzyme to json to serializer

* refactor: remove unused variable

* chore(stories): remove min/max from RangeInput precision story

* fix(RangeInput): display range & value only when canRefine is true

* docs(RangeInput): add precision option

* fix(Stories): add missing precision props to RangeInput playground

* refactor(connectRange): extract computation of next value

* feat(connectRange): handle range with precision always with the same behaviour

* refactor(connectRange): use 2 as default precision

* docs(RangeInput): use 2 as default precision

* refactor(stories): update story with precision of 0

package.json

@@ -56,6 +56,7 @@
     "doctoc": "1.3.0",
     "enzyme": "3.1.0",
     "enzyme-adapter-react-16": "1.0.2",
+    "enzyme-to-json": "3.1.2",
     "escape-html": "1.0.3",
     "eslint": "4.9.0",
     "eslint-config-algolia": "12.0.0",
@@ -131,7 +132,8 @@
     ],
     "setupFiles": [
       "./shim.js"
-    ]
+    ],
+    "snapshotSerializers": ["enzyme-to-json/serializer"]
   },
   "license": "MIT",
   "author": {
@@ -142,4 +144,4 @@
     "algolia-aerial": "^1.1.4",
     "algolia-frontend-components": "^0.0.34"
   }
-}
+}

packages/react-instantsearch-theme-algolia/styles/_RangeInput.scss

@@ -19,14 +19,15 @@
   padding: 6px 8px;
   font-size: 14px;
   outline: none;
-  color: #697782;
   margin: auto 8px;
   border-radius: 4px;
   background-color: #ffffff;
   border: solid 1px #d4d8e3;
+  min-width: 180px;
 
   @include placeholder {
     font-size: 14px;
+    color: lighten(#697782, 20%);
   }
 
   &:hover,

packages/react-instantsearch/src/components/RangeInput.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { isNaN } from 'lodash';
 import translatable from '../core/translatable';
 import classNames from './classNames.js';
 
@@ -9,6 +8,7 @@ const cx = classNames('RangeInput');
 export class RawRangeInput extends Component {
   static propTypes = {
     canRefine: PropTypes.bool.isRequired,
+    precision: PropTypes.number.isRequired,
     translate: PropTypes.func.isRequired,
     refine: PropTypes.func.isRequired,
     min: PropTypes.number,
@@ -30,10 +30,7 @@ export class RawRangeInput extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {
-      from: this.props.canRefine ? props.currentRefinement.min : '',
-      to: this.props.canRefine ? props.currentRefinement.max : '',
-    };
+    this.state = this.normalizeStateForRendering(props);
   }
 
   componentWillMount() {
@@ -57,10 +54,7 @@ export class RawRangeInput extends Component {
         this.props.currentRefinement.min !== nextProps.currentRefinement.min ||
         this.props.currentRefinement.max !== nextProps.currentRefinement.max)
     ) {
-      this.setState({
-        from: nextProps.currentRefinement.min,
-        to: nextProps.currentRefinement.max,
-      });
+      this.setState(this.normalizeStateForRendering(nextProps));
     }
 
     if (
@@ -73,17 +67,45 @@ export class RawRangeInput extends Component {
 
   onSubmit = e => {
     e.preventDefault();
-    e.stopPropagation();
-    if (
-      !isNaN(parseFloat(this.state.from, 10)) &&
-      !isNaN(parseFloat(this.state.to, 10))
-    ) {
-      this.props.refine({ min: this.state.from, max: this.state.to });
-    }
+
+    this.props.refine({
+      min: this.state.from,
+      max: this.state.to,
+    });
   };
 
+  normalizeStateForRendering(props) {
+    const { canRefine, min: rangeMin, max: rangeMax } = props;
+    const { min: valueMin, max: valueMax } = props.currentRefinement;
+
+    return {
+      from:
+        canRefine && valueMin !== undefined && valueMin !== rangeMin
+          ? valueMin
+          : '',
+      to:
+        canRefine && valueMax !== undefined && valueMax !== rangeMax
+          ? valueMax
+          : '',
+    };
+  }
+
+  normalizeRangeForRendering({ canRefine, min, max }) {
+    const hasMin = min !== undefined;
+    const hasMax = max !== undefined;
+
+    return {
+      min: canRefine && hasMin && hasMax ? min : '',
+      max: canRefine && hasMin && hasMax ? max : '',
+    };
+  }
+
   render() {
-    const { translate, canRefine } = this.props;
+    const { from, to } = this.state;
+    const { precision, translate, canRefine } = this.props;
+    const { min, max } = this.normalizeRangeForRendering(this.props);
+    const step = 1 / Math.pow(10, precision);
+
     return (
       <form
         {...cx('root', !canRefine && 'noRefinement')}
@@ -94,17 +116,25 @@ export class RawRangeInput extends Component {
             <input
               {...cx('inputMin')}
               type="number"
-              value={this.state.from}
-              onChange={e => this.setState({ from: e.target.value })}
+              min={min}
+              max={max}
+              value={from}
+              step={step}
+              placeholder={min}
+              onChange={e => this.setState({ from: e.currentTarget.value })}
             />
           </label>
           <span {...cx('separator')}>{translate('separator')}</span>
           <label {...cx('labelMax')}>
             <input
               {...cx('inputMax')}
               type="number"
-              value={this.state.to}
-              onChange={e => this.setState({ to: e.target.value })}
+              min={min}
+              max={max}
+              value={to}
+              step={step}
+              placeholder={max}
+              onChange={e => this.setState({ to: e.currentTarget.value })}
             />
           </label>
           <button {...cx('submit')} type="submit">