Skip to content

Commit 5cf3ddf

Browse files
bietkulbietkul
authored
Merge pull request #301 from appbaseio/feat/map-render-api-changes
feat(maps): render api changes
2 parents fe3b254 + 1c73e08 commit 5cf3ddf

9 files changed

Lines changed: 577 additions & 126 deletions

File tree

‎content/docs/reactivesearch/v3/advanced/analytics.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,12 @@ Example:
5151

5252
## Click Analytics in Map Component
5353

54-
When rendering results using `renderAllData` in `ReactiveGoogleMap` you may have to call the `triggerClickAnalytics` function by using the `_click_id` property of the result items as an argument. This method also supports the document id(optional) as the second param. If document id is not set then ReactiveSearch will calculate it based on the click position. Example:
54+
When rendering results using `render` prop in `ReactiveGoogleMap` you may have to call the `triggerClickAnalytics` function by using the `_click_id` property of the result items as an argument. This method also supports the document id(optional) as the second param. If document id is not set then ReactiveSearch will calculate it based on the click position. Example:
5555

5656
```jsx
5757
<ReactiveGoogleMap
5858
...
59-
renderAllData={(hits, loadMore, renderMap, renderPagination, triggerClickAnalytics) => {
59+
render={({data: hits, loadMore, renderMap, renderPagination, triggerClickAnalytics}) => {
6060
return(
6161
<>
6262
{hits.map(hit => (
@@ -76,7 +76,7 @@ Similarily, in `OpenStreetMap`:
7676
```jsx
7777
<ReactiveOpenStreetMap
7878
...
79-
renderAllData={(hits, loadMore, renderMap, renderPagination, triggerClickAnalytics) => {
79+
render={({data: hits, loadMore, renderMap, renderPagination, triggerClickAnalytics}) => {
8080
return(
8181
<>
8282
{hits.map(hit => (

‎content/docs/reactivesearch/v3/map/geodistancedropdown.md‎

Lines changed: 159 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -25,43 +25,85 @@ Example uses:
2525
### Basic Usage
2626

2727
```js
28-
<GeoDistanceDropdown
29-
componentId="LocationUI"
30-
dataField="location"
31-
data={[
32-
{ distance: 20, label: '< 20 miles' },
33-
{ distance: 50, label: '< 50 miles' },
34-
{ distance: 100, label: '< 100 miles' },
35-
]}
36-
/>
28+
<ReactiveBase
29+
mapLibraries={['places']} // required
30+
>
31+
<GeoDistanceDropdown
32+
componentId="LocationUI"
33+
dataField="location"
34+
data={[
35+
{ distance: 20, label: '< 20 miles' },
36+
{ distance: 50, label: '< 50 miles' },
37+
{ distance: 100, label: '< 100 miles' },
38+
]}
39+
/>
40+
</ReactiveBase>
3741
```
3842

3943
### Usage With All Props
4044

4145
```js
42-
<GeoDistanceDropdown
43-
componentId="locationUI"
44-
dataField="location"
45-
title="Location Dropdown Selector"
46-
data={
47-
[
48-
{ "distance": 20, "label": "< 20 miles" },
49-
{ "distance": 50, "label": "< 50 miles" },
50-
{ "distance": 100, "label": "< 100 miles" },
51-
]
52-
}
53-
defaultValue={{
54-
location: "London, UK"
55-
label: "< 100 miles"
56-
}}
57-
countries={["uk"]}
58-
placeholder="Select a distance range.."
59-
unit="mi"
60-
autoLocation={true}
61-
showFilter={true}
62-
filterLabel="Location"
63-
URLParams={false}
64-
/>
46+
<ReactiveBase
47+
mapLibraries={['places']} // required
48+
>
49+
<GeoDistanceDropdown
50+
componentId="locationUI"
51+
dataField="location"
52+
title="Location Dropdown Selector"
53+
data={
54+
[
55+
{ "distance": 20, "label": "< 20 miles" },
56+
{ "distance": 50, "label": "< 50 miles" },
57+
{ "distance": 100, "label": "< 100 miles" },
58+
]
59+
}
60+
defaultValue={{
61+
location: "London, UK"
62+
label: "< 100 miles"
63+
}}
64+
countries={["uk"]}
65+
placeholder="Select a distance range.."
66+
unit="mi"
67+
autoLocation={true}
68+
showFilter={true}
69+
filterLabel="Location"
70+
URLParams={false}
71+
render={({ loading, error, data, handleChange, downshiftProps }) => {
72+
if (loading) {
73+
return <div>Fetching Results.</div>;
74+
}
75+
if (error) {
76+
return <div>Something went wrong! Error details {JSON.stringify(error)}</div>;
77+
}
78+
if(downshiftProps.isOpen === false){
79+
return null;
80+
}
81+
return data.map(item => (
82+
<div onClick={() => handleChange(item)} key={item.label}>
83+
<span>{item.label}</span>
84+
<span>{item.distance}</span>
85+
</div>
86+
));
87+
}
88+
}
89+
// use either renderItem OR render prop
90+
renderItem={(label, isSelected) => (
91+
<div>
92+
<span style={{
93+
marginLeft: 5, color: isSelected ? 'red' : 'dodgerblue'
94+
}}>
95+
{label}
96+
</span>
97+
</div>
98+
)}
99+
onData={
100+
(prop) => {
101+
const {value, error} = prop;
102+
// do something
103+
}
104+
}
105+
/>
106+
</ReactiveBase>
65107
```
66108

67109
## Props
@@ -105,6 +147,90 @@ Example uses:
105147
restricts predictions to specified country (ISO 3166-1 Alpha-2 country code, case insensitive). For example, 'us', 'in', or 'au'. You can provide an array of up to five country code strings.
106148
- **serviceOptions** `Object` [optional]
107149
allows to add more options to AutoCompletionRequest, available from [Google Places library](https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompletionRequest)
150+
- **renderItem** `Function` [optional]
151+
customize the rendered list via a function which receives the item label, count & isSelected and expects a JSX or String back. For example:
152+
```js
153+
renderItem={(label, isSelected) => (
154+
<div>
155+
<span style={{
156+
marginLeft: 5, color: isSelected ? 'red' : 'dodgerblue'
157+
}}>
158+
{label}
159+
</span>
160+
</div>
161+
)}
162+
```
163+
- **render** `Function` [optional]
164+
an alternative callback function to `renderItem`, where user can define how to render the view based on all the data changes.
165+
<br/>
166+
It accepts an object with these properties:
167+
- **`loading`**: `boolean`
168+
indicates that the query is still in progress
169+
- **`error`**: `object`
170+
An object containing the error info
171+
- **`data`**: `array`
172+
An array of results obtained from the applied query.
173+
- **`rawData`** `object`
174+
An object of raw response as-is from elasticsearch query.
175+
- **`value`**: `array`
176+
current selected value.
177+
- **`handleChange`**: `function`
178+
A callback function can be used to mark the list value as selected.
179+
- **`downshiftProps`**: `object`
180+
provides all the control props from `downshift` which can be used to bind list items with click/mouse events.
181+
Read more about it [here](https://github.com/downshift-js/downshift#children-function).
182+
183+
```js
184+
<GeoDistanceDropdown
185+
render={({ loading, error, data, handleChange, downshiftProps }) => {
186+
if (loading) {
187+
return <div>Fetching Results.</div>;
188+
}
189+
if (error) {
190+
return <div>Something went wrong! Error details {JSON.stringify(error)}</div>;
191+
}
192+
if(downshiftProps.isOpen === false){
193+
return null;
194+
}
195+
return data.map(item => (
196+
<div onClick={() => handleChange(item)} key={item.label}>
197+
<span>{item.label}</span>
198+
<span>{item.distance}</span>
199+
</div>
200+
));
201+
}}
202+
/>
203+
```
204+
205+
Or you can also use render function as children
206+
207+
```js
208+
<GeoDistanceDropdown>
209+
{
210+
({
211+
loading,
212+
error,
213+
data,
214+
value,
215+
handleChange,
216+
downshiftProps
217+
}) => (
218+
// return UI to be rendered
219+
)
220+
}
221+
</GeoDistanceDropdown>
222+
```
223+
224+
- **onData** `Function` [optional]
225+
gets triggered after data changes, which returns an object with these properties: `value` & `error`.
226+
```js
227+
onData={
228+
(prop) => {
229+
const {value, error} = prop;
230+
// do something
231+
}
232+
}
233+
```
108234
109235
## Demo
110236
@@ -143,7 +269,7 @@ Read more about it [here](/docs/reactivesearch/v3/theming/classnameinjection/).
143269
144270
```js
145271
<GeoDistanceDropdown
146-
...
272+
// ...
147273
className="custom-class"
148274
style={{"paddingBottom": "10px"}}
149275
customQuery={

‎content/docs/reactivesearch/v3/map/geodistanceslider.md‎

Lines changed: 57 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -25,43 +25,57 @@ Example uses:
2525
### Basic Usage
2626

2727
```js
28-
<GeoDistanceSlider
29-
componentId="locationUI"
30-
dataField="location"
31-
range={{
32-
start: 0,
33-
end: 20,
34-
}}
35-
/>
28+
<ReactiveBase
29+
mapLibraries={['places']} // required
30+
>
31+
<GeoDistanceSlider
32+
componentId="locationUI"
33+
dataField="location"
34+
range={{
35+
start: 0,
36+
end: 20,
37+
}}
38+
/>
39+
</ReactiveBase>
3640
```
3741

3842
### Usage With All Props
3943

4044
```js
41-
<GeoDistanceSlider
42-
componentId="GeoDistanceSensor"
43-
dataField="location"
44-
title="Geo Distance Slider"
45-
range={{
46-
start: 0,
47-
end: 20,
48-
}}
49-
rangeLabels={{
50-
start: '0 mi',
51-
end: '20 mi',
52-
}}
53-
defaultValue={{
54-
location: 'London, UK',
55-
distance: 12,
56-
}}
57-
countries={['uk']}
58-
placeholder="Select a distance range.."
59-
unit="mi"
60-
autoLocation={true}
61-
showFilter={true}
62-
filterLabel="Location"
63-
URLParams={false}
64-
/>
45+
<ReactiveBase
46+
mapLibraries={['places']} // required
47+
>
48+
<GeoDistanceSlider
49+
componentId="GeoDistanceSensor"
50+
dataField="location"
51+
title="Geo Distance Slider"
52+
range={{
53+
start: 0,
54+
end: 20,
55+
}}
56+
rangeLabels={{
57+
start: '0 mi',
58+
end: '20 mi',
59+
}}
60+
defaultValue={{
61+
location: 'London, UK',
62+
distance: 12,
63+
}}
64+
countries={['uk']}
65+
placeholder="Select a distance range.."
66+
unit="mi"
67+
autoLocation={true}
68+
showFilter={true}
69+
filterLabel="Location"
70+
URLParams={false}
71+
onData={
72+
(prop) => {
73+
const {value, error} = prop;
74+
// do something
75+
}
76+
}
77+
/>
78+
</ReactiveBase>
6579
```
6680

6781
## Props
@@ -137,6 +151,17 @@ Example uses:
137151
}
138152
}}
139153
```
154+
- **onData** `Function` [optional]
155+
gets triggered after data changes, which returns an object with these properties: `value` & `error`.
156+
```js
157+
onData={
158+
(prop) => {
159+
const {value, error} = prop;
160+
// do something
161+
}
162+
}
163+
```
164+
140165
## Demo
141166
142167
<br />

0 commit comments

Comments
 (0)