@abcagency/hc-ui-components 1.1.1 → 1.2.0

package/src/components/modules/maps/map.js

@@ -1,226 +1,229 @@
-import React, { useEffect, useRef } from "react";
-import { GoogleMap, MarkerClustererF } from "@react-google-maps/api";
-import MapMarker from "./map-marker";
-import { usePlaces } from "~/contexts/placesContext";
-import { useMap } from "~/contexts/mapContext";
-import { markerIconSelected, markerIcon, pinIcon } from "~/util/mapIconUtil";
-import { clusterOptions } from "~/util/mapUtil";
-import { useMapList } from "~/contexts/mapListContext";
-import PlaceMarker from "./place-marker";
-import ShowAllButton from "../buttons/show-all-button";
-
-const Map = ({
-	markerConfigs,
-	infoWindowClasses,
-	clusterGridSize = 60
-}) => {
-	const {
-		location,
-		zoom,
-		center,
-		commuteLocation,
-		selectLocationEntity,
-		setLocation,
-		mapInteracted,
-		setMapInteracted
-	} = useMap();
-
-	const {
-		mapItems, handleFilterListingsByLocation, filteredListings, setSelectedFilters,
-		setQuery
-	} = 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 (!map) return;
-			map.fitBounds(bounds);
-		}
-		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
-	});
-
-	return (
-		<>{zoom && center && <div ref={mapContainerRef} className="hc-h-full hc-relative">
-			<GoogleMap
-				zoom={zoom}
-				onLoad={onLoad}
-				onIdle={onIdle}
-				center={center}
-				mapContainerStyle={{
-					width: "100%",
-					height: "100%"
-				}}
-				options={{
-					styles: [
-						{
-							featureType: "poi",
-							elementType: "labels",
-							stylers: [{ visibility: "off" }]
-						}
-					]
-				}}
-			>
-				<MarkerClustererF options={clusterOptions(clusterGridSize, markerConfigs.fillColor)}>
-					{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) => {
-								return (
-									<PlaceMarker
-										key={`marker-${marker.title}-${index}`}
-										marker={marker}
-										index={index}
-										selectedPlaceMarker={selectedPlaceMarker}
-										placesWindow={placesWindow}
-										setPlacesWindow={setPlacesWindow}
-										setSelectedPlaceMarker={setSelectedPlaceMarker}
-									/>
-								);
-							})}
-						</>
-					)}
-				</MarkerClustererF>
-			</GoogleMap>
-			{mapInteracted && markerConfigs && (
-				<ShowAllButton
-					mapInteracted={mapInteracted}
-					markerConfigs={markerConfigs}
-					setMapInteracted={setMapInteracted}
-					fitBounds={fitBounds}
-					mapRef={mapRef}
-					pinIconUrl={pinIconUrl}
-					setQuery={setQuery}
-					listingCount={filteredListings.length}
-					setSelectedFilters={setSelectedFilters}
-				/>
-			)}
-		</div>
-		}
-		</>
-	);
-};
-
-export default Map;
+import React, { useEffect, useRef } from 'react';
+import { GoogleMap, MarkerClustererF } from "@react-google-maps/api";
+
+import MapMarker from "~/components/modules/maps/map-marker";
+import PlaceMarker from "~/components/modules/maps/place-marker";
+import ShowAllButton from "~/components/modules/buttons/show-all-button";
+
+import { usePlaces } from "~/contexts/placesContext";
+import { useMap } from "~/contexts/mapContext";
+import { useMapList } from "~/contexts/mapListContext";
+
+import { markerIconSelected, markerIcon, pinIcon } from "~/util/mapIconUtil";
+import { clusterOptions } from "~/util/mapUtil";
+
+const Map = ({
+	markerConfigs,
+	infoWindowClasses,
+	clusterGridSize = 60
+}) => {
+	const {
+		location,
+		zoom,
+		center,
+		commuteLocation,
+		selectLocationEntity,
+		setLocation,
+		mapInteracted,
+		setMapInteracted
+	} = useMap();
+
+	const {
+		mapItems, handleFilterListingsByLocation, filteredListings, setSelectedFilters,
+		setQuery
+	} = 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 (!map) return;
+			map.fitBounds(bounds);
+		}
+		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
+	});
+
+	return (
+		<>{zoom && center && <div ref={mapContainerRef} className="hc-h-full hc-relative">
+			<GoogleMap
+				zoom={zoom}
+				onLoad={onLoad}
+				onIdle={onIdle}
+				center={center}
+				mapContainerStyle={{
+					width: "100%",
+					height: "100%"
+				}}
+				options={{
+					styles: [
+						{
+							featureType: "poi",
+							elementType: "labels",
+							stylers: [{ visibility: "off" }]
+						}
+					]
+				}}
+			>
+				<MarkerClustererF options={clusterOptions(clusterGridSize, markerConfigs.fillColor)}>
+					{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) => {
+								return (
+									<PlaceMarker
+										key={`marker-${marker.title}-${index}`}
+										marker={marker}
+										index={index}
+										selectedPlaceMarker={selectedPlaceMarker}
+										placesWindow={placesWindow}
+										setPlacesWindow={setPlacesWindow}
+										setSelectedPlaceMarker={setSelectedPlaceMarker}
+									/>
+								);
+							})}
+						</>
+					)}
+				</MarkerClustererF>
+			</GoogleMap>
+			{mapInteracted && markerConfigs && (
+				<ShowAllButton
+					mapInteracted={mapInteracted}
+					markerConfigs={markerConfigs}
+					setMapInteracted={setMapInteracted}
+					fitBounds={fitBounds}
+					mapRef={mapRef}
+					pinIconUrl={pinIconUrl}
+					setQuery={setQuery}
+					listingCount={filteredListings.length}
+					setSelectedFilters={setSelectedFilters}
+				/>
+			)}
+		</div>
+		}
+		</>
+	);
+};
+
+export default Map;

