feat(rangeInput): add rangeInput widget (#2440)

* chore: add enzyme-to-json as dev dependency
* feat(RangeInput): add component
* refactor(RangeInput): rename label button to submit
* feat(range-input): add widget
* feat(stories): add range-input
* refactor(utils-test): migrate to Jest expect
* feat(utils): add depreacte function
* fix(connectRangeSlider): pass all widgetOptions to rendering
* fix(connectRangeSlider): refine at boundaries when defined and values are invalid
* fix(range-input): pass null values when range is equal to values
* refactor(connectRangeSlider): avoid useless variable
* feat(connectRange): add connector
* refactor(connectRangeSlider): deprecate
* refactor(widget): use connectRange instead of connectRangeSlider
* refactor(RangeInput): add expect case on state
* refactor(range-input): update refine test
* refactor(connectRange): parse next value as float
* refactor(RangeInput): avoid test on input its handle by the connector
* fix(range-input): remove comment
* fix(css): remove lint error
* refactor(range-input): use Math.pow instead of exponential operator
* refactor(range-input): use 0 as default value for precision
* chore(stories): update integer only story for floating number in RangeInput
* refactor(connectRange): rename range to currentRange
* fix(connectRangeSlider): refine at boundaries when defined and values are invalid
* refactor(connectRangeSlider): deprecate
* feat(connectRange-test): use original implementation inside clearRefinements mock
* feat(connectRange): refine only when both value are valid
* refactor(connectRange): avoid to pass by state for retrieve current refinement
* refactor(range-input): dont rely on null
* refactor(connectRange): avoid to use default parameter
* refactor(RangeInput): use variable instead of getter for disabled

Author: samouss

dev/app/init-builtin-widgets.js

@@ -681,6 +681,114 @@ export default () => {
       })
     );
 
+  storiesOf('RangeInput')
+    .add(
+      'default',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.rangeInput({
+            container,
+            attributeName: 'price',
+            templates: {
+              header: 'Range input',
+            },
+          })
+        );
+      })
+    )
+    .add(
+      'disabled',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.rangeInput({
+            container,
+            attributeName: 'price',
+            min: 500,
+            max: 0,
+            templates: {
+              header: 'Range input',
+            },
+          })
+        );
+      })
+    )
+    .add(
+      'collapsible',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.rangeInput({
+            container,
+            attributeName: 'price',
+            collapsible: true,
+            templates: {
+              header: 'Range input',
+            },
+          })
+        );
+      })
+    )
+    .add(
+      'with floating number',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.rangeInput({
+            container,
+            attributeName: 'price',
+            precision: 2,
+            templates: {
+              header: 'Range input',
+            },
+          })
+        );
+      })
+    )
+    .add(
+      'with min boundary',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.rangeInput({
+            container,
+            attributeName: 'price',
+            min: 10,
+            templates: {
+              header: 'Range input',
+            },
+          })
+        );
+      })
+    )
+    .add(
+      'with max boundary',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.rangeInput({
+            container,
+            attributeName: 'price',
+            max: 500,
+            templates: {
+              header: 'Range input',
+            },
+          })
+        );
+      })
+    )
+    .add(
+      'with min & max boundaries',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.rangeInput({
+            container,
+            attributeName: 'price',
+            min: 10,
+            max: 500,
+            templates: {
+              header: 'Range input',
+            },
+          })
+        );
+      })
+    );
+
   storiesOf('RangeSlider')
     .add(
       'default',

docgen/src/examples/tourism/main.scss

@@ -65,7 +65,7 @@ body {
     width: 33%;
 
     &--reset {
-      fill: #bfc7d8;
+      fill: #BFC7D8;
       top: calc(50% - 12px / 2);
       right: 0;
       right: 13px;

package.json

@@ -64,6 +64,7 @@
     "dev-novel": "0.0.4",
     "doctoc": "1.3.0",
     "enzyme": "2.9.1",
+    "enzyme-to-json": "2.0.1",
     "eslint": "4.7.2",
     "eslint-config-algolia": "12.0.0",
     "eslint-config-prettier": "2.5.0",

src/components/RangeInput/RangeInput.js

@@ -0,0 +1,108 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
+import headerFooterHOC from '../../decorators/headerFooter.js';
+
+export class RawRangeInput extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      min: props.values.min,
+      max: props.values.max,
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      min: nextProps.values.min,
+      max: nextProps.values.max,
+    });
+  }
+
+  onChange = name => event => {
+    this.setState({
+      [name]: event.currentTarget.value,
+    });
+  };
+
+  onSubmit = event => {
+    event.preventDefault();
+
+    this.props.refine([this.state.min, this.state.max]);
+  };
+
+  render() {
+    const { min: minValue, max: maxValue } = this.state;
+    const { min, max, step, cssClasses, labels } = this.props;
+    const isDisabled = min >= max;
+
+    return (
+      <form className={cssClasses.form} onSubmit={this.onSubmit}>
+        <fieldset className={cssClasses.fieldset}>
+          <label className={cssClasses.labelMin}>
+            <input
+              className={cssClasses.inputMin}
+              type="number"
+              min={min}
+              max={max}
+              step={step}
+              value={minValue}
+              onChange={this.onChange('min')}
+              placeholder={min}
+              disabled={isDisabled}
+            />
+          </label>
+          <span className={cssClasses.separator}>{labels.separator}</span>
+          <label className={cssClasses.labelMax}>
+            <input
+              className={cssClasses.inputMax}
+              type="number"
+              min={min}
+              max={max}
+              step={step}
+              value={maxValue}
+              onChange={this.onChange('max')}
+              placeholder={max}
+              disabled={isDisabled}
+            />
+          </label>
+          <button
+            role="button"
+            className={cssClasses.submit}
+            disabled={isDisabled}
+          >
+            {labels.submit}
+          </button>
+        </fieldset>
+      </form>
+    );
+  }
+}
+
+RawRangeInput.propTypes = {
+  min: PropTypes.number.isRequired,
+  max: PropTypes.number.isRequired,
+  step: PropTypes.number.isRequired,
+  values: PropTypes.shape({
+    min: PropTypes.number,
+    max: PropTypes.number,
+  }).isRequired,
+  cssClasses: PropTypes.shape({
+    form: PropTypes.string.isRequired,
+    fieldset: PropTypes.string.isRequired,
+    labelMin: PropTypes.string.isRequired,
+    inputMin: PropTypes.string.isRequired,
+    separator: PropTypes.string.isRequired,
+    labelMax: PropTypes.string.isRequired,
+    inputMax: PropTypes.string.isRequired,
+    submit: PropTypes.string.isRequired,
+  }).isRequired,
+  labels: PropTypes.shape({
+    separator: PropTypes.string.isRequired,
+    submit: PropTypes.string.isRequired,
+  }).isRequired,
+  refine: PropTypes.func.isRequired,
+};
+
+export default autoHideContainerHOC(headerFooterHOC(RawRangeInput));