@hrnec06/react_utils 1.4.1 → 1.5.0

package/src/hooks/useTransition.ts

@@ -0,0 +1,261 @@
+import { disposables, mapRecord, Nullable } from "@hrnec06/util";
+import { useLayoutEffect, useRef, useState } from "react";
+import useFlags from "./useFlags";
+import useDisposables from "./useDisposables";
+
+enum TransitionState {
+  None = 0,
+
+  Closed = 1 << 0,
+
+  Enter = 1 << 1,
+  Leave = 1 << 2,
+}
+
+export interface TransitionStates {
+	enter?: boolean,
+	leave?: boolean,
+	closed?: boolean,
+	transition?: boolean
+}
+
+export function transitionDataAttributes(data: TransitionStates)
+{
+	return mapRecord(data, (key, value) => [
+		`data-${key}`,
+		value === true ? "true" : undefined
+	]);
+}
+
+export default function useTransition(
+	enabled: boolean,
+	element: Nullable<HTMLElement>,
+	show: boolean
+): [visible: boolean, data: TransitionStates]
+{
+	const [visible, setVisible] = useState(show);
+
+	const flags = useFlags(
+		(enabled && visible) ? TransitionState.Enter | TransitionState.Closed : TransitionState.None
+	);
+
+	const inFlight = useRef(false);
+	const cancelledRef = useRef(false);
+
+	const d = useDisposables();
+
+	useLayoutEffect(() => {
+		if (!enabled) return;
+
+		if (show)
+		{
+			setVisible(true);
+		}
+
+		if (!element)
+		{
+			if (show)
+			{
+				flags.addFlag(TransitionState.Enter | TransitionState.Closed);
+			}
+
+			return;
+		}
+
+		return transition(
+			element,
+			{
+				inFlight: inFlight,
+				prepare: () => {
+					if (cancelledRef.current)
+					{
+						cancelledRef.current = false;
+					}
+					else
+					{
+						cancelledRef.current = inFlight.current;
+					}
+
+					inFlight.current = true;
+
+					if (cancelledRef.current) return;
+
+					if (show)
+					{
+						flags.addFlag(TransitionState.Enter | TransitionState.Closed);
+						flags.removeFlag(TransitionState.Leave);
+					}
+					else
+					{
+						flags.addFlag(TransitionState.Leave);
+						flags.removeFlag(TransitionState.Enter);
+					}
+				},
+				run: () => {
+					if (cancelledRef.current)
+					{
+						if (show)
+						{
+							flags.addFlag(TransitionState.Leave);
+							flags.removeFlag(TransitionState.Enter | TransitionState.Closed);
+						}
+						else
+						{
+							flags.addFlag(TransitionState.Enter | TransitionState.Closed);
+							flags.removeFlag(TransitionState.Leave);
+						}
+					}
+					else
+					{
+						if (show)
+						{
+							flags.removeFlag(TransitionState.Closed);
+						}
+						else
+						{
+							flags.addFlag(TransitionState.Closed);
+						}
+					}
+				},
+				done: () => {
+					if (cancelledRef.current)
+					{
+						if (hasPendingTransitions(element))
+						{
+							return;
+						}
+					}
+
+					inFlight.current = false;
+
+					flags.removeFlag(TransitionState.Enter | TransitionState.Leave | TransitionState.Closed);
+
+					if (!show)
+					{
+						setVisible(false);
+					}
+				}
+			}
+		);
+	}, [enabled, show, element, d]);
+
+	if (!enabled)
+	{
+		return [
+			show,
+			{
+				closed: 		undefined,
+				enter: 		undefined,
+				leave: 		undefined,
+				transition: undefined
+			}
+		] as const;
+	}
+
+	return [
+		visible,
+		{
+			closed: 		flags.hasFlag(TransitionState.Closed),
+			enter: 		flags.hasFlag(TransitionState.Enter),
+			leave: 		flags.hasFlag(TransitionState.Leave),
+			transition: flags.hasFlag(TransitionState.Enter) || flags.hasFlag(TransitionState.Leave)
+		}
+	] as const;
+}
+
+function transition(
+	node: HTMLElement,
+	{
+		prepare,
+		run,
+		done,
+		inFlight
+	}: {
+		prepare: () => void,
+		run: () => void,
+		done: () => void,
+		inFlight: React.RefObject<boolean>
+	}
+)
+{
+	const d = disposables();
+
+	prepareTransition(node, {
+		prepare,
+		inFlight
+	});
+
+	d.nextFrame(() => {
+		run();
+
+		d.requestAnimationFrame(() => {
+			d.add(waitForTransition(node, done));
+		});
+	});
+
+	return d.dispose;
+}
+
+function waitForTransition(node: Nullable<HTMLElement>, done: () => void)
+{
+	const d = disposables();
+
+	if (!node) return d.dispose;
+
+	let cancelled = false;
+	d.add(() => {
+		cancelled = true;
+	});
+
+	const transitions = node.getAnimations?.().filter((animation) => animation instanceof CSSTransition) ?? [];
+
+	if (transitions.length === 0)
+	{
+		done();
+
+		return d.dispose;
+	}
+
+	Promise.allSettled(transitions.map((transition) => transition.finished))
+	.then(() => {
+   	if (!cancelled)
+		{
+      	done();
+    	}
+	});
+
+	return d.dispose;
+}
+
+function prepareTransition(
+	node: HTMLElement,
+	{ inFlight, prepare }: { inFlight?: React.RefObject<boolean>, prepare: () => void }
+)
+{
+	if (inFlight?.current)
+	{
+		prepare();
+		return;
+	}
+
+	const previous = node.style.transition;
+
+	node.style.transition = "none";
+
+	prepare();
+
+	// Trigger a reflow, flushing the CSS changes
+	node.offsetHeight;
+
+	// Reset the transition to what it was before
+	node.style.transition = previous;
+}
+
+function hasPendingTransitions(node: HTMLElement): boolean
+{
+  const animations = node.getAnimations?.() ?? []
+
+  return animations.some((animation) => {
+    return animation instanceof CSSTransition && animation.playState !== 'finished'
+  })
+}

package/src/index.ts

@@ -6,17 +6,20 @@ import useWindowSize from "./hooks/useWindowSize";
 import useEfficientRef from "./hooks/useEfficientRef";
 import useEfficientState from "./hooks/useEfficientState";
 import useUUID from "./hooks/useUUID";
+import useFlags from "./hooks/useFlags";
 
 import useSignal, { Signal } from "./hooks/useSignal";
-
 import useLazySignal, { LazySignal } from "./hooks/useLazySignal";
 
-import Debugger from './components/Debugger/Debugger';
+import * as Debugger from './components/Debugger/Debugger';
+
 import ResizeableBox from "./components/ResizeableBox/ResizeableBox";
+import Dialog from "./components/Dialog/Dialog";
 
 import * as util from './lib/utils';
 
 export {
+	// Hooks
 	useKeyListener,
 	useListener,
 	useUpdatedRef,
@@ -25,15 +28,19 @@ export {
 	useEfficientRef,
 	useEfficientState,
 	useUUID,
+	useFlags,
 
+	// Signals
 	useSignal,
 	Signal,
-
 	useLazySignal,
 	LazySignal,
 	
+	// Components
 	Debugger,
 	ResizeableBox,
+	Dialog,
 
-	util
+	// Utilities
+	util,
 };