@mapsight/ui 7.1.0 → 7.2.0

package/src/js/components/feature-selection-info/close-button.jsx

@@ -1,64 +0,0 @@
-import {removeFrom} from "@mapsight/core/lib/base/actions";
-import {useCallback} from "react";
-import {useDispatch} from "react-redux";
-import {FEATURE_SELECTIONS} from "../../config/constants/controllers";
-import {FEATURE_SELECTION_SELECT} from "../../config/feature/selections";
-
-import {translate} from "../../helpers/i18n";
-import {
-	APP_EVENT_FOCUS_FEATURE_LIST,
-	useAppChannelDispatchEvent,
-} from "../helping/app-channel";
-
-function CloseButton({
-	feature,
-	enableKeyboardControl,
-	className = "",
-	...attrs
-}) {
-	const dispatch = useDispatch();
-	const removeSelection = useCallback(() => {
-		console.log("click close fSI");
-		dispatch(
-			removeFrom(
-				[FEATURE_SELECTIONS, FEATURE_SELECTION_SELECT, "features"],
-				feature?.id,
-			),
-		);
-	}, [dispatch, feature?.id]);
-
-	const appChannelDispatch = useAppChannelDispatchEvent();
-	const handleCloseByKeyboard = useCallback(
-		/** @param {KeyboardEvent} ev ev */ (ev) => {
-			if (enableKeyboardControl) {
-				console.log("keyboard close fSI");
-				if (
-					ev.key === "Enter" ||
-					ev.key === "Spacebar" ||
-					ev.key === " "
-				) {
-					appChannelDispatch(new Event(APP_EVENT_FOCUS_FEATURE_LIST));
-				}
-			}
-		},
-		[enableKeyboardControl, appChannelDispatch],
-	);
-
-	return (
-		<button
-			type="button"
-			className={`ms3-button ms3-feature-selection-info__close-button ${className}`}
-			onClick={removeSelection}
-			onKeyDown={handleCloseByKeyboard}
-			// TODO: ARIA
-			//aria-controls={}
-			{...attrs}
-		>
-			<span className="ms3-visuallyhidden">
-				{translate("ui.feature-selection-info.close")}
-			</span>
-		</button>
-	);
-}
-
-export default CloseButton;

package/src/js/components/feature-selection-info/container.jsx

@@ -1,9 +0,0 @@
-function Container({children, className = "", ...attrs}) {
-	return (
-		<div className={`ms3-feature-selection-info ${className}`} {...attrs}>
-			{children}
-		</div>
-	);
-}
-
-export default Container;

package/src/js/components/feature-selection-info/header.tsx

@@ -1,27 +0,0 @@
-import {memo} from "react";
-
-import {makeReplaceableComponent} from "../../helpers/components";
-import getFeatureProperty from "../../helpers/get-feature-property";
-import type {MapsightUiFeature} from "../../types";
-
-export type Props = {
-	feature: MapsightUiFeature;
-};
-
-const Header = memo(function FeatureSelectionInfoHeader({feature}: Props) {
-	const name = getFeatureProperty(feature, "name") as string;
-	return (
-		<header className="ms3-feature-selection-info__header">
-			<h3 className="ms3-feature-selection-info__headline">{name}</h3>
-		</header>
-	);
-});
-
-export default makeReplaceableComponent("FeatureSelectionInfoHeader", Header);
-export {Header as NonReplaceableHeader};
-
-declare module "../../helpers/components" {
-	interface ComponentProps {
-		FeatureSelectionInfoHeader: Props;
-	}
-}

package/src/js/components/feature-selection-info/index.tsx

