@mapsight/ui 7.0.0

package/src/js/components/feature-list-cycling/feature-list-cycling.jsx

@@ -0,0 +1,153 @@
+import debounce from "lodash/debounce";
+import {
+	memo,
+	useCallback,
+	useEffect,
+	useLayoutEffect,
+	useRef,
+} from "react";
+
+import {translate} from "../../helpers/i18n";
+import FeatureListCyclingButton from "./button";
+
+import FeatureListCyclingDot from "./dot";
+
+function FeatureListCycling({
+	filteredFeatures,
+	selectedFeatureId,
+	highlightedFeatureId,
+	onFeatureSelection,
+	onFeatureHighlight,
+	onFeatureUnHighlight,
+}) {
+	let selectedIdx;
+	if (filteredFeatures?.length) {
+		selectedIdx = filteredFeatures.findIndex(
+			(feature) => feature.id === selectedFeatureId,
+		);
+	}
+
+	if (selectedIdx === undefined) {
+		selectedIdx = -2;
+	}
+
+	const handlePrev = useCallback(() => {
+		if (filteredFeatures?.length) {
+			if (!selectedFeatureId) {
+				onFeatureSelection(filteredFeatures[0].id);
+			} else if (selectedIdx > 0) {
+				onFeatureSelection(filteredFeatures[selectedIdx - 1].id);
+			} else {
+				onFeatureSelection(
+					filteredFeatures[filteredFeatures.length - 1].id,
+				);
+			}
+		}
+	}, [filteredFeatures, selectedFeatureId, onFeatureSelection, selectedIdx]);
+
+	const handleNext = useCallback(() => {
+		if (filteredFeatures?.length) {
+			if (
+				selectedFeatureId &&
+				selectedIdx < filteredFeatures.length - 1
+			) {
+				onFeatureSelection(filteredFeatures[selectedIdx + 1].id);
+			} else {
+				onFeatureSelection(filteredFeatures[0].id);
+			}
+		}
+	}, [filteredFeatures, selectedFeatureId, onFeatureSelection, selectedIdx]);
+
+	const containerRef = useRef();
+	const container = containerRef.current;
+	const scroller = container?.querySelector(
+		".ms3-list-cycling-box__dots-scroller",
+	);
+
+	const updateScroll = useCallback(() => {
+		if (container && scroller) {
+			const scrollerWidth = scroller.offsetWidth;
+
+			let scrollLeft;
+			const activeDotElement = scroller.querySelector(
+				".ms3-list-cycling-box__dot--selected",
+			);
+			if (activeDotElement) {
+				scrollLeft = Math.max(
+					0,
+					activeDotElement.offsetLeft - scrollerWidth / 2,
+				);
+				scroller.scrollTo({
+					top: 0,
+					left: scrollLeft,
+					behavior: "smooth",
+				});
+			} else {
+				scrollLeft = scroller.scrollLeft;
+			}
+
+			const shadows = container.querySelector(
+				".ms3-list-cycling-box__dots-shadows",
+			);
+			const dots = container.querySelector(".ms3-list-cycling-box__dots");
+			if (shadows && dots) {
+				const dotsWidth = dots.offsetWidth;
+				const hasOverflowLeft =
+					dotsWidth > scrollerWidth && scrollLeft > 0;
+				const hasOverflowRight = dotsWidth - scrollLeft > scrollerWidth;
+				shadows.classList[hasOverflowLeft ? "add" : "remove"](
+					"ms3-list-cycling-box__dots-shadows--overflow-left",
+				);
+				shadows.classList[hasOverflowRight ? "add" : "remove"](
+					"ms3-list-cycling-box__dots-shadows--overflow-right",
+				);
+			}
+		}
+	}, [container, scroller]);
+
+	useEffect(() => {
+		const debouncedUpdateScroll = debounce(updateScroll, 500);
+		window.addEventListener("resize", debouncedUpdateScroll);
+		return () =>
+			window.removeEventListener("resize", debouncedUpdateScroll);
+	}, [updateScroll]);
+
+	useLayoutEffect(updateScroll);
+
+	return (
+		<div className="ms3-list-cycling-box" ref={containerRef}>
+			<FeatureListCyclingButton
+				direction="prev"
+				label={translate("prevEntry")}
+				onClick={handlePrev}
+			/>
+			<div className="ms3-list-cycling-box__dots-shadows">
+				<div className="ms3-list-cycling-box__dots-scroller">
+					<div className="ms3-list-cycling-box__dots">
+						{filteredFeatures?.map((feature, index) => (
+							<FeatureListCyclingDot
+								key={index}
+								featureId={feature.id}
+								isSelected={feature.id === selectedFeatureId}
+								isHighlighted={
+									feature.id === highlightedFeatureId
+								}
+								onFeatureUnHighlight={onFeatureUnHighlight}
+								onFeatureHighlight={onFeatureHighlight}
+								onFeatureSelection={onFeatureSelection}
+								updateScroll={updateScroll}
+							/>
+						))}
+					</div>
+				</div>
+			</div>
+			<FeatureListCyclingButton
+				direction="next"
+				label={translate("nextEntry")}
+				onClick={handleNext}
+			/>
+		</div>
+	);
+}
+
+export default memo(FeatureListCycling);

