@mapsight/ui 7.0.3 → 7.2.0

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.ts";
-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);

package/src/js/components/map-overlay/share-position-link-button.tsx

@@ -1,144 +0,0 @@
-import {Fragment, useCallback, useEffect, useMemo} from "react";
-import {useDispatch, useSelector} from "react-redux";
-
-import {createSelector} from "reselect";
-
-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/browser/share-position-link";
-import LinkShare from "../link-share";
-import ToolOverlay from "./tool-overlay";
-
-const applyPrecisionToCoordinates = (num) =>
-	Number.parseFloat(num).toPrecision(6);
-
-/*
- TODO: aria? abort on escape key press?
- */
-type SharePositionLinkButtonProps = {
-	pluginName?: string;
-	opened?: boolean;
-	onOpenedChange?: (opened: boolean) => void;
-};
-
-const SharePositionLinkButton = ({
-	pluginName = "sharePositionLink",
-	opened,
-	onOpenedChange,
-}: SharePositionLinkButtonProps) => {
-	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 coords =
-		feature?.geometry?.type === "Point"
-			? feature.geometry.coordinates
-			: undefined;
-	const shareUrl = useMemo(() => {
-		if (coords) {
-			const url = new URL(location.href);
-			url.protocol = "https:";
-			url.hash = `#lm=${applyPrecisionToCoordinates(
-				coords[1],
-			)}/${applyPrecisionToCoordinates(coords[0])}`;
-			return url.href;
-		}
-
-		return null;
-	}, [coords]);
-
-	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--share-link"
-				type="button"
-				onClick={toggle}
-			>
-				<span className="ms3-map-overlay__button__label">
-					{translate("ui.share-position-link.title")}
-				</span>
-			</button>
-
-			{isOpened && (
-				<ToolOverlay
-					label={translate("ui.share-position-link.title")}
-					onClose={closeAndReset}
-					text={translate("ui.share-position-link.instructions")}
-				>
-					{feature && (
-						<LinkShare
-							url={shareUrl}
-							title={translate(
-								"ui.share-position-link.shareTitle",
-							)}
-							buttonLabel={translate(
-								"ui.share-position-link.shareButtonLabel",
-							)}
-							onFinished={close}
-							onError={undefined}
-						/>
-					)}
-				</ToolOverlay>
-			)}
-		</Fragment>
-	);
-};
-
-export default SharePositionLinkButton;

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

@@ -1,28 +0,0 @@
-import type {PropsWithChildren, ReactNode} from "react";
-
-import CloseOverlayButton from "../close-overlay-button";
-
-type Props = {
-	text: ReactNode;
-	label: ReactNode;
-	onClose: () => void;
-};
-
-const ToolOverlay = ({
-	text,
-	children,
-	label,
-	onClose,
-}: PropsWithChildren<Props>) => {
-	// TODO: Aria role, focus trap, close on escape etc.?
-	return (
-		<div className="ms3-tool-overlay">
-			<CloseOverlayButton onClose={onClose} />
-			<h3 className="ms3-tool-overlay__header">{label}</h3>
-			{text && <p className="ms3-tool-overlay__text">{text}</p>}
-			{children}
-		</div>
-	);
-};
-
-export default ToolOverlay;

package/src/js/components/map-overlay/user-geo-location-button.jsx

