@abcagency/hc-ui-components 1.3.58 → 1.3.60

package/src/components/containers/list/item-list-container.tsx

@@ -1,81 +1,81 @@
-import React from 'react';
-import useListLogic from '~/hooks/useList';
-import { useMap } from '~/contexts/mapContext';
-import { useMapList } from '~/contexts/mapListContext';
-import { useTrackEvent } from '~/contexts/trackEventContext';
-import ItemsList from '~/components/modules/list/item-list';
-import Accordion from '~/components/modules/accordions/default';
-import MapAccordionItemContainer from '~/components/containers/accordions/map-accordion-item-container';
-import { dynamicSort } from '~/util/sortUtil';
-import { Listing } from '~/types/Listings';
-import ListingDetailsContainer from '../jobListing/listing-details-container';
-
-interface ItemsListContainerProps {
-  fieldNames: Record<string, string>;
-  showMap: boolean;
-  fieldsShown: string[];
-  specialFeatures: any;
-}
-
-const ItemsListContainer: React.FC<ItemsListContainerProps> = ({
-	fieldNames,
-	showMap,
-	fieldsShown,
-	specialFeatures
-}) => {
-	const { filteredListings, loading, commuteLocation, sortSetting, setSortSetting } = useMapList();
-	const { itemLimit, loader, scrollContainerRef, itemRefs } = useListLogic(filteredListings as any);
-	const { selectedListItem } = useMap();
-	const { trackEvent, eventTypes } = useTrackEvent() as any;
-	const itemExpandedContent = (item: any, recruiter: any) =>
-		item ? <ListingDetailsContainer item={item} recruiter={recruiter} /> : null;
-
-	if (!fieldsShown.includes('travelTime') && commuteLocation != null && Object.entries(commuteLocation).length > 0) {
-		fieldsShown.push('travelTime');
-		fieldNames['travelTime'] = 'Commute';
-	} else if (fieldsShown.includes('travelTime') && !commuteLocation) {
-		fieldsShown = fieldsShown.filter(x => x !== 'travelTime');
-	}
-
-	const setTrackedSortSetting = (sortSetting: { field: string; type: string }) => {
-		trackEvent(eventTypes.LIST_SORTED, sortSetting);
-		setSortSetting(sortSetting);
-	};
-	return (
-		<ItemsList
-			fieldNames={fieldNames}
-			showMap={showMap}
-			fieldsShown={fieldsShown}
-			filteredListings={filteredListings}
-			loading={loading}
-			sortSetting={sortSetting}
-			setSortSetting={setTrackedSortSetting}
-			itemLimit={itemLimit}
-			loader={loader}
-			scrollContainerRef={scrollContainerRef}
-			itemRefs={itemRefs}
-			selectedListItem={selectedListItem}
-			includeFavorite={true}
-		>
-			<Accordion className="hc-divide-y hc-divide-uiAccent/10 hc-z-[1000]" defaultValue={selectedListItem?.id}>
-				{(sortSetting ? dynamicSort(filteredListings, sortSetting.field, sortSetting.type) : filteredListings)
-					.slice(0, itemLimit)
-					.map((item: Listing) => (
-						<MapAccordionItemContainer
-							key={item.id}
-							showMap={showMap}
-							item={item}
-							itemRefs={itemRefs}
-							fieldsShown={fieldsShown}
-							itemExpandedContent={itemExpandedContent}
-							specialFeatures={specialFeatures}
-							isActive={selectedListItem?.id === item.id}
-							hasListItemSelected={selectedListItem != null}
-						/>
-					))}
-			</Accordion>
-		</ItemsList>
-	);
-};
-
-export default ItemsListContainer;
+import React from 'react';
+import useListLogic from '~/hooks/useList';
+import { useMap } from '~/contexts/mapContext';
+import { useMapList } from '~/contexts/mapListContext';
+import { useTrackEvent } from '~/contexts/trackEventContext';
+import ItemsList from '~/components/modules/list/item-list';
+import Accordion from '~/components/modules/accordions/default';
+import MapAccordionItemContainer from '~/components/containers/accordions/map-accordion-item-container';
+import { dynamicSort } from '~/util/sortUtil';
+import { Listing } from '~/types/Listings';
+import ListingDetailsContainer from '../jobListing/listing-details-container';
+
+interface ItemsListContainerProps {
+  fieldNames: Record<string, string>;
+  showMap: boolean;
+  fieldsShown: string[];
+  specialFeatures: any;
+}
+
+const ItemsListContainer: React.FC<ItemsListContainerProps> = ({
+	fieldNames,
+	showMap,
+	fieldsShown,
+	specialFeatures
+}) => {
+	const { filteredListings, loading, commuteLocation, sortSetting, setSortSetting } = useMapList();
+	const { itemLimit, loader, scrollContainerRef, itemRefs } = useListLogic(filteredListings as any);
+	const { selectedListItem } = useMap();
+	const { trackEvent, eventTypes } = useTrackEvent() as any;
+	const itemExpandedContent = (item: any, recruiter: any) =>
+		item ? <ListingDetailsContainer item={item} recruiter={recruiter} /> : null;
+
+	if (!fieldsShown.includes('travelTime') && commuteLocation != null && Object.entries(commuteLocation).length > 0) {
+		fieldsShown.push('travelTime');
+		fieldNames['travelTime'] = 'Commute';
+	} else if (fieldsShown.includes('travelTime') && !commuteLocation) {
+		fieldsShown = fieldsShown.filter(x => x !== 'travelTime');
+	}
+
+	const setTrackedSortSetting = (sortSetting: { field: string; type: string }) => {
+		trackEvent(eventTypes.LIST_SORTED, sortSetting);
+		setSortSetting(sortSetting);
+	};
+	return (
+		<ItemsList
+			fieldNames={fieldNames}
+			showMap={showMap}
+			fieldsShown={fieldsShown}
+			filteredListings={filteredListings}
+			loading={loading}
+			sortSetting={sortSetting}
+			setSortSetting={setTrackedSortSetting}
+			itemLimit={itemLimit}
+			loader={loader}
+			scrollContainerRef={scrollContainerRef}
+			itemRefs={itemRefs}
+			selectedListItem={selectedListItem}
+			includeFavorite={true}
+		>
+			<Accordion className="hc-divide-y hc-divide-uiAccent/10 hc-z-[1000]" defaultValue={selectedListItem?.id}>
+				{(sortSetting ? dynamicSort(filteredListings, sortSetting.field, sortSetting.type) : filteredListings)
+					.slice(0, itemLimit)
+					.map((item: Listing) => (
+						<MapAccordionItemContainer
+							key={item.id}
+							showMap={showMap}
+							item={item}
+							itemRefs={itemRefs}
+							fieldsShown={fieldsShown}
+							itemExpandedContent={itemExpandedContent}
+							specialFeatures={specialFeatures}
+							isActive={selectedListItem?.id === item.id}
+							hasListItemSelected={selectedListItem != null}
+						/>
+					))}
+			</Accordion>
+		</ItemsList>
+	);
+};
+
+export default ItemsListContainer;

