@mapsight/ui 7.1.0 → 7.2.0

package/src/js/components/feature-list/hooks/useFeatureListState.ts

@@ -1,98 +0,0 @@
-import {useMemo} from "react";
-import {useSelector} from "react-redux";
-
-import type {FeatureSelectionState} from "@mapsight/core/lib/feature-selections/selectors";
-import {
-	getFeatureSourceError,
-	getFeatureSourceStatus,
-} from "@mapsight/core/lib/feature-sources/selectors";
-
-import {FEATURE_LIST} from "../../../config/constants/controllers";
-import {
-	highlightSelectionSelector,
-	lastListScrollPositionSelector,
-	layerSwitcherShowExternalSelector,
-	preselectSelectionSelector,
-	selectSelectionSelector,
-	tagSwitcherShowSelector,
-} from "../../../store/selectors";
-import type {FullUiState} from "../../../types";
-import useFeatureListFeatureSource from "./useFeatureListFeatureSource";
-import type {PaginatedFilteredFeaturesState} from "./usePaginatedFilteredFeatures";
-import usePaginatedFilteredFeatures from "./usePaginatedFilteredFeatures";
-
-export type FeatureListStateProps = PaginatedFilteredFeaturesState & {
-	tagSwitcherShow: FullUiState["tagSwitcher"]["show"];
-	layerSwitcherShowExternal: FullUiState["layerSwitcher"]["show"]["external"];
-	status: string | null;
-	error: string | null;
-	featureSourceId?: string;
-	scrollPosition: number | null;
-	selectSelection: undefined | FeatureSelectionState;
-	preselectSelection: undefined | FeatureSelectionState;
-	highlightSelection: undefined | FeatureSelectionState;
-};
-
-export default function useFeatureListState(
-	listUiOptions: FullUiState["list"],
-	sort = true,
-	filter = true,
-	enableScrollPosition = true,
-	listControllerName = FEATURE_LIST,
-) {
-	const {featureSourceId, featureSource} =
-		useFeatureListFeatureSource(listControllerName);
-	const tagSwitcherShow = useSelector(tagSwitcherShowSelector);
-	const layerSwitcherShowExternal = useSelector(
-		layerSwitcherShowExternalSelector,
-	);
-	const scrollPosition = useSelector(lastListScrollPositionSelector);
-	const selectSelection = useSelector(selectSelectionSelector);
-	const preselectSelection = useSelector(preselectSelectionSelector);
-	const highlightSelection = useSelector(highlightSelectionSelector);
-
-	const paginatedFilteredFeaturesState = usePaginatedFilteredFeatures(
-		featureSource,
-		listUiOptions,
-		sort,
-		filter,
-	);
-	const featureSourceState = useMemo(
-		() => ({
-			status: featureSource
-				? getFeatureSourceStatus(featureSource)
-				: null,
-			error: featureSource
-				? (getFeatureSourceError(featureSource) as string | null)
-				: null,
-		}),
-		[featureSource],
-	);
-
-	return useMemo(
-		(): FeatureListStateProps => ({
-			...paginatedFilteredFeaturesState,
-			...featureSourceState,
-			tagSwitcherShow: !!tagSwitcherShow,
-			layerSwitcherShowExternal: !!layerSwitcherShowExternal,
-			featureSourceId,
-			scrollPosition:
-				(enableScrollPosition ? scrollPosition : null) ?? null,
-			selectSelection,
-			preselectSelection,
-			highlightSelection,
-		}),
-		[
-			paginatedFilteredFeaturesState,
-			featureSourceState,
-			tagSwitcherShow,
-			layerSwitcherShowExternal,
-			featureSourceId,
-			enableScrollPosition,
-			scrollPosition,
-			selectSelection,
-			preselectSelection,
-			highlightSelection,
-		],
-	);
-}

package/src/js/components/feature-list/hooks/useKeyboardNavigation.js

