gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-14 03:14:24 +01:00
Code Issues Actions 24 Packages Projects Releases Wiki Activity

feat(dialog): support React nodes in info dialog

Browse Source
This commit is contained in:
Elian Doran 2025-12-07 20:39:11 +02:00
parent c600e8ef89
commit 3fc7067c59
No known key found for this signature in database
3 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/client/src/services/dialog.ts
View File

@ -1,6 +1,6 @@
import { Modal } from "bootstrap"; import { Modal } from "bootstrap";
import appContext from "../components/app_context.js"; import appContext from "../components/app_context.js";
import type { ConfirmDialogOptions, ConfirmDialogResult, ConfirmWithMessageOptions } from "../widgets/dialogs/confirm.js"; import type { ConfirmDialogOptions, ConfirmDialogResult, ConfirmWithMessageOptions, MessageType } from "../widgets/dialogs/confirm.js";
import type { PromptDialogOptions } from "../widgets/dialogs/prompt.js"; import type { PromptDialogOptions } from "../widgets/dialogs/prompt.js";
import { focusSavedElement, saveFocusedElement } from "./focus.js"; import { focusSavedElement, saveFocusedElement } from "./focus.js";
@ -37,7 +37,7 @@ export function closeActiveDialog() {
} }
} }
async function info(message: string) { async function info(message: MessageType) {
return new Promise((res) => appContext.triggerCommand("showInfoDialog", { message, callback: res })); return new Promise((res) => appContext.triggerCommand("showInfoDialog", { message, callback: res }));
} }

3
apps/client/src/widgets/dialogs/confirm.tsx
View File

@ -4,6 +4,7 @@ import { t } from "../../services/i18n";
import { useState } from "preact/hooks"; import { useState } from "preact/hooks";
import FormCheckbox from "../react/FormCheckbox"; import FormCheckbox from "../react/FormCheckbox";
import { useTriliumEvent } from "../react/hooks"; import { useTriliumEvent } from "../react/hooks";
import type { VNode } from "preact";
interface ConfirmDialogProps { interface ConfirmDialogProps {
title?: string; title?: string;
@ -74,7 +75,7 @@ export default function ConfirmDialog() {
export type ConfirmDialogResult = false | ConfirmDialogOptions; export type ConfirmDialogResult = false | ConfirmDialogOptions;
export type ConfirmDialogCallback = (val?: ConfirmDialogResult) => void; export type ConfirmDialogCallback = (val?: ConfirmDialogResult) => void;
type MessageType = string | HTMLElement | JQuery<HTMLElement>; export type MessageType = string | HTMLElement | JQuery<HTMLElement> | VNode;
export interface ConfirmDialogOptions { export interface ConfirmDialogOptions {
confirmed: boolean; confirmed: boolean;

7
apps/client/src/widgets/dialogs/info.tsx
View File

@ -5,6 +5,7 @@ import Button from "../react/Button";
import { useRef, useState } from "preact/hooks"; import { useRef, useState } from "preact/hooks";
import { RawHtmlBlock } from "../react/RawHtml"; import { RawHtmlBlock } from "../react/RawHtml";
import { useTriliumEvent } from "../react/hooks"; import { useTriliumEvent } from "../react/hooks";
import { isValidElement } from "preact";
export default function InfoDialog() { export default function InfoDialog() {
const [ opts, setOpts ] = useState<EventData<"showInfoDialog">>(); const [ opts, setOpts ] = useState<EventData<"showInfoDialog">>();
@ -32,7 +33,11 @@ export default function InfoDialog() {
/>} />}
show={shown} show={shown}
stackable stackable
scrollable
> >
<RawHtmlBlock className="info-dialog-content" html={opts?.message ?? ""} /> {isValidElement(opts?.message)
? opts?.message
: <RawHtmlBlock className="info-dialog-content" html={opts?.message ?? ""} />
}
</Modal>); </Modal>);
} }