@abcagency/hc-ui-components 1.1.1 → 1.2.0

package/src/components/modules/maps/list/list-item/index.js

@@ -1,133 +1,134 @@
-import React, { forwardRef } from 'react';
-import Grid, { GridItem } from '~/components/modules/grid';
-import Icon from '~/components/modules/icon';
-import FieldMapper from '~/components/modules/maps/list/field-mapper';
-import { useMapList } from '~/contexts/mapListContext';
-
-
-const ListItem = forwardRef(
-	(
-		{
-			isActive,
-			bodyClassName,
-			className,
-			item,
-			fieldsShown,
-			specialFeatures,
-			onItemSelected,
-			showMap,
-			setMobileTab,
-			favorites,
-			setFavorites,
-			...props
-		},
-		ref,
-	) => {
-		const { siteConfig } = useMapList();
-		const mapPinColor = siteConfig.colors.primary.replace("#", "");
-
-		const handleClick = () => {
-			if (onItemSelected) {
-				onItemSelected(item);
-			}
-		};
-
-		let isFavorite = favorites.includes(item.id);
-
-		const handleFavouriteClick = event => {
-			event.stopPropagation();
-			let updatedFavorites;
-			if (isFavorite) {
-				updatedFavorites = favorites.filter(fav => fav !== item.id);
-			} else {
-				updatedFavorites = [...favorites, item.id];
-			}
-			isFavorite = !isFavorite;
-			setFavorites(updatedFavorites);
-
-		};
-
-		return (
-			<button
-				ref={ref}
-				onClick={handleClick}
-				className={`
-					hc-group hc-relative hc-flex md:hc-flex-col hc-w-full md:hc-pl-4 hc-text-left hc-bg-clip-border hc-border hc-border-transparent hc-break-words hc-overflow-hidden hc-cursor-pointer hc-transition-colors hover:hc-bg-uiAccent/5 focus:hc-hover:bg-uiAccent/5
-					${isActive ? "bg-uiAccent/5 border-secondary border" : "text-uiText bg-white"}
-					${className ?? ""}
-        `}
-				{...props}
-			>
-				<Grid
-					columns="hc-grid-flow-col hc-auto-cols-fr"
-					gap="hc-gap-2"
-					isAnimated={false}
-					className={`
-						hc-block md:hc-grid hc-flex-auto hc-p-2 hc-ps-4 hc-w-full hc-grow hc-leading-tight hc-text-sm md:hc-text-xs lg:hc-text-sm
-						${bodyClassName ?? ""}
-					`}
-				>
-					<Grid.Item className="hc-hidden md:hc-block md:hc-absolute md:hc-left-1.5 hc-top-1.5">
-						<span className="hc-sr-only">Expand row</span>
-						<Icon
-							icon="fluent-emoji-high-contrast:plus"
-							size="hc-size-2.5"
-							className={`
-								hc-opacity-0 hc-text-uiText/60 hc-transition group-hover:hc-opacity-100 group-active:hc-opacity-100
-								${isActive ? "hc-opacity-100 hc-rotate-45" : ""}
-							`}
-						/>
-
-					</Grid.Item>
-
-					<FieldMapper
-						item={item}
-						fieldsShown={fieldsShown}
-						specialFeatures={specialFeatures}
-						isFavorite={isFavorite}
-						handleFavouriteClick={handleFavouriteClick}
-					/>
-					<Grid.Item
-						key={"favorites"}
-						className="hc-hidden md:hc-block"
-					>
-
-						<Icon
-							icon={isFavorite ? "mdi:heart" : "mdi:heart-outline"}
-							size="hc-size-3.5"
-							iconClasses={isFavorite ? "hc-text-primary" : ""}
-							title={!isFavorite ? 'Add job to favorites' : 'Remove job from favorites'}
-							className={`
-							hc-pr-2 hc-transition-opacity hc-duration-300 hc-cursor-pointer hc-opacity-100"
-						`}
-							onClick={e => handleFavouriteClick(e)}
-						/>
-					</Grid.Item>
-				</Grid>
-
-				{showMap && (
-					<div onClick={() => { setMobileTab("mapTab"); handleClick(); }} className="md:hc-hidden hc-w-2/5 sm:hc-w-1/3 hc-p-1.5 hc-my-1 hc-bg-uiAccent/5 hc-border hc-border-uiAccent/10 hc-rounded-sm">
-						<img
-							src={`https://maps.googleapis.com/maps/api/staticmap?scale=2&center=${item.mapDetails?.latitude},${item.mapDetails?.longitude}&zoom=10&size=240x180&maptype=roadmap&markers=color:0x${mapPinColor}%7Clabel:•%7C${item.mapDetails?.latitude},${item.mapDetails?.longitude}&key=ToDo`}
-							alt={`Map of location for ${item.fields.position}`}
-							className="hc-w-full hc-h-full hc-object-cover"
-						/>
-					</div>
-				)}
-			</button>
-		);
-	},
-);
-
-ListItem.displayName = "ListItem";
-
-export default React.memo(ListItem, (prevProps, nextProps) => {
-	return (
-		(prevProps.isActive === nextProps.isActive ||
-			prevProps.isActive !== nextProps.isActive) &&
-		prevProps.bodyClassName === nextProps.bodyClassName &&
-		prevProps.className === nextProps.className &&
-		prevProps.fieldsShown === nextProps.fieldsShown &&
-		prevProps.item.id === nextProps.item.id
-	);
-});
+import React, { forwardRef } from 'react';
+
+import Grid from '~/components/modules/grid';
+import Icon from '~/components/modules/icon';
+import FieldMapper from '~/components/modules/maps/list/field-mapper';
+
+import { useMapList } from '~/contexts/mapListContext';
+
+const ListItem = forwardRef(
+	(
+		{
+			isActive,
+			bodyClassName,
+			className,
+			item,
+			fieldsShown,
+			specialFeatures,
+			onItemSelected,
+			showMap,
+			setMobileTab,
+			favorites,
+			setFavorites,
+			...props
+		},
+		ref,
+	) => {
+		const { siteConfig } = useMapList();
+		const mapPinColor = siteConfig.colors.primary.replace("#", "");
+
+		const handleClick = () => {
+			if (onItemSelected) {
+				onItemSelected(item);
+			}
+		};
+
+		let isFavorite = favorites.includes(item.id);
+
+		const handleFavouriteClick = event => {
+			event.stopPropagation();
+			let updatedFavorites;
+			if (isFavorite) {
+				updatedFavorites = favorites.filter(fav => fav !== item.id);
+			} else {
+				updatedFavorites = [...favorites, item.id];
+			}
+			isFavorite = !isFavorite;
+			setFavorites(updatedFavorites);
+
+		};
+
+		return (
+			<button
+				ref={ref}
+				onClick={handleClick}
+				className={`
+					hc-group hc-relative hc-flex md:hc-flex-col hc-w-full md:hc-pl-4 hc-text-left hc-bg-clip-border hc-border hc-border-transparent hc-break-words hc-overflow-hidden hc-cursor-pointer hc-transition-colors hover:hc-bg-uiAccent/5 focus:hover:hc-bg-uiAccent/5
+					${isActive ? "hc-bg-uiAccent/5 hc-border-secondary hc-border" : "hc-text-uiText hc-bg-white"}
+					${className ?? ""}
+        `}
+				{...props}
+			>
+				<Grid
+					columns="hc-grid-flow-col hc-auto-cols-fr"
+					gap="hc-gap-2"
+					isAnimated={false}
+					className={`
+						hc-block md:hc-grid hc-p-2 hc-ps-4 hc-w-full hc-grow hc-leading-tight hc-text-sm md:hc-text-xs lg:hc-text-sm
+						${bodyClassName ?? ""}
+					`}
+				>
+					<Grid.Item className="hc-hidden md:hc-block md:hc-absolute md:hc-left-1.5 hc-top-1.5">
+						<span className="hc-sr-only">Expand row</span>
+						<Icon
+							icon="fluent-emoji-high-contrast:plus"
+							size="hc-size-2.5"
+							className={`
+								hc-opacity-0 hc-text-uiText/60 hc-transition group-hover:hc-opacity-100 group-active:hc-opacity-100
+								${isActive ? "hc-opacity-100 hc-rotate-45" : ""}
+							`}
+						/>
+
+					</Grid.Item>
+
+					<FieldMapper
+						item={item}
+						fieldsShown={fieldsShown}
+						specialFeatures={specialFeatures}
+						isFavorite={isFavorite}
+						handleFavouriteClick={handleFavouriteClick}
+					/>
+					<Grid.Item
+						key={"favorites"}
+						className="hc-hidden md:hc-block hc-col-span-1"
+					>
+
+						<Icon
+							icon={isFavorite ? "mdi:heart" : "mdi:heart-outline"}
+							size="hc-size-3.5"
+							iconClasses={isFavorite ? "hc-text-primary" : ""}
+							title={!isFavorite ? 'Add job to favorites' : 'Remove job from favorites'}
+							className={`
+							hc-pr-2 hc-transition-opacity hc-duration-300 hc-cursor-pointer hc-opacity-100"
+						`}
+							onClick={e => handleFavouriteClick(e)}
+						/>
+					</Grid.Item>
+				</Grid>
+
+				{showMap && (
+					<div onClick={() => { setMobileTab("mapTab"); handleClick(); }} className="md:hc-hidden hc-w-2/5 sm:hc-w-1/3 hc-p-1.5 hc-my-1 hc-bg-uiAccent/5 hc-border hc-border-uiAccent/10 hc-rounded-sm">
+						<img
+							src={`https://maps.googleapis.com/maps/api/staticmap?scale=2&center=${item.mapDetails?.latitude},${item.mapDetails?.longitude}&zoom=10&size=240x180&maptype=roadmap&markers=color:0x${mapPinColor}%7Clabel:•%7C${item.mapDetails?.latitude},${item.mapDetails?.longitude}&key=${process.env.GOOGLE_MAPS_API_KEY}`}
+							alt={`Map of location for ${item.fields.position}`}
+							className="hc-w-full hc-h-full hc-object-cover"
+						/>
+					</div>
+				)}
+			</button>
+		);
+	},
+);
+
+ListItem.displayName = "ListItem";
+
+export default React.memo(ListItem, (prevProps, nextProps) => {
+	return (
+		(prevProps.isActive === nextProps.isActive ||
+			prevProps.isActive !== nextProps.isActive) &&
+		prevProps.bodyClassName === nextProps.bodyClassName &&
+		prevProps.className === nextProps.className &&
+		prevProps.fieldsShown === nextProps.fieldsShown &&
+		prevProps.item.id === nextProps.item.id
+	);
+});

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

