@mapsight/ui 7.1.0 → 7.2.0

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

@@ -1,131 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,168 +0,0 @@
-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;

package/src/js/components/feature-list-sorting/feature-list-sorting.tsx

@@ -1,144 +0,0 @@
-import type {ChangeEvent, ReactElement} from "react";
-import {memo, useCallback, useState} from "react";
-
-import {FocusTrap} from "focus-trap-react";
-
-import {hasGeolocationSupport} from "@mapsight/core/lib/helpers";
-
-import {translate} from "../../helpers/i18n";
-import StatusIndicator from "./status-indicator";
-
-export type MapsightUiPlace = {title: string; x: number; y: number; z?: number};
-export type MapsightUiPlaceGroup = {
-	type: "group";
-	title: string;
-	entries: MapsightUiPlacesData;
-};
-export type MapsightUiPlacesData = Record<
-	string,
-	MapsightUiPlace | MapsightUiPlaceGroup
->;
-
-/**
- * @param places places
- * @param keyPath key path
- * @returns option elements
- */
-function renderOptions(
-	places: MapsightUiPlacesData,
-	keyPath: Array<string> = [],
-): Array<ReactElement> {
-	return Object.entries(places).map(([key, place]) => {
-		const keyArr = [...keyPath, key];
-		const keyStr = keyArr.join(",");
-
-		if ("type" in place && place.type === "group") {
-			return (
-				<optgroup label={place.title} key={keyStr}>
-					{renderOptions(place.entries, keyArr)}
-				</optgroup>
-			);
-		} else {
-			return (
-				<option value={keyStr} key={keyStr}>
-					{place.title}
-				</option>
-			);
-		}
-	});
-}
-
-/* NOTICE: using onChange instead of onBlur as the change occurs just below this input and should be clear */
-function FeatureSorter({
-	places,
-	sorting,
-	geolocationStatus,
-	onChange,
-	requestGeolocation,
-}: {
-	places: MapsightUiPlacesData;
-	sorting: string;
-	geolocationStatus: string;
-	onChange: (value: string) => void;
-	requestGeolocation: () => void;
-}) {
-	const [isOpen, setIsOpen] = useState(false);
-
-	const handleClose = useCallback(() => setIsOpen(false), []);
-	const toggleOpen = useCallback(() => setIsOpen((prev) => !prev), []);
-
-	const onSelectChange = useCallback(
-		(e: ChangeEvent<HTMLSelectElement>) => {
-			const newValue = e.target.value;
-
-			if (newValue === "geolocation") {
-				requestGeolocation();
-			}
-
-			onChange(newValue);
-		},
-		[onChange, requestGeolocation],
-	);
-
-	return (
-		<div
-			className={`ms3-features-sorting ms3-features-sorting--${
-				isOpen ? "active" : "inactive"
-			}`}
-		>
-			<button
-				type="button"
-				className={
-					"ms3-filter-button " +
-					(isOpen
-						? " ms3-filter-button--icon-sort-active"
-						: " ms3-filter-button--icon-sort")
-				}
-				onClick={toggleOpen}
-				title={translate("ui.feature-list.sorting.announcements")}
-			>
-				<i>{isOpen ? translate("close") : translate("open")}</i>
-			</button>
-
-			<div>
-				{isOpen && (
-					<FocusTrap
-						focusTrapOptions={{
-							clickOutsideDeactivates: true,
-							onDeactivate: handleClose,
-						}}
-					>
-						<div className="ms3-features-sorting__panel">
-							{translate("ui.feature-list.sorting.byDistance")}
-
-							<select
-								value={sorting || ""}
-								onChange={onSelectChange}
-							>
-								<option value="">
-									{translate(
-										"ui.feature-list.sorting.choose",
-									)}
-								</option>
-
-								{hasGeolocationSupport && (
-									<option value="geolocation">
-										{translate(
-											"ui.feature-list.sorting.own",
-										)}
-									</option>
-								)}
-
-								{renderOptions(places)}
-							</select>
-
-							<StatusIndicator status={geolocationStatus} />
-						</div>
-					</FocusTrap>
-				)}
-			</div>
-		</div>
-	);
-}
-
-export default memo(FeatureSorter);

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

@@ -1,22 +0,0 @@
-import {connect} from "react-redux";
-
-import {getGeolocation} from "@mapsight/core/lib/user-geolocation/actions";
-import {geolocationStatusSelector} from "@mapsight/core/lib/user-geolocation/selectors";
-
-import {USER_GEOLOCATION} from "../../config/constants/controllers";
-import {sortList} from "../../store/actions";
-import {listSortingSelector, placesSelector} from "../../store/selectors";
-import FeatureSorter from "./feature-list-sorting";
-
-export default connect(
-	(state) => ({
-		sorting: listSortingSelector(state),
-		places: placesSelector(state),
-		geolocationStatus: geolocationStatusSelector(state[USER_GEOLOCATION]),
-	}),
-	// dispatch map:
-	{
-		onChange: sortList,
-		requestGeolocation: getGeolocation,
-	},
-)(FeatureSorter);

package/src/js/components/feature-list-sorting/status-indicator.jsx

@@ -1,10 +0,0 @@
-export default function StatusIndicator({status}) {
-	return (
-		<div
-			className={
-				"ms3-status-indicator" +
-				(status ? " ms3-status-indicator--" + status : "")
-			}
-		/>
-	);
-}

package/src/js/components/feature-select-button.jsx

@@ -1,70 +0,0 @@
-import {useCallback} from "react";
-
-function FeatureSelectButton({
-	featureId,
-	onSelect = null,
-	onDeselect = null,
-	permanentLink = undefined,
-	isSelected = false,
-	selectOnClick = true,
-	deselectOnClick = true,
-	...attributes
-}) {
-	const handleClick = useCallback(
-		(e) => {
-			if (permanentLink) {
-				if (e.which === 2 || e.metaKey) {
-					// Continue as normal for external links and cmd clicks etc
-					return;
-				}
-				e.preventDefault();
-			}
-
-			if (isSelected && deselectOnClick) {
-				if (onDeselect) {
-					onDeselect(featureId);
-				}
-			} else if (selectOnClick && onSelect) {
-				onSelect(featureId, {keyboard: false});
-			}
-		},
-		[
-			permanentLink,
-			isSelected,
-			deselectOnClick,
-			selectOnClick,
-			onDeselect,
-			featureId,
-			onSelect,
-		],
-	);
-
-	const handleKeyDown = useCallback(
-		(e) => {
-			if (e.key === "Enter") {
-				e.preventDefault();
-
-				if (selectOnClick && onSelect) {
-					onSelect(featureId, {keyboard: true});
-				}
-			}
-		},
-		[selectOnClick, onSelect, featureId],
-	);
-
-	Object.assign(attributes, {
-		onClick: handleClick,
-		onKeyDown: handleKeyDown,
-	});
-
-	if (permanentLink) {
-		return (
-			// eslint-disable-next-line jsx-a11y/anchor-has-content
-			<a href={permanentLink} role="button" {...attributes} />
-		);
-	}
-
-	return <button type="button" {...attributes} />;
-}
-
-export default FeatureSelectButton;