package/src/components/containers/maps/info-window-content-container.js

@@ -1,53 +1,53 @@
-import React from 'react';
-import InfoWindowContent from '~/components/modules/maps/info-window-content';
-import { useMapList } from '~/contexts/mapListContext';
-import { useTrackEvent } from '~/contexts/trackEventContext';
-
-const InfoWindowContentContainer = ({
-	item,
-	filterListingsByLocation
-}) => {
-	const { trackEvent, eventTypes } = useTrackEvent();
-	const { setSelectedFilters, setMobileTab, selectedFilters, siteConfig, filteredListings } = useMapList();
-	const fieldsShown = siteConfig.locationFiltersShown;
-	let items = item && item.items ? Object.values(item.items) : null;
-
-	const addressParts = [
-		items[0].mapDetails?.address?.street,
-		items[0].mapDetails?.address?.city,
-		items[0].mapDetails?.address?.state,
-		items[0].mapDetails?.address?.zip
-	];
-	const fullAddress = addressParts.filter(Boolean).join(', ');
-
-	const applyFilters = () => {
-		setMobileTab("listTab");
-		const newFilters = { ...selectedFilters };
-		let filters = [];
-
-		if (fieldsShown.includes('cityState')) {
-			newFilters.cityState = { [items[0].fields.cityState]: true };
-			filters.push({ filterType: 'cityState', filterChecked: items[0].fields.cityState });
-		}
-
-		if (fieldsShown.includes('city')) {
-			newFilters.city = { [items[0].fields.city]: true };
-			filters.push({ filterType: 'city', filterChecked: items[0].fields.city });
-		}
-
-		if (fieldsShown.includes('state')) {
-			newFilters.state = { [items[0].fields.state]: true };
-			filters.push({ filterType: 'state', filterChecked: items[0].fields.state });
-		}
-
-		newFilters.entityName = { [items[0].fields.entityName]: true };
-		filters.push({ filterType: 'entityName', filterChecked: items[0].fields.entityName });
-
-		trackEvent(eventTypes.VIEW_JOBS_AT_Location, { filtersApplied: filters });
-		setSelectedFilters(newFilters);
-	};
-
-	return <InfoWindowContent items={items} fullAddress={fullAddress} applyFilters={applyFilters} mapInfoWindowConfig={siteConfig.mapInfoWindowConfig}/>;
-};
-
-export default InfoWindowContentContainer;
+import React from 'react';
+import InfoWindowContent from '~/components/modules/maps/info-window-content';
+import { useMapList } from '~/contexts/mapListContext';
+import { useTrackEvent } from '~/contexts/trackEventContext';
+
+const InfoWindowContentContainer = ({
+	item,
+	filterListingsByLocation
+}) => {
+	const { trackEvent, eventTypes } = useTrackEvent();
+	const { setSelectedFilters, setMobileTab, selectedFilters, siteConfig, filteredListings } = useMapList();
+	const fieldsShown = siteConfig.locationFiltersShown;
+	let items = item && item.items ? Object.values(item.items) : null;
+
+	const addressParts = [
+		items[0].mapDetails?.address?.street,
+		items[0].mapDetails?.address?.city,
+		items[0].mapDetails?.address?.state,
+		items[0].mapDetails?.address?.zip
+	];
+	const fullAddress = addressParts.filter(Boolean).join(', ');
+
+	const applyFilters = () => {
+		setMobileTab("listTab");
+		const newFilters = { ...selectedFilters };
+		let filters = [];
+
+		if (fieldsShown.includes('cityState')) {
+			newFilters.cityState = { [items[0].fields.cityState]: true };
+			filters.push({ filterType: 'cityState', filterChecked: items[0].fields.cityState });
+		}
+
+		if (fieldsShown.includes('city')) {
+			newFilters.city = { [items[0].fields.city]: true };
+			filters.push({ filterType: 'city', filterChecked: items[0].fields.city });
+		}
+
+		if (fieldsShown.includes('state')) {
+			newFilters.state = { [items[0].fields.state]: true };
+			filters.push({ filterType: 'state', filterChecked: items[0].fields.state });
+		}
+
+		newFilters.entityName = { [items[0].fields.entityName]: true };
+		filters.push({ filterType: 'entityName', filterChecked: items[0].fields.entityName });
+
+		trackEvent(eventTypes.VIEW_JOBS_AT_Location, { filtersApplied: filters });
+		setSelectedFilters(newFilters);
+	};
+
+	return <InfoWindowContent items={items} fullAddress={fullAddress} applyFilters={applyFilters} mapInfoWindowConfig={siteConfig.mapInfoWindowConfig}/>;
+};
+
+export default InfoWindowContentContainer;

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;

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

