fix(react/dialogs): unable to chain prompts

This commit is contained in:
Elian Doran 2025-08-15 12:33:23 +03:00
parent 54d613e00e
commit 1dbcb5a027
No known key found for this signature in database

View File

@ -32,25 +32,26 @@ function PromptDialogComponent() {
const formRef = useRef<HTMLFormElement>(null); const formRef = useRef<HTMLFormElement>(null);
const labelRef = useRef<HTMLLabelElement>(null); const labelRef = useRef<HTMLLabelElement>(null);
const answerRef = useRef<HTMLInputElement>(null); const answerRef = useRef<HTMLInputElement>(null);
const [ opts, setOpts ] = useState<PromptDialogOptions>(); const opts = useRef<PromptDialogOptions>();
const [ value, setValue ] = useState(""); const [ value, setValue ] = useState("");
const [ shown, setShown ] = useState(false); const [ shown, setShown ] = useState(false);
const submitValue = useRef<string>(null);
useTriliumEvent("showPromptDialog", (opts) => { useTriliumEvent("showPromptDialog", (newOpts) => {
setOpts(opts); opts.current = newOpts;
setValue(newOpts.defaultValue ?? "");
setShown(true); setShown(true);
setValue(opts.defaultValue ?? "");
}) })
return ( return (
<Modal <Modal
className="prompt-dialog" className="prompt-dialog"
title={opts?.title ?? t("prompt.title")} title={opts.current?.title ?? t("prompt.title")}
size="lg" size="lg"
zIndex={2000} zIndex={2000}
modalRef={modalRef} formRef={formRef} modalRef={modalRef} formRef={formRef}
onShown={() => { onShown={() => {
opts?.shown?.({ opts.current?.shown?.({
$dialog: refToJQuerySelector(modalRef), $dialog: refToJQuerySelector(modalRef),
$question: refToJQuerySelector(labelRef), $question: refToJQuerySelector(labelRef),
$answer: refToJQuerySelector(answerRef), $answer: refToJQuerySelector(answerRef),
@ -59,20 +60,20 @@ function PromptDialogComponent() {
answerRef.current?.focus(); answerRef.current?.focus();
}} }}
onSubmit={() => { onSubmit={() => {
const modal = BootstrapModal.getOrCreateInstance(modalRef.current!); submitValue.current = value;
modal.hide(); setShown(false);
opts?.callback?.(value);
}} }}
onHidden={() => { onHidden={() => {
opts?.callback?.(null);
setShown(false); setShown(false);
opts.current?.callback?.(submitValue.current);
submitValue.current = null;
opts.current = undefined;
}} }}
footer={<Button text={t("prompt.ok")} keyboardShortcut="Enter" primary />} footer={<Button text={t("prompt.ok")} keyboardShortcut="Enter" primary />}
show={shown} show={shown}
stackable stackable
> >
<FormGroup label={opts?.message} labelRef={labelRef}> <FormGroup label={opts.current?.message} labelRef={labelRef}>
<FormTextBox <FormTextBox
name="prompt-dialog-answer" name="prompt-dialog-answer"
inputRef={answerRef} inputRef={answerRef}