@a-type/ui 0.3.2 → 0.3.3

package/src/hooks/useOnUnmount.ts

@@ -0,0 +1,20 @@
+import { useCallback, useRef } from 'react';
+import { useStableCallback } from './useStableCallback.js';
+
+/**
+ * Calls a callback with an element when it is unmounted.
+ * @returns a ref to pass to the component
+ */
+export function useOnUnmount(callback: (el: HTMLElement) => void) {
+	const stableCallback = useStableCallback(callback);
+
+	const ref = useRef<HTMLElement | null>(null);
+
+	return useCallback((el: HTMLElement | null) => {
+		console.log(el);
+		if (ref.current && !el) {
+			stableCallback(ref.current);
+		}
+		ref.current = el;
+	}, []);
+}

package/src/hooks/useSize.ts

@@ -0,0 +1,164 @@
+import { debounce } from '@a-type/utils';
+import { RefObject, useLayoutEffect, useMemo, useRef } from 'react';
+import { useStableCallback } from './useStableCallback.js';
+interface ResizeObserverEntry {
+	target: Element;
+}
+type ResizeObserverCallback = (entries: ResizeObserverEntry[]) => void;
+export declare class ResizeObserver {
+	constructor(callback: ResizeObserverCallback);
+	observe(target: Element): void;
+	unobserve(target: Element): void;
+	disconnect(): void;
+}
+
+export function useSize<E extends HTMLElement>(
+	callback: (payload: { width: number; height: number }) => void,
+) {
+	const ref = useRef<E>(null);
+	const cb = useStableCallback(callback);
+	useLayoutEffect(() => {
+		const target = ref.current;
+		if (!target) {
+			return () => {
+				//
+			};
+		}
+		const resizeObserver = new ResizeObserver((entries) => {
+			entries.forEach((entry) => {
+				cb({
+					width: entry.target.clientWidth,
+					height: entry.target.clientHeight,
+				});
+			});
+		});
+		resizeObserver.observe(target);
+		return () => {
+			resizeObserver.unobserve(target);
+			resizeObserver.disconnect();
+		};
+	}, [ref, cb]);
+	return ref;
+}
+
+export function useSizeCssVars<E extends HTMLElement>(
+	debounceMs?: number,
+	applyToRef?: RefObject<HTMLElement>,
+	propertyNames?: { width: string; height: string },
+) {
+	const update = useMemo(() => {
+		const doupdate = ({ width, height }: { width: number; height: number }) => {
+			const usedRef = applyToRef || ref;
+			usedRef.current?.style.setProperty(
+				propertyNames?.width ?? '--width',
+				width + 'px',
+			);
+			usedRef.current?.style.setProperty(
+				propertyNames?.height ?? '--height',
+				height + 'px',
+			);
+		};
+		if (debounceMs) {
+			return debounce(doupdate, debounceMs);
+		} else {
+			return doupdate;
+		}
+	}, [debounceMs, applyToRef, propertyNames?.width, propertyNames?.height]);
+	const ref = useSize<E>(update);
+	return ref;
+}
+
+export function useBounds<E extends HTMLElement>(
+	callback: (payload: {
+		left: number;
+		top: number;
+		width: number;
+		height: number;
+	}) => void,
+) {
+	const ref = useRef<E>(null);
+	const cb = useStableCallback(callback);
+	useLayoutEffect(() => {
+		const target = ref.current;
+		if (!target) {
+			return () => {
+				//
+			};
+		}
+		const resizeObserver = new ResizeObserver((entries) => {
+			entries.forEach((entry) => {
+				const { left, top, width, height } =
+					entry.target.getBoundingClientRect();
+				cb({ left, top, width, height });
+			});
+		});
+		resizeObserver.observe(target);
+		return () => {
+			resizeObserver.unobserve(target);
+			resizeObserver.disconnect();
+		};
+	}, [ref, cb]);
+	return ref;
+}
+
+export function useBoundsCssVars<E extends HTMLElement>(
+	debounceMs?: number,
+	applyToRef?: RefObject<HTMLElement>,
+	propertyNames?: {
+		left: string;
+		top: string;
+		width: string;
+		height: string;
+		ready: string;
+	},
+) {
+	const update = useMemo(() => {
+		const doupdate = ({
+			left,
+			top,
+			width,
+			height,
+		}: {
+			left: number;
+			top: number;
+			width: number;
+			height: number;
+		}) => {
+			const usedRef = applyToRef || ref;
+			usedRef.current?.style.setProperty(
+				propertyNames?.left ?? '--left',
+				left + 'px',
+			);
+			usedRef.current?.style.setProperty(
+				propertyNames?.top ?? '--top',
+				top + 'px',
+			);
+			usedRef.current?.style.setProperty(
+				propertyNames?.width ?? '--width',
+				width + 'px',
+			);
+			usedRef.current?.style.setProperty(
+				propertyNames?.height ?? '--height',
+				height + 'px',
+			);
+			usedRef.current?.style.setProperty(
+				propertyNames?.ready ?? '--ready',
+				'1',
+			);
+		};
+		if (debounceMs) {
+			return debounce(doupdate, debounceMs);
+		} else {
+			return doupdate;
+		}
+	}, [
+		debounceMs,
+		applyToRef,
+		propertyNames?.left,
+		propertyNames?.top,
+		propertyNames?.width,
+		propertyNames?.height,
+	]);
+	const ref = useBounds<E>(update);
+	return ref;
+}