@@ -1,78 +1,78 @@
-import React, { useEffect, useRef } from 'react';
-import MapMarker from '~/components/modules/maps/map-marker';
-import { InfoWindow } from '@react-google-maps/api';
-import InfoWindowCard from '~/components/modules/maps/info-window-card';
-import InfoWindowContent from "~/components/containers/maps/info-window-content-container";
-
-import { useMap } from "~/contexts/mapContext";
-import { useMapList } from "~/contexts/mapListContext";
-import { useTrackEvent } from '~/contexts/trackEventContext';
-
-const MapMarkerContainer = ({
-	item,
-	markerRefs,
-	infoWindowClasses,
-	markerClickHandler,
-	clusterer,
-	markerIconSelected,
-	markerIcon,
-	selectedLocation,
-	setMapInteracted
-}) => {
-	const { setLocation, commuteLocation } = useMap();
-	const isSelected = item.id === selectedLocation?.id;
-	const markerRef = useRef(null);
-	const { trackEvent, eventTypes } = useTrackEvent();
-	const { resetEntityFilter } = useMapList();
-
-	useEffect(() => {
-		markerRefs.current[item.id] = markerRef.current;
-	}, []);
-
-	const onMarkerClick = () => {
-		trackEvent(eventTypes.MAP_MARKER_CLICKED, {
-			entityDisplayName: item.entityDisplayName,
-			lat: item.latitude,
-			lng: item.longitude,
-			travelTime: item.travelTime
-		});
-		setMapInteracted(true);
-		markerClickHandler(item);
-	};
-
-	return (
-		<MapMarker
-			position={{ lat: item.latitude, lng: item.longitude }}
-			title={item.name}
-			icon={isSelected ? markerIconSelected : markerIcon}
-			zIndex={isSelected ? 9999 : 1}
-			onLoad={marker => (markerRef.current = marker)}
-			onClick={onMarkerClick}
-			clusterer={clusterer}
-		>
-			{isSelected && (
-				<InfoWindow
-					position={{ lat: item.latitude, lng: item.longitude }}
-					anchor={markerRefs.current[item.id]}
-					onCloseClick={() => {
-						setMapInteracted(true);
-						setLocation(null);
-						resetEntityFilter();
-					}}
-					options={{ maxWidth: 400 }}
-				>
-					<InfoWindowCard
-						className={infoWindowClasses}
-						id={item.id}
-						content={<InfoWindowContent
-							item={item}
-							commuteLocation={commuteLocation}
-						/>}
-					/>
-				</InfoWindow>
-			)}
-		</MapMarker>
-	);
-};
-
-export default MapMarkerContainer;
+import React, { useEffect, useRef } from 'react';
+import MapMarker from '~/components/modules/maps/map-marker';
+import { InfoWindow } from '@react-google-maps/api';
+import InfoWindowCard from '~/components/modules/maps/info-window-card';
+import InfoWindowContent from "~/components/containers/maps/info-window-content-container";
+
+import { useMap } from "~/contexts/mapContext";
+import { useMapList } from "~/contexts/mapListContext";
+import { useTrackEvent } from '~/contexts/trackEventContext';
+
+const MapMarkerContainer = ({
+	item,
+	markerRefs,
+	infoWindowClasses,
+	markerClickHandler,
+	clusterer,
+	markerIconSelected,
+	markerIcon,
+	selectedLocation,
+	setMapInteracted
+}) => {
+	const { setLocation, commuteLocation } = useMap();
+	const isSelected = item.id === selectedLocation?.id;
+	const markerRef = useRef(null);
+	const { trackEvent, eventTypes } = useTrackEvent();
+	const { resetEntityFilter } = useMapList();
+
+	useEffect(() => {
+		markerRefs.current[item.id] = markerRef.current;
+	}, []);
+
+	const onMarkerClick = () => {
+		trackEvent(eventTypes.MAP_MARKER_CLICKED, {
+			entityDisplayName: item.entityDisplayName,
+			lat: item.latitude,
+			lng: item.longitude,
+			travelTime: item.travelTime
+		});
+		setMapInteracted(true);
+		markerClickHandler(item);
+	};
+
+	return (
+		<MapMarker
+			position={{ lat: item.latitude, lng: item.longitude }}
+			title={item.name}
+			icon={isSelected ? markerIconSelected : markerIcon}
+			zIndex={isSelected ? 9999 : 1}
+			onLoad={marker => (markerRef.current = marker)}
+			onClick={onMarkerClick}
+			clusterer={clusterer}
+		>
+			{isSelected && (
+				<InfoWindow
+					position={{ lat: item.latitude, lng: item.longitude }}
+					anchor={markerRefs.current[item.id]}
+					onCloseClick={() => {
+						setMapInteracted(true);
+						setLocation(null);
+						resetEntityFilter();
+					}}
+					options={{ maxWidth: 400 }}
+				>
+					<InfoWindowCard
+						className={infoWindowClasses}
+						id={item.id}
+						content={<InfoWindowContent
+							item={item}
+							commuteLocation={commuteLocation}
+						/>}
+					/>
+				</InfoWindow>
+			)}
+		</MapMarker>
+	);
+};
+
+export default MapMarkerContainer;