@@ -1,81 +0,0 @@
-import {useCallback} from "react";
-import {useDispatch, useSelector} from "react-redux";
-
-import {FocusTrap} from "focus-trap-react";
-
-import {removeFrom} from "@mapsight/core/lib/base/actions";
-
-import {FEATURE_SELECTIONS} from "../../config/constants/controllers";
-import {FEATURE_SELECTION_SELECT} from "../../config/feature/selections";
-import {featureSelectionInfoUiOptionsSelector} from "../../store/selectors";
-import type {MapsightUiFeature} from "../../types";
-import FeatureDetailsContent from "../feature-details-content";
-import CloseButton from "./close-button";
-import Header from "./header";
-import WithStickyHeader from "./with-sticky-header";
-import WithoutStickyHeader from "./without-sticky-header";
-import Wrapper from "./wrapper";
-
-export default function FeatureSelectionInfo({
-	feature,
-	enableKeyboardControl,
-}: {
-	feature: MapsightUiFeature | null;
-	enableKeyboardControl: boolean;
-}) {
-	const dispatch = useDispatch();
-	const hasStickyHeader = useSelector(
-		featureSelectionInfoUiOptionsSelector,
-	).stickyHeader;
-	const renderWrapper = useCallback(
-		(attrs) => (
-			<Wrapper
-				feature={feature}
-				enableKeyboardControl={enableKeyboardControl}
-				{...attrs}
-			/>
-		),
-		[enableKeyboardControl, feature],
-	);
-
-	const removeSelection = useCallback(() => {
-		dispatch(
-			removeFrom(
-				[FEATURE_SELECTIONS, FEATURE_SELECTION_SELECT, "features"],
-				feature?.id,
-			),
-		);
-	}, [dispatch, feature?.id]);
-
-	if (!feature) {
-		return null;
-	}
-
-	const T = hasStickyHeader ? WithStickyHeader : WithoutStickyHeader;
-	return (
-		<FocusTrap
-			active={enableKeyboardControl}
-			focusTrapOptions={{
-				clickOutsideDeactivates: true,
-				onDeactivate: removeSelection,
-			}}
-		>
-			<T
-				feature={feature}
-				close={
-					<CloseButton
-						feature={feature}
-						enableKeyboardControl={enableKeyboardControl}
-					/>
-				}
-				header={<Header feature={feature} />}
-				content={
-					<div className="ms3-feature-selection-info__content">
-						<FeatureDetailsContent feature={feature} />
-					</div>
-				}
-				renderWrapper={renderWrapper}
-			/>
-		</FocusTrap>
-	);
-}

package/src/js/components/feature-selection-info/with-sticky-header.tsx

@@ -1,76 +0,0 @@
-import type {ReactNode} from "react";
-import {useSelector} from "react-redux";
-
-import useStickyHeader from "../../hooks/useStickyHeader";
-import {featureSelectionInfoUiOptionsSelector} from "../../store/selectors";
-import type {MapsightUiFeature} from "../../types";
-import Container from "./container";
-
-const stopEventPropagation = (e) => e.stopPropagation();
-
-type WithStickyHeaderProps = {
-	header: ReactNode;
-	feature: MapsightUiFeature;
-	content: ReactNode;
-	close: ReactNode;
-	renderWrapper: (props: any) => ReactNode;
-};
-
-function WithStickyHeader({
-	header,
-	content,
-	feature,
-	close,
-	renderWrapper,
-}: WithStickyHeaderProps) {
-	const {stuckHeaderHeight} = useSelector(
-		featureSelectionInfoUiOptionsSelector,
-	);
-	const {isHeaderStuck, stickyHeaderRef, stickyScrollAreaRef, onScroll} =
-		useStickyHeader<HTMLDivElement>({
-			stuckHeaderHeight,
-			resetDeps: [feature.id],
-		});
-
-	const stuckClass = (prefix) =>
-		prefix + " " + (isHeaderStuck ? prefix + "--stuck" : "");
-	const stuckHeaderClasses = `ms3-sticky-header__header ${
-		isHeaderStuck
-			? "ms3-sticky-header__header--stuck"
-			: "ms3-sticky-header__header--stuck-placeholder"
-	}`;
-	const stickyHeaderClasses = `ms3-sticky-header__header ${
-		isHeaderStuck
-			? "ms3-sticky-header__header--sticky-placeholder"
-			: "ms3-sticky-header__header--sticky"
-	}`;
-
-	return (
-		<Container className={stuckClass("ms3-sticky-header__container")}>
-			<div aria-hidden="true" className={stuckHeaderClasses}>
-				{header}
-			</div>
-
-			{renderWrapper({
-				ref: stickyScrollAreaRef,
-				className: stuckClass("ms3-sticky-header__scroll-area"),
-				onTouchMove: stopEventPropagation,
-				onScroll: onScroll,
-				children: (
-					<>
-						{close}
-						<div
-							className={stickyHeaderClasses}
-							ref={stickyHeaderRef}
-						>
-							{header}
-						</div>
-						{content}
-					</>
-				),
-			})}
-		</Container>
-	);
-}
-
-export default WithStickyHeader;

package/src/js/components/feature-selection-info/without-sticky-header.jsx

@@ -1,19 +0,0 @@
-import Container from "./container";
-
-function WithoutStickyHeader({renderWrapper, header, content, close}) {
-	return (
-		<Container>
-			{renderWrapper({
-				children: (
-					<>
-						{close}
-						{header}
-						{content}
-					</>
-				),
-			})}
-		</Container>
-	);
-}
-
-export default WithoutStickyHeader;

