feat(react/dialogs): port prompt

2025-11-16 10:15:52 +01:00 · 2025-08-05 19:06:47 +03:00
parent b3c81ce5f2
commit bde4545afc
12 changed files with 117 additions and 132 deletions
--- a/apps/client/src/widgets/dialogs/prompt.tsx
+++ b/apps/client/src/widgets/dialogs/prompt.tsx
@@ -0,0 +1,87 @@
+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";
+import { Modal as BootstrapModal } from "bootstrap";
+import ReactBasicWidget from "../react/ReactBasicWidget";
+import FormTextBox from "../react/FormTextBox";
+import FormGroup from "../react/FormGroup";
+
+// JQuery here is maintained for compatibility with existing code.
+interface ShownCallbackData {
+    $dialog: JQuery<HTMLDivElement>;
+    $question: JQuery<HTMLLabelElement> | null;
+    $answer: JQuery<HTMLElement> | null;
+    $form: JQuery<HTMLFormElement>;
+}
+
+export type PromptShownDialogCallback = ((callback: ShownCallbackData) => void) | null;
+
+export interface PromptDialogOptions {
+    title?: string;
+    message?: string;
+    defaultValue?: string;
+    shown?: PromptShownDialogCallback;
+    callback?: (value: string | null) => void;
+}
+
+interface PromptDialogProps extends PromptDialogOptions { }
+
+function PromptDialogComponent({ title, message, shown: shownCallback, callback }: PromptDialogProps) {
+    const modalRef = useRef<HTMLDivElement>(null);
+    const formRef = useRef<HTMLFormElement>(null);
+    const labelRef = useRef<HTMLLabelElement>(null);
+    const answerRef = useRef<HTMLInputElement>(null);
+    const [ value, setValue ] = useState("");    
+
+    return (
+        <Modal
+            className="prompt-dialog"
+            title={title ?? t("prompt.title")}
+            size="lg"
+            zIndex={2000}
+            modalRef={modalRef} formRef={formRef}            
+            onShown={() => {
+                shownCallback?.({
+                    $dialog: $(modalRef.current),
+                    $question: $(labelRef.current),
+                    $answer: $(answerRef.current),
+                    $form: $(formRef.current) as JQuery<HTMLFormElement>
+                });
+                answerRef.current?.focus();
+            }}
+            onSubmit={() => {
+                const modal = BootstrapModal.getOrCreateInstance(modalRef.current!);
+                modal.hide();
+
+                callback?.(value);
+            }}
+            onHidden={() => callback?.(null)}
+            footer={<Button text={t("prompt.ok")} keyboardShortcut="Enter" primary />}
+        >
+            <FormGroup label={message} labelRef={labelRef}>
+                <FormTextBox
+                    name="prompt-dialog-answer"
+                    inputRef={answerRef}
+                    currentValue={value} onChange={setValue} />
+            </FormGroup>
+        </Modal>
+    );
+}
+
+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);
+    }
+
+}