@mapsight/ui 7.1.0 → 7.2.0

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 "@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/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.ts

@@ -1,15 +0,0 @@
-import {connect} from "react-redux";
-
-import {mapSizeSelector} from "@mapsight/core/lib/map/selectors";
-import type {MapState} from "@mapsight/core/lib/map/types";
-
-import {MAP} from "../../config/constants/controllers";
-import type {RootStateSlice} from "../../store/selectors";
-import {viewSelector} from "../../store/selectors";
-import MapSyncedInterlay from "./map-synced-interlay";
-
-export default connect((state: RootStateSlice) => ({
-	view: viewSelector(state),
-	size: mapSizeSelector(state[MAP] as MapState),
-	//pendingUpdateSize: 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";
-
-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;
-	}
-}

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

@@ -1,199 +0,0 @@
-import {
-	type CSSProperties,
-	type ReactElement,
-	type RefObject,
-	memo,
-	useEffect,
-	useRef,
-	useState,
-} from "react";
-import {useSelector} from "react-redux";
-
-import {createSelector} from "@reduxjs/toolkit";
-
-import {
-	type FeatureSelectionState,
-	createFeatureSelectionSelector,
-	getFilteredFeatures,
-} from "@mapsight/core/lib/feature-selections/selectors";
-import {findFeatureInFeatureSourcesById} from "@mapsight/core/lib/feature-sources/selectors";
-import type {FeatureSourcesState} from "@mapsight/core/lib/feature-sources/types";
-import {mapSizeSelector as getMapSize} from "@mapsight/core/lib/map/selectors";
-import type {MapState} from "@mapsight/core/lib/map/types";
-import type {Feature, State} from "@mapsight/core/types";
-
-import {
-	FEATURE_SELECTIONS,
-	FEATURE_SOURCES,
-	MAP,
-} from "../../config/constants/controllers";
-import {FEATURE_SELECTION_HIGHLIGHT} from "../../config/feature/selections";
-import getFeatureProperty from "../../helpers/get-feature-property";
-import type {MapsightUiFeature} from "../../types";
-import TooltipContent from "./tooltip-content";
-
-const featureSelector = createSelector(
-	(state) => state[FEATURE_SOURCES] as FeatureSourcesState,
-	createFeatureSelectionSelector(
-		FEATURE_SELECTIONS,
-		FEATURE_SELECTION_HIGHLIGHT,
-	),
-	(
-		featureSources: FeatureSourcesState,
-		selection: FeatureSelectionState | undefined,
-	) => {
-		const features = getFilteredFeatures(selection);
-		const featureId = features && features[0];
-		if (featureId) {
-			return findFeatureInFeatureSourcesById(featureSources, featureId);
-		}
-
-		return null;
-	},
-);
-
-function mapSizeSelector(state: State) {
-	return getMapSize(state[MAP] as MapState);
-}
-
-export type Position = null | {
-	left: number;
-	right: number;
-	top: number;
-	bottom: number;
-};
-
-/**
- * @param feature feature
- * @param tooltipElementRef feature
- * @returns position and withTransition
- */
-function useGetPositionWithTransition(
-	feature: Feature | null,
-	tooltipElementRef: RefObject<HTMLElement | null>,
-): [Position, boolean] {
-	const [withTransition, setWithTransition] = useState(true);
-
-	const mapSize = useSelector(mapSizeSelector);
-
-	const [position, setPosition] = useState<null | Position>(null);
-
-	useEffect(() => {
-		setWithTransition(false);
-	}, [mapSize]);
-
-	useEffect(() => {
-		const mapElNull = tooltipElementRef.current
-			?.closest(".ms3-map-wrapper")
-			?.querySelector(".ms3-map-target");
-
-		if (!mapElNull || !feature) {
-			return undefined;
-		}
-
-		const mapEl = mapElNull;
-
-		function onMouseMove(e: MouseEvent) {
-			const x = e.clientX;
-			const y = e.clientY;
-			const {left, right, top, bottom} = mapEl.getBoundingClientRect();
-			setPosition({
-				left: x - left,
-				right: right - x,
-				top: y - top,
-				bottom: bottom - y,
-			});
-			setWithTransition(true);
-		}
-
-		function onMouseOut() {
-			setPosition(null);
-			setWithTransition(true);
-		}
-
-		mapEl.addEventListener("mousemove", onMouseMove);
-		mapEl.addEventListener("mouseout", onMouseOut);
-
-		return () => {
-			setPosition(null);
-			setWithTransition(true);
-
-			mapEl.removeEventListener("mousemove", onMouseMove);
-			mapEl.removeEventListener("mouseout", onMouseOut);
-		};
-	}, [feature, setPosition, tooltipElementRef]);
-
-	return [position, withTransition];
-}
-
-function Tooltip() {
-	const tooltipElementRef = useRef<HTMLDivElement>(null);
-	const feature = useSelector(featureSelector) as MapsightUiFeature | null;
-
-	// Keeping the last feature to allow fade out without losing the content
-	const [lastFeature, setLastFeature] = useState<MapsightUiFeature | null>(
-		null,
-	);
-
-	useEffect(() => {
-		if (!feature) {
-			setLastFeature(feature);
-		}
-	}, [feature, setLastFeature]);
-
-	const [position, withTransition] = useGetPositionWithTransition(
-		feature,
-		tooltipElementRef,
-	);
-
-	const localFeature = feature || lastFeature;
-	if (!localFeature) {
-		return;
-	}
-
-	const classes = `ms3-tooltip ms3-tooltip--${
-		feature ? "active" : "inactive"
-	}`;
-	const classesInner = `ms3-tooltip__inner ms3-tooltip__inner--${
-		feature ? "active" : "inactive"
-	}`;
-
-	const styles: CSSProperties = {};
-
-	if (position) {
-		styles.transform = `translate(${-position.right}px, ${position.top}px)`;
-	} else {
-		styles.display = "none";
-	}
-
-	if (!withTransition) {
-		styles.transition = "none";
-	}
-
-	const html = getFeatureProperty(localFeature, "tooltip", "") as string;
-	const text = html
-		? ""
-		: (getFeatureProperty(localFeature, "name", "") as string);
-
-	let content: null | ReactElement = null;
-	if (html) {
-		content = (
-			<div
-				className={classesInner}
-				dangerouslySetInnerHTML={{__html: html}}
-			/>
-		);
-	} else if (text) {
-		content = <div className={classesInner}>{text}</div>;
-	}
-
-	return (
-		<div className={classes} style={styles} ref={tooltipElementRef}>
-			<TooltipContent feature={localFeature} html={html} text={text}>
-				{content}
-			</TooltipContent>
-		</div>
-	);
-}
-
-export default memo(Tooltip);