package/src/js/components/feature-selection-info/wrapper.jsx

@@ -1,43 +0,0 @@
-import {forwardRef, useEffect, useRef} from "react";
-
-import usePrevious from "../../hooks/usePrevious";
-
-function useAutofocus(enabled, ref, feature) {
-	const previousFeature = usePrevious(feature);
-	const previousRef = usePrevious(ref.current);
-
-	useEffect(() => {
-		if (!enabled || !feature || !ref.current) {
-			return;
-		}
-
-		// Autofocus on mount or if feature is selected
-		if (
-			feature &&
-			(ref.current !== previousRef || feature !== previousFeature)
-		) {
-			//ref.current.scrollIntoView({block: 'start', behavior: 'smooth'});
-			ref.current.focus({preventScroll: true});
-		}
-	}, [enabled, feature, previousFeature, previousRef, ref]);
-}
-
-const Wrapper = forwardRef(function Wrapper(
-	{enableKeyboardControl, feature, className = "", ...attrs},
-	forwardedRef,
-) {
-	const ownRef = useRef();
-	const ref = forwardedRef || ownRef;
-	useAutofocus(enableKeyboardControl, ref, feature);
-
-	return (
-		<div
-			ref={ref}
-			className={`ms3-feature-selection-info__wrapper ms3-scroll-target ${className}`}
-			tabIndex={enableKeyboardControl ? -1 : undefined}
-			{...attrs}
-		/>
-	);
-});
-
-export default Wrapper;

package/src/js/components/helping/app-channel.tsx

@@ -1,99 +0,0 @@
-import {
-	type ReactNode,
-	createContext,
-	useCallback,
-	useContext,
-	useEffect,
-	useMemo,
-} from "react";
-
-import type {AppChannelListenerDefinition} from "../../types";
-
-/**
- * App-wide event channel
- */
-const AppChannelContext = createContext<EventTarget | null>(null);
-AppChannelContext.displayName = "AppChannelContext";
-
-export const APP_EVENT_PARTIAL_CONTENT_CHANGED = "partialContentChanged";
-export const APP_EVENT_FOCUS_MAP = "focusMap";
-export const APP_EVENT_FOCUS_FEATURE_LIST = "focusFeatureList";
-export const APP_EVENT_SCROLL_TO_MAP = "scrollToMap";
-export const APP_EVENT_SCROLL_TO_FEATURE_LIST = "scrollToFeatureList";
-
-/**
- * @returns {EventTarget} app channel
- */
-function createAppChannel() {
-	return new EventTarget();
-}
-
-export function AppChannelProvider({
-	children,
-	listeners = [],
-}: {
-	children?: ReactNode;
-	listeners?: AppChannelListenerDefinition[];
-}) {
-	const appChannel = useMemo(() => createAppChannel(), []);
-
-	useEffect(() => {
-		listeners.forEach(([eventName, eventListener]) => {
-			appChannel.addEventListener(eventName, eventListener);
-		});
-
-		return () => {
-			listeners.forEach(([eventName, eventListener]) => {
-				appChannel.removeEventListener(eventName, eventListener);
-			});
-		};
-	}, [appChannel, listeners]);
-
-	return (
-		<AppChannelContext.Provider value={appChannel}>
-			{children}
-		</AppChannelContext.Provider>
-	);
-}
-
-/**
- * App-wide event channel
- *
- * @returns {EventTarget} app channel
- */
-function useAppChannel() {
-	return useContext(AppChannelContext);
-}
-
-/**
- * @returns {(Event) => void} dispatch function for the app channel
- */
-export function useAppChannelDispatchEvent() {
-	const appChannel = useAppChannel();
-
-	return useCallback(
-		(event) => {
-			console.info("@mapsight/ui: app channel event", event.type, event);
-			appChannel?.dispatchEvent(event);
-		},
-		[appChannel],
-	);
-}
-
-/**
- * Adds and removes event listener to the app channel
- *
- * @param {string} event event name
- * @param {EventListener} eventListener event listener
- */
-export function useAppChannelEventListener(event, eventListener) {
-	const appChannel = useAppChannel();
-
-	useEffect(() => {
-		appChannel?.addEventListener(event, eventListener);
-
-		return () => {
-			appChannel?.removeEventListener(event, eventListener);
-		};
-	}, [appChannel, event, eventListener]);
-}

package/src/js/components/helping/app-context.tsx