package/src/js/components/feature-list-cycling/index.js

@@ -0,0 +1,82 @@
+import {connect} from "react-redux";
+
+import {batchActions} from "redux-batched-actions";
+import {createSelector} from "reselect";
+
+import {
+	deselectAll,
+	selectExclusively,
+} from "@mapsight/core/lib/feature-selections/actions";
+import {
+	createFeatureSelectionSelector,
+	getFilteredFeatures,
+} from "@mapsight/core/lib/feature-selections/selectors";
+
+import {FEATURE_SELECTIONS} from "../../config/constants/controllers";
+import {
+	FEATURE_SELECTION_HIGHLIGHT,
+	FEATURE_SELECTION_SELECT,
+} from "../../config/feature/selections";
+import FeatureListCycling from "./feature-list-cycling";
+
+export default connect(
+	// stateProps selector
+	createSelector(
+		[
+			createFeatureSelectionSelector(
+				FEATURE_SELECTIONS,
+				FEATURE_SELECTION_SELECT,
+			),
+			createFeatureSelectionSelector(
+				FEATURE_SELECTIONS,
+				FEATURE_SELECTION_HIGHLIGHT,
+			),
+		],
+
+		(selectSelection, highlightSelection) => {
+			const selectSelectionFeatures =
+				getFilteredFeatures(selectSelection);
+			const highlightSelectionFeatures =
+				getFilteredFeatures(highlightSelection);
+
+			return {
+				selectedFeatureId:
+					selectSelectionFeatures && selectSelectionFeatures[0],
+				highlightedFeatureId:
+					highlightSelectionFeatures && highlightSelectionFeatures[0],
+			};
+		},
+	),
+
+	// dispatchProps
+	(dispatch) => ({
+		onFeatureSelection: (id, b, c) => {
+			const actions = [
+				deselectAll(FEATURE_SELECTIONS, FEATURE_SELECTION_HIGHLIGHT),
+				selectExclusively(
+					FEATURE_SELECTIONS,
+					FEATURE_SELECTION_SELECT,
+					id,
+					b,
+					c,
+				),
+			];
+
+			dispatch(batchActions(actions));
+		},
+		onFeatureUnSelection: () =>
+			dispatch(deselectAll(FEATURE_SELECTIONS, FEATURE_SELECTION_SELECT)),
+		onFeatureHighlight: (id) =>
+			dispatch(
+				selectExclusively(
+					FEATURE_SELECTIONS,
+					FEATURE_SELECTION_HIGHLIGHT,
+					id,
+				),
+			),
+		onFeatureUnHighlight: () =>
+			dispatch(
+				deselectAll(FEATURE_SELECTIONS, FEATURE_SELECTION_HIGHLIGHT),
+			),
+	}),
+)(FeatureListCycling);

package/src/js/components/feature-list-item/head.jsx

