@hrnec06/react_utils 1.5.1 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hrnec06/react_utils",
-  "version": "1.5.1",
+  "version": "1.7.0",
   "description": "A debugger component for react.",
   "exports": {
     ".": "./src/index.ts"

package/src/components/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,235 @@
+import React, { Children, createContext, forwardRef, useImperativeHandle, useLayoutEffect, useMemo, useState } from "react";
+import CTXM from "./ContextMenu.types";
+import { Optional, Vector2 } from "@hrnec06/util";
+import useContextMenu, { ContextMenuContext, type ContextMenuContext as TContextMenuContext } from "./ContextMenuCtx";
+import useDefaultValue from "../../hooks/useDefaultValue";
+import { v4 as uuidv4} from 'uuid';
+import { createPortal } from "react-dom";
+import useListener from "../../hooks/useListener";
+import clsx from "clsx";
+import ContextMenuSection from "./ContextMenuSection";
+import ContextMenuRoot from "./ContextMenuRoot";
+import useSignal, { Signal } from "../../hooks/useSignal";
+
+type InheritCallback = (parent: TContextMenuContext) => (CTXM.ContextMenuRoot | { parent: string, children: CTXM.ContextMenuRoot });
+
+interface ContextMenuWrapperProps {
+	open: boolean,
+	position: Vector2,
+	menu: CTXM.ContextMenuRoot
+}
+function ContextMenuWrapper({
+	open,
+	position,
+	menu
+}: ContextMenuWrapperProps)
+{
+	if (!open)
+		return undefined;
+
+	const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+		e.stopPropagation();
+		e.preventDefault();
+	}
+
+	return createPortal((
+		<div
+			onMouseDownCapture={handleMouseDown}
+			onContextMenu={handleMouseDown}
+			className={clsx(
+				"fixed z-600 select-none"
+			)}
+			style={{
+				left: position[0],
+				top: position[1]
+			}}
+		>
+			<ContextMenuRoot menu={menu} />
+		</div>
+	), document.body);
+}
+
+
+interface ContextMenuReference {
+	isOpen: boolean,
+	close: () => void,
+	open: (position: Vector2) => void,
+}
+
+interface ContextMenuProps extends React.HTMLProps<HTMLDivElement> {
+	$menu: CTXM.ContextMenuRoot,
+	$open?: boolean,
+	$id?: string,
+	$inherit?: boolean | InheritCallback | Array<string | { id: string, parent: string }>,
+	/**
+	 * If disabled, context event is captured using useCTXMListener()
+	 */
+	$autoGenerateWrapper?: boolean,
+	$onOpen?: () => void,
+	$onClose?: () => void,
+	$onSelect?: (id: string, owner: unknown) => void,
+}
+const ContextMenu = forwardRef<ContextMenuReference, ContextMenuProps>(({
+	$open,
+	$menu,
+	$id,
+	$inherit = false,
+	$autoGenerateWrapper = false,
+	$onOpen,
+	$onClose,
+	$onSelect,
+
+	...props
+}, ref) => {
+	const parent = useContextMenu();
+
+	const open = useSignal(false);
+	const [position, setPosition] = useState<Vector2>([0, 0]);
+
+	const assignedID = useDefaultValue(() => $id ?? uuidv4());
+
+	const finalMenu = useMemo(() => {
+		if ($inherit === false)
+			return $menu;
+
+		const menu: CTXM.ContextMenuRoot = [
+			...$menu
+		];
+
+		let current = parent;
+		while (current !== undefined)
+		{
+			if ($inherit === true)
+			{
+				menu.push(...current.menu);
+			}
+			else if (Array.isArray($inherit))
+			{
+				for (const query of $inherit)
+				{
+					if (query === current.id)
+					{
+						menu.push(...current.menu);
+					}
+					else if (typeof query === "object" && query.id === current.id)
+					{
+						menu.push([
+							{
+								id: `inherit-${current.id}.${query.id}`,
+								label: query.parent,
+								children: current.menu
+							}
+						]);
+					}
+				}
+			}
+			else if (typeof $inherit === "function")
+			{
+				const result = $inherit(current);
+
+				if (Array.isArray(result))
+				{
+					menu.push(...result);
+				}
+				else
+				{
+					menu.push([
+						{
+							id: `inherit-${current.id}.callback`,
+							label: result.parent,
+							children: result.children
+						}
+					]);
+				}
+			}
+
+			current = current?.parent;
+		}
+
+		return menu;
+	}, [$menu, parent, $inherit]);
+
+	useImperativeHandle(ref, () => ({
+		isOpen: false,
+		close: () => {},
+		open: () => {}
+	}), []);
+
+	useListener(document, 'mousedown', () => {
+		if (!open.value)
+			return;
+
+		open.value = false;
+	}, [open]);
+
+	const close = () => {
+		open.value = false;
+	}
+
+	const handleContextmenu = (e: React.MouseEvent<HTMLElement>) => {
+		if (e.isPropagationStopped())
+			return;
+
+		e.stopPropagation();
+		e.preventDefault();
+
+		open.value = true;
+		setPosition([e.clientX, e.clientY]);
+	}
+
+	return (
+		<ContextMenuContext.Provider
+			value={{
+				exposed: {
+					onContextMenu: handleContextmenu
+				},
+				parent: parent,
+				id: assignedID,
+				menu: $menu,
+				close: close
+			}}
+		>
+			<ContextCapture
+				autoGenerateWrapper={$autoGenerateWrapper}
+				handleContextMenu={handleContextmenu}
+
+				{...props}
+			>
+				{props.children}
+			</ContextCapture>
+
+			<ContextMenuWrapper
+				open={open.value}
+				position={position}
+				menu={finalMenu}
+			/>
+		</ContextMenuContext.Provider>
+	)
+});
+
+interface ContextCaptureProps extends React.HTMLProps<HTMLDivElement> {
+	autoGenerateWrapper: boolean,
+	handleContextMenu: (event: React.MouseEvent<HTMLElement>) => void,
+}
+function ContextCapture({
+	autoGenerateWrapper,
+	handleContextMenu,
+	...props
+}: ContextCaptureProps)
+{
+	if (!autoGenerateWrapper)
+		return props.children;
+
+	return (
+		<div
+			{...props}
+
+			onContextMenu={handleContextMenu}
+		>
+			{props.children}
+
+		</div>
+	);
+}
+
+export default ContextMenu;