@@ -1,32 +0,0 @@
-import {Provider as ReduxProvider} from "react-redux";
-
-import type {Store} from "@reduxjs/toolkit";
-
-import type {MapsightUiComponents} from "../../helpers/components";
-import {ComponentsContext} from "../../helpers/components";
-import type {AppChannelListenerDefinition} from "../../types";
-import {AppChannelProvider} from "./app-channel";
-
-function AppContext({
-	store,
-	components = {},
-	appChannelListeners = [],
-	children,
-}: {
-	store: Store;
-	components?: MapsightUiComponents;
-	appChannelListeners?: AppChannelListenerDefinition[];
-	children?: React.ReactNode;
-}) {
-	return (
-		<ReduxProvider store={store}>
-			<AppChannelProvider listeners={appChannelListeners}>
-				<ComponentsContext.Provider value={components}>
-					{children}
-				</ComponentsContext.Provider>
-			</AppChannelProvider>
-		</ReduxProvider>
-	);
-}
-
-export default AppContext;

package/src/js/components/helping/visibility-wrapper.jsx

@@ -1,23 +0,0 @@
-import  {Fragment, memo} from "react";
-import {useSelector} from "react-redux";
-
-/**
- * VisibilityWrapper
- *
- * @param {{
- *   visibleSelector: (state: any) => boolean,
- *   children: React.ReactNode
- * }} props props
- * @returns {React.ReactElement | null} element
- */
-function VisibilityWrapper({children, visibleSelector}) {
-	const visible = useSelector(visibleSelector);
-	if (visible) {
-		// we're using `Fragment` here to convert `ReactNode` to a `ReactElement`
-		return <Fragment>{children}</Fragment>;
-	}
-
-	return null;
-}
-
-export default memo(VisibilityWrapper);

package/src/js/components/instance.tsx

@@ -1,48 +0,0 @@
-"use client";
-
-import type {PropsWithChildren} from "react";
-import {useMemo} from "react";
-
-import type {EnhancedStore, State} from "@mapsight/core/types";
-
-import type {MapsightStyleFunction} from "@mapsight/lib-ol/style/styleFunction";
-
-import {create} from "../index";
-import type {CreateOptions} from "../types";
-import AppContext from "./helping/app-context";
-
-function MapsightUi({
-	children,
-	styleFunction,
-	baseMapsightConfig,
-	createOptions,
-}: PropsWithChildren<{
-	styleFunction: MapsightStyleFunction;
-	baseMapsightConfig: Partial<State>;
-	createOptions: CreateOptions;
-}>) {
-	const context = useMemo(
-		() =>
-			create(
-				null, // FIXME allow passing null?!
-				styleFunction,
-				baseMapsightConfig,
-				createOptions,
-			),
-		[baseMapsightConfig, createOptions, styleFunction],
-	);
-	const {components = {}, appChannelListeners = []} = createOptions;
-	const {store} = context;
-
-	return (
-		<AppContext
-			components={components}
-			store={store as EnhancedStore}
-			appChannelListeners={appChannelListeners}
-		>
-			{children}
-		</AppContext>
-	);
-}
-
-export default MapsightUi;

package/src/js/components/layer-switcher/GroupedLayerSwitcher.js

@@ -1,47 +0,0 @@
-import {connect, shallowEqual} from "react-redux";
-
-import {createSelector} from "@reduxjs/toolkit";
-
-import {MAP} from "../../config/constants/controllers";
-import GroupedSwitcher from "../switcher/GroupedSwitcher";
-
-function getGroupedIdsForIds(ids, layersState) {
-	const groupedLayerIds = {};
-	const withoutGroupLayerIds = [];
-	ids.forEach((layerId) => {
-		const group = layersState[layerId].metaData.group;
-
-		if (!group) {
-			withoutGroupLayerIds.push(layerId);
-			return;
-		}
-
-		groupedLayerIds[group] = groupedLayerIds[group] || [];
-		groupedLayerIds[group].push(layerId);
-	});
-
-	return {
-		ungroupedIds: withoutGroupLayerIds,
-		groupedIds: groupedLayerIds,
-	};
-}
-
-const GroupedLayerSwitcher = connect(
-	createSelector(
-		(state, {layerIdsSelector}) => layerIdsSelector(state[MAP]),
-		(state) => state[MAP].layers,
-		getGroupedIdsForIds,
-	),
-	null,
-	(
-		stateProps,
-		dispatchProps,
-		{layerIdsSelector: _layerIdsSelector, ...ownProps},
-	) => ({
-		...ownProps,
-		...stateProps,
-	}),
-	{areStatesEqual: shallowEqual},
-)(GroupedSwitcher);
-
-export default GroupedLayerSwitcher;

