mirror of
				https://github.com/TriliumNext/Notes.git
				synced 2025-10-31 13:01:31 +08:00 
			
		
		
		
	chore(client/ts): port widgets/dialogs/prompt
This commit is contained in:
		
							parent
							
								
									7fc4443206
								
							
						
					
					
						commit
						e54e8fdef8
					
				| @ -16,6 +16,7 @@ import ShortcutComponent from "./shortcut_component.js"; | ||||
| import { t, initLocale } from "../services/i18n.js"; | ||||
| import NoteDetailWidget from "../widgets/note_detail.js"; | ||||
| import { ResolveOptions } from "../widgets/dialogs/delete_notes.js"; | ||||
| import { PromptDialogOptions } from "../widgets/dialogs/prompt.js"; | ||||
| 
 | ||||
| interface Layout { | ||||
|     getRootWidget: (appContext: AppContext) => RootWidget; | ||||
| @ -49,7 +50,7 @@ export type TriggerData = { | ||||
|     branchIdsToDelete: string[]; | ||||
|     callback: (value: ResolveOptions) => void; | ||||
|     forceDeleteAllClones: boolean; | ||||
| } | ||||
| } | PromptDialogOptions;    // For "showPromptDialog"
 | ||||
| 
 | ||||
| class AppContext extends Component { | ||||
| 
 | ||||
|  | ||||
| @ -20,7 +20,34 @@ const TPL = ` | ||||
|     </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 { | ||||
| 
 | ||||
|     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() { | ||||
|         super(); | ||||
| 
 | ||||
| @ -30,6 +57,8 @@ export default class PromptDialog extends BasicWidget { | ||||
| 
 | ||||
|     doRender() { | ||||
|         this.$widget = $(TPL); | ||||
|         // TODO: Fix once we use proper ES imports.
 | ||||
|         //@ts-ignore
 | ||||
|         this.modal = bootstrap.Modal.getOrCreateInstance(this.$widget); | ||||
|         this.$dialogBody = this.$widget.find(".modal-body"); | ||||
|         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", () => { | ||||
| @ -57,13 +86,15 @@ export default class PromptDialog extends BasicWidget { | ||||
| 
 | ||||
|         this.$form.on('submit', e => { | ||||
|             e.preventDefault(); | ||||
|             this.resolve(this.$answer.val()); | ||||
|             if (this.resolve) { | ||||
|                 this.resolve(this.$answer?.val() as string); | ||||
|             } | ||||
| 
 | ||||
|             this.modal.hide(); | ||||
|         }); | ||||
|     } | ||||
| 
 | ||||
|     showPromptDialogEvent({ title, message, defaultValue, shown, callback }) { | ||||
|     showPromptDialogEvent({ title, message, defaultValue, shown, callback }: PromptDialogOptions) { | ||||
|         this.shownCb = shown; | ||||
|         this.resolve = callback; | ||||
| 
 | ||||
| @ -71,7 +102,7 @@ export default class PromptDialog extends BasicWidget { | ||||
| 
 | ||||
|         this.$question = $("<label>") | ||||
|             .prop("for", "prompt-dialog-answer") | ||||
|             .text(message); | ||||
|             .text(message || ""); | ||||
| 
 | ||||
|         this.$answer = $("<input>") | ||||
|             .prop("type", "text") | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user
	 Elian Doran
						Elian Doran