@@ -1,112 +0,0 @@
-import {useCallback} from "react";
-
-import {
-	APP_EVENT_FOCUS_FEATURE_LIST,
-	useAppChannelEventListener,
-} from "../../helping/app-channel";
-
-const DEFAULT_SELECTOR_ITEM = ".ms3-list__item";
-const DEFAULT_SELECTOR_BUTTON = ".ms3-list__button";
-
-/**
- * @param {boolean} enabled enable keyboard navigation
- * @param {import('react').MutableRefObject<HTMLElement>} ref ref of the list container
- * @returns {{onKeyDown: (KeyboardEvent) => void, tabIndex: number}|{onKeyDown: undefined, tabIndex: undefined}} props that should be applied to the container
- */
-function useKeyboardNavigation(enabled, ref) {
-	useAppChannelEventListener(
-		APP_EVENT_FOCUS_FEATURE_LIST,
-		useCallback(() => {
-			if (!enabled) {
-				moveFocus(ref.current, "first", {preventScroll: true});
-			}
-		}, [enabled, ref]),
-	);
-
-	/** @type {(KeyboardEvent) => void} */
-	const onKeyDown = useCallback(
-		(ev) => {
-			if (!enabled) {
-				return;
-			}
-
-			if (ev.key === "ArrowUp") {
-				ev.preventDefault();
-				moveFocus(ref.current, -1);
-			} else if (ev.key === "ArrowDown") {
-				ev.preventDefault();
-				moveFocus(ref.current, 1);
-			} else if (ev.key === "PageUp") {
-				ev.preventDefault();
-				moveFocus(ref.current, "first");
-			} else if (ev.key === "PageDown") {
-				ev.preventDefault();
-				moveFocus(ref.current, "last");
-			}
-		},
-		[enabled, ref],
-	);
-
-	if (!enabled) {
-		return {
-			tabIndex: undefined,
-			onKeyDown: undefined,
-		};
-	}
-
-	return {
-		tabIndex: 0,
-		onKeyDown: onKeyDown,
-	};
-}
-
-/**
- * @param {HTMLElement} container container element
- * @param {"first" | "last" | number} direction direction to move focus in
- * @param {object} [options] options
- * @param {string} [options.selectorItem=".ms3-list__item"] selector for items to navigate between
- * @param {string} [options.selectorButton=".ms3-list__button"] selector for focusable elements to navigate between
- * @param {FocusOptions} [options.focusOptions] focus options
- */
-function moveFocus(
-	container,
-	direction = "first",
-	{
-		selectorButton = DEFAULT_SELECTOR_BUTTON,
-		selectorItem = DEFAULT_SELECTOR_ITEM,
-		focusOptions,
-	} = {},
-) {
-	// get buttons in document order
-	const buttons = [...container.querySelectorAll(selectorButton)];
-	const lastIndex = buttons.length - 1;
-
-	let nextIndex = 0;
-	if (direction === "last") {
-		nextIndex = lastIndex;
-	} else if (typeof direction === "number") {
-		const activeElement = document.activeElement;
-		if (!activeElement) return;
-
-		if (activeElement === container) {
-			nextIndex = direction >= 0 ? 0 : lastIndex;
-		} else {
-			const startElement = activeElement.matches(selectorButton)
-				? activeElement
-				: activeElement
-						.closest(selectorItem)
-						?.querySelector(selectorButton);
-			if (!startElement) {
-				console.error("No focusable element found");
-				return;
-			}
-			const currentIndex = buttons.indexOf(startElement);
-			nextIndex =
-				(buttons.length + currentIndex + direction) % buttons.length;
-		}
-	}
-
-	buttons[nextIndex].focus(focusOptions);
-}
-
-export default useKeyboardNavigation;

package/src/js/components/feature-list/hooks/useMakeHeaderSticky.js

