appbaseio · bietkul · Apr 20, 2022 · Apr 7, 2022 · Apr 7, 2022 · Apr 7, 2022
diff --git a/packages/maps/examples/ReactiveMap/index.html b/packages/maps/examples/ReactiveMap/index.html
@@ -15,10 +15,6 @@
 			href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css"
 			rel="stylesheet"
 		/>
-		<script
-			type="text/javascript"
-			src="https://maps.google.com/maps/api/js?libraries=places"
-		></script>
 	</head>
 	<body>
 		<div id="root"></div>

diff --git a/packages/maps/examples/ReactiveMap/package.json b/packages/maps/examples/ReactiveMap/package.json
@@ -25,4 +25,4 @@
         "build": "webpack -p --progress",
         "start": "webpack-dev-server --hot --inline --progress --colors --port 8001"
     }
-}
+}
diff --git a/packages/maps/examples/ReactiveMap/src/index.js b/packages/maps/examples/ReactiveMap/src/index.js
@@ -43,7 +43,7 @@ class App extends React.Component {
 			},
 			onPopoverClick: item => <div>{item.place}</div>,
 			showMapStyles: true,
-			renderData: result => ({
+			renderItem: result => ({
 				custom: (
 					<div
 						style={{
@@ -66,6 +66,7 @@ class App extends React.Component {
 				app="earthquakes"
 				url="https://a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61@appbase-demo-ansible-abxiydt-arc.searchbase.io"
 				enableAppbase
+				mapKey="AIzaSyA9JzjtHeXg_C_hh_GdTBdLxREWdj3nsOU"
 			>
 				<div>
 					<div>

diff --git a/packages/maps/examples/mongo-examples/GeoDistanceDropdown/src/index.js b/packages/maps/examples/mongo-examples/GeoDistanceDropdown/src/index.js
@@ -77,7 +77,7 @@ class App extends React.Component {
 				</div>
 			),
 			showMapStyles: true,
-			renderData: () => ({
+			renderItem: () => ({
 				custom: (
 					<div
 						style={{

diff --git a/packages/maps/examples/mongo-examples/GeoDistanceSlider/src/index.js b/packages/maps/examples/mongo-examples/GeoDistanceSlider/src/index.js
@@ -77,7 +77,7 @@ class App extends React.Component {
 				</div>
 			),
 			showMapStyles: true,
-			renderData: () => ({
+			renderItem: () => ({
 				custom: (
 					<div
 						style={{

diff --git a/packages/maps/examples/mongo-examples/ReactiveMap/src/index.js b/packages/maps/examples/mongo-examples/ReactiveMap/src/index.js
@@ -74,7 +74,7 @@ class App extends React.Component {
 				</div>
 			),
 			showMapStyles: true,
-			renderData: () => ({
+			renderItem: () => ({
 				custom: (
 					<div
 						style={{

diff --git a/packages/maps/src/components/basic/GeoDistanceDropdown.js b/packages/maps/src/components/basic/GeoDistanceDropdown.js
@@ -24,6 +24,8 @@ import {
 	getOptionsFromQuery,
 	updateCustomQuery,
 	updateDefaultQuery,
+	getComponent,
+	hasCustomRenderer,
 } from '@appbaseio/reactivecore/lib/utils/helper';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 import types from '@appbaseio/reactivecore/lib/utils/types';
@@ -116,6 +118,14 @@ class GeoDistanceDropdown extends GeoCode {
 	}
 
 	componentDidUpdate(prevProps) {
+		if (this.props.onData) {
+			checkSomePropChange(this.props, prevProps, ['error', 'selectedValue'], () => {
+				this.props.onData({
+					value: this.props.selectedValue,
+					error: this.props.error,
+				});
+			});
+		}
 		checkSomePropChange(this.props, prevProps, getValidPropsKeys(this.props), () => {
 			this.props.updateComponentProps(
 				this.props.componentId,
@@ -498,6 +508,24 @@ class GeoDistanceDropdown extends GeoCode {
 		);
 	};
 
+	getComponent = (items, downshiftProps) => {
+		const {
+			error, isLoading, selectedValue, rawData,
+		} = this.props;
+		const data = {
+			error,
+			loading: isLoading,
+			value: selectedValue,
+			data: items || [],
+			rawData,
+			handleChange: this.onDistanceChange,
+			downshiftProps,
+		};
+		return getComponent(data, this.props);
+	};
+	get hasCustomRenderer() {
+		return hasCustomRenderer(this.props);
+	}
 	render() {
 		return (
 			<Container style={this.props.style} className={this.props.className}>
@@ -510,12 +538,26 @@ class GeoDistanceDropdown extends GeoCode {
 				<Dropdown
 					innerClass={this.props.innerClass}
 					items={this.props.data}
+					renderItem={
+						typeof this.props.renderItem === 'function'
+							? value =>
+								this.props.renderItem(
+									value,
+									this.getSelectedLabel(this.state.currentDistance)
+										? this.getSelectedLabel(this.state.currentDistance)
+											.label === value
+										: false,
+								)
+							: undefined
+					}
 					onChange={this.onDistanceChange}
 					selectedItem={this.getSelectedLabel(this.state.currentDistance)}
 					placeholder="Select distance"
 					keyField="label"
 					returnsObject
 					themePreset={this.props.themePreset}
+					hasCustomRenderer={this.hasCustomRenderer}
+					customRenderer={this.getComponent}
 				/>
 			</Container>
 		);
@@ -570,6 +612,12 @@ GeoDistanceDropdown.propTypes = {
 	unit: types.string,
 	URLParams: types.bool,
 	serviceOptions: types.props,
+	error: types.title,
+	onData: types.func,
+	render: types.func,
+	renderItem: types.func,
+	isLoading: types.bool,
+	rawData: types.rawData,
 	geocoder: types.any, // eslint-disable-line
 };
 
@@ -582,6 +630,7 @@ GeoDistanceDropdown.defaultProps = {
 	countries: [],
 	autoLocation: true,
 	unit: 'mi',
+	isLoading: false,
 };
 
 const mapStateToProps = (state, props) => ({
@@ -591,6 +640,9 @@ const mapStateToProps = (state, props) => ({
 			&& state.selectedValues[props.componentId].value)
 		|| null,
 	themePreset: state.config.themePreset,
+	error: state.error[props.componentId],
+	isLoading: state.isLoading[props.componentId],
+	rawData: state.rawData[props.componentId],
 });
 
 const mapDispatchtoProps = dispatch => ({

diff --git a/packages/maps/src/components/basic/GeoDistanceSlider.js b/packages/maps/src/components/basic/GeoDistanceSlider.js
@@ -115,6 +115,14 @@ class GeoDistanceSlider extends GeoCode {
 	}
 
 	componentDidUpdate(prevProps) {
+		if (this.props.onData) {
+			checkSomePropChange(this.props, prevProps, ['error', 'selectedValue'], () => {
+				this.props.onData({
+					value: this.props.selectedValue,
+					error: this.props.error,
+				});
+			});
+		}
 		checkSomePropChange(this.props, prevProps, getValidPropsKeys(this.props), () => {
 			this.props.updateComponentProps(
 				this.props.componentId,
@@ -583,6 +591,8 @@ GeoDistanceSlider.propTypes = {
 	unit: types.string,
 	URLParams: types.bool,
 	serviceOptions: types.props,
+	error: types.title,
+	onData: types.func,
 	geocoder: types.any, // eslint-disable-line
 };
 
@@ -609,6 +619,7 @@ const mapStateToProps = (state, props) => ({
 			&& state.selectedValues[props.componentId].value)
 		|| null,
 	themePreset: state.config.themePreset,
+	error: state.error[props.componentId],
 });
 
 const mapDispatchtoProps = dispatch => ({

diff --git a/packages/maps/src/components/result/GoogleMapMarker.js b/packages/maps/src/components/result/GoogleMapMarker.js
@@ -113,7 +113,7 @@ class GoogleMapMarker extends React.Component {
 	render() {
 		const {
 			getPosition,
-			renderData,
+			renderItem,
 			defaultPin,
 			autoClosePopover,
 			handlePreserveCenter,
@@ -129,8 +129,8 @@ class GoogleMapMarker extends React.Component {
 		if (markerOnTop === marker._id) {
 			markerProps.zIndex = window.google.maps.Marker.MAX_ZINDEX + 1;
 		}
-		if (renderData) {
-			const data = renderData(marker);
+		if (renderItem) {
+			const data = renderItem(marker);
 
 			if ('label' in data) {
 				return (
@@ -207,7 +207,7 @@ const mapStateToProps = state => ({
 
 GoogleMapMarker.propTypes = {
 	getPosition: types.func,
-	renderData: types.func,
+	renderItem: types.func,
 	defaultPin: types.string,
 	autoClosePopover: types.bool,
 	handlePreserveCenter: types.func,

diff --git a/packages/maps/src/components/result/GoogleMapMarkers.js b/packages/maps/src/components/result/GoogleMapMarkers.js
@@ -47,7 +47,7 @@ class GoogleMapMarkers extends React.Component {
 GoogleMapMarkers.propTypes = {
 	resultsToRender: types.hits,
 	getPosition: types.func,
-	renderData: types.func,
+	renderItem: types.func,
 	defaultPin: types.string,
 	autoClosePopover: types.bool,
 	handlePreserveCenter: types.func,

diff --git a/packages/maps/src/components/result/ReactiveGoogleMap.js b/packages/maps/src/components/result/ReactiveGoogleMap.js
@@ -82,7 +82,7 @@ class ReactiveGoogleMap extends Component {
 		const markerProps = {
 			resultsToRender: params.resultsToRender,
 			getPosition: params.getPosition,
-			renderData: params.renderData,
+			renderItem: params.renderItem,
 			defaultPin: params.defaultPin,
 			autoClosePopover: params.autoClosePopover,
 			handlePreserveCenter: params.handlePreserveCenter,
@@ -198,8 +198,8 @@ ReactiveGoogleMap.propTypes = {
 	mapOptions: types.props,
 	markerProps: types.props,
 	markers: types.children,
-	renderAllData: types.func,
-	renderData: types.func,
+	render: types.func,
+	renderItem: types.func,
 	onPageChange: types.func,
 	onPopoverClick: types.func,
 	onData: types.func,

diff --git a/packages/maps/src/components/result/ReactiveMap.js b/packages/maps/src/components/result/ReactiveMap.js
@@ -21,15 +21,13 @@ import {
 	getClassName,
 	getResultStats,
 	checkSomePropChange,
+	getComponent,
+	hasCustomRenderer,
+	isFunction,
 } from '@appbaseio/reactivecore/lib/utils/helper';
 import types from '@appbaseio/reactivecore/lib/utils/types';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
-import {
-	connect,
-	isFunction,
-	ReactReduxContext,
-	getValidPropsKeys,
-} from '@appbaseio/reactivesearch/lib/utils';
+import { connect, ReactReduxContext, getValidPropsKeys } from '@appbaseio/reactivesearch/lib/utils';
 import Pagination from '@appbaseio/reactivesearch/lib/components/result/addons/Pagination';
 import { Checkbox } from '@appbaseio/reactivesearch/lib/styles/FormControlList';
 import geohash from 'ngeohash';
@@ -929,7 +927,7 @@ class ReactiveMap extends Component {
 		const resultsToRender = this.getResultsToRender();
 		const {
 			showMarkers,
-			renderData,
+			renderItem,
 			defaultPin,
 			onPopoverClick,
 			autoClosePopover,
@@ -942,7 +940,7 @@ class ReactiveMap extends Component {
 			getPosition: this.getPosition,
 			zoom: this.state.zoom,
 			showMarkers,
-			renderData,
+			renderItem,
 			defaultPin,
 			onPopoverClick,
 			autoClosePopover,
@@ -958,6 +956,23 @@ class ReactiveMap extends Component {
 		};
 	}
 
+	getComponent = () => {
+		const { error, isLoading } = this.props;
+		const data = {
+			error,
+			loading: isLoading,
+			loadMore: this.loadMore,
+			...this.getData(),
+			setPage: this.setPage,
+			renderMap: () => this.props.renderMap(this.mapParams),
+			renderPagination: this.renderPagination,
+		};
+		return getComponent(data, this.props);
+	};
+	get hasCustomRenderer() {
+		return hasCustomRenderer(this.props);
+	}
+
 	render() {
 		const style = {
 			width: '100%',
@@ -970,15 +985,8 @@ class ReactiveMap extends Component {
 				{this.renderError()}
 				{this.shouldRenderLoader ? this.props.loader : null}
 				{!this.shouldRenderLoader
-					&& (this.props.renderAllData
-						? this.props.renderAllData(
-							this.withClickIds(parseHits(this.props.hits)),
-							this.loadMore,
-							() => this.props.renderMap(this.mapParams),
-							this.renderPagination,
-							this.triggerAnalytics,
-							this.getData(),
-						) // prettier-ignore
+					&& (this.hasCustomRenderer
+						? this.getComponent() // prettier-ignore
 						: this.props.renderMap(this.mapParams))}
 			</div>
 		);
@@ -1032,8 +1040,8 @@ ReactiveMap.propTypes = {
 	mapProps: types.props,
 	markerProps: types.props,
 	markers: types.children,
-	renderAllData: types.func,
-	renderData: types.func,
+	render: types.func,
+	renderItem: types.func,
 	renderError: types.title,
 	onPageChange: types.func,
 	onError: types.func,

diff --git a/packages/maps/src/components/result/ReactiveOpenStreetMap.js b/packages/maps/src/components/result/ReactiveOpenStreetMap.js
@@ -39,7 +39,7 @@ class ReactiveOpenStreetMap extends Component {
 
 	getMarkers = ({
 		showMarkers,
-		renderData,
+		renderItem,
 		defaultPin,
 		onPopoverClick,
 		resultsToRender,
@@ -62,8 +62,8 @@ class ReactiveOpenStreetMap extends Component {
 					},
 				};
 
-				if (renderData) {
-					const data = renderData(item);
+				if (renderItem) {
+					const data = renderItem(item);
 
 					if ('label' in data) {
 						openStreetMarkerProps.icon = new DivIcon({
@@ -243,8 +243,8 @@ ReactiveOpenStreetMap.propTypes = {
 	onData: types.func,
 	renderError: types.title,
 	react: types.react,
-	renderData: types.func,
-	renderAllData: types.func,
+	renderItem: types.func,
+	render: types.func,
 	size: types.number,
 	sortBy: types.sortBy,
 	showMarkers: types.bool,

diff --git a/packages/reactivecore b/packages/reactivecore
-Original file line number
+Diff line change
@@ Expand Up / @@ -25,4 +25,4 @@ @@
             "build": "webpack -p --progress",
             "start": "webpack-dev-server --hot --inline --progress --colors --port 8001"
         }
-    }
+    }