26 lines
1.6 KiB
TypeScript
26 lines
1.6 KiB
TypeScript
import { useEffect, useRef } from "react";
|
||
import { ErrorBoundary } from "../shell/ErrorBoundary.tsx";
|
||
import { IssueCard } from "./IssueCard.tsx";
|
||
|
||
// окно карточки (design 13): <dialog> держит фокус и делает фон недоступным; Esc и щелчок по фону — onClose.
|
||
// Сами окно не закрываем: оно исчезает вместе с адресом карточки. Если браузер закрыл его сам (Esc без активации
|
||
// пользователя — cancel не отменяемый), открываем снова и просим закрытия по общему пути (блокировщик заметок).
|
||
export function IssueModal({ issueKey, onClose }: { issueKey: string; onClose: () => void }) {
|
||
const ref = useRef<HTMLDialogElement>(null);
|
||
useEffect(() => {
|
||
const d = ref.current;
|
||
if (d && !d.open) d.showModal();
|
||
const prev = document.body.style.overflow;
|
||
document.body.style.overflow = "hidden"; // страница под окном не прокручивается
|
||
return () => { document.body.style.overflow = prev; };
|
||
}, []);
|
||
return (
|
||
<dialog ref={ref} className="issue-modal" aria-labelledby="issue-modal-title"
|
||
onCancel={(e) => { if (e.cancelable) { e.preventDefault(); onClose(); } }}
|
||
onClose={() => { const d = ref.current; if (d?.isConnected) { d.showModal(); onClose(); } }}
|
||
onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
|
||
<ErrorBoundary key={issueKey}><IssueCard issueKey={issueKey} onClose={onClose} /></ErrorBoundary>
|
||
</dialog>
|
||
);
|
||
}
|