package/src/components/modules/maps/place-marker.js

@@ -25,7 +25,7 @@ const PlaceMarker = ({
 			options={{ optimized: false }}
 			onClick={placeMarkerClickHandler}
 		>
-			{selectedPlaceMarker === markerKey && placesWindow && marker &&(
+			{selectedPlaceMarker === markerKey && placesWindow && marker && (
 				<InfoWindowF
 					position={marker.position}
 					onCloseClick={() => setPlacesWindow(false)}

package/src/components/modules/maps/tabs.js

@@ -1,79 +1,81 @@
-import * as Tabs from "@radix-ui/react-tabs";
-import Button from "~/components/modules/buttons/default";
-import { useMapList } from "~/contexts/mapListContext";
-import React from 'react'
-
-const MapTabs = ({
-	map,
-	list,
-	filter,
-	className,
-	showMap
-}) => {
-	const tabButtonClasses =
-		"hc-flex hc-items-center hc-gap-2 hc-rounded-none hc-border-x-0 data-[state=active]:hc-bg-primary data-[state=active]:hc-text-white";
-	const { mobileTab, setMobileTab } = useMapList();
-	return (
-		<div
-			className={`
-				hc-relative hc-overflow-hidden
-				${className ?? ""}
-			`}
-		>
-			<Tabs.Root
-				className="hc-flex hc-flex-col hc-h-screen hc-min-h-screen"
-				//defaultValue="listTab"
-				value={mobileTab}
-			>
-				<Tabs.List
-					className="hc-w-full hc-shrink-0 hc-flex hc-divide-x hc-divide-primary"
-					aria-label="Review positions"
-				>
-					<Tabs.Trigger value="listTab" asChild onClick={() => setMobileTab("listTab")}>
-						<Button.Btn variant="outline" isBlock className={tabButtonClasses}>
-							<Button.Body className="hc-justify-center">
-								<Button.Icon icon="mdi:view-list" size="hc-size-5" />
-								List
-							</Button.Body>
-						</Button.Btn>
-					</Tabs.Trigger>
-					{showMap && (
-						<Tabs.Trigger value="mapTab" asChild onClick={() => setMobileTab("mapTab")}>
-							<Button.Btn
-								variant="outline"
-								isBlock
-								className={tabButtonClasses}
-							>
-								<Button.Body className="hc-justify-center">
-									<Button.Icon icon="mdi:map" size="hc-size-5" />
-									Map
-								</Button.Body>
-							</Button.Btn>
-						</Tabs.Trigger>
-					)}
-					<Tabs.Trigger value="filterTab" asChild onClick={() => setMobileTab("filterTab")}>
-						<Button.Btn variant="outline" isBlock className={tabButtonClasses}>
-							<Button.Body className="hc-justify-center">
-								<Button.Icon icon="fluent:search-12-filled" size="hc-size-5" />
-								Filter
-							</Button.Body>
-						</Button.Btn>
-					</Tabs.Trigger>
-				</Tabs.List>
-				<Tabs.Content className="hc-grow hc-bg-white hc-outline-none" value="listTab">
-					{list}
-				</Tabs.Content>
-				{showMap && (
-					<Tabs.Content className="hc-grow hc-bg-white hc-outline-none" value="mapTab">
-						{map}
-					</Tabs.Content>
-				)}
-				<Tabs.Content className="hc-grow hc-bg-white hc-outline-none hc-p-2" value="filterTab">
-					{filter}
-				</Tabs.Content>
-			</Tabs.Root>
-		</div>
-	);
-};
-
-export default MapTabs;
+import React from 'react'
+import * as Tabs from '@radix-ui/react-tabs';
+
+import Button from '~/components/modules/buttons/default';
+
+import { useMapList } from '~/contexts/mapListContext';
+
+const MapTabs = ({
+	map,
+	list,
+	filter,
+	className,
+	showMap
+}) => {
+	const tabButtonClasses =
+		"hc-flex hc-items-center hc-gap-2 hc-rounded-none hc-border-x-0 data-[state=active]:hc-bg-primary data-[state=active]:hc-text-white";
+	const { mobileTab, setMobileTab } = useMapList();
+	return (
+		<div
+			className={`
+				hc-relative hc-overflow-hidden
+				${className ?? ""}
+			`}
+		>
+			<Tabs.Root
+				className="hc-flex hc-flex-col hc-h-screen hc-min-h-screen"
+				//defaultValue="listTab"
+				value={mobileTab}
+			>
+				<Tabs.List
+					className="hc-w-full hc-shrink-0 hc-flex hc-divide-x hc-divide-primary"
+					aria-label="Review positions"
+				>
+					<Tabs.Trigger value="listTab" asChild onClick={() => setMobileTab("listTab")}>
+						<Button.Btn variant="outline" isBlock className={tabButtonClasses}>
+							<Button.Body className="hc-justify-center">
+								<Button.Icon icon="mdi:view-list" size="hc-size-5" />
+								List
+							</Button.Body>
+						</Button.Btn>
+					</Tabs.Trigger>
+					{showMap && (
+						<Tabs.Trigger value="mapTab" asChild onClick={() => setMobileTab("mapTab")}>
+							<Button.Btn
+								variant="outline"
+								isBlock
+								className={tabButtonClasses}
+							>
+								<Button.Body className="hc-justify-center">
+									<Button.Icon icon="mdi:map" size="hc-size-5" />
+									Map
+								</Button.Body>
+							</Button.Btn>
+						</Tabs.Trigger>
+					)}
+					<Tabs.Trigger value="filterTab" asChild onClick={() => setMobileTab("filterTab")}>
+						<Button.Btn variant="outline" isBlock className={tabButtonClasses}>
+							<Button.Body className="hc-justify-center">
+								<Button.Icon icon="fluent:search-12-filled" size="hc-size-5" />
+								Filter
+							</Button.Body>
+						</Button.Btn>
+					</Tabs.Trigger>
+				</Tabs.List>
+				<Tabs.Content className="hc-grow hc-bg-white hc-outline-none" value="listTab">
+					{list}
+				</Tabs.Content>
+				{showMap && (
+					<Tabs.Content className="hc-grow hc-bg-white hc-outline-none" value="mapTab">
+						{map}
+					</Tabs.Content>
+				)}
+				<Tabs.Content className="hc-grow hc-bg-white hc-outline-none hc-p-2" value="filterTab">
+					{filter}
+				</Tabs.Content>
+			</Tabs.Root>
+		</div>
+	);
+};
+
+export default MapTabs;

package/src/constants/placeTypes.js

@@ -1,8 +1,8 @@
-export const placeTypes = {
-	FOOD: "food",
-	STORE: "shopping",
-	TOURIST_ATTRACTION: "attractions",
-	TRANSIT_STATION: "transit",
-	SCHOOL: "schools",
-	PLACE_OF_WORSHIP: "worship"
-};
+export const placeTypes = {
+	FOOD: "food",
+	STORE: "shopping",
+	TOURIST_ATTRACTION: "attractions",
+	TRANSIT_STATION: "transit",
+	SCHOOL: "schools",
+	PLACE_OF_WORSHIP: "worship"
+};