@mapsight/ui 7.1.0 → 7.2.0

package/src/js/components/map-overlay/info-overlay-left.jsx

@@ -1,51 +0,0 @@
-import {memo, useCallback} from "react";
-import {useDispatch, useSelector} from "react-redux";
-
-import {translate} from "../../helpers/i18n";
-
-import {setOverlayModalVisible} from "../../store/actions";
-
-import {
-	isOverlayModalVisibleSelector,
-	isViewMobileOrMapOnlySelector,
-} from "../../store/selectors";
-
-import Logo from "./logo";
-
-function InfoOverlayLeft() {
-	const dispatch = useDispatch();
-
-	const isMobileOrMapOnly = useSelector(isViewMobileOrMapOnlySelector);
-	const isOverlayModalVisible = useSelector(isOverlayModalVisibleSelector);
-
-	const expand = useCallback(() => {
-		dispatch(setOverlayModalVisible(true));
-	}, [dispatch]);
-
-	return (
-		<div className="ms3-info-overlay__area ms3-info-overlay__area--left">
-			{/* we are already handling breakpoints in css, but im keeping this condition,
-			cause of unknown invariants in regard to *isMobileOrMapOnly* & css */}
-			{!isMobileOrMapOnly && (
-				<div className="ms3-info-overlay__logo ms3-info-overlay__desktop-content">
-					<Logo />
-				</div>
-			)}
-
-			<div className="ms3-info-overlay__mobile-content">
-				<button
-					type="button"
-					className="ms3-map-overlay__button ms3-map-overlay__button--with-icon ms3-map-overlay__button--info"
-					aria-expanded={isOverlayModalVisible}
-					onClick={expand}
-				>
-					<span className="ms3-map-overlay__button__label">
-						{translate("ui.map-overlay.info.open")}
-					</span>
-				</button>
-			</div>
-		</div>
-	);
-}
-
-export default memo(InfoOverlayLeft);

package/src/js/components/map-overlay/info-overlay-modal.tsx

@@ -1,49 +0,0 @@
-import type {PropsWithChildren} from "react";
-import {memo, useCallback, useEffect} from "react";
-import {useDispatch, useSelector} from "react-redux";
-
-import {translate} from "../../helpers/i18n";
-import {setOverlayModalVisible} from "../../store/actions";
-import {
-	isOverlayModalVisibleSelector,
-	isViewMobileOrMapOnlySelector,
-} from "../../store/selectors";
-import Modal from "../modal";
-
-const InfoOverlayModal = memo(InfoOverlayModel_);
-
-function InfoOverlayModel_({children}: PropsWithChildren) {
-	const dispatch = useDispatch();
-
-	const isExpanded = useSelector(isOverlayModalVisibleSelector);
-	const isMobileOrMapOnly = useSelector(isViewMobileOrMapOnlySelector);
-
-	// close modals on view-switch to something else than mobile
-	useEffect(() => {
-		if (!isMobileOrMapOnly) {
-			dispatch(setOverlayModalVisible(false));
-		}
-	}, [dispatch, isMobileOrMapOnly]);
-
-	const collapse = useCallback(() => {
-		dispatch(setOverlayModalVisible(false));
-	}, [dispatch]);
-
-	return (
-		<Modal
-			isOpen={isExpanded}
-			contentLabel={translate("ui.map-overlay.info.modal.label")}
-			closeLabel={
-				isMobileOrMapOnly
-					? translate("ui.map-overlay.info.closeSources")
-					: translate("ui.map-overlay.info.closeLegend")
-			}
-			headline={translate("ui.map-overlay.info.modal.headline")}
-			onRequestClose={collapse}
-		>
-			{children}
-		</Modal>
-	);
-}
-
-export default InfoOverlayModal;

package/src/js/components/map-overlay/info-overlay-right.jsx

@@ -1,46 +0,0 @@
-import {
-	reduceLayersToLegends,
-	visibleLayersWithLegendsSelector,
-} from "@mapsight/core/lib/map/selectors";
-import {memo, useCallback} from "react";
-import {useDispatch, useSelector} from "react-redux";
-import {createSelector} from "@reduxjs/toolkit";
-
-import {MAP} from "../../config/constants/controllers";
-
-import {translate} from "../../helpers/i18n";
-import {setOverlayModalVisible} from "../../store/actions";
-
-import Attribution from "./attribution";
-
-const legendsSelector = createSelector(
-	(state) => visibleLayersWithLegendsSelector(state[MAP]),
-	// we need to run this as well, cause it's filtering stuff
-	reduceLayersToLegends,
-);
-
-function InfoOverlayRight() {
-	const dispatch = useDispatch();
-
-	const legends = useSelector(legendsSelector);
-
-	const expand = useCallback(() => {
-		dispatch(setOverlayModalVisible(true));
-	}, [dispatch]);
-
-	const hasLegend = Object.keys(legends).length > 0;
-
-	return (
-		<div className="ms3-info-overlay__desktop-content ms3-info-overlay__area ms3-info-overlay__area--right">
-			<Attribution>
-				{hasLegend && (
-					<button type="button" onClick={expand}>
-						{translate("ui.map-overlay.info.legend")}
-					</button>
-				)}
-			</Attribution>
-		</div>
-	);
-}
-
-export default memo(InfoOverlayRight);

