Joel Brock
6850ff9dee
Adds a /api/staff/file proxy that re-streams Civi attachments with Content-Disposition: inline so a native <dialog> lightbox can preview images and PDFs in place. Office docs keep their plain download link and gain a "View in Google Docs" secondary link (uses the Civi-signed URL so Google can fetch without our staff key). Also threads mime through /api/staff/report (Attachment.get mime_type) so the dispatcher picks the right affordance without relying solely on filename inference.
124 lines
4.2 KiB
TypeScript
124 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
|
|
/**
|
|
* Modal preview for image and PDF attachments.
|
|
*
|
|
* Uses the native <dialog> element for focus trap, Esc-to-close, and
|
|
* inert-background semantics — saves ~100 lines of bespoke a11y wiring
|
|
* that we'd otherwise have to maintain.
|
|
*
|
|
* For an `image/*` mime, renders an <img>. For `application/pdf`, an
|
|
* <iframe>. Anything else should not reach this component — FileLink is
|
|
* responsible for branching office/other types to plain download links.
|
|
*/
|
|
export function AttachmentLightbox({
|
|
open,
|
|
onClose,
|
|
previewSrc,
|
|
downloadHref,
|
|
filename,
|
|
mime,
|
|
}: {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
/** URL the <img>/<iframe> loads from. Should serve with Content-Disposition: inline. */
|
|
previewSrc: string;
|
|
/** Anchor target for the Download button. Serves with Content-Disposition: attachment. */
|
|
downloadHref: string;
|
|
filename: string;
|
|
/** Resolved mime; used to pick between <img> and <iframe>. */
|
|
mime: string;
|
|
}) {
|
|
const ref = useRef<HTMLDialogElement | null>(null);
|
|
|
|
// Drive the native <dialog>'s open state from our prop.
|
|
useEffect(() => {
|
|
const dlg = ref.current;
|
|
if (!dlg) return;
|
|
if (open && !dlg.open) {
|
|
dlg.showModal();
|
|
} else if (!open && dlg.open) {
|
|
dlg.close();
|
|
}
|
|
}, [open]);
|
|
|
|
// Native <dialog> fires a 'close' event on Esc and on form-method=dialog
|
|
// submit. Mirror that back into React state so the parent stays in sync.
|
|
useEffect(() => {
|
|
const dlg = ref.current;
|
|
if (!dlg) return;
|
|
const handle = () => onClose();
|
|
dlg.addEventListener("close", handle);
|
|
return () => dlg.removeEventListener("close", handle);
|
|
}, [onClose]);
|
|
|
|
// Close when the user clicks the backdrop (everything outside the inner
|
|
// panel). The dialog itself receives the click event when the backdrop
|
|
// is hit because the panel uses pointer-events the same way.
|
|
const onDialogClick = (e: React.MouseEvent<HTMLDialogElement>) => {
|
|
if (e.target === ref.current) onClose();
|
|
};
|
|
|
|
const isImage = mime.startsWith("image/");
|
|
const isPdf = mime === "application/pdf";
|
|
|
|
return (
|
|
<dialog
|
|
ref={ref}
|
|
onClick={onDialogClick}
|
|
aria-label={`Preview: ${filename}`}
|
|
className="m-0 h-full max-h-screen w-full max-w-screen-2xl rounded-none bg-transparent p-0 backdrop:bg-ink/70"
|
|
>
|
|
<div className="flex h-full flex-col">
|
|
<header className="flex items-center justify-between gap-4 bg-paper px-4 py-3 shadow-sm sm:px-6">
|
|
<p className="min-w-0 truncate font-display text-base text-ink">
|
|
{filename}
|
|
</p>
|
|
<div className="flex flex-shrink-0 items-center gap-3">
|
|
<a
|
|
href={downloadHref}
|
|
className="text-sm font-medium text-leaf-700 underline decoration-rule underline-offset-4 hover:decoration-ink hover:text-leaf-800"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Download
|
|
</a>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="rounded px-2 py-1 text-sm font-medium text-ink-soft hover:bg-rule-soft/40 focus:outline-none focus-visible:ring-2 focus-visible:ring-leaf-700"
|
|
aria-label="Close preview"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<div className="flex flex-1 items-center justify-center overflow-hidden bg-ink/90 p-4">
|
|
{isImage ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={previewSrc}
|
|
alt={filename}
|
|
className="max-h-full max-w-full object-contain"
|
|
/>
|
|
) : isPdf ? (
|
|
<iframe
|
|
src={previewSrc}
|
|
title={filename}
|
|
className="h-full w-full max-w-screen-lg border-0 bg-paper"
|
|
/>
|
|
) : (
|
|
// Defensive: FileLink shouldn't open the lightbox for non-previewable
|
|
// types, but if it does, surface a clear message instead of an empty box.
|
|
<p className="px-6 text-paper">
|
|
Preview not available. Use Download above to open the file.
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
);
|
|
}
|