@@ -1,40 +0,0 @@
-import {useLayoutEffect} from "react";
-
-import {siteConfig} from "../../../config";
-import {VIEW_MOBILE} from "../../../config/constants/app";
-import makeSticky from "../../../helpers/sticky";
-import {useAppChannelDispatchEvent} from "../../helping/app-channel";
-
-export function useMakeHeaderSticky(
-	enabled,
-	scrollContainerRef,
-	stickyElementRef,
-	view,
-) {
-	const dispatchAppChannelEvent = useAppChannelDispatchEvent();
-
-	useLayoutEffect(() => {
-		if (enabled && scrollContainerRef.current && stickyElementRef.current) {
-			const stickyElement = stickyElementRef.current;
-
-			return makeSticky(
-				stickyElement,
-				// use `view === VIEW_MOBILE` here because `isViewMobile` is checking view
-				// for mobile or mapOnly
-				view === VIEW_MOBILE ? window : scrollContainerRef.current,
-				{
-					offset: siteConfig.topOffsetForView(view),
-					onChange: () => {
-						dispatchAppChannelEvent(
-							new CustomEvent("stickyHeaderChange", {
-								stickyElement: stickyElement,
-							}),
-						);
-					},
-				},
-			);
-		}
-
-		return undefined;
-	});
-}

package/src/js/components/feature-list/hooks/usePaginatedFilteredFeatures.ts

@@ -1,129 +0,0 @@
-import {useMemo} from "react";
-import {useSelector} from "react-redux";
-
-import {getAllFeatures} from "@mapsight/core/lib/feature-sources/selectors";
-import type {FeatureSourceState} from "@mapsight/core/lib/feature-sources/types";
-
-import getFeatureProperty from "../../../helpers/get-feature-property";
-import sortFeaturesByDistance from "../../../helpers/sort-features-by-distance";
-import {
-	listFilterOptionsSelector,
-	listPageSelector,
-} from "../../../store/selectors";
-import type {
-	FullUiState,
-	MapsightUiFeature,
-	MapsightUiFeatureProperty,
-} from "../../../types";
-
-export type PaginatedFilteredFeaturesState = {
-	features: MapsightUiFeature[];
-	filteredFeatures: MapsightUiFeature[];
-	page: number;
-	featureCount: number;
-};
-
-function filterByQueries(queries: Array<string>, feature: MapsightUiFeature) {
-	// TODO: This list of properties should be configurable!
-	const properties: MapsightUiFeatureProperty[] = [
-		"name",
-		"listName",
-		"listInformation",
-	];
-
-	const values = properties
-		.map((key) => getFeatureProperty(feature, key))
-		.filter((val) => !!val)
-		.map((val: string) => val.toLowerCase());
-
-	return queries.every((query) =>
-		values.some((value) => value.indexOf(query) !== -1),
-	);
-}
-
-export function filterFeatures(
-	query: string | null,
-	features: Array<MapsightUiFeature>,
-) {
-	const queries = (query || "").trim().toLowerCase().split(/\s+/g);
-
-	if (queries.length === 0 || (queries.length === 1 && queries[0] === "")) {
-		return features;
-	}
-
-	return features.filter((feature) => filterByQueries(queries, feature));
-}
-
-function paginateFeatures(
-	features: Array<MapsightUiFeature>,
-	page: number,
-	itemsPerPage: number,
-) {
-	const offsetStart = page * itemsPerPage;
-	const offsetEnd = offsetStart + itemsPerPage;
-
-	return features.slice(offsetStart, offsetEnd);
-}
-
-export default function usePaginatedFilteredFeatures(
-	featureSource: FeatureSourceState | undefined,
-	listUiOptions: Pick<
-		FullUiState["list"],
-		"itemsPerPage" | "paginationControl"
-	>,
-	sort = true,
-	filter = true,
-) {
-	const {itemsPerPage, paginationControl} = listUiOptions;
-	const page = useSelector(listPageSelector);
-	const {query, places, sorting} = useSelector(listFilterOptionsSelector);
-
-	return useMemo((): PaginatedFilteredFeaturesState => {
-		if (!featureSource) {
-			return {
-				features: [],
-				filteredFeatures: [],
-				featureCount: 0,
-				page: 0,
-			};
-		}
-
-		const features = getAllFeatures(featureSource) as MapsightUiFeature[];
-
-		// 1. filter
-		const filteredFeatures = filter
-			? filterFeatures(query ?? null, features)
-			: features;
-
-		// get (total) feature count after filtering, but _before_ paging
-		const featureCount = filteredFeatures.length;
-
-		// 2. sort
-		const sortedFeatures = sort
-			? sortFeaturesByDistance(filteredFeatures, places, sorting)
-			: features;
-
-		// 3. paginate
-		const paginatedFeatures =
-			paginationControl && itemsPerPage
-				? paginateFeatures(sortedFeatures, page, itemsPerPage)
-				: sortedFeatures;
-
-		return {
-			features,
-			filteredFeatures: paginatedFeatures,
-			featureCount,
-			page,
-		};
-	}, [
-		featureSource,
-		filter,
-		query,
-		sort,
-		places,
-		sorting,
-		paginationControl,
-		page,
-		itemsPerPage,
-	]);
-}

