Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-26 07:46:30 +01:00
Code Issues Packages Projects Releases Activity

refactor(react/dialogs): allow modals in sub-components

Browse Source
This commit is contained in:
Elian Doran
2025-08-27 19:35:47 +03:00
parent 1e1c8cc4ff
commit 3627a7dc93
1 changed files with 4 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/client/src/widgets/react/Modal.tsx
View File

@@ -1,9 +1,8 @@
import { useContext, useEffect, useRef, useMemo } from "preact/hooks";
import { useEffect, useRef, useMemo } 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 "./react_utils";
import { Modal as BootstrapModal } from "bootstrap";
import { memo } from "preact/compat";
import { useSyncedRef } from "./hooks";
@@ -68,7 +67,6 @@ interface ModalProps {
export default function Modal({ children, className, size, title, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden: onHidden, modalRef: externalModalRef, formRef, bodyStyle, show, stackable }: ModalProps) {
const modalRef = useSyncedRef<HTMLDivElement>(externalModalRef);
const modalInstanceRef = useRef<BootstrapModal>();
const parentWidget = useContext(ParentComponent);
const elementToFocus = useRef<Element | null>();
useEffect(() => {
@@ -94,18 +92,15 @@ export default function Modal({ children, className, size, title, header, footer
}, [ onShown, onHidden ]);
useEffect(() => {
if (!parentWidget) {
return;
}
if (show) {
if (show && modalRef.current) {
elementToFocus.current = document.activeElement;
openDialog(parentWidget.$widget, !stackable).then(($widget) => {
openDialog($(modalRef.current), !stackable).then(($widget) => {
modalInstanceRef.current = BootstrapModal.getOrCreateInstance($widget[0]);
})
} else {
modalInstanceRef.current?.hide();
}
}, [ show ]);
}, [ show, modalRef.current ]);
// Memoize styles to prevent recreation on every render
const dialogStyle = useMemo<CSSProperties>(() => {