package/src/components/ContextMenu/ContextMenu.types.ts

@@ -0,0 +1,17 @@
+import { Nullable } from "@hrnec06/util";
+
+namespace CTXM {
+	export interface ContextMenuItem {
+		id: string,
+		label: string,
+		description?: string,
+		children?: ContextMenuRoot,
+		onClick?: () => void
+	}
+
+	export type ContextMenuSection = Array<Nullable<ContextMenuItem>>;
+
+	export type ContextMenuRoot = Array<Nullable<ContextMenuSection>>;
+}
+
+export default CTXM;

package/src/components/ContextMenu/ContextMenuCtx.tsx

@@ -0,0 +1,33 @@
+import { Optional } from "@hrnec06/util";
+import { createContext, useContext } from "react";
+import ContextError from "../../lib/errors/ContextError";
+import CTXM from "./ContextMenu.types";
+
+export interface ContextMenuContextExpose {
+	onContextMenu: (event: React.MouseEvent<HTMLElement>) => void
+}
+
+export interface ContextMenuContext {
+	exposed: ContextMenuContextExpose,
+	parent?: ContextMenuContext,
+	menu: CTXM.ContextMenuRoot,
+	id: string,
+	close: () => void
+}
+
+export const ContextMenuContext = createContext<Optional<ContextMenuContext>>(undefined);
+
+export function useCTXMListener(): ContextMenuContextExpose['onContextMenu']
+{
+	const ctx = useContextMenu();
+
+	if (!ctx)
+		throw new ContextError("CTXMListener");
+
+	return ctx.exposed.onContextMenu;
+}
+
+export default function useContextMenu()
+{
+	return useContext(ContextMenuContext);
+}

package/src/components/ContextMenu/ContextMenuItem.tsx

