@abcagency/hc-ui-components 1.3.60 → 1.3.62

package/src/components/containers/maps/map-container.js

@@ -1,249 +1,249 @@
-import React, { useEffect, useRef, useState } from 'react';
-
-import MapMarker from "~/components/containers/maps/map-marker-container";
-import PlaceMarker from "~/components/modules/maps/place-marker";
-
-import { usePlaces } from "~/contexts/placesContext";
-import { useMap } from "~/contexts/mapContext";
-import { useMapList } from "~/contexts/mapListContext";
-
-import { markerIconSelected, markerIcon, pinIcon } from "~/util/mapIconUtil";
-
-import Map from "~/components/modules/maps/map";
-import { MarkerClustererF } from "@react-google-maps/api";
-import { clusterOptions } from "~/util/mapUtil";
-
-const MapContainer = ({
-	markerConfigs,
-	infoWindowClasses,
-	clusterGridSize = 60
-}) => {
-	const {
-		location,
-		zoom,
-		center,
-		selectLocationEntity,
-		setLocation,
-		mapInteracted,
-		setMapInteracted
-	} = useMap();
-
-	const {
-		mapItems, filteredListings, setSelectedFilters,
-		setQuery,
-		siteConfig
-	} = useMapList();
-
-	const mapRef = useRef();
-	const markerRefs = useRef({});
-	const mapContainerRef = useRef(null);
-	const {
-		poiMarkers,
-		setCurrentCenter,
-		currentCenter,
-		setCurrentZoom,
-		currentZoom,
-		selectedPlaceMarker,
-		setSelectedPlaceMarker,
-		placesWindow,
-		setPlacesWindow } = usePlaces();
-
-	const onIdle = () => {
-		if (!currentCenter || !mapRef.current) return;
-		const newCenter = mapRef.current.getCenter().toJSON();
-		const newZoom = mapRef.current.zoom;
-
-		setCurrentCenter(newCenter);
-
-		if (newZoom !== currentZoom) {
-			setCurrentZoom(newZoom);
-		}
-	};
-
-	useEffect(() => {
-		if (mapContainerRef.current) {
-			const handleScroll = () => {
-				setMapInteracted(true);
-			};
-			var mapContainerRefCurrent = mapContainerRef.current;
-			mapContainerRef.current.addEventListener('wheel', handleScroll);
-			return () => mapContainerRefCurrent.removeEventListener('wheel', handleScroll);
-		}
-	}, [mapContainerRef.current]);
-
-	useEffect(() => {
-		if (mapRef.current) {
-			const mapInstance = mapRef.current;
-			const dragStartListener = mapInstance.addListener('dragstart', () => setMapInteracted(true));
-			const mouseDownListener = mapInstance.addListener('mousedown', () => setMapInteracted(true));
-			return () => {
-				google.maps.event.removeListener(dragStartListener);
-				google.maps.event.removeListener(mouseDownListener);
-			};
-		}
-	}, [mapRef.current, mapContainerRef.current]);
-
-	useEffect(() => {
-		if ((mapItems && mapItems.length > 0 || poiMarkers.length > 0) && mapRef.current) {
-			fitBounds(mapRef.current);
-		}
-	}, [mapItems, mapRef.current, location]);
-
-	useEffect(() => {
-		if ((mapItems && mapItems.length > 0 || poiMarkers.length > 0) && mapRef.current && mapInteracted) {
-			fitBounds(mapRef.current, true);
-		}
-		if (mapRef.current) {
-			let currZoom = mapRef.current.zoom;
-			let setZoomVal = currZoom < 13 ? currZoom : 12;
-			mapRef.current.setZoom(setZoomVal);
-		}
-	}, [filteredListings]);
-
-	useEffect(() => {
-		if (!mapRef.current || !location || mapInteracted) return;
-		mapRef.current.panTo(
-			new google.maps.LatLng(location.latitude, location.longitude)
-		);
-		if (mapRef.current) {
-			let setZoomVal = zoom < 13 ? zoom : 12;
-			mapRef.current.setZoom(setZoomVal);
-		}
-	}, [location, zoom, mapRef.current]);
-
-	const fitBounds = (map, overload = false) => {
-		if ((mapInteracted === false || overload) && mapItems != null) {
-		  const bounds = new window.google.maps.LatLngBounds();
-		  mapItems.forEach(item => {
-				bounds.extend(new google.maps.LatLng(item.latitude, item.longitude));
-		  });
-		  if(siteConfig.optionalShowLocationClusterConfig){
-				let configLocation = new google.maps.LatLng(siteConfig.optionalShowLocationClusterConfig.latitude, siteConfig.optionalShowLocationClusterConfig.longitude);
-				map.panTo(configLocation);
-				bounds.extend(new google.maps.LatLng(siteConfig.optionalShowLocationClusterConfig.latitude, siteConfig.optionalShowLocationClusterConfig.longitude));
-		  }
-		  if (!map) return;
-		  const currentCenter = map.getCenter();
-		  map.fitBounds(bounds);
-		  const newCenter = bounds.getCenter();
-		  if (currentCenter && newCenter) {
-				map.panTo(newCenter);
-		  }
-		}
-		if (mapRef.current.zoom > 17) {
-		  mapRef.current.setZoom(16);
-		}
-	  };
-
-	const markerClickHandler = mapLocation => {
-		setMapInteracted(true);
-		selectLocationEntity(mapLocation);
-	};
-
-	const onLoad = map => {
-		if (!location || location === null) {
-			mapRef.current = map;
-			fitBounds(map, true);
-			return;
-		}
-		mapRef.current = map;
-
-		if (mapInteracted === false) {
-			mapRef.current.panTo(
-				new google.maps.LatLng(location.latitude, location.longitude)
-			);
-
-			mapRef.current.setZoom(zoom);
-		}
-	};
-
-	const pinIconUrl = pinIcon({
-		fillColor: markerConfigs.fillColor,
-		strokeColor: markerConfigs.strokeColor
-	});
-
-	const onClusterClick = cluster => {
-		if(!siteConfig.optionalShowLocationClusterConfig || (mapRef.current.zoom > siteConfig.optionalShowLocationClusterConfig.showForZoomLevelLessThan)) {
-			console.log("should return");
-			return;
-		}
-		if (!cluster || typeof cluster.getMarkers !== 'function') {
-		  console.error('Cluster object or getMarkers method not available.');
-		  return;
-		}
-
-		const markers = cluster.getMarkers();
-
-		if (!markers || markers.length === 0) {
-		  console.error('No markers found in the cluster.');
-		  return;
-		}
-
-		setTimeout(() => {
-		  const bounds = new window.google.maps.LatLngBounds();
-
-		  markers.forEach(marker => {
-				bounds.extend(marker.getPosition());
-		  });
-
-		  bounds.extend(new google.maps.LatLng(siteConfig.optionalShowLocationClusterConfig.latitude, siteConfig.optionalShowLocationClusterConfig.longitude));
-
-		  if (mapRef.current) {
-				mapRef.current.fitBounds(bounds);
-		  }
-		}, 500);
-	  };
-
-	return (
-		<Map
-			zoom={zoom}
-			center={center}
-			mapContainerRef={mapContainerRef}
-			onLoad={onLoad}
-			onIdle={onIdle}
-			mapInteracted={mapInteracted}
-			pinIconUrl={pinIconUrl}
-			setMapInteracted={setMapInteracted}
-			fitBounds={fitBounds}
-			mapRef={mapRef}
-			setQuery={setQuery}
-			filteredListingsLength={filteredListings.length}
-			setSelectedFilters={setSelectedFilters}
-		>
-			<MarkerClustererF options={clusterOptions(clusterGridSize, markerConfigs.fillColor)} onClick={onClusterClick}>
-				{clusterer => (
-					<>
-						{mapItems.map(item => (
-							<MapMarker
-								key={item.id}
-								item={item}
-								selectedLocation={location}
-								markerRefs={markerRefs}
-								infoWindowClasses={infoWindowClasses}
-								setSelectedLocation={setLocation}
-								markerClickHandler={markerClickHandler}
-								clusterer={clusterer}
-								markerIcon={markerIcon(markerConfigs)}
-								markerIconSelected={markerIconSelected(markerConfigs)}
-								setMapInteracted={setMapInteracted}
-							/>
-						))}
-						{poiMarkers && poiMarkers.markers.map((marker, index) => (
-							<PlaceMarker
-								key={`marker-${marker.title}-${index}`}
-								marker={marker}
-								index={index}
-								selectedPlaceMarker={selectedPlaceMarker}
-								placesWindow={placesWindow}
-								setPlacesWindow={setPlacesWindow}
-								setSelectedPlaceMarker={setSelectedPlaceMarker}
-							  />
-						))}
-					</>
-				)}
-			</MarkerClustererF>
-		</Map>
-	);
-};
-
-export default MapContainer;
+import React, { useEffect, useRef, useState } from 'react';
+
+import MapMarker from "~/components/containers/maps/map-marker-container";
+import PlaceMarker from "~/components/modules/maps/place-marker";
+
+import { usePlaces } from "~/contexts/placesContext";
+import { useMap } from "~/contexts/mapContext";
+import { useMapList } from "~/contexts/mapListContext";
+
+import { markerIconSelected, markerIcon, pinIcon } from "~/util/mapIconUtil";
+
+import Map from "~/components/modules/maps/map";
+import { MarkerClustererF } from "@react-google-maps/api";
+import { clusterOptions } from "~/util/mapUtil";
+
+const MapContainer = ({
+	markerConfigs,
+	infoWindowClasses,
+	clusterGridSize = 60
+}) => {
+	const {
+		location,
+		zoom,
+		center,
+		selectLocationEntity,
+		setLocation,
+		mapInteracted,
+		setMapInteracted
+	} = useMap();
+
+	const {
+		mapItems, filteredListings, setSelectedFilters,
+		setQuery,
+		siteConfig
+	} = useMapList();
+
+	const mapRef = useRef();
+	const markerRefs = useRef({});
+	const mapContainerRef = useRef(null);
+	const {
+		poiMarkers,
+		setCurrentCenter,
+		currentCenter,
+		setCurrentZoom,
+		currentZoom,
+		selectedPlaceMarker,
+		setSelectedPlaceMarker,
+		placesWindow,
+		setPlacesWindow } = usePlaces();
+
+	const onIdle = () => {
+		if (!currentCenter || !mapRef.current) return;
+		const newCenter = mapRef.current.getCenter().toJSON();
+		const newZoom = mapRef.current.zoom;
+
+		setCurrentCenter(newCenter);
+
+		if (newZoom !== currentZoom) {
+			setCurrentZoom(newZoom);
+		}
+	};
+
+	useEffect(() => {
+		if (mapContainerRef.current) {
+			const handleScroll = () => {
+				setMapInteracted(true);
+			};
+			var mapContainerRefCurrent = mapContainerRef.current;
+			mapContainerRef.current.addEventListener('wheel', handleScroll);
+			return () => mapContainerRefCurrent.removeEventListener('wheel', handleScroll);
+		}
+	}, [mapContainerRef.current]);
+
+	useEffect(() => {
+		if (mapRef.current) {
+			const mapInstance = mapRef.current;
+			const dragStartListener = mapInstance.addListener('dragstart', () => setMapInteracted(true));
+			const mouseDownListener = mapInstance.addListener('mousedown', () => setMapInteracted(true));
+			return () => {
+				google.maps.event.removeListener(dragStartListener);
+				google.maps.event.removeListener(mouseDownListener);
+			};
+		}
+	}, [mapRef.current, mapContainerRef.current]);
+
+	useEffect(() => {
+		if ((mapItems && mapItems.length > 0 || poiMarkers.length > 0) && mapRef.current) {
+			fitBounds(mapRef.current);
+		}
+	}, [mapItems, mapRef.current, location]);
+
+	useEffect(() => {
+		if ((mapItems && mapItems.length > 0 || poiMarkers.length > 0) && mapRef.current && mapInteracted) {
+			fitBounds(mapRef.current, true);
+		}
+		if (mapRef.current) {
+			let currZoom = mapRef.current.zoom;
+			let setZoomVal = currZoom < 13 ? currZoom : 12;
+			mapRef.current.setZoom(setZoomVal);
+		}
+	}, [filteredListings]);
+
+	useEffect(() => {
+		if (!mapRef.current || !location || mapInteracted) return;
+		mapRef.current.panTo(
+			new google.maps.LatLng(location.latitude, location.longitude)
+		);
+		if (mapRef.current) {
+			let setZoomVal = zoom < 13 ? zoom : 12;
+			mapRef.current.setZoom(setZoomVal);
+		}
+	}, [location, zoom, mapRef.current]);
+
+	const fitBounds = (map, overload = false) => {
+		if ((mapInteracted === false || overload) && mapItems != null) {
+		  const bounds = new window.google.maps.LatLngBounds();
+		  mapItems.forEach(item => {
+				bounds.extend(new google.maps.LatLng(item.latitude, item.longitude));
+		  });
+		  if(siteConfig.optionalShowLocationClusterConfig){
+				let configLocation = new google.maps.LatLng(siteConfig.optionalShowLocationClusterConfig.latitude, siteConfig.optionalShowLocationClusterConfig.longitude);
+				map.panTo(configLocation);
+				bounds.extend(new google.maps.LatLng(siteConfig.optionalShowLocationClusterConfig.latitude, siteConfig.optionalShowLocationClusterConfig.longitude));
+		  }
+		  if (!map) return;
+		  const currentCenter = map.getCenter();
+		  map.fitBounds(bounds);
+		  const newCenter = bounds.getCenter();
+		  if (currentCenter && newCenter) {
+				map.panTo(newCenter);
+		  }
+		}
+		if (mapRef.current.zoom > 17) {
+		  mapRef.current.setZoom(16);
+		}
+	  };
+
+	const markerClickHandler = mapLocation => {
+		setMapInteracted(true);
+		selectLocationEntity(mapLocation);
+	};
+
+	const onLoad = map => {
+		if (!location || location === null) {
+			mapRef.current = map;
+			fitBounds(map, true);
+			return;
+		}
+		mapRef.current = map;
+
+		if (mapInteracted === false) {
+			mapRef.current.panTo(
+				new google.maps.LatLng(location.latitude, location.longitude)
+			);
+
+			mapRef.current.setZoom(zoom);
+		}
+	};
+
+	const pinIconUrl = pinIcon({
+		fillColor: markerConfigs.fillColor,
+		strokeColor: markerConfigs.strokeColor
+	});
+
+	const onClusterClick = cluster => {
+		if(!siteConfig.optionalShowLocationClusterConfig || (mapRef.current.zoom > siteConfig.optionalShowLocationClusterConfig.showForZoomLevelLessThan)) {
+			console.log("should return");
+			return;
+		}
+		if (!cluster || typeof cluster.getMarkers !== 'function') {
+		  console.error('Cluster object or getMarkers method not available.');
+		  return;
+		}
+
+		const markers = cluster.getMarkers();
+
+		if (!markers || markers.length === 0) {
+		  console.error('No markers found in the cluster.');
+		  return;
+		}
+
+		setTimeout(() => {
+		  const bounds = new window.google.maps.LatLngBounds();
+
+		  markers.forEach(marker => {
+				bounds.extend(marker.getPosition());
+		  });
+
+		  bounds.extend(new google.maps.LatLng(siteConfig.optionalShowLocationClusterConfig.latitude, siteConfig.optionalShowLocationClusterConfig.longitude));
+
+		  if (mapRef.current) {
+				mapRef.current.fitBounds(bounds);
+		  }
+		}, 500);
+	  };
+
+	return (
+		<Map
+			zoom={zoom}
+			center={center}
+			mapContainerRef={mapContainerRef}
+			onLoad={onLoad}
+			onIdle={onIdle}
+			mapInteracted={mapInteracted}
+			pinIconUrl={pinIconUrl}
+			setMapInteracted={setMapInteracted}
+			fitBounds={fitBounds}
+			mapRef={mapRef}
+			setQuery={setQuery}
+			filteredListingsLength={filteredListings.length}
+			setSelectedFilters={setSelectedFilters}
+		>
+			<MarkerClustererF options={clusterOptions(clusterGridSize, markerConfigs.fillColor)} onClick={onClusterClick}>
+				{clusterer => (
+					<>
+						{mapItems.map(item => (
+							<MapMarker
+								key={item.id}
+								item={item}
+								selectedLocation={location}
+								markerRefs={markerRefs}
+								infoWindowClasses={infoWindowClasses}
+								setSelectedLocation={setLocation}
+								markerClickHandler={markerClickHandler}
+								clusterer={clusterer}
+								markerIcon={markerIcon(markerConfigs)}
+								markerIconSelected={markerIconSelected(markerConfigs)}
+								setMapInteracted={setMapInteracted}
+							/>
+						))}
+						{poiMarkers && poiMarkers.markers.map((marker, index) => (
+							<PlaceMarker
+								key={`marker-${marker.title}-${index}`}
+								marker={marker}
+								index={index}
+								selectedPlaceMarker={selectedPlaceMarker}
+								placesWindow={placesWindow}
+								setPlacesWindow={setPlacesWindow}
+								setSelectedPlaceMarker={setSelectedPlaceMarker}
+							  />
+						))}
+					</>
+				)}
+			</MarkerClustererF>
+		</Map>
+	);
+};
+
+export default MapContainer;

