@mapsight/ui 7.0.3 → 7.2.0

package/src/js/hooks/useControllableState.ts

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

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

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

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

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

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

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

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

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

@@ -1,36 +0,0 @@
-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]);
-}