gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-11 18:04:24 +01:00
Code Issues Actions 8 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 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 { 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 }));
}

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

@ -4,12 +4,13 @@ import { t } from "../../services/i18n";
import { useState } from "preact/hooks";
import FormCheckbox from "../react/FormCheckbox";
import { useTriliumEvent } from "../react/hooks";
import type { VNode } from "preact";
interface ConfirmDialogProps {
title?: string;
message?: string | HTMLElement;
callback?: ConfirmDialogCallback;
isConfirmDeleteNoteBox?: boolean;
isConfirmDeleteNoteBox?: boolean;
}
export default function ConfirmDialog() {
@ -30,7 +31,7 @@ export default function ConfirmDialog() {
useTriliumEvent("showConfirmDialog", ({ message, callback }) => showDialog(null, message, callback, false));
useTriliumEvent("showConfirmDeleteNoteBoxWithNoteDialog", ({ title, callback }) => showDialog(title, t("confirm.are_you_sure_remove_note", { title: title }), callback, true));
return (
return (
<Modal
className="confirm-dialog"
title={opts?.title ?? t("confirm.confirmation")}
@ -74,7 +75,7 @@ export default function ConfirmDialog() {
export type ConfirmDialogResult = false | ConfirmDialogOptions;
export type ConfirmDialogCallback = (val?: ConfirmDialogResult) => void;
type MessageType = string | HTMLElement | JQuery<HTMLElement>;
export type MessageType = string | HTMLElement | JQuery<HTMLElement> | VNode;
export interface ConfirmDialogOptions {
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 { RawHtmlBlock } from "../react/RawHtml";
import { useTriliumEvent } from "../react/hooks";
import { isValidElement } from "preact";
export default function InfoDialog() {
const [ opts, setOpts ] = useState<EventData<"showInfoDialog">>();
@ -32,7 +33,11 @@ export default function InfoDialog() {
/>}
show={shown}
stackable
scrollable
>
<RawHtmlBlock className="info-dialog-content" html={opts?.message ?? ""} />
{isValidElement(opts?.message)
? opts?.message
: <RawHtmlBlock className="info-dialog-content" html={opts?.message ?? ""} />
}
</Modal>);
}