package/src/js/components/map-overlay/layer-switcher-overlay.tsx

@@ -1,100 +0,0 @@
-import {memo, useCallback, useState} from "react";
-import {useSelector} from "react-redux";
-
-import {FocusTrap} from "focus-trap-react";
-
-import {translate} from "../../helpers/i18n";
-import {isViewMobileOrMapOnlySelector} from "../../store/selectors";
-import LayerSwitcher from "../layer-switcher";
-import Modal from "../modal";
-
-const LayerSwitcherContent = memo(function LayerSwitcherContent({
-	isExpanded,
-	closeSearch,
-}: {
-	isExpanded: boolean;
-	closeSearch: () => void;
-}) {
-	const isMobileOrMapOnly = useSelector(isViewMobileOrMapOnlySelector);
-
-	if (isMobileOrMapOnly) {
-		return (
-			<Modal
-				isOpen={isExpanded}
-				contentLabel={translate(
-					"ui.map-overlay.layer-switcher.modal.label",
-				)}
-				closeLabel={translate(
-					"ui.map-overlay.layer-switcher.closeLayers",
-				)}
-				headline={translate("ui.map-overlay.layer-switcher.layers")}
-				onRequestClose={closeSearch}
-			>
-				<LayerSwitcher onClose={closeSearch} />
-			</Modal>
-		);
-	}
-
-	if (isExpanded) {
-		return (
-			<FocusTrap
-				focusTrapOptions={{
-					clickOutsideDeactivates: true,
-					onDeactivate: closeSearch,
-				}}
-			>
-				<div>
-					<LayerSwitcher onClose={closeSearch} />
-				</div>
-			</FocusTrap>
-		);
-	}
-
-	return <div className="ms3-layer-switcher-placeholder" />;
-});
-
-function LayerSwitcherOverlay() {
-	const [isExpanded, setIsExpanded] = useState(false);
-
-	const handleOpen = useCallback(() => setIsExpanded(true), []);
-	const handleClose = useCallback(() => setIsExpanded(false), []);
-
-	return (
-		<div
-			className={`ms3-layer-switcher-overlay ${
-				isExpanded ? "ms3-layer-switcher-overlay--expanded" : ""
-			}`}
-		>
-			<button
-				type="button"
-				className="ms3-map-overlay__button ms3-map-overlay__button--with-icon ms3-map-overlay__button--layers"
-				onClick={handleOpen}
-				aria-expanded={isExpanded}
-			>
-				<span className="ms3-map-overlay__button__label">
-					<span aria-hidden="true">
-						{translate("ui.map-overlay.layer-switcher.layers")}
-					</span>
-
-					<span className="ms3-visuallyhidden">
-						{isExpanded &&
-							translate(
-								"ui.map-overlay.layer-switcher.closeLayers",
-							)}
-						{!isExpanded &&
-							translate(
-								"ui.map-overlay.layer-switcher.openLayers",
-							)}
-					</span>
-				</span>
-			</button>
-
-			<LayerSwitcherContent
-				isExpanded={isExpanded}
-				closeSearch={handleClose}
-			/>
-		</div>
-	);
-}
-
-export default memo(LayerSwitcherOverlay);

package/src/js/components/map-overlay/legend.tsx

@@ -1,22 +0,0 @@
-import {useSelector} from "react-redux";
-
-import {createSelector} from "@reduxjs/toolkit";
-
-import {
-	reduceLayersToLegends,
-	visibleLayersWithLegendsSelector,
-} from "@mapsight/core/lib/map/selectors";
-
-import {MAP} from "../../config/constants/controllers";
-import AttributionEntries from "./attribution-entries";
-
-// die anzuzeigenden Legenden hier selbst berechnen zusammen mit den css-Namen
-const legendsSelector = createSelector(
-	(state) => visibleLayersWithLegendsSelector(state[MAP]),
-	reduceLayersToLegends,
-);
-
-export default function Legend() {
-	const legends = useSelector(legendsSelector);
-	return <AttributionEntries attributions={legends} />;
-}

