@mapsight/ui 7.0.0

package/src/js/hooks/useControllableState.ts

@@ -0,0 +1,50 @@
+import type {Dispatch, SetStateAction} from "react";
+import {useCallback, useEffect, useState} from "react";
+
+import useCallbackRef from "./useCallbackRef";
+import usePrevious from "./usePrevious";
+
+const noop = () => {
+	// empty
+};
+
+export default function useControllableState<T>({
+	prop,
+	defaultProp,
+	onChange = noop,
+}: {
+	prop?: T | undefined;
+	defaultProp?: T | undefined;
+	onChange?: (state: T) => void;
+}) {
+	const [state, setState] = useState<T | undefined>(defaultProp);
+	const handleChange = useCallbackRef(onChange);
+
+	const prevState = usePrevious(state);
+	useEffect(() => {
+		if (prevState !== state) {
+			handleChange(state as T);
+		}
+	}, [state, prevState, handleChange]);
+
+	const isControlled = prop !== undefined;
+	const value = isControlled ? prop : state;
+
+	const setValue: Dispatch<SetStateAction<T | undefined>> = useCallback(
+		(nextValue) => {
+			if (isControlled) {
+				const controlledValue =
+					typeof nextValue === "function"
+						? (nextValue as (prevState?: T) => T)(prop)
+						: nextValue;
+				if (controlledValue !== prop)
+					handleChange(controlledValue as T);
+			} else {
+				setState(nextValue);
+			}
+		},
+		[isControlled, prop, setState, handleChange],
+	);
+
+	return [value, setValue] as const;
+}

package/src/js/hooks/useDebounce.ts

@@ -0,0 +1,32 @@
+import {useEffect, useState} from "react";
+
+// https://usehooks.com/useDebounce/
+/**
+ * @param value value to debounce
+ * @param delay debounce delay
+ * @returns debounced value
+ */
+export default function useDebounce<T>(value: T, delay: number): T {
+	// State and setters for debounced value
+	const [debouncedValue, setDebouncedValue] = useState(value);
+
+	useEffect(
+		() => {
+			// Update debounced value after delay
+			const handler = setTimeout(() => {
+				setDebouncedValue(value);
+			}, delay);
+
+			// Cancel the timeout if value changes (also on delay change or unmount)
+			// This is how we prevent debounced value from updating if value is changed ...
+			// .. within the delay period. Timeout gets cleared and restarted.
+			return () => {
+				clearTimeout(handler);
+			};
+		},
+		// Only re-call effect if value or delay changes
+		[value, delay],
+	);
+
+	return debouncedValue;
+}

package/src/js/hooks/useHandleEscapeKeyDown.ts

@@ -0,0 +1,27 @@
+import type {RefObject} from "react";
+import {useEffect} from "react";
+
+import {isEventWithNoModKeys} from "../helpers/events";
+
+export default function useHandleEscapeKeyDown(
+	ref: RefObject<HTMLElement>,
+	onEscape: () => void,
+): void {
+	useEffect(() => {
+		const elem = ref.current;
+		if (elem === null) {
+			return;
+		}
+
+		const handleEsc = (ev: KeyboardEvent): void => {
+			if (isEventWithNoModKeys(ev) && ev.key === "Escape") {
+				onEscape();
+			}
+		};
+
+		elem.addEventListener("keydown", handleEsc);
+		return () => {
+			elem.removeEventListener("keydown", handleEsc);
+		};
+	}, [ref.current, onEscape]);
+}

package/src/js/hooks/useMapsightPanel.ts

@@ -0,0 +1,40 @@
+import type {RefObject} from "react";
+import {useEffect, useRef} from "react";
+import {useDispatch} from "react-redux";
+
+import {setViewportAnchor} from "@mapsight/core/lib/map/actions";
+
+import {MAP} from "../config/constants/controllers";
+import type {MainPanelPosition} from "../types";
+import useUpdateMapSizeOnTransitionEnd from "./useUpdateMapSizeOnTransitionEnd";
+
+function useMapsightPanel(
+	containerRef: RefObject<Element | null>,
+	panelPosition: MainPanelPosition,
+	collapsed: boolean,
+) {
+	const previousPositionRef = useRef<MainPanelPosition | null>(null);
+	const previousCollapsedRef = useRef<boolean>(false);
+	const dispatch = useDispatch();
+
+	useEffect(() => {
+		if (
+			previousPositionRef.current &&
+			(previousPositionRef.current !== panelPosition ||
+				previousCollapsedRef.current !== collapsed)
+		) {
+			dispatch(setViewportAnchor(MAP, "right"));
+		}
+
+		previousPositionRef.current = panelPosition;
+		previousCollapsedRef.current = collapsed;
+	}, [collapsed, dispatch, panelPosition]);
+
+	useUpdateMapSizeOnTransitionEnd(
+		containerRef.current ?? undefined,
+		dispatch,
+		previousPositionRef,
+	);
+}
+
+export default useMapsightPanel;

package/src/js/hooks/useMountable.ts

@@ -0,0 +1,38 @@
+import {useEffect, useState} from "react";
+
+type Mountable = {
+	/** mount function, receives element as parameter */
+	mount(element: Element): void;
+
+	/** unmount function, receives element as parameter */
+	unmount(element: Element): void;
+};
+
+/**
+ * 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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,51 @@
+import type {DependencyList} from "react";
+import {useCallback, useEffect, useRef, useState} from "react";
+
+type Options = {
+	stuckHeaderSize?: number;
+	resetDeps?: DependencyList;
+};
+
+export default function useStickyHeader({
+	stuckHeaderSize = 30,
+	resetDeps = [],
+}: Options) {
+	const [isHeaderStuck, setIsHeaderStuck] = useState(false);
+	const [stickThreshold, setStickThreshold] = useState(0);
+
+	const stickyHeaderRef = useRef<HTMLElement | 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 - stuckHeaderSize);
+		}
+	}, [stickyHeaderRef.current?.offsetHeight, stuckHeaderSize]);
+
+	return {
+		isHeaderStuck,
+		stickyHeaderRef,
+		stickyScrollAreaRef,
+		onScroll,
+	};
+}

package/src/js/hooks/useUpdateMapSizeCallback.ts

@@ -0,0 +1,32 @@
+import type {RefObject} from "react";
+import {useCallback} from "react";
+
+import type {Dispatch} from "redux";
+
+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

@@ -0,0 +1,16 @@
+import {useEffect} from "react";
+
+import type {Dispatch} from "redux";
+
+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

@@ -0,0 +1,40 @@
+import type {RefObject} from "react";
+import {useEffect} from "react";
+
+import type {Dispatch} from "redux";
+
+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

@@ -0,0 +1,36 @@
+import {useEffect} from "react";
+
+import type {Store} from "redux";
+
+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]);
+}