package/src/components/containers/maps/map-list-container.js

@@ -1,50 +1,50 @@
-import React from 'react';
-
-import List from '~/components/containers/list/item-list-container';
-import Map from '~/components/containers/maps/map-container';
-import Filter from '~/components/containers/filter/filter-container';
-import MapList from '~/components/modules/maps/map-list';
-
-const MapListContainer = ({
-	loading = false,
-	mapDetails,
-	markerConfigs,
-	itemExpandedContent,
-	fieldsShown,
-	specialFeatures,
-	fieldNames,
-	showMap,
-	placeMappings,
-	mapPosition
-}) => {
-
-	const listProps = {
-		fieldsShown,
-		fieldNames,
-		itemExpandedContent,
-		loading,
-		showMap,
-		specialFeatures
-	};
-
-	const mapProps = {
-		mapDetails,
-		markerConfigs,
-		placeMappings,
-		clusterGridSize: 60,
-		showMap
-	};
-
-	return (
-		<MapList
-			showMap={showMap}
-			loading={loading}
-			list={<List {...listProps} />}
-			map={<Map {...mapProps} />}
-			filter={<Filter showMap={showMap} className="md:hc-hidden" />}
-			mapPosition={mapPosition}
-		/>
-	);
-};
-
-export default MapListContainer;
+import React from 'react';
+
+import List from '~/components/containers/list/item-list-container';
+import Map from '~/components/containers/maps/map-container';
+import Filter from '~/components/containers/filter/filter-container';
+import MapList from '~/components/modules/maps/map-list';
+
+const MapListContainer = ({
+	loading = false,
+	mapDetails,
+	markerConfigs,
+	itemExpandedContent,
+	fieldsShown,
+	specialFeatures,
+	fieldNames,
+	showMap,
+	placeMappings,
+	mapPosition
+}) => {
+
+	const listProps = {
+		fieldsShown,
+		fieldNames,
+		itemExpandedContent,
+		loading,
+		showMap,
+		specialFeatures
+	};
+
+	const mapProps = {
+		mapDetails,
+		markerConfigs,
+		placeMappings,
+		clusterGridSize: 60,
+		showMap
+	};
+
+	return (
+		<MapList
+			showMap={showMap}
+			loading={loading}
+			list={<List {...listProps} />}
+			map={<Map {...mapProps} />}
+			filter={<Filter showMap={showMap} className="md:hc-hidden" />}
+			mapPosition={mapPosition}
+		/>
+	);
+};
+
+export default MapListContainer;