@mapsight/ui 7.1.0 → 7.2.0

package/src/js/hooks/useMountable.ts

@@ -1,47 +0,0 @@
-import {useEffect, useState} from "react";
-
-export type Mountable = {
-	/** mount function, receives element as parameter */
-	mount(element: Element): void;
-
-	/** unmount function, receives element as parameter */
-	unmount(element: Element): void;
-};
-
-export function isMountable(obj: object): obj is Mountable {
-	return (
-		"mount" in obj &&
-		typeof obj.mount === "function" &&
-		"unmount" in obj &&
-		typeof obj.unmount === "function"
-	);
-}
-
-/**
- * Mounts the mountable object to the element
- *
- * @param mountable mountable object
- * @returns callback to set target
- */
-export default function useMountable(mountable: undefined | Mountable) {
-	const [target, setTarget] = useState<undefined | Element>();
-
-	useEffect(() => {
-		if (!mountable) {
-			console.info("mount failed, no mountable");
-			return;
-		}
-
-		if (!target) {
-			console.info("mount failed, no target");
-			return;
-		}
-
-		mountable.mount(target);
-		return () => {
-			mountable.unmount(target);
-		};
-	}, [target, mountable]);
-
-	return setTarget;
-}

package/src/js/hooks/usePrevious.ts

@@ -1,15 +0,0 @@
-import {useEffect, useRef} from "react";
-
-export default function usePrevious<T>(value: T): T | null {
-	// The ref object is a generic container whose current property is mutable ...
-	// ... and can hold any value, similar to an instance property on a class
-	const ref = useRef<T | null>(null);
-
-	// Store current value in ref
-	useEffect(() => {
-		ref.current = value;
-	}, [value]); // Only re-run if value changes
-
-	// Return previous value (happens before update in useEffect above)
-	return ref.current;
-}

package/src/js/hooks/useStickyHeader.ts

