refactor(react/dialogs): use shown everywhere

apps/client/src/widgets/dialogs/prompt.tsx

@@ -1,5 +1,4 @@
 import { useRef, useState } from "preact/hooks";
-import { closeActiveDialog, openDialog } from "../../services/dialog";
 import { t } from "../../services/i18n";
 import Button from "../react/Button";
 import Modal from "../react/Modal";
@@ -8,6 +7,7 @@ import ReactBasicWidget from "../react/ReactBasicWidget";
 import FormTextBox from "../react/FormTextBox";
 import FormGroup from "../react/FormGroup";
 import { refToJQuerySelector } from "../react/react_utils";
+import useTriliumEvent from "../react/hooks";
 
 // JQuery here is maintained for compatibility with existing code.
 interface ShownCallbackData {
@@ -27,24 +27,29 @@ export interface PromptDialogOptions {
     callback?: (value: string | null) => void;
 }
 
-interface PromptDialogProps extends PromptDialogOptions { }
-
-function PromptDialogComponent({ title, message, shown: shownCallback, callback }: PromptDialogProps) {
+function PromptDialogComponent() {    
     const modalRef = useRef<HTMLDivElement>(null);
     const formRef = useRef<HTMLFormElement>(null);
     const labelRef = useRef<HTMLLabelElement>(null);
     const answerRef = useRef<HTMLInputElement>(null);
+    const [ opts, setOpts ] = useState<PromptDialogOptions>();
     const [ value, setValue ] = useState("");    
+    const [ shown, setShown ] = useState(false);
+    
+    useTriliumEvent("showPromptDialog", (opts) => {
+        setOpts(opts);
+        setShown(true);
+    })
 
     return (
         <Modal
             className="prompt-dialog"
-            title={title ?? t("prompt.title")}
+            title={opts?.title ?? t("prompt.title")}
             size="lg"
             zIndex={2000}
             modalRef={modalRef} formRef={formRef}            
             onShown={() => {
-                shownCallback?.({
+                opts?.shown?.({
                     $dialog: refToJQuerySelector(modalRef),
                     $question: refToJQuerySelector(labelRef),
                     $answer: refToJQuerySelector(answerRef),
@@ -56,12 +61,16 @@ function PromptDialogComponent({ title, message, shown: shownCallback, callback
                 const modal = BootstrapModal.getOrCreateInstance(modalRef.current!);
                 modal.hide();
 
-                callback?.(value);
+                opts?.callback?.(value);
+            }}
+            onHidden={() => {
+                opts?.callback?.(null);
+                setShown(false);
             }}
-            onHidden={() => callback?.(null)}
             footer={<Button text={t("prompt.ok")} keyboardShortcut="Enter" primary />}
+            show={shown}
         >
-            <FormGroup label={message} labelRef={labelRef}>
+            <FormGroup label={opts?.message} labelRef={labelRef}>
                 <FormTextBox
                     name="prompt-dialog-answer"
                     inputRef={answerRef}
@@ -73,16 +82,8 @@ function PromptDialogComponent({ title, message, shown: shownCallback, callback
 
 export default class PromptDialog extends ReactBasicWidget {
 
-    private props: PromptDialogProps = {};
-
     get component() {
-        return <PromptDialogComponent {...this.props} />;
-    }
-
-    showPromptDialogEvent(props: PromptDialogOptions) {
-        this.props = props;
-        this.doRender();
-        openDialog(this.$widget, false);
+        return <PromptDialogComponent />;
     }
 
 }