@@ -1,89 +0,0 @@
-import {hasGeolocationSupport} from "@mapsight/core/lib/helpers";
-import {animate} from "@mapsight/core/lib/map/actions";
-import {getGeolocation} from "@mapsight/core/lib/user-geolocation/actions";
-import {createUserGeolocationSelector} from "@mapsight/core/lib/user-geolocation/selectors";
-
-import proj4 from "proj4";
-import  {memo, useCallback, useEffect, useState} from "react";
-import {useDispatch, useSelector} from "react-redux";
-import * as c from "../../config/constants/controllers";
-
-import {translate} from "../../helpers/i18n";
-import modClasses from "../../helpers/mod-classes";
-
-const geoLocSelector = createUserGeolocationSelector(c.USER_GEOLOCATION);
-
-const UserGeoLocationButton = memo(
-	/**
-	 * @param {{
-	 *   additionalClasses?: string
-	 * }} props props
-	 * @returns {import('react').ReactElement} element
-	 */
-	function UserGeoLocationButton({additionalClasses = ""}) {
-		const dispatch = useDispatch();
-		const {longitude, latitude, error, isEnabled, isRequesting} =
-			useSelector(geoLocSelector);
-		const [moveToGeoLoc, setMoveToGeoLoc] = useState(false);
-		const [showButton, setShowButton] = useState(true);
-
-		useEffect(() => {
-			setShowButton(hasGeolocationSupport);
-		}, []);
-
-		useEffect(() => {
-			if (moveToGeoLoc && longitude && latitude) {
-				// move only once per click
-				setMoveToGeoLoc(false);
-				dispatch(
-					animate(c.MAP, {
-						center: proj4("WGS84", "EPSG:3857", [
-							longitude,
-							latitude,
-						]),
-						duration: 500,
-					}),
-				);
-			}
-		}, [dispatch, longitude, latitude, moveToGeoLoc]);
-
-		const onClick = useCallback(
-			/** @param {React.MouseEvent} e event */
-			function onClick(e) {
-				e.stopPropagation();
-				setMoveToGeoLoc(true);
-				dispatch(getGeolocation());
-			},
-			[dispatch],
-		);
-
-		if (!showButton) {
-			return null;
-		}
-
-		return (
-			<button
-				type="button"
-				className={
-					modClasses("ms3-map-overlay__button", {
-						"with-icon": true,
-						"geo-location": true,
-						"geo-location--active": isEnabled,
-						"geo-location--inactive": !isEnabled,
-						"geo-location--requesting": isRequesting,
-						"geo-location--error": !!error,
-					}) +
-					" " +
-					additionalClasses
-				}
-				onClick={onClick}
-				aria-label={translate("ui.user-geo-location-button.ariaLabel")}
-			>
-				<span className="ms3-map-overlay__button__label">
-					{translate("ui.user-geo-location-button.label")}
-				</span>
-			</button>
-		);
-	},
-);
-export default UserGeoLocationButton;

package/src/js/components/map-overlay/zoom-button.jsx

@@ -1,98 +0,0 @@
-import {animate} from "@mapsight/core/lib/map/actions";
-import  {memo, useCallback} from "react";
-import {useDispatch, useSelector} from "react-redux";
-import {ZOOM_IN, ZOOM_OUT} from "../../config/constants/app";
-import * as c from "../../config/constants/controllers";
-
-import {translate} from "../../helpers/i18n";
-
-const zoomSelector = (state) =>
-	(state && state[c.MAP] && state[c.MAP].view && state[c.MAP].view.zoom) || 0;
-
-/**
- * @param {ZOOM_IN | ZOOM_OUT} action action
- * @returns {string} label
- */
-function getAriaLabel(action) {
-	return translate("ui.zoom-button.ariaLabel" + action);
-}
-
-/**
- * @param {ZOOM_IN | ZOOM_OUT} action action
- * @returns {string} label
- */
-function getLabel(action) {
-	return translate("ui.zoom-button.label" + action);
-}
-
-/**
- * @param {{
- *   action: ZOOM_IN | ZOOM_OUT,
- *   style?: import('react').CSSProperties,
- *   additionalClasses?: string,
- *   baseClass?: string,
- *   zoomModifierClassPrefix?: string
- * }} props props
- * @returns {import('react').ReactElement} element
- */
-function ZoomButton(props) {
-	const {
-		action,
-
-		// no need for separation of concerns, we just pass everything into the "component"
-		additionalClasses = "",
-		baseClass = "button",
-		zoomModifierClassPrefix = "button--",
-		style = {},
-	} = props;
-
-	const dispatch = useDispatch();
-	const zoom = useSelector(zoomSelector);
-
-	const onClick = useCallback(
-		/** @param {import('react').MouseEvent} e event */
-		function onClick(e) {
-			e.stopPropagation();
-
-			switch (action) {
-				case ZOOM_IN:
-					dispatch(
-						animate(c.MAP, {
-							zoom: zoom + 1,
-							duration: 200,
-						}),
-					);
-					break;
-
-				case ZOOM_OUT:
-					dispatch(
-						animate(c.MAP, {
-							zoom: zoom - 1,
-							duration: 200,
-						}),
-					);
-					break;
-
-				default:
-					throw new Error("Unsupported action");
-			}
-		},
-		[dispatch, action, zoom],
-	);
-
-	const className = `${baseClass} ${zoomModifierClassPrefix}${action} ${additionalClasses}`;
-
-	return (
-		<button
-			type="button"
-			className={className}
-			onClick={onClick}
-			aria-label={getAriaLabel(action)}
-			style={style}
-		>
-			<span className={`${baseClass}__label`}>{getLabel(action)}</span>
-		</button>
-	);
-}
-
-export default memo(ZoomButton);