package/src/js/components/map-overlay/logo.jsx

@@ -1,11 +0,0 @@
-import {translate} from "../../helpers/i18n";
-
-export default function MapOverlayLogo() {
-	return (
-		<div className="ms3-logo">
-			<span className="ms3-visuallyhidden">
-				{translate("ui.map-overlay.logo.copyright")}
-			</span>
-		</div>
-	);
-}

package/src/js/components/map-overlay/measure-distance-button.tsx

@@ -1,116 +0,0 @@
-import {Fragment, useCallback, useEffect, useMemo} from "react";
-import {useDispatch, useSelector} from "react-redux";
-
-import {createSelector} from "@reduxjs/toolkit";
-
-import {removeAllFeatures} from "@mapsight/core/lib/feature-sources/actions";
-import {createFilteredFeatureSourceSelector} from "@mapsight/core/lib/feature-sources/selectors";
-
-import {FEATURE_SOURCES, MAP} from "../../config/constants/controllers";
-import {translate} from "../../helpers/i18n";
-import useControllableState from "../../hooks/useControllableState";
-import {
-	createActivateAction,
-	createDeactivateAction,
-} from "../../plugins/common/measure-distance";
-import MeasureDistanceInfo from "./measure-distance-overlay";
-import ToolOverlay from "./tool-overlay";
-
-/*
- TODO: aria? abort on escape key press?
- */
-type MeasureDistanceButtonProps = {
-	pluginName?: string;
-	opened?: boolean;
-	onOpenedChange?: (opened: boolean) => void;
-};
-
-const MeasureDistanceButton = ({
-	pluginName = "measureDistance",
-	opened,
-	onOpenedChange,
-}: MeasureDistanceButtonProps) => {
-	const [isOpened = false, setIsOpened] = useControllableState({
-		prop: opened,
-		defaultProp: false,
-		onChange: onOpenedChange,
-	});
-
-	const activate = useMemo(
-		() => createActivateAction(MAP, pluginName),
-		[pluginName],
-	);
-	const deactivate = useMemo(
-		() => createDeactivateAction(MAP, pluginName),
-		[pluginName],
-	);
-	const resetAction = useMemo(
-		() => removeAllFeatures(FEATURE_SOURCES, `${pluginName}_featureSource`),
-		[pluginName],
-	);
-	const featureSelector = useMemo(
-		() =>
-			createSelector(
-				createFilteredFeatureSourceSelector(
-					FEATURE_SOURCES,
-					`${pluginName}_featureSource`,
-					MAP,
-				),
-				(featureSourceState) => featureSourceState?.data?.features?.[0],
-			),
-		[pluginName],
-	);
-
-	const dispatch = useDispatch();
-	const feature = useSelector(featureSelector);
-
-	const toggle = useCallback(() => {
-		setIsOpened(!isOpened);
-	}, [isOpened, setIsOpened]);
-
-	const close = useCallback(() => {
-		setIsOpened(false);
-	}, [setIsOpened]);
-
-	useEffect(() => {
-		dispatch(isOpened ? activate : deactivate);
-	}, [dispatch, deactivate, isOpened, activate]);
-
-	const closeAndReset = useCallback(
-		function () {
-			dispatch(resetAction);
-			close();
-		},
-		[close, dispatch, resetAction],
-	);
-
-	return (
-		<Fragment>
-			<button
-				className="ms3-map-overlay__button ms3-map-overlay__button--with-icon ms3-map-overlay__button--measure-distance"
-				type="button"
-				onClick={toggle}
-			>
-				<span className="ms3-map-overlay__button__label">
-					{translate("ui.measure-distance.title")}
-				</span>
-			</button>
-
-			{isOpened && (
-				<ToolOverlay
-					label={translate("ui.measure-distance.title")}
-					onClose={closeAndReset}
-					text={translate(
-						feature
-							? "ui.measure-distance.instructions-done"
-							: "ui.measure-distance.instructions",
-					)}
-				>
-					{feature && <MeasureDistanceInfo feature={feature} />}
-				</ToolOverlay>
-			)}
-		</Fragment>
-	);
-};
-
-export default MeasureDistanceButton;

package/src/js/components/map-overlay/measure-distance-overlay.jsx

