Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-29 19:12:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(client/ts): port widgets/dialogs/prompt

Browse Source
This commit is contained in:
Elian Doran 2024-12-21 17:12:16 +02:00
parent 7fc4443206
commit e54e8fdef8
No known key found for this signature in database
2 changed files with 37 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/public/app/components/app_context.ts
View File

@ -16,6 +16,7 @@ import ShortcutComponent from "./shortcut_component.js";
import { t, initLocale } from "../services/i18n.js"; import { t, initLocale } from "../services/i18n.js";
import NoteDetailWidget from "../widgets/note_detail.js"; import NoteDetailWidget from "../widgets/note_detail.js";
import { ResolveOptions } from "../widgets/dialogs/delete_notes.js"; import { ResolveOptions } from "../widgets/dialogs/delete_notes.js";
import { PromptDialogOptions } from "../widgets/dialogs/prompt.js";
interface Layout { interface Layout {
getRootWidget: (appContext: AppContext) => RootWidget; getRootWidget: (appContext: AppContext) => RootWidget;
@ -49,7 +50,7 @@ export type TriggerData = {
branchIdsToDelete: string[]; branchIdsToDelete: string[];
callback: (value: ResolveOptions) => void; callback: (value: ResolveOptions) => void;
forceDeleteAllClones: boolean; forceDeleteAllClones: boolean;
} } | PromptDialogOptions; // For "showPromptDialog"
class AppContext extends Component { class AppContext extends Component {

39
src/public/app/widgets/dialogs/prompt.js → src/public/app/widgets/dialogs/prompt.ts
View File

@ -20,7 +20,34 @@ const TPL = `
</div> </div>
</div>`; </div>`;
interface ShownCallbackData {
$dialog: JQuery<HTMLElement>;
$question: JQuery<HTMLElement> | null;
$answer: JQuery<HTMLElement> | null;
$form: JQuery<HTMLElement>;
}
export interface PromptDialogOptions {
title?: string;
message?: string;
defaultValue?: string;
shown: PromptShownDialogCallback;
callback: () => void;
}
export type PromptShownDialogCallback = ((callback: ShownCallbackData) => void) | null;
export default class PromptDialog extends BasicWidget { export default class PromptDialog extends BasicWidget {
private resolve: ((val: string | null) => void) | null;
private shownCb: PromptShownDialogCallback;
private modal!: bootstrap.Modal;
private $dialogBody!: JQuery<HTMLElement>;
private $question!: JQuery<HTMLElement> | null;
private $answer!: JQuery<HTMLElement> | null;
private $form!: JQuery<HTMLElement>;
constructor() { constructor() {
super(); super();
@ -30,6 +57,8 @@ export default class PromptDialog extends BasicWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
// TODO: Fix once we use proper ES imports.
//@ts-ignore
this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget); this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget);
this.$dialogBody = this.$widget.find(".modal-body"); this.$dialogBody = this.$widget.find(".modal-body");
this.$form = this.$widget.find(".prompt-dialog-form"); this.$form = this.$widget.find(".prompt-dialog-form");
@ -46,7 +75,7 @@ export default class PromptDialog extends BasicWidget {
}); });
} }
this.$answer.trigger('focus').select(); this.$answer?.trigger('focus').select();
}); });
this.$widget.on("hidden.bs.modal", () => { this.$widget.on("hidden.bs.modal", () => {
@ -57,13 +86,15 @@ export default class PromptDialog extends BasicWidget {
this.$form.on('submit', e => { this.$form.on('submit', e => {
e.preventDefault(); e.preventDefault();
this.resolve(this.$answer.val()); if (this.resolve) {
this.resolve(this.$answer?.val() as string);
}
this.modal.hide(); this.modal.hide();
}); });
} }
showPromptDialogEvent({ title, message, defaultValue, shown, callback }) { showPromptDialogEvent({ title, message, defaultValue, shown, callback }: PromptDialogOptions) {
this.shownCb = shown; this.shownCb = shown;
this.resolve = callback; this.resolve = callback;
@ -71,7 +102,7 @@ export default class PromptDialog extends BasicWidget {
this.$question = $("<label>") this.$question = $("<label>")
.prop("for", "prompt-dialog-answer") .prop("for", "prompt-dialog-answer")
.text(message); .text(message || "");
this.$answer = $("<input>") this.$answer = $("<input>")
.prop("type", "text") .prop("type", "text")