@@ -0,0 +1,131 @@
+import {
+	deselectAll,
+	selectExclusively,
+} from "@mapsight/core/lib/feature-selections/actions";
+import {useCallback} from "react";
+import {useDispatch} from "react-redux";
+
+import {FEATURE_SELECTIONS} from "../../config/constants/controllers";
+import {FEATURE_SELECTION_HIGHLIGHT} from "../../config/feature/selections";
+
+import getFeatureProperty from "../../helpers/get-feature-property";
+
+import FeatureSelectButton from "../feature-select-button";
+
+/**
+ * @param {React.PropsWithChildren<object>} props props, see below
+ * @param {import('../../types').MapsightUiFeature} props.feature feature
+ * @param {boolean} props.isSelected isSelected
+ * @param {boolean} props.isHighlighted isHighlighted
+ * @param {boolean} props.highlightOnMouse highlightOnMouse
+ * @param {boolean} props.selectOnClick selectOnClick
+ * @param {boolean} props.deselectOnClick deselectOnClick
+ * @param {(featureId: import('../../types').MapsightUiFeatureId, options?: {keyboard: boolean}) => void} props.selectFeature selectFeature
+ * @param {(featureId: import('../../types').MapsightUiFeatureId, options?: {keyboard: boolean}) => void} props.deselectFeatures deselectFeatures
+ * @param {React.HTMLProps<HTMLButtonElement> | React.HTMLProps<HTMLAnchorElement>} [props.attributes] attributes
+ * @returns {React.ReactElement} element
+ */
+function FeatureListItemHead({
+	children,
+	feature,
+	isSelected,
+	isHighlighted,
+	highlightOnMouse,
+	selectOnClick,
+	deselectOnClick,
+	selectFeature,
+	deselectFeatures,
+	className = "",
+	...attributes
+}) {
+	const permanentLink = getFeatureProperty(feature, "permanentLink");
+
+	const dispatch = useDispatch();
+	const onFeatureHighlight = useCallback(
+		() =>
+			dispatch(
+				selectExclusively(
+					FEATURE_SELECTIONS,
+					FEATURE_SELECTION_HIGHLIGHT,
+					feature.id,
+				),
+			),
+		[dispatch, feature.id],
+	);
+	const onFeatureUnHighlight = useCallback(
+		() =>
+			dispatch(
+				deselectAll(FEATURE_SELECTIONS, FEATURE_SELECTION_HIGHLIGHT),
+			),
+		[dispatch],
+	);
+	if (highlightOnMouse) {
+		attributes.onMouseEnter = !isSelected ? onFeatureHighlight : undefined;
+		attributes.onMouseLeave = isHighlighted
+			? onFeatureUnHighlight
+			: undefined;
+	}
+
+	/*
+	 * We support a range of interactive behaviours
+	 * 1. Has some on-page click handler => <button> or <a role=button> (if it also has a permalink)
+	 * 2. Does not have on-page click behaviour, but permalink => link <a>
+	 * 3. Does have neither on-page click behaviour nor permalink, but should highlight on mouse => <span> with hover handlers
+	 * 4. Not interactive at all => <span>
+	 */
+
+	// 1
+	if (feature.id && (selectOnClick || deselectOnClick)) {
+		return (
+			<FeatureSelectButton
+				tabIndex={-1}
+				className={`${className} [ ms3-list__button ms3-list__button--selectable ]`}
+				{...attributes}
+				featureId={feature.id}
+				isSelected={isSelected}
+				selectOnClick={selectOnClick}
+				deselectOnClick={deselectOnClick}
+				onSelect={selectFeature}
+				onDeselect={deselectFeatures}
+				permanentLink={permanentLink}
+			>
+				{children}
+			</FeatureSelectButton>
+		);
+	}
+
+	// 2.
+	if (permanentLink) {
+		return (
+			<a
+				tabIndex={-1}
+				href={permanentLink}
+				className={`${className} [ ms3-list__link ]`}
+				{...attributes}
+			>
+				{children}
+			</a>
+		);
+	}
+
+	// 3.
+	if (highlightOnMouse) {
+		return (
+			<span
+				className={`${className} [ ms3-list__button ]`}
+				{...attributes}
+			>
+				{children}
+			</span>
+		);
+	}
+
+	// 4.
+	return (
+		<span className={className} {...attributes}>
+			{children}
+		</span>
+	);
+}
+
+export default FeatureListItemHead;

package/src/js/components/feature-list-item/hooks/useFeatureListItemScrollAndFocus.js

@@ -0,0 +1,51 @@
+import {useEffect} from "react";
+
+import usePrevious from "../../../hooks/usePrevious";
+
+export default function useFeatureListItemScrollAndFocus(
+	ref,
+	showDetails,
+	isPreselectedOnly,
+	{scrollOnSelection, scrollOnPreselection, enableKeyboardControl},
+) {
+	const lastShowDetails = usePrevious(showDetails);
+	const lastIsPreselectedOnly = usePrevious(isPreselectedOnly);
+
+	useEffect(() => {
+		if (typeof window === "undefined" || ref.current === null) {
+			return;
+		}
+
+		/*
+		 * There are two cases where we want to scroll to the item
+		 * 1. On selection, if enabled and if details are expanded
+		 * 2. On preselection, if enabled and only if not already selected
+		 *
+		 * Case 2 may occur if the project code preselects the feature without also
+		 * immediately selecting it. In that case we may also want to focus the
+		 * item, if enabled.
+		 */
+		let shouldScroll = false;
+		if (scrollOnSelection && showDetails && !lastShowDetails) {
+			// case 1: scroll on selection with details
+			shouldScroll = true;
+		} else if (
+			scrollOnPreselection &&
+			isPreselectedOnly &&
+			!lastIsPreselectedOnly
+		) {
+			// case 2: scroll on preselection
+			shouldScroll = true;
+		}
+
+		if (shouldScroll) {
+			console.log("list item scroll");
+			ref.current.scrollIntoView({block: "start", behavior: "smooth"});
+
+			if (enableKeyboardControl) {
+				console.log("list item focus");
+				ref.current.focus({preventScroll: true});
+			}
+		}
+	});
+}