@@ -1,73 +1,74 @@
-import List from "~/components/modules/maps/list";
-import Map from "~/components/modules/maps/map";
-import Tabs from "~/components/modules/maps/tabs";
-import Filter from "~/components/modules/filter";
-import React from 'react'
-
-const MapList = ({
-	loading = false,
-	mapDetails,
-	markerConfigs,
-	itemExpandedContent,
-	fieldsShown,
-	specialFeatures,
-	fieldNames,
-	showMap,
-	placeMappings
-}) => {
-
-	const listProps = {
-		fieldsShown: fieldsShown,
-		fieldNames: fieldNames,
-		itemExpandedContent: itemExpandedContent,
-		loading: loading,
-		showMap: showMap,
-		specialFeatures: specialFeatures
-	};
-
-	const mapProps = {
-		mapDetails: mapDetails,
-		markerConfigs: markerConfigs,
-		placeMappings: placeMappings,
-		clusterGridSize: 60,
-		showMap: showMap
-	};
-
-	// useEffect(() => {
-	// 	if (selectedItem !== null) {
-	// 		trackEvent("Map", "View Location", selectedItem[titlePropName]);
-	// 	}
-	// 	// eslint-disable-next-line react-hooks/exhaustive-deps
-	// }, []);
-	const map = <Map {...mapProps} />;
-	return (
-		<>
-			<div
-				className={`
-					${showMap == false ? "md:hc-grid-rows-[100vh]" : "md:hc-grid-rows-[50vh_50vh]"}
-					md:hc-grid md:hc-pt-4 hc-overflow-hidden hc-relative
-				`}
-			>
-				<div>
-					<List {...listProps} />
-				</div>
-				<div>{showMap && map}</div>
-			</div>
-			<div className="md:hc-hidden">
-				<Tabs
-					showMap={showMap}
-					list={<List {...listProps} />}
-					map={!loading && showMap && map}
-					filter={
-						<Filter
-							showMap={showMap}
-							className="md:hc-hidden"
-						/>
-					}
-				/>
-			</div>
-		</>
-	);
-};
-
-export default MapList;
+import React from 'react';
+
+import List from '~/components/modules/maps/list';
+import Map from '~/components/modules/maps/map';
+import Tabs from '~/components/modules/maps/tabs';
+import Filter from '~/components/modules/filter';
+
+const MapList = ({
+	loading = false,
+	mapDetails,
+	markerConfigs,
+	itemExpandedContent,
+	fieldsShown,
+	specialFeatures,
+	fieldNames,
+	showMap,
+	placeMappings
+}) => {
+
+	const listProps = {
+		fieldsShown: fieldsShown,
+		fieldNames: fieldNames,
+		itemExpandedContent: itemExpandedContent,
+		loading: loading,
+		showMap: showMap,
+		specialFeatures: specialFeatures
+	};
+
+	const mapProps = {
+		mapDetails: mapDetails,
+		markerConfigs: markerConfigs,
+		placeMappings: placeMappings,
+		clusterGridSize: 60,
+		showMap: showMap
+	};
+
+	// useEffect(() => {
+	// 	if (selectedItem !== null) {
+	// 		trackEvent("Map", "View Location", selectedItem[titlePropName]);
+	// 	}
+	// 	// eslint-disable-next-line react-hooks/exhaustive-deps
+	// }, []);
+	const map = <Map {...mapProps} />;
+	return (
+		<>
+			<div
+				className={`
+					${showMap == false ? "md:hc-grid-rows-[100vh]" : "md:hc-grid-rows-[50vh_50vh]"}
+					md:hc-grid md:hc-pt-4 hc-overflow-hidden hc-relative bg-gray-100
+				`}
+			>
+				<div>
+					<List {...listProps} />
+				</div>
+				<div>{showMap && map}</div>
+			</div>
+			<div className="md:hc-hidden">
+				<Tabs
+					showMap={showMap}
+					list={<List {...listProps} />}
+					map={!loading && showMap && map}
+					filter={
+						<Filter
+							showMap={showMap}
+							className="md:hc-hidden"
+						/>
+					}
+				/>
+			</div>
+		</>
+	);
+};
+
+export default MapList;

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

