@mapsight/ui 7.0.0

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

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

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

@@ -0,0 +1,12 @@
+import {useEffect} from "react";
+
+import {isViewFullscreen, isViewMobile} from "../../../store/selectors.ts";
+
+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

@@ -0,0 +1,88 @@
+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.ts";
+import {FEATURE_SELECTIONS} from "../../../config/constants/controllers.ts";
+import {FEATURE_SELECTION_HIGHLIGHT} from "../../../config/feature/selections.ts";
+import {setLastListScrollPosition, setView} from "../../../store/actions.ts";
+import {
+	listUiOptionSelectedOnlySelector,
+	listUiOptionSelectionBehaviorSelector,
+	listUiOptionSelectionSelectionSelector,
+	viewSelector,
+} from "../../../store/selectors.ts";
+import {
+	APP_EVENT_SCROLL_TO_MAP,
+	useAppChannelDispatchEvent,
+} from "../../helping/app-channel.tsx";
+
+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,
+		],
+	);
+}

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

@@ -0,0 +1,278 @@
+import {deselectAll} from "@mapsight/core/lib/feature-selections/actions";
+import {forwardRef, useCallback, useMemo, useRef} from "react";
+import {useDispatch, useSelector} from "react-redux";
+
+import {FEATURE_SELECTIONS} from "../../config/constants/controllers";
+import getFeatureProperty from "../../helpers/get-feature-property";
+import {
+	layerSwitcherConfigExternalSelector,
+	listUiOptionsSelector,
+	viewSelector,
+} from "../../store/selectors.ts";
+import FeatureCycling from "../feature-list-cycling";
+
+import FeatureSorter from "../feature-list-sorting";
+
+import {
+	APP_EVENT_SCROLL_TO_FEATURE_LIST,
+	useAppChannelEventListener,
+} from "../helping/app-channel";
+import LayerSwitcher from "../layer-switcher";
+import TagSwitcher from "../tag-switcher";
+
+import {FeatureListContextProvider} from "./context";
+
+import FeatureFilter from "./filter";
+import FeatureListFooter from "./footer";
+import FeatureListGroupedContent from "./grouped-content";
+import FeatureListHeader from "./header";
+import useAutoloadFeatureSource from "./hooks/useAutoloadFeatureSource";
+import useFeatureListState from "./hooks/useFeatureListState";
+import {useMakeHeaderSticky} from "./hooks/useMakeHeaderSticky";
+import useRestoreDocumentScroll from "./hooks/useRestoreDocumentScroll";
+import useSelectFeature from "./hooks/useSelectFeature";
+import Pagination from "./pagination.tsx";
+
+export const DEFAULT_LIST_RENDER_AS = "ul";
+
+function stopEventPropagation(e) {
+	e.stopPropagation();
+}
+
+function determineShowListInfo(features) {
+	if (features.length) {
+		const firstInfo = getFeatureProperty(features[0], "listInformation");
+		for (let i = 0; i < features.length; i++) {
+			const info = getFeatureProperty(features[i], "listInformation");
+
+			if (firstInfo !== info) {
+				return true;
+			}
+		}
+	}
+
+	return false;
+}
+
+function determineItemType(containerType = DEFAULT_LIST_RENDER_AS) {
+	if (containerType === "ul" || containerType === "ol") {
+		return "li";
+	}
+
+	return "p";
+}
+
+/**
+ * @template T
+ * @param {import("../../types").FeatureListProps<T>} props props
+ * @param {React.RefObject<React.ElementRef<T>>} forwardedRef ref
+ * @returns {React.ReactElement} element
+ */
+function FeatureList(props, forwardedRef) {
+	const {
+		additionalClasses,
+		as: T = "div",
+		attributes = {},
+		headerAs: HeaderT = FeatureListHeader,
+		contentAs: ContentT = FeatureListGroupedContent,
+		footerAs: FooterT = FeatureListFooter,
+		itemAs,
+		enableKeyboardControl = false,
+		autoloadFeatureSource = true,
+		sort = true,
+		filter = true,
+		enableScrollPosition = true,
+		overrideListUiOptions,
+		listControllerName,
+	} = props;
+
+	const listUiOptionsState = useSelector(listUiOptionsSelector);
+	const listUiOptions = overrideListUiOptions || listUiOptionsState;
+	const {
+		stickyHeader,
+		detailsInList,
+		showVaryingListInfoOnly,
+		renderGroupAs,
+		renderAs = DEFAULT_LIST_RENDER_AS,
+		selectionBehaviorSelection,
+	} = listUiOptions;
+	const state = useFeatureListState(
+		listUiOptions,
+		sort,
+		filter,
+		enableScrollPosition,
+		listControllerName,
+	);
+	const view = useSelector(viewSelector);
+
+	if (renderAs === "table") {
+		throw new Error(
+			"@mapsight/ui does not support rendering the feature list as <table> anymore!",
+		);
+	}
+
+	/** @type {React.RefObject<HTMLElement>} */
+	const headerRef = useRef();
+
+	/** @type {React.RefObject<HTMLElement>} */
+	const ownRef = useRef();
+
+	/** @type {React.RefObject<HTMLElement>} */
+	const ref = forwardedRef || ownRef;
+
+	useMakeHeaderSticky(stickyHeader, ref, headerRef, view);
+	useAutoloadFeatureSource(autoloadFeatureSource, state.featureSourceId);
+	useRestoreDocumentScroll(view, state.scrollPosition);
+
+	useAppChannelEventListener(
+		APP_EVENT_SCROLL_TO_FEATURE_LIST,
+		useCallback(() => {
+			ref.current.scrollIntoView({block: "start", behavior: "smooth"});
+		}, [ref]),
+	);
+
+	const dispatch = useDispatch();
+	const selectFeatureAction = useSelectFeature();
+	const selectFeature = useCallback(
+		(featureId, options) =>
+			dispatch(selectFeatureAction(featureId, options)),
+		[dispatch, selectFeatureAction],
+	);
+	const deselectFeature = useCallback(
+		() =>
+			dispatch(
+				deselectAll(FEATURE_SELECTIONS, selectionBehaviorSelection),
+			),
+		[dispatch, selectionBehaviorSelection],
+	);
+
+	// Decide whether to show the info column
+	// based on if there is any "interesting" aka distinct data available in the features
+	// We do this before filtering so it does not change while changing the filter
+	const showFeatureListInfo =
+		state.filteredFeatures.length !== 0 &&
+		(showVaryingListInfoOnly === false ||
+			determineShowListInfo(state.features));
+
+	// TODO:
+	//<StatusIndicator {...{
+	//	lastUpdate: this.props.lastUpdate,
+	//	status: this.props.status,
+	//	key: 'si'
+	//}} />
+
+	let className = "ms3-list-wrapper";
+	if (detailsInList) {
+		className += " ms3-list-wrapper--with-details";
+	}
+	if (additionalClasses) {
+		className += ` ${additionalClasses}`;
+	}
+
+	const itemProps = useMemo(
+		() => ({
+			showFeatureListInfo: showFeatureListInfo,
+			enableKeyboardControl: enableKeyboardControl,
+			selectFeature: selectFeature,
+			deselectFeature: deselectFeature,
+		}),
+		[
+			deselectFeature,
+			enableKeyboardControl,
+			selectFeature,
+			showFeatureListInfo,
+		],
+	);
+
+	const renderItemAs = itemAs || determineItemType(renderAs);
+	const contextValue = useMemo(
+		() =>
+			/** @type {import("./context").FeatureListContextValue} */ ({
+				state: state,
+				listUiOptions: listUiOptions,
+				enableKeyboardControl: enableKeyboardControl,
+				showFeatureListInfo: showFeatureListInfo,
+				selectFeature: selectFeature,
+				deselectFeature: deselectFeature,
+				itemProps: itemProps,
+			}),
+		[
+			deselectFeature,
+			enableKeyboardControl,
+			listUiOptions,
+			selectFeature,
+			showFeatureListInfo,
+			state,
+			itemProps,
+		],
+	);
+
+	const {
+		filterControl,
+		sortControl,
+		cyclingControl,
+		integratedList,
+		paginationControl,
+		itemsPerPage,
+	} = listUiOptions;
+	const {
+		page,
+		featureCount,
+		features,
+		featureSourceId,
+		filteredFeatures,
+		layerSwitcherShowExternal,
+		tagSwitcherShow,
+	} = state;
+
+	let filterBox = null;
+	if (filterControl !== false) {
+		filterBox = <FeatureFilter allFeatures={features} />;
+	} else if (sortControl !== false || !cyclingControl) {
+		filterBox = <div className="ms3-list__filter-box">&nbsp;</div>;
+	}
+
+	return (
+		<FeatureListContextProvider value={contextValue}>
+			<T
+				className={className}
+				onTouchMove={stopEventPropagation}
+				ref={ref}
+				{...attributes}
+			>
+				<HeaderT ref={headerRef}>
+					{filterBox}
+
+					{sortControl !== false && <FeatureSorter />}
+
+					{cyclingControl && (
+						<FeatureCycling filteredFeatures={filteredFeatures} />
+					)}
+
+					{integratedList && layerSwitcherShowExternal && (
+						<LayerSwitcher
+							configSelector={layerSwitcherConfigExternalSelector}
+						/>
+					)}
+
+					{integratedList && tagSwitcherShow && <TagSwitcher />}
+				</HeaderT>
+				<ContentT
+					groupAs={renderGroupAs}
+					itemAs={renderItemAs}
+					featureSourceId={featureSourceId}
+				/>
+				<FooterT>
+					{paginationControl ? (
+						<Pagination
+							page={page}
+							count={Math.ceil(featureCount / itemsPerPage)}
+						/>
+					) : null}
+				</FooterT>
+			</T>
+		</FeatureListContextProvider>
+	);
+}
+
+export default forwardRef(FeatureList);

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