package/src/hooks/useStableCallback.ts

@@ -0,0 +1,11 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+
+export function useStableCallback<Fn extends (...args: any[]) => any>(
+	callback: Fn | undefined,
+) {
+	const ref = useRef(callback);
+	useMemo(() => {
+		ref.current = callback;
+	}, [callback]);
+	return useCallback((...args: any[]) => ref.current?.(...args), []);
+}

package/src/hooks/useToggle.tsx

@@ -0,0 +1,9 @@
+import { useCallback, useState } from 'react';
+
+export function useToggle(
+	initialValue: boolean = false,
+): [boolean, () => void] {
+	const [value, setValue] = useState(initialValue);
+	const toggle = useCallback(() => setValue((v) => !v), []);
+	return [value, toggle];
+}

package/src/hooks/useVisualViewportOffset.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Applies bottom offset px as a CSS custom property to the document root.
+ */
+export function useVisualViewportOffset() {
+	const viewport = window.visualViewport;
+
+	useEffect(() => {
+		if (!viewport) {
+			return;
+		}
+
+		const update = () => {
+			document.documentElement.style.setProperty(
+				'--viewport-bottom-offset',
+				`${window.innerHeight - viewport.height}px`,
+			);
+			document.documentElement.style.setProperty(
+				'--viewport-height',
+				`${viewport.height}px`,
+			);
+		};
+
+		update();
+
+		window.addEventListener('scroll', update, { passive: true });
+		viewport.addEventListener('resize', update);
+
+		return () => {
+			viewport.removeEventListener('resize', update);
+			window.removeEventListener('scroll', update);
+		};
+	}, []);
+}

package/src/hooks/withClassName.tsx

@@ -0,0 +1,21 @@
+import classNames from 'classnames';
+import {
+	ComponentPropsWithRef,
+	ComponentType,
+	ElementType,
+	FunctionComponent,
+	forwardRef,
+} from 'react';
+
+export function withClassName<T extends ComponentType<any> | ElementType<any>>(
+	Component: T,
+	...cs: Parameters<typeof classNames>
+): FunctionComponent<ComponentPropsWithRef<T>> {
+	const WithClassName = forwardRef<any, any>((props, ref) => {
+		const { className, ...rest } = props;
+		return (
+			<Component ref={ref} {...rest} className={classNames(cs, className)} />
+		);
+	});
+	return WithClassName as any;
+}

package/src/hooks.ts

@@ -0,0 +1 @@
+export * from './hooks/index.js';