@@ -1,84 +1,86 @@
-import React, { useEffect, useRef } from "react";
-import { MarkerF, InfoWindow } from "@react-google-maps/api";
-import InfoWindowCard from "~/components/modules/maps/info-window-card";
-import { useMap } from "~/contexts/mapContext";
-import { useMapList } from "~/contexts/mapListContext";
-import InfoWindowContent from "./info-window-content";
-
-const MapMarker = ({
-	item,
-	markerRefs,
-	infoWindowClasses,
-	markerClickHandler,
-	clusterer,
-	markerIconSelected,
-	markerIcon,
-	selectedLocation,
-	setMapInteracted
-}) => {
-	const { setLocation, commuteLocation } = useMap();
-	const isSelected = item.id === selectedLocation?.id;
-	const markerRef = useRef(null);
-
-	const {
-		handleFilterListingsByLocation
-	} = useMapList();
-
-	useEffect(() => {
-		markerRefs.current[item.id] = markerRef.current;
-	}, []);
-
-	const onMarkerClick = () => {
-		setMapInteracted(true);
-		markerClickHandler(item);
-	};
-
-	const getInfoWindow = () => {
-		if (!isSelected || !item || !item.id || !selectedLocation) {
-			return;
-		}
-		//Direct dom removal of empty info windows
-		document.querySelectorAll("div.gm-style-iw.gm-style-iw-c").forEach(x => { if (!x.innerHTML.includes(item.id)) x.parentElement.remove(); });
-		return (
-			<InfoWindow
-				position={{ lat: item.latitude, lng: item.longitude }}
-				anchor={markerRefs.current[item.id]}
-				onCloseClick={() => {
-					setMapInteracted(true);
-					setLocation(null);
-				}}
-				options={{ maxWidth: 400 }}
-			>
-				<InfoWindowCard
-					className={infoWindowClasses}
-					id={item.id}
-					content={<InfoWindowContent
-						item={item}
-						commuteLocation={commuteLocation}
-						filterListingsByLocation={() =>
-							handleFilterListingsByLocation(selectedLocation)
-						}
-					/>}
-				/>
-			</InfoWindow>
-		);
-	};
-	return (
-		<MarkerF
-			key={item.id}
-			position={{ lat: item.latitude, lng: item.longitude }}
-			title={item.name}
-			options={{
-				icon: isSelected ? markerIconSelected : markerIcon
-			}}
-			zIndex={isSelected ? 9999 : 1}
-			onLoad={marker => (markerRef.current = marker)}
-			onClick={onMarkerClick}
-			clusterer={clusterer}
-		>
-			{isSelected && getInfoWindow()}
-		</MarkerF>
-	);
-};
-
-export default MapMarker;
+import React, { useEffect, useRef } from 'react';
+import { MarkerF, InfoWindow } from '@react-google-maps/api';
+
+import InfoWindowCard from '~/components/modules/maps/info-window-card';
+import InfoWindowContent from "~/components/modules/maps/info-window-content";
+
+import { useMap } from "~/contexts/mapContext";
+import { useMapList } from "~/contexts/mapListContext";
+
+const MapMarker = ({
+	item,
+	markerRefs,
+	infoWindowClasses,
+	markerClickHandler,
+	clusterer,
+	markerIconSelected,
+	markerIcon,
+	selectedLocation,
+	setMapInteracted
+}) => {
+	const { setLocation, commuteLocation } = useMap();
+	const isSelected = item.id === selectedLocation?.id;
+	const markerRef = useRef(null);
+
+	const {
+		handleFilterListingsByLocation
+	} = useMapList();
+
+	useEffect(() => {
+		markerRefs.current[item.id] = markerRef.current;
+	}, []);
+
+	const onMarkerClick = () => {
+		setMapInteracted(true);
+		markerClickHandler(item);
+	};
+
+	const getInfoWindow = () => {
+		if (!isSelected || !item || !item.id || !selectedLocation) {
+			return;
+		}
+		//Direct dom removal of empty info windows
+		document.querySelectorAll("div.gm-style-iw.gm-style-iw-c").forEach(x => { if (!x.innerHTML.includes(item.id)) x.parentElement.remove(); });
+		return (
+			<InfoWindow
+				position={{ lat: item.latitude, lng: item.longitude }}
+				anchor={markerRefs.current[item.id]}
+				onCloseClick={() => {
+					setMapInteracted(true);
+					setLocation(null);
+				}}
+				options={{ maxWidth: 400 }}
+			>
+				<InfoWindowCard
+					className={infoWindowClasses}
+					id={item.id}
+					content={<InfoWindowContent
+						item={item}
+						commuteLocation={commuteLocation}
+						filterListingsByLocation={() =>
+							handleFilterListingsByLocation(selectedLocation)
+						}
+					/>}
+				/>
+			</InfoWindow>
+		);
+	};
+	return (
+		<MarkerF
+			key={item.id}
+			position={{ lat: item.latitude, lng: item.longitude }}
+			title={item.name}
+			options={{
+				icon: isSelected ? markerIconSelected : markerIcon
+			}}
+			zIndex={isSelected ? 9999 : 1}
+			onLoad={marker => (markerRef.current = marker)}
+			onClick={onMarkerClick}
+			clusterer={clusterer}
+		>
+			{isSelected && getInfoWindow()}
+		</MarkerF>
+	);
+};
+
+export default MapMarker;