@hrnec06/react_utils 1.9.3 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hrnec06/react_utils",
-  "version": "1.9.3",
+  "version": "1.10.0",
   "description": "React utilities",
   "exports": {
     ".": "./src/index.ts"

package/src/components/UI/Tooltip/Tooltip.tsx

@@ -0,0 +1,128 @@
+import { Nullable, ReactUtils, Vector2 } from "@hrnec06/util";
+import useSignal from "../../../hooks/useSignal";
+import { useEffect, useState } from "react";
+import useListener from "../../../hooks/useListener";
+import { Debugger, useLatestRef } from "../../..";
+
+type TooltipProps = ReactUtils.Props<{
+    $tooltip: React.ReactNode,
+    $autoGenerateWrapper?: boolean,
+    $hoverDelay?: number,
+    children: React.ReactNode
+}, HTMLDivElement>;
+
+function Tooltip({
+    $tooltip,
+    $autoGenerateWrapper = false,
+    $hoverDelay = 500,
+    ...props
+}: TooltipProps)
+{
+    const [open, setOpen] = useState<Nullable<{
+        position: Vector2
+    }>>(null);
+
+    const [hover, setHover] = useState(false);
+    const [position, setPosition] = useState<Vector2>([0, 0]);
+
+    const positionRef = useLatestRef(position);
+
+    useListener(window, 'mousemove', (e) => {
+        if (!hover) return;
+
+        setPosition([e.clientX, e.clientY]);
+    }, [hover]);
+
+    useEffect(() => {
+        if (!hover)
+        {
+            setOpen(null);
+            return;
+        }
+
+        const t = setTimeout(() => {
+            setOpen({
+                position: positionRef.current
+            });
+        }, $hoverDelay);
+
+        return () => {
+            clearTimeout(t);
+        }
+    }, [hover]);
+
+    const handleMouseOver = (e: React.MouseEvent<HTMLElement>) => {
+        if (e.isPropagationStopped())
+            return;
+
+        setPosition([e.clientX, e.clientY]);
+        setHover(true);
+    }
+
+    const handleMouseOut = (e: React.MouseEvent<HTMLElement>) => {
+        if (e.isPropagationStopped())
+            return;
+
+        setHover(false);
+    }
+
+    return (
+        <>
+            <HoverCapture
+                autoGenerateWrapper={$autoGenerateWrapper}
+                handleMouseOut={handleMouseOut}
+                handleMouseOver={handleMouseOver}
+
+                {...props}
+            >
+                {props.children}
+            </HoverCapture>
+
+            {
+                open && (
+                    <div
+                        className="fixed pointer-events-none"
+                        style={{
+                            left: open.position[0],
+                            top: open.position[1]
+                        }}
+                    >
+                        {$tooltip}
+                    </div>
+                )
+            }
+
+            <Debugger.Debug value={position} />
+        </>
+    );
+}
+
+type HoverCaptureProps = ReactUtils.Props<{
+    autoGenerateWrapper: boolean,
+    handleMouseOver: (event: React.MouseEvent<HTMLElement>) => void,
+    handleMouseOut: (event: React.MouseEvent<HTMLElement>) => void,
+}, HTMLDivElement>;
+
+function HoverCapture({
+    autoGenerateWrapper,
+	handleMouseOver,
+    handleMouseOut,
+	...props
+}: HoverCaptureProps)
+{
+    if (!autoGenerateWrapper)
+		return props.children;
+
+	return (
+		<div
+			{...props}
+
+			onMouseOver={handleMouseOver}
+            onMouseOut={handleMouseOut}
+		>
+			{props.children}
+		</div>
+	);
+}
+
+export default Tooltip;

package/src/components/UI/Tooltip/TooltipContext.ts

@@ -0,0 +1,29 @@
+import { Optional } from "@hrnec06/util";
+import { createContext, useContext } from "react";
+import ContextError from "../../../lib/errors/ContextError";
+
+export interface TooltipContextExpose {
+    handleMouseOver: (event: React.MouseEvent<HTMLElement>) => void,
+    handleMouseOut: (event: React.MouseEvent<HTMLElement>) => void,
+}
+
+export interface TooltipContext {
+    exposed: TooltipContextExpose,
+}
+
+export const TooltipContext = createContext<Optional<TooltipContext>>(undefined);
+
+export function useTooltipListeners(): TooltipContextExpose
+{
+    const ctx = useTooltip();
+
+    if (!ctx)
+        throw new ContextError("TooltipListener");
+
+    return ctx.exposed;
+}
+
+export default function useTooltip()
+{
+    return useContext(TooltipContext);
+}

package/src/hooks/useLatestRef.ts

@@ -6,7 +6,7 @@ export default function useLatestRef<V>(value: V): React.RefObject<V> {
 
 	useLayoutEffect(() => {
 		ref.current = value;
-	});
+	}, [value]);
 
 	return ref;
 }

package/src/hooks/useOutsideClick.ts

@@ -10,7 +10,11 @@ export default function useOutsideClick(
 	const cb = useEvent(callback);
 
 	useListener(document, 'mousedown', (event) => {
-		if (!element || !(event.target instanceof Node) || element.contains(event.target)) return;
+		if (!element) return;
+
+		const realTarget = event.composedPath()[0];
+		if (!(realTarget instanceof Node) || element.contains(realTarget))
+			return;
 
 		cb(event);
 	}, [cb, element]);

package/src/index.ts

@@ -30,6 +30,8 @@ import ContextMenu from "./components/ContextMenu/ContextMenu";
 
 import ShadowRoot from "./components/ShadowRoot/ShadowRoot";
 
+import Tooltip from "./components/UI/Tooltip/Tooltip";
+
 import * as util from './lib/utils';
 import ContextError from "./lib/errors/ContextError";
 
@@ -68,7 +70,10 @@ export {
 	Debugger,
 	ResizeableBox,
 	Dialog,
-	ContextMenu,
+	ContextMenu, // should go to UI too
+
+	// UI
+	Tooltip,
 
 	// Shadow root
 	ShadowRoot,