@@ -1,56 +0,0 @@
-import GeoJSON from "ol/format/GeoJSON";
-
-import {getLength} from "ol/sphere";
-import  {useMemo} from "react";
-
-import {translate} from "../../helpers/i18n";
-
-const geoJsonFormat = new GeoJSON();
-const meterFormat = new Intl.NumberFormat(undefined, {
-	style: "unit",
-	maximumFractionDigits: 2,
-	unit: "meter",
-});
-const kilometerFormat = new Intl.NumberFormat(undefined, {
-	style: "unit",
-	maximumFractionDigits: 2,
-	unit: "kilometer",
-});
-
-function formatLength(length) {
-	const isKilometer = length > 1000;
-	const format = isKilometer ? kilometerFormat : meterFormat;
-	const amount = isKilometer ? length / 1000 : length;
-	return format.format(amount);
-}
-
-function MeasureDistanceInfo({feature}) {
-	const fGeo = feature?.geometry;
-	const geometry = useMemo(() => {
-		if (fGeo?.type !== "LineString") {
-			return null;
-		}
-
-		return geoJsonFormat.readGeometry(fGeo, {
-			featureProjection: "EPSG:3857",
-			dataProjection: "EPSG:4326",
-		});
-	}, [fGeo]);
-
-	if (!geometry) {
-		return null;
-	}
-
-	const length = getLength(geometry);
-	const formattedValue = formatLength(length);
-
-	return (
-		<div className="ms3-measure-distance">
-			{translate("ui.measure-distance.measurement")}
-			{": "}
-			{formattedValue}
-		</div>
-	);
-}
-
-export default MeasureDistanceInfo;

package/src/js/components/map-overlay/mini-legend.jsx

@@ -1,103 +0,0 @@
-import {visibleLayersWithMiniLegendsSelector} from "@mapsight/core/lib/map/selectors";
-
-import getPath from "@mapsight/lib-js/object/getPath";
-import escapeCssName from "@mapsight/lib-js/string/escapeCssName";
-import  {memo, useCallback} from "react";
-import {useDispatch, useSelector} from "react-redux";
-
-import {MAP} from "../../config/constants/controllers";
-import {translate} from "../../helpers/i18n";
-import {setMiniLegendLayer, setOverlayModalVisible} from "../../store/actions";
-import {
-	isOverlayModalVisibleSelector,
-	miniLegendLayerIdSelector,
-} from "../../store/selectors";
-
-const layersSelector = (state) =>
-	visibleLayersWithMiniLegendsSelector(state[MAP]);
-
-/**
- * this is meant to be used as or included in any project side component in Components
- *
- * @type {React.NamedExoticComponent<object>}
- */
-const MiniLegend = memo(function MiniLegend() {
-	const dispatch = useDispatch();
-	const layersWithMiniLegends = useSelector(layersSelector);
-	const currentKey = useSelector(miniLegendLayerIdSelector);
-	const isOverlayModalVisible = useSelector(isOverlayModalVisibleSelector);
-
-	const openBigLegend = useCallback(
-		() => dispatch(setOverlayModalVisible(true)),
-		[dispatch],
-	);
-
-	const onSelectChange = useCallback(
-		/** @param {React.ChangeEvent<HTMLSelectElement>} e event */
-		(e) => {
-			console.log("MiniLegend onSelectChange", e);
-			dispatch(setMiniLegendLayer(e.target.value));
-		},
-		[dispatch],
-	);
-
-	const keys = layersWithMiniLegends && Object.keys(layersWithMiniLegends);
-	if (!keys || !keys.length) {
-		return null;
-	}
-
-	const currentLayer = layersWithMiniLegends[currentKey];
-	const cssName = escapeCssName(
-		getPath(currentLayer, ["metaData", "title"]) || currentKey,
-	);
-	const currentLegend = getPath(currentLayer, ["metaData", "miniLegend"]);
-
-	return (
-		<div className={`ms3-mini-legend ms3-mini-legend--${cssName}`}>
-			<div className="ms3-mini-legend__select" aria-hidden={true}>
-				<select
-					value={currentKey}
-					onChange={onSelectChange}
-					disabled={keys.length === 1}
-				>
-					{Object.keys(layersWithMiniLegends).map((key) => (
-						<option key={key} value={key}>
-							{getPath(layersWithMiniLegends[key], [
-								"metaData",
-								"title",
-							]) || key}
-						</option>
-					))}
-				</select>
-			</div>
-
-			{typeof currentLegend === "string" ? (
-				<div
-					aria-hidden={true}
-					className="ms3-mini-legend__legend"
-					dangerouslySetInnerHTML={{__html: currentLegend}}
-				/>
-			) : (
-				<div aria-hidden={true} className="ms3-mini-legend__legend">
-					{getPath(currentLayer, ["metaData", "miniLegend"])}
-				</div>
-			)}
-
-			<div className="ms3-mini-legend__more">
-				<button
-					type="button"
-					onClick={openBigLegend}
-					aria-expanded={isOverlayModalVisible}
-				>
-					<span className="ms3-visuallyhidden">
-						{translate("ui.map-overlay.info.open")}
-					</span>
-					{/* eslint-disable-next-line no-irregular-whitespace */}
-					<span aria-hidden={true}>. . .</span>
-				</button>
-			</div>
-		</div>
-	);
-});
-
-export default MiniLegend;