package/src/js/components/feature-list-item/hooks/useFeatureListItemState.ts

@@ -0,0 +1,75 @@
+import {useMemo} from "react";
+import {useSelector} from "react-redux";
+
+import {getFilteredFeatures} from "@mapsight/core/lib/feature-selections/selectors";
+
+import {isViewMobile, viewSelector} from "../../../store/selectors";
+import type {MapsightUiFeature} from "../../../types";
+import {useFeatureListContext} from "../../feature-list/context";
+
+export default function useFeatureListItemState(feature: MapsightUiFeature) {
+	const view = useSelector(viewSelector);
+	const isMobile = isViewMobile(view);
+	const {
+		listUiOptions: {
+			selectionBehavior,
+			showSelectedOnly,
+			detailsInList,
+			selectOnClick,
+			deselectOnClick,
+			highlightOnMouse,
+		},
+		state: {selectSelection, preselectSelection, highlightSelection},
+	} = useFeatureListContext();
+
+	const selectSelectionFeatures = useMemo(
+		() => getFilteredFeatures(selectSelection) || [],
+		[selectSelection],
+	);
+	const hasSelection = selectSelectionFeatures?.length > 0;
+	const isSelected = useMemo(
+		() => selectSelectionFeatures.includes(feature.id),
+		[feature.id, selectSelectionFeatures],
+	);
+	const isPreselected = useMemo(
+		() => getFilteredFeatures(preselectSelection)?.includes(feature.id),
+		[feature.id, preselectSelection],
+	);
+	const isHighlighted = useMemo(
+		() => getFilteredFeatures(highlightSelection)?.includes(feature.id),
+		[feature.id, highlightSelection],
+	);
+
+	return useMemo(
+		() => ({
+			selectOnClick: selectOnClick,
+			deselectOnClick: deselectOnClick,
+			highlightOnMouse: highlightOnMouse,
+			view: view,
+			isMobile: isMobile,
+			hidden: showSelectedOnly && hasSelection && !isSelected,
+			hasSelection: hasSelection,
+			isSelected: isSelected,
+			isHighlighted: isHighlighted,
+			isPreselected: isPreselected,
+			showDetails: isSelected && (isMobile || detailsInList),
+			scrollOnSelection:
+				selectionBehavior?.[view] === "expandInList" &&
+				!showSelectedOnly,
+		}),
+		[
+			deselectOnClick,
+			detailsInList,
+			hasSelection,
+			highlightOnMouse,
+			isHighlighted,
+			isMobile,
+			isPreselected,
+			isSelected,
+			selectOnClick,
+			showSelectedOnly,
+			selectionBehavior,
+			view,
+		],
+	);
+}

package/src/js/components/feature-list-item/icon.jsx

@@ -0,0 +1,35 @@
+import {memo} from "react";
+
+import {siteConfig} from "../../config";
+
+function MapsightIcon({id}) {
+	if (!id) {
+		return null;
+	}
+
+	// TODO make these paths configurable
+	const iconFileName = `${id}-plain.png`;
+	const iconSrc1x = `${siteConfig.imagesUrl}mapsight-icons/${iconFileName}`;
+	const iconSrcSet =
+		`${siteConfig.imagesUrl}mapsight-icons/${iconFileName} 1x, ` +
+		`${siteConfig.imagesUrl}mapsight-icons-2x/${iconFileName} 2x`;
+
+	return <img src={iconSrc1x} srcSet={iconSrcSet} alt="" />;
+}
+
+function FeatureListIcon({selectable, mapsightIconId, as: T, ...attributes}) {
+	let className = `ms3-list__icon ms3-list__icon--id-${
+		mapsightIconId || "-"
+	}`;
+	if (selectable) {
+		className += " ms3-list__icon--selectable";
+	}
+
+	return (
+		<T className={className} aria-hidden={true} {...attributes}>
+			<MapsightIcon id={mapsightIconId} />
+		</T>
+	);
+}
+
+export default memo(FeatureListIcon);

package/src/js/components/feature-list-item/index.jsx