@@ -0,0 +1,57 @@
+import ReactPaginate from "react-paginate";
+import {useDispatch} from "react-redux";
+
+import {translate} from "../../helpers/i18n";
+import {setListPage} from "../../store/actions";
+
+function ariaLabelBuilder(page: number, selected: number) {
+	const label =
+		page === selected
+			? translate("ui.pagination.goToSelectedPageLabel")
+			: translate("ui.pagination.goToPageLabel");
+
+	return label.replace("{page}", String(page));
+}
+
+function Pagination({page, count}: {page: number; count: number}) {
+	const dispatch = useDispatch();
+
+	return null;
+
+	return (
+		<ReactPaginate
+			disableInitialCallback={true}
+			forcePage={Math.min(page, count)}
+			pageCount={count}
+			onPageChange={(e) => {
+				dispatch(setListPage(e.selected));
+			}}
+			pageRangeDisplayed={3}
+			marginPagesDisplayed={2}
+			previousLabel={translate("ui.pagination.prevPage")}
+			nextLabel={translate("ui.pagination.nextPage")}
+			previousAriaLabel={translate("ui.pagination.prevPageLabel")}
+			nextAriaLabel={translate("ui.pagination.nextPageLabel")}
+			ariaLabelBuilder={ariaLabelBuilder}
+			// TODO:
+			// Handle deep urls (maybe also SSR)
+			//hrefBuilder={hrefBuilder}
+
+			eventListener="onClick"
+			containerClassName="ms3-list-pagination"
+			pageClassName="ms3-list-pagination__page"
+			pageLinkClassName="ms3-list-pagination__page-link"
+			previousClassName="ms3-list-pagination__page ms3-list-pagination__page--previous"
+			previousLinkClassName="ms3-list-pagination__page-link ms3-list-pagination__page-link--previous"
+			nextClassName="ms3-list-pagination__page ms3-list-pagination__page--next"
+			nextLinkClassName="ms3-list-pagination__page-link ms3-list-pagination__page-link--next"
+			activeClassName="ms3-list-pagination__page--active"
+			activeLinkClassName="ms3-list-pagination__page-link--active"
+			disabledClassName="ms3-list-pagination__page--disabled"
+			breakClassName="ms3-list-pagination__break"
+			breakLinkClassName="ms3-list-pagination__break-link"
+		/>
+	);
+}
+
+export default Pagination;

