gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
apps/client/src/widgets/dialogs/branch_prefix.tsx
View File

@ -1,6 +1,6 @@
import { useRef, useState } from "preact/hooks";
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 server from "../../services/server.js";
import toast from "../../services/toast.js";
@ -8,56 +8,18 @@ import Modal from "../react/Modal.jsx";
import ReactBasicWidget from "../react/ReactBasicWidget.js";
import froca from "../../services/froca.js";
import tree from "../../services/tree.js";
import FBranch from "../../entities/fbranch.js";
import Button from "../react/Button.jsx";
import FormGroup from "../react/FormGroup.js";
import useTriliumEvent from "../react/hooks.jsx";
import FBranch from "../../entities/fbranch.js";
interface BranchPrefixDialogProps {
branch?: FBranch;
}
function BranchPrefixDialogComponent({ branch }: BranchPrefixDialogProps) {
function BranchPrefixDialogComponent() {
const [ shown, setShown ] = useState(false);
const [ branch, setBranch ] = useState<FBranch>();
const [ prefix, setPrefix ] = useState(branch?.prefix ?? "");
const branchInput = useRef<HTMLInputElement>(null);
async function onSubmit() {
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() {
useTriliumEvent("editBranchPrefix", async () => {
const notePath = appContext.tabManager.getActiveContextNotePath();
if (!notePath) {
return;
@ -78,11 +40,46 @@ export default class BranchPrefixDialog extends ReactBasicWidget {
return;
}
this.branch = froca.getBranch(newBranchId);
setBranch(froca.getBranch(newBranchId));
setShown(true);
});
// Re-render the component with the new notePath
this.doRender();
openDialog(this.$widget);
async function onSubmit() {
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()}
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 />;
}
}

14
apps/client/src/widgets/react/Modal.tsx
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 { ComponentChildren } from "preact";
import type { CSSProperties, RefObject } from "preact/compat";
import { openDialog } from "../../services/dialog";
import { ParentComponent } from "./ReactBasicWidget";
interface ModalProps {
className: string;
@ -45,11 +47,13 @@ interface ModalProps {
*/
formRef?: RefObject<HTMLFormElement>;
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 formRef = _formRef ?? useRef<HTMLFormElement>(null);
const parentWidget = useContext(ParentComponent);
if (onShown || onHidden) {
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 = {};
if (zIndex) {
dialogStyle.zIndex = zIndex;