MultiRange
MultiRange
creates a multiple checkbox based numeric range UI component.
Note
It is similar to a MultiList component but for numeric data fields.
Example uses:
- filtering search results by prices in an e-commerce or food delivery experience.
- browsing movies by a ratings filter.
Usage
Basic Usage
<MultiRange
componentId="PriceSensor"
dataField="price"
data={
[{"start": 0, "end": 10, "label": "Cheap"},
{"start": 11, "end": 20, "label": "Moderate"},
{"start": 21, "end": 50, "label": "Pricey"},
{"start": 51, "end": 1000, "label": "First Date"}]
}
title="Prices"
/>
Usage With All Props
<MultiRange
componentId="PriceSensor"
dataField="price"
data={
[{"start": 0, "end": 10, "label": "Cheap"},
{"start": 11, "end": 20, "label": "Moderate"},
{"start": 21, "end": 50, "label": "Pricey"},
{"start": 51, "end": 1000, "label": "First Date"}]
}
title="Prices"
defaultValue={["Cheap", "Moderate"]}
showCheckbox={true}
showFilter={true}
filterLabel="Prices"
URLParams={false}
/>
Props
- componentId
String
unique identifier of the component, can be referenced in other components’react
prop. - dataField
String
data field to be connected to the component’s UI view. The range items are filtered by a database query on this field. - data
Object Array
collection of UIlabels
with associatedstart
andend
range values. - nestedField
String
[optional] use to set thenested
mapping field that allows arrays of objects to be indexed in a way that they can be queried independently of each other. Applicable only when dataField is a part ofnested
type. - title
String or JSX
[optional] title of the component to be shown in the UI. - defaultValue
Array
[optional] selects initial items from the data range on mount. - value
Array
[optional] controls the current value of the component.It selects the item from the data (on mount and on update).Use this prop in conjunction withonChange
function. - onChange
function
[optional] is a callback function which accepts component’s current value as a parameter. It is called when you are using thevalue
prop and the component’s value changes. This prop is used to implement the controlled component behavior. - showCheckbox
Boolean
[optional] show checkbox icon for each range item. Defaults totrue
. - showFilter
Boolean
[optional] show as filter when a value is selected in a global selected filters view. Defaults totrue
. - filterLabel
String
[optional] An optional label to display for the component in the global selected filters view. This is only applicable ifshowFilter
is enabled. Default value used here iscomponentId
. - URLParams
Boolean
[optional] enable creating a URL query string parameter based on the selected values of the ranges. This is useful for sharing URLs with the component state. Defaults tofalse
.
Demo
Styles
MultiRange
component supports innerClass
prop with the following keys:
title
list
checkbox
label
Read more about it here.
Extending
MultiRange
component can be extended to
- customize the look and feel with
className
,style
, - update the underlying DB query with
customQuery
, - connect with external interfaces using
beforeValueChange
,onValueChange
andonQueryChange
.
<MultiRange
...
className="custom-class"
style={{"paddingBottom": "10px"}}
customQuery={
function(value, props) {
return {
query: {
match: {
data_field: "this is a test"
}
}
}
}
}
beforeValueChange={
function(value) {
// called before the value is set
// returns a promise
return new Promise((resolve, reject) => {
// update state or component props
resolve()
// or reject()
})
}
}
onValueChange={
function(value) {
console.log("current value: ", value)
// set the state
// use the value with other js code
}
}
onQueryChange={
function(prevQuery, nextQuery) {
// use the query with other js code
console.log('prevQuery', prevQuery);
console.log('nextQuery', nextQuery);
}
}
/>
- className
String
CSS class to be injected on the component container. - style
Object
CSS styles to be applied to the MultiRange component. - customQuery
Function
takes value and props as parameters and returns the data query to be applied to the component, as defined in Elasticsearch Query DSL.Note:
customQuery is called on value changes in the MultiRange component as long as the component is a part ofreact
dependency of at least one other component. - beforeValueChange
Function
is a callback function which accepts component’s future value as a parameter and returns a promise. It is called everytime before a component’s value changes. The promise, if and when resolved, triggers the execution of the component’s query and if rejected, kills the query execution. This method can act as a gatekeeper for query execution, since it only executes the query after the provided promise has been resolved. - onValueChange
Function
is a callback function which accepts component’s current value as a parameter. It is called everytime the component’s value changes. This prop is handy in cases where you want to generate a side-effect on value selection. For example: You want to show a pop-up modal with the valid discount coupon code(s) when range item(s) is/are selected in a “Prices” MultiRange. - onQueryChange
Function
is a callback function which accepts component’s prevQuery and nextQuery as parameters. It is called everytime the component’s query changes. This prop is handy in cases where you want to generate a side-effect whenever the component’s query would change.