@abcagency/hc-ui-components 1.0.4 → 1.0.6

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

@@ -1,133 +1,133 @@
-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={`
-               group relative flex md:flex-col w-full md:pl-4 text-left bg-clip-border border border-transparent break-words overflow-hidden cursor-pointer transition-colors hover:bg-uiAccent/5 focus:hover:bg-uiAccent/5
-					${isActive ? "bg-uiAccent/5 border-secondary border" : "text-uiText bg-white"}
-					${className ?? ""}
-            `}
-				{...props}
-			>
-				<Grid
-					columns="grid-flow-col auto-cols-fr"
-					gap="gap-2"
-					isAnimated={false}
-					className={`
-                    block md:grid flex-auto p-2 ps-4 w-full grow leading-tight text-sm md:text-xs lg:text-sm
-                    ${bodyClassName ?? ""}
-                `}
-				>
-					<Grid.Item className="hidden md:block md:absolute md:left-1.5 top-1.5">
-						<span className="sr-only">Expand row</span>
-						<Icon
-							icon="fluent-emoji-high-contrast:plus"
-							size="w-2.5 h-2.5"
-							className={`
-								opacity-0 text-uiText/60 transition group-hover:opacity-100 group-active:opacity-100
-								${isActive ? "opacity-100 rotate-45" : ""}
-							`}
-						/>
-
-					</Grid.Item>
-
-					<FieldMapper
-						item={item}
-						fieldsShown={fieldsShown}
-						specialFeatures={specialFeatures}
-						isFavorite={isFavorite}
-						handleFavouriteClick={handleFavouriteClick}
-					/>
-					<Grid.Item
-						key={"favorites"}
-						className="hidden md:block"
-					>
-
-						<Icon
-							icon={isFavorite ? "mdi:heart" : "mdi:heart-outline"}
-							size="w-3.5 h-3.5"
-							iconClasses={isFavorite ? "text-primary" : ""}
-							title={!isFavorite ? 'Add job to favorites': 'Remove job from favorites'}
-							className={`
-							pr-2 transition-opacity duration-300 cursor-pointer opacity-100"
-						`}
-							onClick={e => handleFavouriteClick(e)}
-						/>
-					</Grid.Item>
-				</Grid>
-
-				{showMap && (
-					<div onClick={() => {setMobileTab("mapTab"); handleClick();}} className="md:hidden w-2/5 sm:w-1/3 p-1.5 my-1 bg-uiAccent/5 border border-uiAccent/10 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="w-full h-full 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, { 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
+	);
+});

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

