-
Notifications
You must be signed in to change notification settings - Fork 498
/
range-slider.js
85 lines (74 loc) · 2.36 KB
/
range-slider.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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
var React = require('react');
var utils = require('../lib/utils.js');
/**
* Instantiate a slider based on a numeric attribute
* @param {String|DOMElement} options.container Valid CSS Selector as a string or DOMElement
* @param {String} options.facetName Name of the attribute for faceting
* @param {Boolean|Object} [options.tooltips=true] Should we show tooltips or not.
* The default tooltip will show the formatted corresponding value without any other token.
* You can also provide
* tooltips: {format: function(formattedValue, rawValue) {return '$' + formattedValue}}
* So that you can format the tooltip display value as you want
* @param {boolean} [hideIfEmpty=true] Hide the container when no results match
* @return {Object}
*/
function rangeSlider({
container = null,
facetName = null,
tooltips = true,
hideIfEmpty = true
}) {
var Slider = require('../components/Slider');
var containerNode = utils.getContainerNode(container);
return {
getConfiguration: () => ({
disjunctiveFacets: [facetName]
}),
_getCurrentRefinement(helper) {
var min = helper.state.getNumericRefinement(facetName, '>=');
var max = helper.state.getNumericRefinement(facetName, '<=');
if (min && min.length) {
min = min[0];
} else {
min = -Infinity;
}
if (max && max.length) {
max = max[0];
} else {
max = Infinity;
}
return {
min,
max
};
},
_refine(helper, newValues) {
helper.clearRefinements(facetName);
helper.addNumericRefinement(facetName, '>=', newValues[0]);
helper.addNumericRefinement(facetName, '<=', newValues[1]);
helper.search();
},
render({results, helper}) {
var stats = results.getFacetStats(facetName);
var currentRefinement = this._getCurrentRefinement(helper);
if (stats === undefined) {
stats = {
min: null,
max: null
};
}
React.render(
<Slider
start={[currentRefinement.min, currentRefinement.max]}
range={{min: stats.min, max: stats.max}}
hideIfEmpty={hideIfEmpty}
hasResults={stats.min !== null && stats.max !== null}
onChange={this._refine.bind(this, helper)}
tooltips={tooltips}
/>,
containerNode
);
}
};
}
module.exports = rangeSlider;