package/src/components/modules/accordions/filterItem.js

@@ -1,27 +1,27 @@
-import React from 'react';
-import Accordion from '~/components/modules/accordions/default';
-
-const AccordionFilterItem = ({
-	id,
-	setDefaultValue,
-	header,
-	body
-}) => {
-	return (
-		<Accordion.Item key={id} id={id}>
-			<Accordion.Trigger.HasHeader
-				onClick={() => setDefaultValue(id)}
-				className="hc-stretched-link hc-text-left"
-				iconClassName="hc-order-last"
-				headerClassName="hc-relative hc-py-2 hc-rounded hc-border hc-border-uiAccent/20 hc-bg-white hc-text-sm hc-transition data-[state=open]:hc-border-b-transparent data-[state=open]:hc-rounded-b-none"
-			>
-				{header}
-			</Accordion.Trigger.HasHeader>
-			<Accordion.Content bodyClassName="hc-px-2 hc-py-1 hc-bg-white hc-rounded-b hc-border hc-border-uiAccent/20 hc-border-t-0 hc-max-h-[20vh] md:hc-max-h-[25vh] hc-overflow-auto">
-				{body}
-			</Accordion.Content>
-		</Accordion.Item>
-	);
-};
-
-export default AccordionFilterItem;
+import React from 'react';
+import Accordion from '~/components/modules/accordions/default';
+
+const AccordionFilterItem = ({
+	id,
+	setDefaultValue,
+	header,
+	body
+}) => {
+	return (
+		<Accordion.Item key={id} id={id}>
+			<Accordion.Trigger.HasHeader
+				onClick={() => setDefaultValue(id)}
+				className="hc-stretched-link hc-text-left"
+				iconClassName="hc-order-last"
+				headerClassName="hc-relative hc-py-2 hc-rounded hc-border hc-border-uiAccent/20 hc-bg-white hc-text-sm hc-transition data-[state=open]:hc-border-b-transparent data-[state=open]:hc-rounded-b-none"
+			>
+				{header}
+			</Accordion.Trigger.HasHeader>
+			<Accordion.Content bodyClassName="hc-px-2 hc-py-1 hc-bg-white hc-rounded-b hc-border hc-border-uiAccent/20 hc-border-t-0 hc-max-h-[20vh] md:hc-max-h-[25vh] hc-overflow-auto">
+				{body}
+			</Accordion.Content>
+		</Accordion.Item>
+	);
+};
+
+export default AccordionFilterItem;