@@ -1,73 +1,73 @@
-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:grid-rows-[100vh]" : "md:grid-rows-[50vh_50vh]"}
-					md:grid md:pt-4 overflow-hidden relative
-				`}
-			>
-				<div className="">
-					<List {...listProps} />
-				</div>
-				<div>{showMap && map}</div>
-			</div>
-			<div className="md:hidden">
-				<Tabs
-					showMap={showMap}
-					list={<List {...listProps} />}
-					map={!loading && showMap && map}
-					filter={
-						<Filter
-							showMap={showMap}
-							className="md:hidden"
-						/>
-					}
-				/>
-			</div>
-		</>
-	);
-};
-
-export default MapList;
+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-rid-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;

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

@@ -27,7 +27,7 @@ const Map = ({
 	} = useMap();
 
 	const {
-		mapItems, handleFilterListingsByLocation, filteredListings,	setSelectedFilters,
+		mapItems, handleFilterListingsByLocation, filteredListings, setSelectedFilters,
 		setQuery
 	} = useMapList();
 
@@ -38,7 +38,7 @@ const Map = ({
 		usePlaces();
 
 	const onIdle = () => {
-		if(!currentCenter || !mapRef.current) return;
+		if (!currentCenter || !mapRef.current) return;
 		const newCenter = mapRef.current.getCenter().toJSON();
 		const newZoom = mapRef.current.zoom;
 
@@ -51,16 +51,17 @@ const Map = ({
 
 	useEffect(() => {
 		if (mapContainerRef.current) {
-		  const handleScroll = () => {
+			const handleScroll = () => {
 				setMapInteracted(true);
-		  };
-		  var mapContainerRefCurrent = mapContainerRef.current;
-		  mapContainerRef.current.addEventListener('wheel', handleScroll);
-		  return () => mapContainerRefCurrent.removeEventListener('wheel', handleScroll);
-		}},[mapContainerRef.current]);
+			};
+			var mapContainerRefCurrent = mapContainerRef.current;
+			mapContainerRef.current.addEventListener('wheel', handleScroll);
+			return () => mapContainerRefCurrent.removeEventListener('wheel', handleScroll);
+		}
+	}, [mapContainerRef.current]);
 
 	useEffect(() => {
-		if(mapRef.current){
+		if (mapRef.current) {
 			const mapInstance = mapRef.current;
 			const dragStartListener = mapInstance.addListener('dragstart', () => setMapInteracted(true));
 			const mouseDownListener = mapInstance.addListener('mousedown', () => setMapInteracted(true));
@@ -69,7 +70,7 @@ const Map = ({
 				google.maps.event.removeListener(mouseDownListener);
 			};
 		}
-	  }, [mapRef.current, mapContainerRef.current]);
+	}, [mapRef.current, mapContainerRef.current]);
 
 	useEffect(() => {
 		if ((mapItems && mapItems.length > 0 || poiMarkers.length > 0) && mapRef.current) {
@@ -81,7 +82,7 @@ const Map = ({
 		if (mapItems && mapItems.length > 0 || poiMarkers.length > 0 && mapRef.current && mapInteracted) {
 			fitBounds(mapRef.current, true);
 		}
-		if(mapRef.current){
+		if (mapRef.current) {
 			let currZoom = mapRef.current.zoom;
 			let setZoomVal = currZoom < 13 ? currZoom : 12;
 			mapRef.current.setZoom(setZoomVal);
@@ -93,22 +94,22 @@ const Map = ({
 		mapRef.current.panTo(
 			new google.maps.LatLng(location.latitude, location.longitude),
 		);
-		if(mapRef.current){
+		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){
+		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;
+			if (!map) return;
 			map.fitBounds(bounds);
 		}
-		if(mapRef.current.zoom > 17){
+		if (mapRef.current.zoom > 17) {
 			mapRef.current.setZoom(16);
 		}
 	};
@@ -120,28 +121,28 @@ const Map = ({
 
 	const onLoad = map => {
 		if (!location || location === null) {
-			  mapRef.current = map;
-			  fitBounds(map, true);
-			  return;
+			mapRef.current = map;
+			fitBounds(map, true);
+			return;
 		}
 		mapRef.current = map;
 
-		if(mapInteracted === false) {
-			  mapRef.current.panTo(
+		if (mapInteracted === false) {
+			mapRef.current.panTo(
 				new google.maps.LatLng(location.latitude, location.longitude),
-			  );
+			);
 
-			  mapRef.current.setZoom(zoom);
+			mapRef.current.setZoom(zoom);
 		}
 	};
 
 	const pinIconUrl = pinIcon({
 		fillColor: markerConfigs.fillColor,
 		strokeColor: markerConfigs.strokeColor
-	  });
+	});
 
 	return (
-		<>{zoom && center && <div ref={mapContainerRef} className="h-full relative">
+		<>{zoom && center && <div ref={mapContainerRef} className="hc-h-full hc-relative">
 			<GoogleMap
 				zoom={zoom}
 				onLoad={onLoad}
@@ -189,7 +190,7 @@ const Map = ({
 										placesWindow={placesWindow}
 										setPlacesWindow={setPlacesWindow}
 										setSelectedPlaceMarker={setSelectedPlaceMarker}
-								  />
+									/>
 								);
 							})}
 						</>