@@ -0,0 +1,147 @@
+import { ChevronRightIcon } from "lucide-react";
+import CTXM from "./ContextMenu.types";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import ContextMenuRoot from "./ContextMenuRoot";
+import useTransition, { transitionDataAttributes } from "../../hooks/useTransition";
+import clsx from "clsx";
+import useSyncRef from "../../hooks/useSyncRef";
+import { matchMouseEvent, MouseButton } from "@hrnec06/util";
+import useContextMenu from "./ContextMenuCtx";
+import ContextError from "../../lib/errors/ContextError";
+import useDebounce from "../../hooks/useDebounce";
+
+interface ContextMenuItemProps {
+	item: CTXM.ContextMenuItem
+}
+export default function ContextMenuItem({
+	item
+}: ContextMenuItemProps)
+{
+	const menu = useContextMenu();
+	if (!menu)
+		throw new ContextError("ContextMenu");
+
+	const [hover, setHover] = useState(false);
+	const expanded = useDebounce(hover && !!item.children?.length, !hover ? 200 : 300);
+
+	const isClickable = item.onClick !== undefined;
+	const isEnabled = isClickable || !!item.children?.length;
+
+	const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+		e.stopPropagation();
+
+		if (!isClickable || !matchMouseEvent(e.nativeEvent, MouseButton.Left)) return;
+
+		item.onClick?.();
+		menu.close();
+	}
+
+	const handleMouseOver = () => {
+		setHover(true);
+	}
+
+	const handleMouseOut = () => {
+		setHover(false);
+	}
+
+	return (
+		<div
+			onMouseEnter={handleMouseOver}
+			onMouseLeave={handleMouseOut}
+			role="menu"
+			className="relative"
+		>
+			<div
+				onClick={handleClick}
+				role="menuitem"
+				className={clsx(
+					"whitespace-nowrap px-1",
+					isEnabled && "cursor-pointer"
+				)}
+			>
+				<div
+					className={clsx(
+						"flex items-center rounded-sm py-0.5",
+						hover && isEnabled && "bg-ctxm-item-hover"
+					)}
+				>
+					<div
+						className={clsx(
+							"flex-1 text-sm py-0.5 px-6",
+							isEnabled ? clsx(
+								"text-ctxm-item-text",
+								hover && "text-ctxm-item-text-hover"
+							) : "text-ctxm-item-disabled"
+						)}
+					>
+						{item.label}
+					</div>
+					<div
+						className="flex-2 pl-8 pr-1"
+					>
+						{item.description && (
+							<div
+								className={clsx(
+									"text-sm text-right",
+									isEnabled ? clsx(
+										"text-ctxm-item-description",
+										hover && "text-ctxm-item-text-hover"
+									) : "text-ctxm-item-disabled",
+								)}
+							>
+								{item.description}
+							</div>
+						)}
+
+						{item.children && (
+							<ChevronRightIcon className="size-5 inline-block float-end text-ctxm-item-text-hover" />
+						)}
+					</div>
+				</div>
+			</div>
+
+			{ item.children && (
+				<ContextMenuItemChildren
+					open={expanded && isEnabled}
+					children={item.children}
+				/>
+			) }
+		</div>
+	)
+}
+
+interface ContextMenuItemChildrenProps {
+	children: CTXM.ContextMenuRoot,
+	open: boolean
+}
+function ContextMenuItemChildren({ children, open }: ContextMenuItemChildrenProps)
+{
+	const [localDivRef, setLocalDivRef] = useState<HTMLElement | null>(null)
+	const divRef = useRef<HTMLDivElement>(null);
+
+	const divRefSync = useSyncRef(
+		divRef,
+		setLocalDivRef
+	);
+
+	const [visible, transition] = useTransition(true, localDivRef, open);
+
+	if (!visible)
+		return undefined;
+
+	return (
+		<div
+			ref={divRefSync}
+			{...transitionDataAttributes(transition)}
+
+			className={clsx(
+				"absolute left-full -top-[5px] pl-1",
+				"transition duration-300 data-leave:duration-200 data-closed:opacity-0 data-leave:sm:scale-95 data-enter:ease-out data-leave:ease-in"
+			)}
+		>
+			<ContextMenuRoot
+				menu={children}
+			/>
+		</div>
+	);
+}

package/src/components/ContextMenu/ContextMenuRoot.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import CTXM from "./ContextMenu.types"
+import ContextMenuSection from "./ContextMenuSection"
+
+interface ContextMenuRootProps {
+	menu: CTXM.ContextMenuRoot
+}
+export default function ContextMenuRoot({
+	menu
+}: ContextMenuRootProps)
+{
+	return (
+		<div
+			className={clsx(
+				"bg-ctxm-primary border border-ctxm-border shadow-lg shadow-ctxm-shadow rounded-md"
+			)}
+		>
+			{
+				menu.map((section, sectionIx) => (
+					section && <ContextMenuSection
+						key={sectionIx}
+						section={section}
+					/>
+				))
+			}
+		</div>
+	)
+}

package/src/components/ContextMenu/ContextMenuSection.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx";
+import CTXM from "./ContextMenu.types";
+import ContextMenuItem from "./ContextMenuItem";
+
+interface ContextMenuSectionProps {
+	section: CTXM.ContextMenuSection
+}
+export default function ContextMenuSection({
+	section
+}: ContextMenuSectionProps)
+{
+	return (
+		<div
+			className={clsx(
+				"border-b border-b-ctxm-border last:border-none py-1"
+			)}
+		>
+			{
+				section.map((item) => (
+					item && <ContextMenuItem
+						key={item.id}
+						item={item}
+					/>
+				))
+			}
+		</div>
+	)
+}