package/src/components/modules/accordions/filters.js

@@ -1,32 +1,32 @@
-import React from 'react';
-import Accordion from '~/components/modules/accordions/default';
-import FilterCard from '~/components/modules/cards/filter';
-import Loading from '~/util/loading';
-
-const AccordionFilters = ({
-	className,
-	defaultValue,
-	children,
-	filterOptions
-}) => {
-	return (
-		<FilterCard className={className ?? ""}>
-			<FilterCard.Title icon="fa-solid:sliders-h">
-				<span>
-          Filter <span className="md:hc-hidden lg:hc-inline">your search</span>
-				</span>
-			</FilterCard.Title>
-
-			<Accordion defaultValue={defaultValue} className="hc-space-y-4" >
-				{!filterOptions?.filters && (
-					<Accordion.Item>
-						<Loading />
-					</Accordion.Item>
-				)}
-				{filterOptions?.filters && children}
-			</Accordion>
-		</FilterCard>
-	);
-};
-
-export default AccordionFilters;
+import React from 'react';
+import Accordion from '~/components/modules/accordions/default';
+import FilterCard from '~/components/modules/cards/filter';
+import Loading from '~/util/loading';
+
+const AccordionFilters = ({
+	className,
+	defaultValue,
+	children,
+	filterOptions
+}) => {
+	return (
+		<FilterCard className={className ?? ""}>
+			<FilterCard.Title icon="fa-solid:sliders-h">
+				<span>
+          Filter <span className="md:hc-hidden lg:hc-inline">your search</span>
+				</span>
+			</FilterCard.Title>
+
+			<Accordion defaultValue={defaultValue} className="hc-space-y-4" >
+				{!filterOptions?.filters && (
+					<Accordion.Item>
+						<Loading />
+					</Accordion.Item>
+				)}
+				{filterOptions?.filters && children}
+			</Accordion>
+		</FilterCard>
+	);
+};
+
+export default AccordionFilters;