gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-21 07:38:53 +02:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

fix(react/dialogs): events triggering even when modal is hidden

Browse Source
This commit is contained in:
Elian Doran 2025-08-10 15:11:43 +03:00
parent 48eebbe2fe
commit 11f6462a31
No known key found for this signature in database
2 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/widgets/dialogs/bulk_actions.tsx
View File

@ -46,7 +46,7 @@ function BulkActionComponent() {
row.type === "label" && row.name === "action" && row.noteId === "_bulkAction")) { row.type === "label" && row.name === "action" && row.noteId === "_bulkAction")) {
refreshExistingActions(); refreshExistingActions();
} }
}); }, shown);
} }
return ( return (

22
apps/client/src/widgets/react/hooks.tsx
View File

@ -1,15 +1,23 @@
import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks"; import { useContext, useEffect, useRef } from "preact/hooks";
import { EventData, EventNames } from "../../components/app_context"; import { EventData, EventNames } from "../../components/app_context";
import { ParentComponent } from "./ReactBasicWidget"; import { ParentComponent } from "./ReactBasicWidget";
import SpacedUpdate from "../../services/spaced_update"; import SpacedUpdate from "../../services/spaced_update";
export default function useTriliumEvent<T extends EventNames>(eventName: T, handler: (data: EventData<T>) => void) { /**
* Allows a React component to react to Trilium events (e.g. `entitiesReloaded`). When the desired event is triggered, the handler is invoked with the event parameters.
*
* Under the hood, it works by altering the parent (Trilium) component of the React element to introduce the corresponding event.
*
* @param eventName the name of the Trilium event to listen for.
* @param handler the handler to be invoked when the event is triggered.
* @param enabled determines whether the event should be listened to or not. Useful to conditionally limit the listener based on a state (e.g. a modal being displayed).
*/
export default function useTriliumEvent<T extends EventNames>(eventName: T, handler: (data: EventData<T>) => void, enabled = true) {
const parentWidget = useContext(ParentComponent); const parentWidget = useContext(ParentComponent);
useEffect(() => { useEffect(() => {
if (!parentWidget) { if (!parentWidget || !enabled) {
console.warn("useTriliumEvent: No widget context found");
return; return;
} }
// Create a unique handler name for this specific event listener // Create a unique handler name for this specific event listener
const handlerName = `${eventName}Event`; const handlerName = `${eventName}Event`;
@ -25,11 +33,11 @@ export default function useTriliumEvent<T extends EventNames>(eventName: T, hand
handler(data); handler(data);
}; };
// Cleanup: restore original handler on unmount // Cleanup: restore original handler on unmount or when disabled
return () => { return () => {
parentWidget[handlerName] = originalHandler; parentWidget[handlerName] = originalHandler;
}; };
}, [parentWidget]); }, [parentWidget, enabled, eventName, handler]);
} }
export function useSpacedUpdate(callback: () => Promise<void>, interval = 1000) { export function useSpacedUpdate(callback: () => Promise<void>, interval = 1000) {