@@ -1,50 +0,0 @@
-import type {DependencyList} from "react";
-import {useCallback, useEffect, useRef, useState} from "react";
-
-type Options = {
-	stuckHeaderHeight?: number;
-	resetDeps?: DependencyList;
-};
-
-export default function useStickyHeader<
-	TElement extends HTMLElement = HTMLElement,
->({stuckHeaderHeight = 30, resetDeps = []}: Options) {
-	const [isHeaderStuck, setIsHeaderStuck] = useState(false);
-	const [stickThreshold, setStickThreshold] = useState(0);
-
-	const stickyHeaderRef = useRef<TElement | null>(null);
-	const stickyScrollAreaRef = useRef<{scrollTop: number} | null>(null);
-
-	const onScroll = useCallback(
-		(e: React.UIEvent<HTMLDivElement, UIEvent>) => {
-			setIsHeaderStuck(stickThreshold < e.currentTarget.scrollTop);
-		},
-		[stickThreshold],
-	);
-
-	useEffect(
-		() => {
-			if (stickyScrollAreaRef.current) {
-				stickyScrollAreaRef.current.scrollTop = 0;
-			}
-
-			setIsHeaderStuck(false);
-		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[...resetDeps],
-	);
-
-	useEffect(() => {
-		if (stickyHeaderRef.current) {
-			const headerSize = stickyHeaderRef.current.offsetHeight;
-			setStickThreshold(headerSize - stuckHeaderHeight);
-		}
-	}, [stickyHeaderRef.current?.offsetHeight, stuckHeaderHeight]);
-
-	return {
-		isHeaderStuck,
-		stickyHeaderRef,
-		stickyScrollAreaRef,
-		onScroll,
-	};
-}

package/src/js/hooks/useUpdateMapSizeCallback.ts

@@ -1,32 +0,0 @@
-import type {RefObject} from "react";
-import {useCallback} from "react";
-
-import type {Dispatch} from "@reduxjs/toolkit";
-
-import {async} from "@mapsight/core/lib/base/actions";
-import {updateMapSize} from "@mapsight/core/lib/map/actions";
-
-import {MAP} from "../config/constants/controllers";
-import type {MainPanelPosition} from "../types";
-
-export default function useUpdateMapSizeCallback(
-	// TODO: use hook
-	dispatch: Dispatch,
-	// TODO: why is this a ref?
-	positionRef?: RefObject<MainPanelPosition | null>,
-	reCenter: boolean = true,
-) {
-	return useCallback(
-		function updateMapSizeCallback() {
-			dispatch(
-				async(
-					updateMapSize(MAP, {
-						from: positionRef?.current,
-						reCenter,
-					}),
-				),
-			);
-		},
-		[dispatch, positionRef, reCenter],
-	);
-}

package/src/js/hooks/useUpdateMapSizeOnRender.ts

@@ -1,16 +0,0 @@
-import {useEffect} from "react";
-
-import type {Dispatch} from "@reduxjs/toolkit";
-
-import useUpdateMapSizeCallback from "./useUpdateMapSizeCallback";
-
-export default function useUpdateMapSizeOnRender(
-	// TODO: use hook
-	dispatch: Dispatch<any>,
-) {
-	const updateMapSize = useUpdateMapSizeCallback(dispatch, undefined, false);
-	useEffect(() => {
-		console.log("UPDATE MAP SIZE ON RENDER");
-		return updateMapSize();
-	}, [updateMapSize]);
-}

package/src/js/hooks/useUpdateMapSizeOnTransitionEnd.ts

@@ -1,40 +0,0 @@
-import type {RefObject} from "react";
-import {useEffect} from "react";
-
-import type {Dispatch} from "@reduxjs/toolkit";
-
-import type {MainPanelPosition} from "../types";
-import useUpdateMapSizeCallback from "./useUpdateMapSizeCallback";
-
-export default function useUpdateMapSizeOnTransitionEnd(
-	target: undefined | Element,
-	// TODO: use hook
-	dispatch: Dispatch,
-	// TODO: why is this a ref?
-	positionRef?: RefObject<MainPanelPosition | null>,
-	reCenter: boolean = true,
-) {
-	const updateMapSize = useUpdateMapSizeCallback(
-		dispatch,
-		positionRef,
-		reCenter,
-	);
-
-	useEffect(() => {
-		if (target === undefined) {
-			return;
-		}
-
-		const handleTransitionEnd = (e: Event) => {
-			if (e.target === target) {
-				console.log("UPDATE MAP SIZE ON TRANSITION END");
-				updateMapSize();
-			}
-		};
-
-		target.addEventListener("transitionend", handleTransitionEnd);
-		return () => {
-			target.removeEventListener("transitionend", handleTransitionEnd);
-		};
-	}, [target, updateMapSize]);
-}

package/src/js/hooks/useUpdateMapSizeOnViewChange.ts

@@ -1,36 +0,0 @@
-import {useEffect} from "react";
-
-import type {Store} from "@reduxjs/toolkit";
-
-import {updateMapSize} from "@mapsight/core/lib/map/actions";
-
-import identity from "@mapsight/lib-js/util/identity";
-
-import {VIEW_MAP_ONLY, VIEW_MOBILE} from "../config/constants/app";
-import {MAP} from "../config/constants/controllers";
-import type {MapsightUiView} from "../types";
-import usePrevious from "./usePrevious";
-
-export default function useUpdateMapSizeOnViewChange(
-	// TODO: use hook
-	view: MapsightUiView,
-	// TODO: use hook
-	store: Store,
-) {
-	const prevView = usePrevious(view);
-
-	useEffect(() => {
-		const didViewChangeBetweenMobileAndMapOnly =
-			(prevView === VIEW_MOBILE && view === VIEW_MAP_ONLY) ||
-			(view === VIEW_MOBILE && prevView === VIEW_MAP_ONLY);
-		const options = didViewChangeBetweenMobileAndMapOnly
-			? identity<Parameters<typeof updateMapSize>[1]>({
-					from: "below",
-					to: "below",
-					reCenter: false,
-				})
-			: undefined;
-
-		store.dispatch(updateMapSize(MAP, options));
-	}, [prevView, view, store]);
-}

package/src/js/index.ts

@@ -1,320 +0,0 @@
-import {applyMiddleware, compose} from "@reduxjs/toolkit";
-import merge from "lodash/merge";
-import {thunk} from "redux-thunk";
-
-import {createMapsightStore} from "@mapsight/core";
-import {layerIdsExternalSwitcherSelector} from "@mapsight/core/lib/map/selectors";
-import {type State} from "@mapsight/core/types";
-
-import * as nonNull from "@mapsight/lib-js/nonNullable";
-import type {MapsightStyleFunction} from "@mapsight/lib-ol/style/styleFunction";
-
-import {siteConfig} from "./config";
-import {VIEW_MOBILE} from "./config/constants/app";
-import * as c from "./config/constants/controllers";
-import {createDefaultControllers} from "./controllers/defaults";
-import uiReducers from "./store/reducers";
-import type {
-	CreateOptions,
-	MapsightUiContext,
-	MapsightUiRenderer,
-	MapsightUiRendererProps,
-	MapsightUiStore,
-	PluginDefinition,
-	PluginPhase,
-} from "./types";
-
-/**
- * Default mapsight ui renderer (Does nothing but log a warning!).
- */
-const defaultRenderer: MapsightUiRenderer<void> = (
-	_container,
-	_props,
-	_hydrate = false,
-) => {
-	console.info("create has to be passed a renderer to render the app");
-};
-
-// FIXME: What's the point in having this if it's all undefined?
-const defaultCreateOptions: CreateOptions = {
-	baseUrl: undefined,
-	imagesUrl: undefined,
-	// search
-	searchUrl: undefined,
-	searchQueryParameter: undefined,
-	reHydratedState: undefined,
-	uiState: {
-		isFullscreen: false,
-		listQuery: "",
-		listSorting: undefined,
-		listPage: 0, // current page
-		searchQuery: "",
-		searchResult: {},
-		searchResultSelectionFeatures: [],
-		title: "",
-		userPreferenceListVisible: true,
-		mapIsOutOfViewport: false,
-
-		// views
-		view: VIEW_MOBILE, // mobile first
-		viewBreakpoints: [],
-
-		embeddedMap: false, // map is embedded which switch some behaviours which would be annoying
-		searchInMap: true, // enable address search in map overlay
-
-		pageTitle: {
-			show: true, // show page title
-		},
-		tagSwitcher: {
-			show: false, // turn on tag switcher which will filter
-			featureSourceId: undefined,
-			featureSourcesControllerName: c.FEATURE_SOURCES,
-			toggleableGroups: false, // make group names (headers) buttons that toggle on/off groups
-			sortTags: false, // sort tags with locale sort, but not the tagGroups. to sort tagGroups add all tagGroups to first feature entry (but with empty tags if the entry doesn't have tags for a tagGroup)
-		},
-		viewToggle: {
-			show: true,
-			deselectFeaturesOnToggle: true,
-		},
-		layerSwitcher: {
-			show: {
-				internal: true,
-				external: false,
-			},
-			internal: {
-				layerIdsSelector: undefined, // implied default: layer ids of layers viewed in internal Selector
-				grouped: false,
-			},
-			external: {
-				// FIXME: function in redux state?
-				layerIdsSelector: layerIdsExternalSwitcherSelector,
-				grouped: true,
-			},
-		},
-		list: {
-			selectionBehavior: {
-				desktop: "scrollToMap", // always 'scrollToMap' for now
-				mobile: "expandInList", // either 'expandInList', 'scrollToMap', 'showInMapOnlyView'
-			},
-			detailsInList: false, // if true details will always be shown in list even if not on mobile
-			showSelectedOnly: false, // don't show list entries, only show the selected one (need some other kind of communication, cyclingControl or icons on the map)
-			highlightOnMouse: true, // highlights list item on mouse enter (and un-highlights on leave)
-			selectOnClick: true, // select on click to selected list item
-			deselectOnClick: false, // deselect on click to selected list item
-			cyclingControl: false, // show a control to select next or previous list entry
-			sortControl: true, // show sort control icon
-			filterControl: true, // show filter box
-			paginationControl: false, // show pagination
-			itemsPerPage: 10, // number of items per page
-			stickyHeader: true, // make list header sticky?
-			showVaryingListInfoOnly: true, // show info column only, if the contents vary (determined before list filter)
-		},
-		featureSelectionInfo: {
-			stickyHeader: false, // make feature selection info header sticky?
-			stuckHeaderHeight: 30, // px
-		},
-		regions: {},
-		places: {},
-	},
-
-	plugins: [],
-	renderer: defaultRenderer,
-	components: {},
-	renderBreakpoints: {
-		// NOTE: Keep in sync with css!
-		mobile: [0, 767],
-		tablet: [768, 1014],
-		desktop: [1015, -1],
-	},
-	partialChangeHandler: undefined,
-
-	// add additional reducers
-	reducers: {...uiReducers},
-};
-
-/**
- * Creates an mapsight ui instance
- *
- * @param container element the mapsight ui app should be rendered into
- * @param styleFunction the mapsight core vector style function (see @mapsight/core)
- * @param [baseMapsightConfig] base mapsight configuration TODO: document further
- * @param [createOptions] ui creation options TODO: document further
- * @returns mapsight ui instance
- */
-export function create(
-	container: HTMLElement | null,
-	styleFunction: MapsightStyleFunction,
-	baseMapsightConfig: Partial<State> = {},
-	createOptions: CreateOptions = {},
-): MapsightUiContext {
-	const context: MapsightUiContext = {
-		hasRendered: false,
-		container: container,
-		styleFunction: styleFunction,
-		baseMapsightConfig: baseMapsightConfig,
-		createOptions: merge({}, defaultCreateOptions, createOptions),
-		appChannelListeners: [],
-	};
-
-	// transfer some create options to global site config to make them available even outside of the redux context
-	// TODO: Replace this mechanic with an explicit API, e.g. exposing the site config directly as `@mapsight/ui/site-config` or
-	//    make them local to the mapsight ui context to allow for several independent instances with different site configs
-	siteConfig.baseUrl = context.createOptions.baseUrl ?? siteConfig.baseUrl;
-	siteConfig.imagesUrl =
-		context.createOptions.imagesUrl || siteConfig.imagesUrl;
-	siteConfig.searchUrl =
-		context.createOptions.searchUrl || siteConfig.searchUrl;
-	siteConfig.searchQueryParameter =
-		context.createOptions.searchQueryParameter ||
-		siteConfig.searchQueryParameter;
-
-	// initial state
-	context.initialState = merge({}, context.baseMapsightConfig, {
-		app: context.createOptions.uiState,
-	});
-	delete context.createOptions.uiState;
-
-	// override initial state by re-hydration
-	context.isStateReHydrated = false;
-	if (context.createOptions.reHydratedState !== undefined) {
-		context.isStateReHydrated = true;
-		merge(context.initialState, context.createOptions.reHydratedState);
-	}
-
-	// setup controllers
-	context.controllers = Object.assign(
-		createDefaultControllers(context),
-		context.createOptions.controllers,
-	);
-
-	// store enhancer
-	const uiStoreEnhancer = applyMiddleware(thunk);
-	// @ts-expect-error TODO
-	context.storeEnhancer = context.createOptions.storeEnhancer
-		? compose(uiStoreEnhancer, context.createOptions.storeEnhancer)
-		: uiStoreEnhancer;
-
-	// plugin: afterInit
-	callAndForgetPlugins(context, "afterInit");
-
-	context.store = createMapsightStore<MapsightUiStore>(
-		context.controllers,
-		Object.fromEntries(
-			Object.entries(context.createOptions.reducers ?? {})
-				.map(([name, reducer]) =>
-					nonNull.map(reducer, (reducer) => [name, reducer] as const),
-				)
-				.filter(nonNull.is),
-		),
-		context.initialState,
-		context.storeEnhancer,
-	);
-
-	// render
-	function internalRender(): unknown {
-		const hydrate = !context.hasRendered && context.isStateReHydrated;
-		nonNull.assert(context.store);
-		nonNull.assert(context.createOptions.renderer);
-
-		const props: MapsightUiRendererProps = {
-			store: context.store,
-			components: context.createOptions.components || {},
-			appChannelListeners: context.appChannelListeners,
-			...context.rendererProps,
-		};
-		context.renderRef = context.createOptions.renderer(
-			context.container,
-			props,
-			hydrate,
-		);
-		context.hasRendered = true;
-
-		callAndForgetPlugins(context, "afterRender");
-
-		return context.renderRef;
-	}
-
-	// Render without waiting for plugins (for e.g. waiting on external data)
-	context.render = function mapsightUiRender(rendererProps) {
-		context.rendererProps = rendererProps;
-		context.canPluginsDelayRender = false;
-
-		callAndForgetPlugins(context, "beforeRender");
-
-		return internalRender();
-	};
-
-	// Render allowing plugins to delay render (for e.g. waiting on external data)
-	context.renderAsync = async function mapsightUiRenderAsync(rendererProps) {
-		context.rendererProps = rendererProps;
-		context.canPluginsDelayRender = true;
-
-		await callAndAwaitPlugins(context, "beforeRender");
-
-		return internalRender();
-	};
-
-	// plugin: afterCreate
-	callAndForgetPlugins(context, "afterCreate");
-
-	return context;
-}
-
-/**
- * Overrides plugins with the same name (last to come wins), null unsets the plugin,
- * Flattened order is in order of first occurrence of a name.
- *
- * @param plugins (sorted) array of plugin definitions to be flattened, null unsets
- * @returns flattened plugin definitions
- */
-function flattenPlugins(plugins: Array<PluginDefinition>) {
-	const pluginPositionByName: Record<string, number> = {};
-	const flattenedPlugins: Array<PluginDefinition> = [];
-
-	plugins.forEach(function filterPlugin(plugin) {
-		const [key] = plugin;
-		const position = pluginPositionByName[key];
-		if (position !== undefined) {
-			flattenedPlugins.splice(position, 1, plugin);
-		} else {
-			pluginPositionByName[key] = flattenedPlugins.length;
-			flattenedPlugins.push(plugin);
-		}
-	});
-
-	return flattenedPlugins.filter(([_, plugin]) => !!plugin);
-}
-
-/**
- * @param context context in which the plugin will be called
- * @param phase phase of the plugin
- * @returns array of plugin call return values
- */
-function callPlugins(
-	context: MapsightUiContext,
-	phase: PluginPhase,
-): Array<Promise<unknown>> {
-	return flattenPlugins(context.createOptions?.plugins ?? [])
-		.map(([_name, plugin]) => plugin?.[phase]?.(context) ?? undefined)
-		.filter(nonNull.is);
-}
-
-/**
-@param context context in which the plugin will be called
-@param phase phase of the plugin
- */
-function callAndForgetPlugins(context: MapsightUiContext, phase: PluginPhase) {
-	Promise.allSettled(callPlugins(context, phase)).catch(() => {});
-}
-
-/**
- * @param context context in which the plugin will be called
- * @param phase phase of the plugin
- * @returns promise that all plugins are resolved
- */
-async function callAndAwaitPlugins(
-	context: MapsightUiContext,
-	phase: PluginPhase,
-): Promise<void> {
-	await Promise.all(callPlugins(context, phase));
-}

package/src/js/plugins/browser/app-title.ts

@@ -1,36 +0,0 @@
-import {setAppTitle} from "../../store/actions";
-import type {PluginInstance} from "../../types";
-
-const defaultRendererPropName = "title";
-
-/**
- * This plugin will apply a title on render passed as a prop to the renderer.
- *
- * @param [options] options currently not used
- * @param [options.rendererPropName="title"] title property name passed to the renderer
- * @returns plugin instance
- */
-export default function createPlugin(
-	options: {
-		rendererPropName?: string;
-	} = {},
-): PluginInstance {
-	const {rendererPropName = defaultRendererPropName} = options;
-
-	return {
-		beforeRender: function appTitleRenderPlugin(context) {
-			const {store, rendererProps} = context;
-
-			if (!store || !rendererProps) {
-				return;
-			}
-
-			if (
-				rendererPropName in rendererProps &&
-				rendererProps[rendererPropName]
-			) {
-				store.dispatch(setAppTitle(rendererProps[rendererPropName]));
-			}
-		},
-	};
-}

package/src/js/plugins/browser/debug.ts

@@ -1,37 +0,0 @@
-import type {MapController} from "@mapsight/core/lib/map/controller";
-import {getIdForLayer} from "@mapsight/core/lib/map/lib/tagLayer";
-
-import type {PluginInstance} from "../../types";
-
-const defaultGlobalVariableName = "MSUI";
-
-/**
- * This plugin will make debug info available in a global variable.
- */
-export default function createPlugin(
-	options: {
-		globalVariableName?: string;
-	} = {},
-): PluginInstance {
-	const {globalVariableName = defaultGlobalVariableName} = options;
-
-	return {
-		afterCreate: (ctx) => {
-			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-			// @ts-ignore
-			window[globalVariableName] = {
-				context: ctx,
-				getLayerObjects() {
-					const layerMap = {};
-					(ctx.controllers?.map as MapController)
-						.getMap()
-						?.getAllLayers()
-						.forEach((l, i) => {
-							layerMap[getIdForLayer(l) ?? "unnamed_" + i] = l;
-						});
-					return layerMap;
-				},
-			};
-		},
-	};
-}