PlacesSearch
This component is not supported starting v2.0.0 of reactivemaps
PlacesSearch
creates a location search UI component that is connected to a geopoint type field. It queries for places within proximity of the user selected location landmark in the UI.
Example uses:
- search for landmarks near you.
- search for cities, states, countries.
Usage
Basic Usage
<PlacesSearch
componentId="PlacesUI"
dataField="venue_names"
/>
Usage With All Props
<PlacesSearch
componentId="PlacesUI"
dataField="venue_names"
title="Venue Search"
placeholder="Enter a venue name.."
unit="mi"
autoLocation={true}
showFilter={true}
filterLabel="Location"
URLParams={false}
/>
Props
- componentId
String
unique identifier of the component, can be referenced in other components’react
prop. - dataField
String
DB data field to be mapped with the component’s UI view, used when a database query is made on this field. - title
String or JSX
[optional]
title of the component to be shown in the UI. - placeholder
String
[optional]
set the placeholder text to be shown in the searchbox field. Defaults to “Search..“. - unit
String
[optional]
unit for distance measurement, usesmi
(for miles) by default. Distance units can be specified from the following:
- autoLocation
Boolean
[optional]
defaults totrue
, fetches the user’s current location and prefills it in the searchbox. - 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 place(s). This is useful for sharing URLs with the component state. Defaults tofalse
.
Syntax
Styles
All reactivebase and reactivemaps components are rbc
namespaced.
Extending
PlacesSearch
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
.
<PlacesSearch
...
className="custom-class"
style={{"paddingBottom": "10px"}}
customQuery={
function(value, props) {
return {
// query in the format of Elasticsearch Query DSL
geo_distance: {
distance: "20mi",
location_dataField: {
lat: value.location.split(",")[0]
lon: value.location.split(",")[1]
}
}
}
}
}
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 PlacesSearch 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 PlacesSearch 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 every time 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 every time 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 when a user searches within a specific location area. - 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.