package/src/js/components/layer-switcher/LayerSwitcher.ts

@@ -1,34 +0,0 @@
-import {connect} from "react-redux";
-
-import type {MapState} from "@mapsight/core/lib/map/types";
-import type {State} from "@mapsight/core/types";
-
-import {MAP} from "../../config/constants/controllers";
-import Switcher from "../switcher/Switcher";
-
-const selector = (
-	state: State,
-	{layerIdsSelector}: {layerIdsSelector: (state: MapState) => string[]},
-) =>
-	({
-		ids: layerIdsSelector(state[MAP] as MapState),
-	}) as const;
-
-export default connect(
-	selector,
-	null,
-	(
-		stateProps,
-		_,
-		{
-			// Need to list the selectors here so they do not get passed as attribute props to the element but get filtered:
-			layerIdsSelector: _layerIdsSelector,
-
-			...attributes
-		},
-	) => ({
-		// We do not want to pass dispatch to the switcher, so we explicitly do not map it!
-		...stateProps,
-		...attributes,
-	}),
-)(Switcher);

package/src/js/components/layer-switcher/LayerSwitcherContainer.tsx

@@ -1,88 +0,0 @@
-import type {ElementType} from "react";
-import {memo, useCallback} from "react";
-
-import {
-	layerIdsIntegratedSwitcherSelector,
-	makeFeatureSourceFromLayerIdSelector,
-	makeFeatureSourceIdFromLayerIdSelector,
-	makeLayerLockedInLayerSwitcherSelector,
-	makeLayerTitleSelector,
-	makeLayerVisibleSelector,
-} from "@mapsight/core/lib/map/selectors";
-import type {MapState} from "@mapsight/core/lib/map/types";
-
-import {translate} from "../../helpers/i18n";
-import GroupedLayerSwitcher from "./GroupedLayerSwitcher";
-import LayerSwitcher from "./LayerSwitcher";
-import LayerSwitcherEntry from "./LayerSwitcherEntry";
-
-// TODO das berechnen der LayerListen (abhängig von grouped und layerIdSelector) in einen Selector packen,
-//  damit diese Berechnung nur bei Änderungen am store berechnet neu wird
-// TODO für das visible eine eigenes connect, damit der Tree nicht dauernd neu berechnet wird
-
-export type LayerSwitcherContainerProps = {
-	as?: ElementType;
-	baseClassName?: string;
-	onClose?: () => void;
-	layerIdsSelector?: (state: MapState) => string[];
-	grouped?: boolean;
-	setFeatureSourceIdPath?: unknown;
-};
-
-function LayerSwitcherContainer({
-	as: T = "div",
-	baseClassName = "ms3-layer-switcher-container", // TODO: Use generic class name
-	onClose,
-	layerIdsSelector = layerIdsIntegratedSwitcherSelector,
-	grouped = false,
-	setFeatureSourceIdPath: _,
-	...attributes
-}: LayerSwitcherContainerProps) {
-	const renderLayerEntry = useCallback(
-		(id) => (
-			// TODO: memo comp instance & selectors
-			<LayerSwitcherEntry
-				key={id}
-				layerId={id}
-				titleSelector={makeLayerTitleSelector(id)}
-				lockedSelector={makeLayerLockedInLayerSwitcherSelector(id)}
-				layerVisibilitySelector={makeLayerVisibleSelector(id)}
-				featureSourceSelector={makeFeatureSourceFromLayerIdSelector(id)}
-				featureSourceIdSelector={makeFeatureSourceIdFromLayerIdSelector(
-					id,
-				)}
-			/>
-		),
-		[],
-	);
-
-	const Switcher = grouped ? GroupedLayerSwitcher : LayerSwitcher;
-
-	return (
-		<T
-			className={`${baseClassName} ${baseClassName}--${
-				grouped ? "grouped" : "ungrouped"
-			}`}
-		>
-			<Switcher
-				layerIdsSelector={layerIdsSelector}
-				renderEntry={renderLayerEntry}
-				{...attributes}
-			/>
-
-			{onClose && (
-				<button
-					className="ms3-layer-switcher__close-button [ ms3-dialog-close-button ]"
-					type="button"
-					onClick={onClose}
-				>
-					<span className="ms3-visuallyhidden">
-						{translate("ui.map-overlay.layer-switcher.closeLayers")}
-					</span>
-				</button>
-			)}
-		</T>
-	);
-}
-
-export default memo(LayerSwitcherContainer);