@@ -0,0 +1,168 @@
+import {Fragment, useRef} from "react";
+
+import getFeatureProperty from "../../helpers/get-feature-property";
+import FeatureDetailsContent from "../feature-details-content";
+
+import FeatureListItemHead from "./head";
+import useFeatureListItemScrollAndFocus from "./hooks/useFeatureListItemScrollAndFocus";
+import useFeatureListItemState from "./hooks/useFeatureListItemState";
+
+import FeatureListIcon from "./icon";
+
+function getMainContentForFeature(feature) {
+	const listName = getFeatureProperty(feature, "listName");
+	const name = getFeatureProperty(feature, "name");
+	return listName || name;
+}
+
+function FeatureListItem({
+	as: T = "div",
+	partAs: PartT = "span",
+	headAs: HeadT = FeatureListItemHead,
+	contentAs: ContentT = Fragment,
+	showFeatureListInfo,
+	feature,
+	selectFeature,
+	deselectFeatures,
+	enableKeyboardControl,
+}) {
+	const {
+		selectOnClick,
+		deselectOnClick,
+		highlightOnMouse,
+		hidden,
+		isSelected,
+		isPreselected,
+		isHighlighted,
+		showDetails,
+		scrollOnSelection,
+		scrollOnPreselection,
+	} = useFeatureListItemState(feature);
+
+	/** @type {React.MutableRefObject<HTMLElement | null>} */
+	const ref = useRef(null);
+
+	useFeatureListItemScrollAndFocus(
+		ref,
+		showDetails,
+		isPreselected && !isSelected,
+		{
+			scrollOnSelection: scrollOnSelection,
+			scrollOnPreselection: scrollOnPreselection,
+			enableKeyboardControl: enableKeyboardControl,
+		},
+	);
+
+	if (hidden) {
+		return null;
+	}
+
+	// if render type is not a native element but presumably a React component,
+	// pass some extra props to be used by said component
+	const isWrapperComponent = typeof T !== "string";
+
+	const wrapperProps = {
+		...(isWrapperComponent
+			? {
+					/* TODO: Which props? */
+				}
+			: null),
+		ref: ref,
+		className:
+			"ms3-list__item " +
+			(isSelected ? " ms3-list__item--selected" : "") +
+			(isPreselected ? " ms3-list__item--preselected" : "") +
+			(isHighlighted ? " ms3-list__item--highlight" : "") +
+			(showDetails ? " ms3-list__item--has-details" : "") +
+			(showFeatureListInfo ? " ms3-list__item--has-info" : "") +
+			(ref.current?.className.includes("focus-visible")
+				? " focus-visible"
+				: ""),
+	};
+
+	let info = null;
+	if (showFeatureListInfo) {
+		info = (
+			<PartT
+				className="ms3-list__info"
+				dangerouslySetInnerHTML={{
+					__html: getFeatureProperty(feature, "listInformation"),
+				}}
+			/>
+		);
+	}
+
+	const showInfoInHead = selectOnClick === true;
+
+	let head;
+	let headHtml;
+	if (HeadT) {
+		// NOTE(PG): Legacy code to support list HTML from the source. Should
+		//            probably be deprecated and replaced by a custom component
+		headHtml = getFeatureProperty(feature, "overrideListHtml");
+
+		if (!headHtml) {
+			head = (
+				<Fragment>
+					<FeatureListIcon
+						as="span"
+						mapsightIconId={getFeatureProperty(
+							feature,
+							"mapsightIconId",
+						)}
+					/>
+					<PartT
+						className={`ms3-list__main${
+							selectOnClick || deselectOnClick
+								? " ms3-list__main--selectable"
+								: ""
+						}`}
+					>
+						{getMainContentForFeature(feature)}
+					</PartT>
+					{showInfoInHead && info}
+				</Fragment>
+			);
+		}
+	}
+
+	let details = null;
+	if (showDetails) {
+		details = (
+			<PartT className="ms3-list__details">
+				<FeatureDetailsContent feature={feature} />
+			</PartT>
+		);
+	}
+
+	return (
+		<T {...wrapperProps}>
+			{HeadT && (
+				<HeadT
+					feature={feature}
+					isSelected={isSelected}
+					isHighlighted={isHighlighted}
+					highlightOnMouse={highlightOnMouse}
+					selectOnClick={selectOnClick}
+					deselectOnClick={deselectOnClick}
+					selectFeature={selectFeature}
+					deselectFeatures={deselectFeatures}
+					dangerouslySetInnerHTML={
+						headHtml ? {__html: headHtml} : undefined
+					}
+					className="ms3-list__item__head"
+				>
+					{head}
+				</HeadT>
+			)}
+			{ContentT && (
+				<ContentT>
+					{!showInfoInHead && info}
+					{details}
+				</ContentT>
+			)}
+		</T>
+	);
+}
+
+export default FeatureListItem;