package/src/js/components/feature-list/query-input.jsx

@@ -0,0 +1,14 @@
+import {translate} from "../../helpers/i18n";
+import QueryInputWithLabel from "../query-input-with-label";
+
+function FeatureQueryInput(props) {
+	return (
+		<QueryInputWithLabel
+			label={translate("ui.feature-list.query-input.placeholder")}
+			// placeholder={translate("ui.feature-list.query-input.placeholder")}
+			{...props}
+		/>
+	);
+}
+
+export default FeatureQueryInput;

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

@@ -0,0 +1,13 @@
+function FeatureListCyclingButton({direction, label, ...rest}) {
+	return (
+		<button
+			type="button"
+			className={`ms3-list-cycling-box__button ms3-list-cycling-box__button--${direction}`}
+			{...rest}
+		>
+			<span className="ms3-visuallyhidden">{label}</span>
+		</button>
+	);
+}
+
+export default FeatureListCyclingButton;

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

@@ -0,0 +1,43 @@
+import {useCallback, useEffect} from "react";
+
+function FeatureListCyclingDot({
+	featureId,
+	onFeatureSelection,
+	onFeatureHighlight,
+	onFeatureUnHighlight,
+	isSelected,
+	isHighlighted,
+	updateScroll,
+}) {
+	const onClick = useCallback(
+		() => onFeatureSelection(featureId),
+		[featureId, onFeatureSelection],
+	);
+	const onMouseEnter = useCallback(
+		() => (isSelected ? undefined : onFeatureHighlight(featureId)),
+		[isSelected, onFeatureHighlight, featureId],
+	);
+
+	useEffect(() => {
+		if (isSelected) {
+			updateScroll();
+		}
+	}, [isSelected, updateScroll]);
+
+	return (
+		<button
+			tabIndex={-1}
+			type="button"
+			className={
+				"ms3-list-cycling-box__dot " +
+				(isSelected ? " ms3-list-cycling-box__dot--selected" : "") +
+				(isHighlighted ? " ms3-list-cycling-box__dot--highlight" : "")
+			}
+			onClick={onClick}
+			onMouseEnter={onMouseEnter}
+			onMouseLeave={onFeatureUnHighlight}
+		/>
+	);
+}
+
+export default FeatureListCyclingDot;