package/src/js/components/map-overlay/zoom-buttons.jsx

@@ -1,26 +0,0 @@
-import  {memo} from "react";
-
-import {ZOOM_IN, ZOOM_OUT} from "../../config/constants/app";
-
-import CombinedButtons from "./combined-buttons";
-import ZoomButton from "./zoom-button";
-
-const ZoomButtons = memo(function ZoomButtons() {
-	return (
-		<CombinedButtons>
-			<ZoomButton
-				baseClass="ms3-map-overlay__button"
-				additionalClasses="ms3-map-overlay__button--with-icon ms3-map-overlay__button--zoom"
-				zoomModifierClassPrefix="ms3-map-overlay__button--zoom--"
-				action={ZOOM_IN}
-			/>
-			<ZoomButton
-				baseClass="ms3-map-overlay__button"
-				additionalClasses="ms3-map-overlay__button--with-icon ms3-map-overlay__button--zoom"
-				zoomModifierClassPrefix="ms3-map-overlay__button--zoom--"
-				action={ZOOM_OUT}
-			/>
-		</CombinedButtons>
-	);
-});
-export default ZoomButtons;

package/src/js/components/map-synced-interlay/index.js

@@ -1,17 +0,0 @@
-import {connect} from "react-redux";
-
-import {createStructuredSelector} from "reselect";
-
-import {mapSizeSelector} from "@mapsight/core/lib/map/selectors";
-
-import {MAP} from "../../config/constants/controllers";
-import {viewSelector} from "../../store/selectors.ts";
-import MapSyncedInterlay from "./map-synced-interlay";
-
-export default connect(
-	createStructuredSelector({
-		view: viewSelector,
-		size: (state) => mapSizeSelector(state[MAP]),
-		//pendingUpdateSize: state => state[MAP].pendingUpdateSize || false,
-	}),
-)(MapSyncedInterlay);

package/src/js/components/map-synced-interlay/map-synced-interlay.jsx

@@ -1,22 +0,0 @@
-import  {memo} from "react";
-import {useSelector} from "react-redux";
-
-import {isViewMobileOrMapOnlySelector} from "../../store/selectors.ts";
-
-import Tooltip from "./tooltip";
-
-function MapSyncedInterlay({size}) {
-	const isViewMobileOrMapOnly = useSelector(isViewMobileOrMapOnlySelector);
-	const [width = "100%", height = "100%"] = size || [];
-
-	return (
-		<div
-			className="ms3-map-synced-interlay"
-			style={{width: width, height: height}}
-		>
-			{!isViewMobileOrMapOnly && <Tooltip />}
-		</div>
-	);
-}
-
-export default memo(MapSyncedInterlay);

package/src/js/components/map-synced-interlay/tooltip-content.tsx

@@ -1,22 +0,0 @@
-import type {PropsWithChildren} from "react";
-
-import {makeReplaceableComponent} from "../../helpers/components";
-import type {MapsightUiFeature} from "../../types";
-
-export type Props = PropsWithChildren<{
-	feature: MapsightUiFeature;
-	html: string;
-	text: string;
-}>;
-
-function TooltipContent({children}: Props) {
-	return <>{children}</>;
-}
-
-export default makeReplaceableComponent("TooltipContent", TooltipContent);
-
-declare module "../../helpers/components" {
-	interface ComponentProps {
-		TooltipContent: Props;
-	}
-}