@mapsight/ui 7.0.3 → 7.2.0

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 "reselect";
-
-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);

package/src/js/components/map-wrapper.tsx

@@ -1,65 +0,0 @@
-import type {PropsWithChildren, RefCallback} from "react";
-import {memo, useCallback, useRef} from "react";
-import {useInView} from "react-intersection-observer";
-import {useDispatch, useSelector, useStore} from "react-redux";
-
-import useUpdateMapSizeOnRender from "../hooks/useUpdateMapSizeOnRender";
-import useUpdateMapSizeOnTransitionEnd from "../hooks/useUpdateMapSizeOnTransitionEnd";
-import useUpdateMapSizeOnViewChange from "../hooks/useUpdateMapSizeOnViewChange";
-import {setMapIsOutOfViewport} from "../store/actions";
-import {viewSelector} from "../store/selectors";
-import {
-	APP_EVENT_SCROLL_TO_MAP,
-	useAppChannelEventListener,
-} from "./helping/app-channel";
-
-function MapWrapper(props: PropsWithChildren) {
-	const {children} = props;
-
-	const dispatch = useDispatch();
-	const mapWrapperRef = useRef<HTMLDivElement | undefined>(undefined);
-
-	useUpdateMapSizeOnViewChange(
-		useSelector(viewSelector) ?? "desktop",
-		useStore(),
-	);
-	useUpdateMapSizeOnTransitionEnd(mapWrapperRef.current, dispatch);
-	useUpdateMapSizeOnRender(dispatch);
-
-	useAppChannelEventListener(
-		APP_EVENT_SCROLL_TO_MAP,
-		useCallback(() => {
-			mapWrapperRef.current?.scrollIntoView({
-				block: "start",
-				behavior: "smooth",
-			});
-		}, [mapWrapperRef]),
-	);
-
-	const {ref: inViewRef} = useInView({
-		threshold: 0,
-		initialInView: true,
-		fallbackInView: true,
-		onChange: (inView) => dispatch(setMapIsOutOfViewport(!inView)),
-	});
-
-	const setRef: RefCallback<HTMLDivElement> = useCallback(
-		(node) => {
-			mapWrapperRef.current = node ?? undefined;
-			inViewRef(node);
-		},
-		[inViewRef],
-	);
-
-	return (
-		<div
-			ref={setRef}
-			// ms3-map-wrapper--anchored-${anchor}
-			className={`ms3-map-wrapper [ ms3-flex ms3-flex--column ] [ ms3-scroll-target ]`}
-		>
-			{children}
-		</div>
-	);
-}
-
-export default memo(MapWrapper);

package/src/js/components/map.jsx

@@ -1,37 +0,0 @@
-import {memo, useEffect, useRef} from "react";
-import {useStore} from "react-redux";
-import {MAP} from "../config/constants/controllers";
-
-import {translate} from "../helpers/i18n";
-import useMountable from "../hooks/useMountable";
-
-function MapsightMap({
-	controllerName = MAP,
-	enableKeyboardControl = true,
-	...attributes
-}) {
-	const store = useStore();
-	const ref = useRef();
-
-	const handleMount = useMountable(store.getController(controllerName));
-	useEffect(() => {
-		handleMount(ref.current);
-	}, [ref, handleMount]);
-
-	if (enableKeyboardControl) {
-		attributes.tabIndex = 0;
-	}
-
-	return (
-		<div className="ms3-map-target" ref={ref} {...attributes}>
-			<span className="ms3-visuallyhidden">
-				{translate("ui.map.visuallyhidden")}
-			</span>
-			<div className="ol-viewport">
-				<canvas className="ol-unselectable" />
-			</div>
-		</div>
-	);
-}
-
-export default memo(MapsightMap);

package/src/js/components/modal.tsx

@@ -1,40 +0,0 @@
-import type {KeyboardEvent, MouseEvent, ReactNode} from "react";
-import type {Props as ReactModalProps} from "react-modal";
-import ReactModal from "react-modal";
-
-import CloseOverlayButton from "./close-overlay-button";
-
-export type Props = ReactModalProps & {
-	closeLabel?: string;
-	headline: ReactNode;
-};
-
-const Modal = ({children, closeLabel, headline, ...props}: Props) => {
-	const handleClose = (event: MouseEvent | KeyboardEvent) =>
-		props.onRequestClose?.(event);
-
-	return (
-		<ReactModal
-			onRequestClose={handleClose}
-			className="ms3-modal"
-			overlayClassName="ms3-app-overlay"
-			shouldCloseOnOverlayClick={true}
-			{...props}
-		>
-			<div className="ms3-modal__inner ms3-modal__inner--search">
-				<div className="ms3-modal__header">
-					<h3 className="ms3-modal__headline">{headline}</h3>
-					<div className="ms3-modal__close">
-						<CloseOverlayButton
-							label={closeLabel}
-							onClose={(event) => handleClose(event)}
-						/>
-					</div>
-				</div>
-				{children}
-			</div>
-		</ReactModal>
-	);
-};
-
-export default Modal;

