External/OpenCut
1
0
Fork 0
mirror of https://github.com/OpenCut-app/OpenCut.git synced 2026-07-13 21:52:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: normalize line endings

Browse Source
This commit is contained in:
Maze Winther
2026-03-29 15:56:48 +02:00
parent 82817cb50c
commit 4d127a038b
736 changed files with 73880 additions and 73782 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/hooks/use-focus-lock.ts
+79 -79
View File
@@ -1,79 +1,79 @@
import { useEffect, useRef } from "react";
type FocusLockCursor = "text" | "default" | "pointer" | "crosshair";
const DATA_ATTR = "data-focus-locked";
function buildFocusLockCSS({
cursor,
allowSelector,
}: {
cursor: FocusLockCursor;
allowSelector?: string;
}) {
const rules = [
`*, *::before, *::after { pointer-events: none !important; cursor: ${cursor} !important; }`,
`[${DATA_ATTR}], [${DATA_ATTR}] * { pointer-events: auto !important; cursor: auto !important; }`,
];
if (allowSelector) {
rules.push(
`${allowSelector} { pointer-events: auto !important; cursor: auto !important; }`,
);
}
return rules.join("\n");
}
export function useFocusLock<T extends HTMLElement = HTMLElement>({
isActive,
onDismiss,
cursor = "default",
allowSelector,
}: {
isActive: boolean;
onDismiss: () => void;
cursor?: FocusLockCursor;
allowSelector?: string;
}) {
const containerRef = useRef<T>(null);
const onDismissRef = useRef(onDismiss);
onDismissRef.current = onDismiss;
useEffect(() => {
if (!isActive) return;
const container = containerRef.current;
if (!container) return;
container.setAttribute(DATA_ATTR, "");
const focusLockStyle = document.createElement("style");
focusLockStyle.textContent = buildFocusLockCSS({ cursor, allowSelector });
document.head.appendChild(focusLockStyle);
const handleOutsidePointerDown = (event: PointerEvent) => {
if (event.button !== 0) return;
if (container.contains(event.target as Node)) return;
const target = event.target as Element | null;
const isAllowedTarget = allowSelector && target?.closest(allowSelector);
if (isAllowedTarget) return;
onDismissRef.current();
};
document.addEventListener("pointerdown", handleOutsidePointerDown, true);
return () => {
document.removeEventListener(
"pointerdown",
handleOutsidePointerDown,
true,
);
container.removeAttribute(DATA_ATTR);
focusLockStyle.remove();
};
}, [isActive, cursor, allowSelector]);
return { containerRef };
}
import { useEffect, useRef } from "react";
type FocusLockCursor = "text" | "default" | "pointer" | "crosshair";
const DATA_ATTR = "data-focus-locked";
function buildFocusLockCSS({
cursor,
allowSelector,
}: {
cursor: FocusLockCursor;
allowSelector?: string;
}) {
const rules = [
`*, *::before, *::after { pointer-events: none !important; cursor: ${cursor} !important; }`,
`[${DATA_ATTR}], [${DATA_ATTR}] * { pointer-events: auto !important; cursor: auto !important; }`,
];
if (allowSelector) {
rules.push(
`${allowSelector} { pointer-events: auto !important; cursor: auto !important; }`,
);
}
return rules.join("\n");
}
export function useFocusLock<T extends HTMLElement = HTMLElement>({
isActive,
onDismiss,
cursor = "default",
allowSelector,
}: {
isActive: boolean;
onDismiss: () => void;
cursor?: FocusLockCursor;
allowSelector?: string;
}) {
const containerRef = useRef<T>(null);
const onDismissRef = useRef(onDismiss);
onDismissRef.current = onDismiss;
useEffect(() => {
if (!isActive) return;
const container = containerRef.current;
if (!container) return;
container.setAttribute(DATA_ATTR, "");
const focusLockStyle = document.createElement("style");
focusLockStyle.textContent = buildFocusLockCSS({ cursor, allowSelector });
document.head.appendChild(focusLockStyle);
const handleOutsidePointerDown = (event: PointerEvent) => {
if (event.button !== 0) return;
if (container.contains(event.target as Node)) return;
const target = event.target as Element | null;
const isAllowedTarget = allowSelector && target?.closest(allowSelector);
if (isAllowedTarget) return;
onDismissRef.current();
};
document.addEventListener("pointerdown", handleOutsidePointerDown, true);
return () => {
document.removeEventListener(
"pointerdown",
handleOutsidePointerDown,
true,
);
container.removeAttribute(DATA_ATTR);
focusLockStyle.remove();
};
}, [isActive, cursor, allowSelector]);
return { containerRef };
}