package/src/js/components/map-overlay/region-selector.jsx

@@ -1,63 +0,0 @@
-import  {memo, useCallback} from "react";
-import {useDispatch, useSelector} from "react-redux";
-import {setSelectedRegionIdAndAnimateMap} from "../../store/actions";
-
-import {regionsSelector, selectedRegionIdSelector} from "../../store/selectors";
-
-const RegionSelectorEntry = memo(
-	/**
-	 * @param {{
-	 *   regionId: string,
-	 *   region: {label: string}
-	 * }} props props
-	 * @returns {import('react').ReactElement} element
-	 */
-	function RegionSelectorEntry({regionId, region}) {
-		const dispatch = useDispatch();
-
-		const onClick = useCallback(() => {
-			dispatch(setSelectedRegionIdAndAnimateMap(regionId));
-		}, [dispatch, regionId]);
-
-		const selectedRegionId = useSelector(selectedRegionIdSelector);
-
-		return (
-			<li
-				className={`ms3-region-selector-entry${
-					regionId === selectedRegionId
-						? " ms3-region-selector-entry--selected"
-						: ""
-				}`}
-			>
-				<button type="button" onClick={onClick}>
-					{region.label}
-				</button>
-			</li>
-		);
-	},
-);
-
-const RegionSelector = memo(function RegionSelector({
-	as: T = "ul",
-	style = {},
-}) {
-	const regions = useSelector(regionsSelector);
-
-	if (!regions) {
-		return null;
-	}
-
-	return (
-		<T
-			className="ms3-region-selector [ ms3-hint--right ms3-hint--rounded ]"
-			style={style}
-			aria-label="Gebiet auf Karte zentrieren …"
-		>
-			{Object.entries(regions).map(([id, region]) => (
-				<RegionSelectorEntry key={id} regionId={id} region={region} />
-			))}
-		</T>
-	);
-});
-
-export default RegionSelector;

package/src/js/components/map-overlay/search-overlay.jsx

@@ -1,79 +0,0 @@
-import  {memo, useCallback, useState} from "react";
-import {useSelector} from "react-redux";
-import {translate} from "../../helpers/i18n";
-
-import {
-	haveSearchInMapSelector,
-	isViewMobileOrMapOnlySelector,
-} from "../../store/selectors";
-import Modal from "../modal";
-
-import Search from "../search";
-
-function SearchOverlay() {
-	const [isExpanded, setIsExpanded] = useState(false);
-
-	const searchInMap = useSelector(haveSearchInMapSelector);
-	const isMobileOrMapOnly = useSelector(isViewMobileOrMapOnlySelector);
-
-	const toggleIsExpanded = useCallback(() => {
-		setIsExpanded((prevVal) => !prevVal);
-	}, [setIsExpanded]);
-
-	const closeSearch = useCallback(() => {
-		setIsExpanded(false);
-	}, [setIsExpanded]);
-
-	if (searchInMap === false) {
-		return null;
-	}
-
-	let children;
-	if (isMobileOrMapOnly) {
-		children = (
-			<div>
-				<button
-					type="button"
-					className="ms3-map-overlay__button ms3-map-overlay__button--with-icon ms3-map-overlay__button--search"
-					onClick={toggleIsExpanded}
-				>
-					<span className="ms3-map-overlay__button__label">
-						<span className="ms3-visuallyhidden">
-							{translate(
-								isExpanded
-									? "ui.map-overlay.search.close"
-									: "ui.map-overlay.search.open",
-							)}
-						</span>
-					</span>
-				</button>
-
-				<Modal
-					isOpen={isExpanded}
-					contentLabel={translate(
-						"ui.map-overlay.search.modal.label",
-					)}
-					closeLabel={translate("ui.map-overlay.search.close")}
-					headline={translate("ui.map-overlay.search.modal.headline")}
-					onRequestClose={closeSearch}
-				>
-					<Search closeSearch={closeSearch} />
-				</Modal>
-			</div>
-		);
-	} else {
-		children = <Search />;
-	}
-
-	return (
-		<div
-			className={`ms3-search-overlay ${
-				isExpanded ? "ms3-search-overlay--expanded" : ""
-			}`}
-		>
-			{children}
-		</div>
-	);
-}
-
-export default memo(SearchOverlay);