package/src/js/components/feature-list/hooks/useRestoreDocumentScroll.js

@@ -1,12 +0,0 @@
-import {useEffect} from "react";
-
-import {isViewFullscreen, isViewMobile} from "../../../store/selectors";
-
-export default function useRestoreDocumentScroll(view, scrollPosition) {
-	useEffect(() => {
-		if ((isViewMobile(view) || isViewFullscreen(view)) && scrollPosition) {
-			window.document.documentElement.scrollTop = scrollPosition;
-			window.document.body.scrollTop = scrollPosition;
-		}
-	}, [view, scrollPosition]);
-}

package/src/js/components/feature-list/hooks/useSelectFeature.js

@@ -1,88 +0,0 @@
-import {useMemo} from "react";
-import {useSelector} from "react-redux";
-
-import {batchActions} from "redux-batched-actions";
-
-import {
-	deselectAll,
-	selectExclusively,
-} from "@mapsight/core/lib/feature-selections/actions";
-
-import {VIEW_MAP_ONLY} from "../../../config/constants/app";
-import {FEATURE_SELECTIONS} from "../../../config/constants/controllers";
-import {FEATURE_SELECTION_HIGHLIGHT} from "../../../config/feature/selections";
-import {setLastListScrollPosition, setView} from "../../../store/actions";
-import {
-	listUiOptionSelectedOnlySelector,
-	listUiOptionSelectionBehaviorSelector,
-	listUiOptionSelectionSelectionSelector,
-	viewSelector,
-} from "../../../store/selectors";
-import {
-	APP_EVENT_SCROLL_TO_MAP,
-	useAppChannelDispatchEvent,
-} from "../../helping/app-channel";
-
-const getDocumentScroll = () =>
-	window.document.documentElement.scrollTop ||
-	window.document.body.scrollTop ||
-	0;
-
-export default function useSelectFeature() {
-	const appChannelDispatch = useAppChannelDispatchEvent();
-	const selectionBehavior = useSelector(
-		listUiOptionSelectionBehaviorSelector,
-	);
-	const selectionBehaviorSelection = useSelector(
-		listUiOptionSelectionSelectionSelector,
-	);
-	const showSelectedOnly = useSelector(listUiOptionSelectedOnlySelector);
-	const view = useSelector(viewSelector);
-
-	return useMemo(
-		() =>
-			function selectFeatureInList(featureId) {
-				const actions = [
-					deselectAll(
-						FEATURE_SELECTIONS,
-						FEATURE_SELECTION_HIGHLIGHT,
-					),
-					selectExclusively(
-						FEATURE_SELECTIONS,
-						selectionBehaviorSelection,
-						featureId,
-					),
-				];
-
-				if (
-					!showSelectedOnly &&
-					selectionBehavior[view] === "scrollToMap"
-				) {
-					actions.push(
-						setLastListScrollPosition(getDocumentScroll()),
-					);
-					setTimeout(
-						() =>
-							appChannelDispatch(
-								new Event(APP_EVENT_SCROLL_TO_MAP),
-							),
-						10,
-					);
-				} else if (selectionBehavior[view] === "showInMapOnlyView") {
-					actions.push(
-						setLastListScrollPosition(getDocumentScroll()),
-					); // hier auch speichern, damit auch hier das close des poi die scroll-position wiederherstellt
-					actions.push(setView(VIEW_MAP_ONLY));
-				}
-
-				return batchActions(actions);
-			},
-		[
-			appChannelDispatch,
-			showSelectedOnly,
-			selectionBehavior,
-			selectionBehaviorSelection,
-			view,
-		],
-	);
-}