@mapsight/ui 7.1.0 → 7.2.1

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

@@ -1,278 +0,0 @@
-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";
-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/index";
-import TagSwitcher from "../tag-switcher/index";
-
-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";
-
-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

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

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

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

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

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

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

@@ -1,82 +0,0 @@
-import {connect} from "react-redux";
-
-import {createSelector} from "@reduxjs/toolkit";
-import {batchActions} from "redux-batched-actions";
-
-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);