This repository has been archived by the owner on Dec 30, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 389
/
RangeInput.js
54 lines (51 loc) · 2.44 KB
/
RangeInput.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import React from 'react';
import { connectRange } from 'react-instantsearch-core';
import PanelCallbackHandler from '../components/PanelCallbackHandler';
import RangeInput from '../components/RangeInput';
/**
* RangeInput allows a user to select a numeric range using a minimum and maximum input.
* @name RangeInput
* @kind widget
* @requirements The attribute passed to the `attribute` prop must be present in “attributes for faceting”
* on the Algolia dashboard or configured as `attributesForFaceting` via a set settings call to the Algolia API.
* The values inside the attribute must be JavaScript numbers (not strings).
* @propType {string} attribute - the name of the attribute in the record
* @propType {{min: number, max: number}} [defaultRefinement] - Default state of the widget containing the start and the end of the range.
* @propType {number} [min] - Minimum value. When this isn't set, the minimum value will be automatically computed by Algolia using the data in the index.
* @propType {number} [max] - Maximum value. When this isn't set, the maximum value will be automatically computed by Algolia using the data in the index.
* @propType {number} [precision=0] - Number of digits after decimal point to use.
* @themeKey ais-RangeInput - the root div of the widget
* @themeKey ais-RangeInput-form - the wrapping form
* @themeKey ais-RangeInput-label - the label wrapping inputs
* @themeKey ais-RangeInput-input - the input (number)
* @themeKey ais-RangeInput-input--min - the minimum input
* @themeKey ais-RangeInput-input--max - the maximum input
* @themeKey ais-RangeInput-separator - the separator word used between the two inputs
* @themeKey ais-RangeInput-button - the submit button
* @translationKey submit - Label value for the submit button
* @translationKey separator - Label value for the input separator
* @example
* import React from 'react';
* import algoliasearch from 'algoliasearch/lite';
* import { InstantSearch, RangeInput } from 'react-instantsearch-dom';
*
* const searchClient = algoliasearch(
* 'latency',
* '6be0576ff61c053d5f9a3225e2a90f76'
* );
*
* const App = () => (
* <InstantSearch
* searchClient={searchClient}
* indexName="instant_search"
* >
* <RangeInput attribute="price" />
* </InstantSearch>
* );
*/
const RangeInputWidget = props => (
<PanelCallbackHandler {...props}>
<RangeInput {...props} />
</PanelCallbackHandler>
);
export default connectRange(RangeInputWidget);