package/src/js/components/query-input-with-label.tsx

@@ -1,71 +0,0 @@
-import type {ChangeEvent, ReactNode} from "react";
-import {useCallback, useRef} from "react";
-import {useId} from "react-aria";
-
-import {translate} from "../helpers/i18n";
-
-export type Props = {
-	label: ReactNode;
-	placeholder?: string;
-	query: string;
-	onChange: (query: string) => void;
-};
-
-/**
- * Same as `QueryInput` but with the label prepended and visible. Not possible to change
- * `QueryInput` into something like this due to leaky abstractions
- * (leaking internas like classnames)
- **/
-function QueryInputWithLabel({label, placeholder, query, onChange}: Props) {
-	const inputRef = useRef<HTMLInputElement>(null);
-
-	const handleInput = useCallback(
-		(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value),
-		[onChange],
-	);
-
-	const handleReset = useCallback(() => {
-		onChange("");
-		inputRef.current?.focus();
-	}, [onChange, inputRef]);
-
-	const inputId = useId();
-
-	return (
-		<fieldset className="ms3-query-input-with-label">
-			<label
-				className="ms3-query-input-with-label__label"
-				htmlFor={inputId}
-			>
-				{label}
-			</label>
-
-			<div className="ms3-query-input-with-label__input-container">
-				<input
-					id={inputId}
-					ref={inputRef}
-					className="ms3-query-input-with-label__input"
-					placeholder={placeholder}
-					type="search"
-					value={query}
-					onChange={handleInput}
-					autoComplete="off"
-				/>
-
-				{query !== "" && (
-					<button
-						className="ms3-query-input-with-label__reset-button"
-						type="button"
-						onClick={handleReset}
-					>
-						<span className="ms3-visuallyhidden">
-							{translate("ui.query-input.reset")}
-						</span>
-					</button>
-				)}
-			</div>
-		</fieldset>
-	);
-}
-
-export default QueryInputWithLabel;

package/src/js/components/query-input.tsx

@@ -1,81 +0,0 @@
-import type {ChangeEvent, ReactNode} from "react";
-import {forwardRef, useCallback, useRef} from "react";
-
-import {translate} from "../helpers/i18n";
-import {forwardRefValue} from "../helpers/react";
-
-/* NOTE: for attribute not required because of nesting */
-
-export type Props = {
-	label: ReactNode;
-	placeholder?: string;
-	className?: string;
-	groupClassName?: string;
-	resetButtonClassName?: string;
-	name?: string;
-	query: string;
-	onChange: (query: string) => void;
-	autoFocus?: boolean;
-};
-
-const QueryInput = forwardRef<HTMLInputElement, Props>(function QueryInput(
-	{
-		label,
-		placeholder,
-		className,
-		groupClassName,
-		resetButtonClassName,
-		name,
-		query,
-		onChange,
-		autoFocus,
-	},
-	forwardedRef,
-) {
-	const inputRef = useRef<HTMLInputElement>(null);
-	forwardRefValue(inputRef, forwardedRef);
-
-	const handleInput = useCallback(
-		(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value),
-		[onChange],
-	);
-
-	const handleReset = useCallback(() => {
-		onChange("");
-		inputRef.current?.focus();
-	}, [onChange, inputRef]);
-
-	return (
-		<fieldset className={groupClassName}>
-			<label>
-				<span className="ms3-visuallyhidden">{label}</span>
-
-				<input
-					ref={inputRef}
-					className={className}
-					placeholder={placeholder}
-					type="search"
-					name={name}
-					value={query}
-					onChange={handleInput}
-					autoComplete="off"
-					autoFocus={autoFocus}
-				/>
-			</label>
-
-			{query !== "" && (
-				<button
-					className={resetButtonClassName}
-					type="button"
-					onClick={handleReset}
-				>
-					<span className="ms3-visuallyhidden">
-						{translate("ui.query-input.reset")}
-					</span>
-				</button>
-			)}
-		</fieldset>
-	);
-});
-
-export default QueryInput;

package/src/js/components/search/index.jsx

