@babylonjs/shared-ui-components 8.50.1 → 8.50.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export type WindowOptions = {
|
|
2
|
+
current?: boolean;
|
|
3
|
+
primary?: boolean;
|
|
4
|
+
};
|
|
5
|
+
export declare function useEventListener<EventT extends keyof DocumentEventMap>(source: "document", eventName: EventT, handler: (e: DocumentEventMap[EventT]) => void, options?: WindowOptions): void;
|
|
6
|
+
export declare function useEventListener<EventT extends keyof WindowEventMap>(source: "window", eventName: EventT, handler: (e: WindowEventMap[EventT]) => void, options?: WindowOptions): void;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { useFluent } from "@fluentui/react-components";
|
|
2
|
+
import { useEffect } from "react";
|
|
3
|
+
export function useEventListener(source, eventName, handler, options) {
|
|
4
|
+
const watchCurrent = options?.current ?? true;
|
|
5
|
+
const watchPrimary = options?.primary ?? true;
|
|
6
|
+
const { targetDocument: currentDocument } = useFluent();
|
|
7
|
+
const currentSource = !watchCurrent ? null : source === "window" ? currentDocument?.defaultView : currentDocument;
|
|
8
|
+
const primarySource = !watchPrimary ? null : source === "window" ? window : document;
|
|
9
|
+
for (const eventSource of [currentSource, primarySource]) {
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
if (eventSource && handler) {
|
|
12
|
+
eventSource.addEventListener(eventName, handler);
|
|
13
|
+
return () => {
|
|
14
|
+
eventSource.removeEventListener(eventName, handler);
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
return undefined;
|
|
18
|
+
}, [eventSource, eventName, handler]);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=eventHooks.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"eventHooks.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hooks/eventHooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAmBlC,MAAM,UAAU,gBAAgB,CAAC,MAA6B,EAAE,SAAiB,EAAE,OAA2B,EAAE,OAAuB;IACnI,MAAM,YAAY,GAAG,OAAO,EAAE,OAAO,IAAI,IAAI,CAAC;IAC9C,MAAM,YAAY,GAAG,OAAO,EAAE,OAAO,IAAI,IAAI,CAAC;IAE9C,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,SAAS,EAAE,CAAC;IAExD,MAAM,aAAa,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC;IAClH,MAAM,aAAa,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;IAErF,KAAK,MAAM,WAAW,IAAI,CAAC,aAAa,EAAE,aAAa,CAAC,EAAE,CAAC;QACvD,SAAS,CAAC,GAAG,EAAE;YACX,IAAI,WAAW,IAAI,OAAO,EAAE,CAAC;gBACzB,WAAW,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;gBACjD,OAAO,GAAG,EAAE;oBACR,WAAW,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;gBACxD,CAAC,CAAC;YACN,CAAC;YACD,OAAO,SAAS,CAAC;QACrB,CAAC,EAAE,CAAC,WAAW,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAC1C,CAAC;AACL,CAAC","sourcesContent":["import { useFluent } from \"@fluentui/react-components\";\r\nimport { useEffect } from \"react\";\r\n\r\nexport type WindowOptions = {\r\n current?: boolean;\r\n primary?: boolean;\r\n};\r\n\r\nexport function useEventListener<EventT extends keyof DocumentEventMap>(\r\n source: \"document\",\r\n eventName: EventT,\r\n handler: (e: DocumentEventMap[EventT]) => void,\r\n options?: WindowOptions\r\n): void;\r\nexport function useEventListener<EventT extends keyof WindowEventMap>(\r\n source: \"window\",\r\n eventName: EventT,\r\n handler: (e: WindowEventMap[EventT]) => void,\r\n options?: WindowOptions\r\n): void;\r\nexport function useEventListener(source: \"document\" | \"window\", eventName: string, handler: (e: Event) => void, options?: WindowOptions): void {\r\n const watchCurrent = options?.current ?? true;\r\n const watchPrimary = options?.primary ?? true;\r\n\r\n const { targetDocument: currentDocument } = useFluent();\r\n\r\n const currentSource = !watchCurrent ? null : source === \"window\" ? currentDocument?.defaultView : currentDocument;\r\n const primarySource = !watchPrimary ? null : source === \"window\" ? window : document;\r\n\r\n for (const eventSource of [currentSource, primarySource]) {\r\n useEffect(() => {\r\n if (eventSource && handler) {\r\n eventSource.addEventListener(eventName, handler);\r\n return () => {\r\n eventSource.removeEventListener(eventName, handler);\r\n };\r\n }\r\n return undefined;\r\n }, [eventSource, eventName, handler]);\r\n }\r\n}\r\n"]}
|
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
type
|
|
2
|
-
currentDocument?: boolean;
|
|
3
|
-
mainDocument?: boolean;
|
|
4
|
-
};
|
|
1
|
+
import type { WindowOptions } from "./eventHooks.js";
|
|
5
2
|
type KeyCallbacks = {
|
|
6
3
|
onKeyDown?: (e: KeyboardEvent) => void;
|
|
7
4
|
onKeyUp?: (e: KeyboardEvent) => void;
|
|
8
5
|
};
|
|
9
|
-
export declare function useKeyListener(callbacks: KeyCallbacks, options?:
|
|
10
|
-
export declare function useKeyState(key: string, options?:
|
|
6
|
+
export declare function useKeyListener(callbacks: KeyCallbacks, options?: WindowOptions): void;
|
|
7
|
+
export declare function useKeyState(key: string, options?: WindowOptions): boolean;
|
|
11
8
|
export {};
|
|
@@ -1,48 +1,38 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { useCallback, useState } from "react";
|
|
2
|
+
import { useEventListener } from "./eventHooks.js";
|
|
3
3
|
export function useKeyListener(callbacks, options) {
|
|
4
|
-
const watchCurrentDocument = options?.currentDocument ?? true;
|
|
5
|
-
const watchMainDocument = options?.mainDocument ?? true;
|
|
6
|
-
const { targetDocument: currentDocument } = useFluent();
|
|
7
4
|
const callbackMap = new Map([
|
|
8
5
|
["keydown", callbacks.onKeyDown],
|
|
9
6
|
["keyup", callbacks.onKeyUp],
|
|
10
7
|
]);
|
|
11
8
|
for (const eventType of ["keydown", "keyup"]) {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
if (!e.repeat) {
|
|
19
|
-
handler(e);
|
|
20
|
-
}
|
|
21
|
-
};
|
|
22
|
-
doc.addEventListener(eventType, guardedHandler);
|
|
23
|
-
return () => {
|
|
24
|
-
doc.removeEventListener(eventType, guardedHandler);
|
|
25
|
-
};
|
|
9
|
+
const handler = callbackMap.get(eventType);
|
|
10
|
+
if (handler) {
|
|
11
|
+
// Ignore repeated events from holding down a key.
|
|
12
|
+
const guardedHandler = (e) => {
|
|
13
|
+
if (!e.repeat) {
|
|
14
|
+
handler(e);
|
|
26
15
|
}
|
|
27
|
-
|
|
28
|
-
|
|
16
|
+
};
|
|
17
|
+
useEventListener("document", eventType, guardedHandler, options);
|
|
29
18
|
}
|
|
30
19
|
}
|
|
31
20
|
}
|
|
32
21
|
export function useKeyState(key, options) {
|
|
33
22
|
const [isPressed, setIsPressed] = useState(false);
|
|
34
23
|
useKeyListener({
|
|
35
|
-
onKeyDown: (e) => {
|
|
24
|
+
onKeyDown: useCallback((e) => {
|
|
36
25
|
if (e.key === key) {
|
|
37
26
|
setIsPressed(true);
|
|
38
27
|
}
|
|
39
|
-
},
|
|
40
|
-
onKeyUp: (e) => {
|
|
28
|
+
}, [key]),
|
|
29
|
+
onKeyUp: useCallback((e) => {
|
|
41
30
|
if (e.key === key) {
|
|
42
31
|
setIsPressed(false);
|
|
43
32
|
}
|
|
44
|
-
},
|
|
33
|
+
}, [key]),
|
|
45
34
|
}, options);
|
|
35
|
+
useEventListener("window", "blur", useCallback(() => setIsPressed(false), []), options); // Reset state on window blur to avoid stuck keys
|
|
46
36
|
return isPressed;
|
|
47
37
|
}
|
|
48
38
|
//# sourceMappingURL=keyboardHooks.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"keyboardHooks.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hooks/keyboardHooks.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"keyboardHooks.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hooks/keyboardHooks.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAOhD,MAAM,UAAU,cAAc,CAAC,SAAuB,EAAE,OAAuB;IAC3E,MAAM,WAAW,GAAG,IAAI,GAAG,CAAgE;QACvF,CAAC,SAAS,EAAE,SAAS,CAAC,SAAS,CAAC;QAChC,CAAC,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC;KAC/B,CAAC,CAAC;IAEH,KAAK,MAAM,SAAS,IAAI,CAAC,SAAS,EAAE,OAAO,CAAU,EAAE,CAAC;QACpD,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QAC3C,IAAI,OAAO,EAAE,CAAC;YACV,kDAAkD;YAClD,MAAM,cAAc,GAAG,CAAC,CAAgB,EAAE,EAAE;gBACxC,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;oBACZ,OAAO,CAAC,CAAC,CAAC,CAAC;gBACf,CAAC;YACL,CAAC,CAAC;YAEF,gBAAgB,CAAC,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC;QACrE,CAAC;IACL,CAAC;AACL,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,GAAW,EAAE,OAAuB;IAC5D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,cAAc,CACV;QACI,SAAS,EAAE,WAAW,CAClB,CAAC,CAAgB,EAAE,EAAE;YACjB,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBAChB,YAAY,CAAC,IAAI,CAAC,CAAC;YACvB,CAAC;QACL,CAAC,EACD,CAAC,GAAG,CAAC,CACR;QACD,OAAO,EAAE,WAAW,CAChB,CAAC,CAAgB,EAAE,EAAE;YACjB,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBAChB,YAAY,CAAC,KAAK,CAAC,CAAC;YACxB,CAAC;QACL,CAAC,EACD,CAAC,GAAG,CAAC,CACR;KACJ,EACD,OAAO,CACV,CAAC;IAEF,gBAAgB,CACZ,QAAQ,EACR,MAAM,EACN,WAAW,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,EAC1C,OAAO,CACV,CAAC,CAAC,iDAAiD;IAEpD,OAAO,SAAS,CAAC;AACrB,CAAC","sourcesContent":["import type { WindowOptions } from \"./eventHooks\";\r\n\r\nimport { useCallback, useState } from \"react\";\r\n\r\nimport { useEventListener } from \"./eventHooks\";\r\n\r\ntype KeyCallbacks = {\r\n onKeyDown?: (e: KeyboardEvent) => void;\r\n onKeyUp?: (e: KeyboardEvent) => void;\r\n};\r\n\r\nexport function useKeyListener(callbacks: KeyCallbacks, options?: WindowOptions) {\r\n const callbackMap = new Map<\"keydown\" | \"keyup\", ((e: KeyboardEvent) => void) | undefined>([\r\n [\"keydown\", callbacks.onKeyDown],\r\n [\"keyup\", callbacks.onKeyUp],\r\n ]);\r\n\r\n for (const eventType of [\"keydown\", \"keyup\"] as const) {\r\n const handler = callbackMap.get(eventType);\r\n if (handler) {\r\n // Ignore repeated events from holding down a key.\r\n const guardedHandler = (e: KeyboardEvent) => {\r\n if (!e.repeat) {\r\n handler(e);\r\n }\r\n };\r\n\r\n useEventListener(\"document\", eventType, guardedHandler, options);\r\n }\r\n }\r\n}\r\n\r\nexport function useKeyState(key: string, options?: WindowOptions): boolean {\r\n const [isPressed, setIsPressed] = useState(false);\r\n\r\n useKeyListener(\r\n {\r\n onKeyDown: useCallback(\r\n (e: KeyboardEvent) => {\r\n if (e.key === key) {\r\n setIsPressed(true);\r\n }\r\n },\r\n [key]\r\n ),\r\n onKeyUp: useCallback(\r\n (e: KeyboardEvent) => {\r\n if (e.key === key) {\r\n setIsPressed(false);\r\n }\r\n },\r\n [key]\r\n ),\r\n },\r\n options\r\n );\r\n\r\n useEventListener(\r\n \"window\",\r\n \"blur\",\r\n useCallback(() => setIsPressed(false), []),\r\n options\r\n ); // Reset state on window blur to avoid stuck keys\r\n\r\n return isPressed;\r\n}\r\n"]}
|