refactor(react/bulk_actions): set up way to self-enable modal

This commit is contained in:
Elian Doran 2025-08-09 23:12:27 +03:00
parent 899f85f4e7
commit cd5467bf5c
No known key found for this signature in database
2 changed files with 58 additions and 51 deletions

View File

@ -1,6 +1,6 @@
import { useRef, useState } from "preact/hooks"; import { useRef, useState } from "preact/hooks";
import appContext from "../../components/app_context.js"; import appContext from "../../components/app_context.js";
import { closeActiveDialog, openDialog } from "../../services/dialog.js"; import { closeActiveDialog } from "../../services/dialog.js";
import { t } from "../../services/i18n.js"; import { t } from "../../services/i18n.js";
import server from "../../services/server.js"; import server from "../../services/server.js";
import toast from "../../services/toast.js"; import toast from "../../services/toast.js";
@ -8,56 +8,18 @@ import Modal from "../react/Modal.jsx";
import ReactBasicWidget from "../react/ReactBasicWidget.js"; import ReactBasicWidget from "../react/ReactBasicWidget.js";
import froca from "../../services/froca.js"; import froca from "../../services/froca.js";
import tree from "../../services/tree.js"; import tree from "../../services/tree.js";
import FBranch from "../../entities/fbranch.js";
import Button from "../react/Button.jsx"; import Button from "../react/Button.jsx";
import FormGroup from "../react/FormGroup.js"; import FormGroup from "../react/FormGroup.js";
import useTriliumEvent from "../react/hooks.jsx";
import FBranch from "../../entities/fbranch.js";
interface BranchPrefixDialogProps { function BranchPrefixDialogComponent() {
branch?: FBranch; const [ shown, setShown ] = useState(false);
} const [ branch, setBranch ] = useState<FBranch>();
function BranchPrefixDialogComponent({ branch }: BranchPrefixDialogProps) {
const [ prefix, setPrefix ] = useState(branch?.prefix ?? ""); const [ prefix, setPrefix ] = useState(branch?.prefix ?? "");
const branchInput = useRef<HTMLInputElement>(null); const branchInput = useRef<HTMLInputElement>(null);
async function onSubmit() { useTriliumEvent("editBranchPrefix", async () => {
if (!branch) {
return;
}
savePrefix(branch.branchId, prefix);
closeActiveDialog();
}
return (
<Modal
className="branch-prefix-dialog"
title={t("branch_prefix.edit_branch_prefix")}
size="lg"
onShown={() => branchInput.current?.focus()}
onSubmit={onSubmit}
helpPageId="TBwsyfadTA18"
footer={<Button text={t("branch_prefix.save")} />}
>
<FormGroup label={t("branch_prefix.prefix")}>
<div class="input-group">
<input class="branch-prefix-input form-control" value={prefix} ref={branchInput}
onChange={(e) => setPrefix((e.target as HTMLInputElement).value)} />
<div class="branch-prefix-note-title input-group-text"> - {branch && branch.getNoteFromCache().title}</div>
</div>
</FormGroup>
</Modal>
);
}
export default class BranchPrefixDialog extends ReactBasicWidget {
private branch?: FBranch;
get component() {
return <BranchPrefixDialogComponent branch={this.branch} />;
}
async editBranchPrefixEvent() {
const notePath = appContext.tabManager.getActiveContextNotePath(); const notePath = appContext.tabManager.getActiveContextNotePath();
if (!notePath) { if (!notePath) {
return; return;
@ -78,11 +40,46 @@ export default class BranchPrefixDialog extends ReactBasicWidget {
return; return;
} }
this.branch = froca.getBranch(newBranchId); setBranch(froca.getBranch(newBranchId));
setShown(true);
});
// Re-render the component with the new notePath async function onSubmit() {
this.doRender(); if (!branch) {
openDialog(this.$widget); return;
}
savePrefix(branch.branchId, prefix);
closeActiveDialog();
}
return (
<Modal
className="branch-prefix-dialog"
title={t("branch_prefix.edit_branch_prefix")}
size="lg"
onShown={() => branchInput.current?.focus()}
onHidden={() => setShown(false)}
onSubmit={onSubmit}
helpPageId="TBwsyfadTA18"
footer={<Button text={t("branch_prefix.save")} />}
show={shown}
>
<FormGroup label={t("branch_prefix.prefix")}>
<div class="input-group">
<input class="branch-prefix-input form-control" value={prefix} ref={branchInput}
onChange={(e) => setPrefix((e.target as HTMLInputElement).value)} />
<div class="branch-prefix-note-title input-group-text"> - {branch && branch.getNoteFromCache().title}</div>
</div>
</FormGroup>
</Modal>
);
}
export default class BranchPrefixDialog extends ReactBasicWidget {
get component() {
return <BranchPrefixDialogComponent />;
} }
} }

View File

@ -1,7 +1,9 @@
import { useEffect, useRef } from "preact/hooks"; import { useContext, useEffect, useRef } from "preact/hooks";
import { t } from "../../services/i18n"; import { t } from "../../services/i18n";
import { ComponentChildren } from "preact"; import { ComponentChildren } from "preact";
import type { CSSProperties, RefObject } from "preact/compat"; import type { CSSProperties, RefObject } from "preact/compat";
import { openDialog } from "../../services/dialog";
import { ParentComponent } from "./ReactBasicWidget";
interface ModalProps { interface ModalProps {
className: string; className: string;
@ -45,11 +47,13 @@ interface ModalProps {
*/ */
formRef?: RefObject<HTMLFormElement>; formRef?: RefObject<HTMLFormElement>;
bodyStyle?: CSSProperties; bodyStyle?: CSSProperties;
show?: boolean;
} }
export default function Modal({ children, className, size, title, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden: onHidden, modalRef: _modalRef, formRef: _formRef, bodyStyle }: ModalProps) { export default function Modal({ children, className, size, title, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden: onHidden, modalRef: _modalRef, formRef: _formRef, bodyStyle, show }: ModalProps) {
const modalRef = _modalRef ?? useRef<HTMLDivElement>(null); const modalRef = _modalRef ?? useRef<HTMLDivElement>(null);
const formRef = _formRef ?? useRef<HTMLFormElement>(null); const formRef = _formRef ?? useRef<HTMLFormElement>(null);
const parentWidget = useContext(ParentComponent);
if (onShown || onHidden) { if (onShown || onHidden) {
useEffect(() => { useEffect(() => {
@ -74,6 +78,12 @@ export default function Modal({ children, className, size, title, header, footer
}, [ ]); }, [ ]);
} }
useEffect(() => {
if (show && parentWidget) {
openDialog(parentWidget.$widget);
}
}, [ show ]);
const dialogStyle: CSSProperties = {}; const dialogStyle: CSSProperties = {};
if (zIndex) { if (zIndex) {
dialogStyle.zIndex = zIndex; dialogStyle.zIndex = zIndex;