@@ -1,83 +0,0 @@
-import {memo, useCallback, useEffect, useRef} from "react";
-import {useDispatch, useSelector} from "react-redux";
-
-import {translate} from "../../helpers/i18n";
-import useDebounce from "../../hooks/useDebounce";
-import {search} from "../../store/actions.ts";
-import {searchQuerySelector} from "../../store/selectors.ts";
-
-import SearchQueryInput from "./query-input";
-import SearchResult from "./result";
-import useHandleEscapeKeyDown from "../../hooks/useHandleEscapeKeyDown";
-
-const preventDefault = (e) => e.preventDefault();
-
-function Search({closeSearch, autoFocus}) {
-	const dispatch = useDispatch();
-	const query = useSelector(searchQuerySelector);
-
-	const debouncedQuery = useDebounce(query, 200);
-	useEffect(() => {
-		if (debouncedQuery !== "") {
-			dispatch(search(debouncedQuery));
-		}
-	}, [dispatch, debouncedQuery]);
-
-	// needed to "override" debounce if the value is ""
-	useEffect(() => {
-		if (query === "") {
-			dispatch(search(query));
-		}
-	}, [dispatch, query]);
-
-	const handleInput = useCallback(
-		(searchQuery) => {
-			dispatch({type: "SEARCH", query: searchQuery}); // action without ajax side effect
-		},
-		[dispatch],
-	);
-
-	const inputRef = useRef();
-
-	useHandleEscapeKeyDown(
-		inputRef,
-		useCallback(() => dispatch(search(""), [dispatch])),
-	);
-
-	const handleReturnFocus = useCallback(() => inputRef.current?.focus(), []);
-
-	return (
-		<form className="ms3-search" onSubmit={preventDefault}>
-			<div className="ms3-search__query-input">
-				<SearchQueryInput
-					ref={inputRef}
-					query={query}
-					onChange={handleInput}
-					name="search"
-					autoFocus={autoFocus}
-				/>
-
-				<button className="ms3-search__send-button" type="submit">
-					<span className="ms3-visuallyhidden">
-						{translate("ui.search.send")}
-					</span>
-				</button>
-			</div>
-
-			{query && (
-				<output
-					className="ms3-search__output"
-					name="search-output"
-					htmlFor="search"
-				>
-					<SearchResult
-						onReturnFocus={handleReturnFocus}
-						closeSearch={closeSearch}
-					/>
-				</output>
-			)}
-		</form>
-	);
-}
-
-export default memo(Search);

package/src/js/components/search/query-input.jsx

@@ -1,20 +0,0 @@
-import {forwardRef} from "react";
-
-import {translate} from "../../helpers/i18n";
-import QueryInput from "../query-input";
-
-function SearchQueryInput(props, ref) {
-	return (
-		<QueryInput
-			ref={ref}
-			className="ms3-search__input"
-			groupClassName="ms3-search__input-group"
-			resetButtonClassName="ms3-search__reset-button"
-			label={translate("ui.search.query-input.label")}
-			placeholder={translate("ui.search.query-input.placeholder")}
-			{...props}
-		/>
-	);
-}
-
-export default forwardRef(SearchQueryInput);

package/src/js/components/search/result-entry.jsx

@@ -1,63 +0,0 @@
-import {selectExclusively} from "@mapsight/core/lib/feature-selections/actions";
-import {memo, useCallback} from "react";
-import {useDispatch} from "react-redux";
-import {FEATURE_SELECTIONS} from "../../config/constants/controllers";
-import {FEATURE_SELECTION_SELECT} from "../../config/feature/selections";
-
-import getFeatureProperty from "../../helpers/get-feature-property";
-import {search, selectSearchResult} from "../../store/actions.ts";
-
-function SearchResultEntry({closeSearch, onReturnFocus, feature}) {
-	const dispatch = useDispatch();
-
-	const name = getFeatureProperty(feature, "name");
-	const listInformation = getFeatureProperty(feature, "listInformation");
-	const isIncompleteSuggest =
-		getFeatureProperty(feature, "isIncompleteSuggest") === true;
-
-	const handleClick = useCallback(() => {
-		if (isIncompleteSuggest) {
-			dispatch(search(name.trim() + " "));
-			onReturnFocus();
-		} else {
-			dispatch(selectSearchResult(feature));
-			dispatch(
-				selectExclusively(
-					FEATURE_SELECTIONS,
-					FEATURE_SELECTION_SELECT,
-					feature.id,
-				),
-			);
-
-			if (closeSearch) {
-				closeSearch();
-			}
-		}
-	}, [
-		dispatch,
-		feature,
-		isIncompleteSuggest,
-		name,
-		onReturnFocus,
-		closeSearch,
-	]);
-
-	return (
-		<li className="ms3-search-result__list-item">
-			<button
-				className="ms3-search-result__entry"
-				type="button"
-				onClick={handleClick}
-			>
-				<div className="ms3-search-result__entry__title">{name}</div>
-				{listInformation && (
-					<div className="ms3-search-result__entry__subline">
-						{listInformation}
-					</div>
-				)}
-			</button>
-		</li>
-	);
-}
-
-export default memo(SearchResultEntry);