mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-27 20:10:56 +00:00
0ab553bf48
- Implemented a shared file viewer modal using `useFileViewer` hook to allow inline viewing of documents (images, PDFs, videos, etc.) across the application. - Updated `ContractClearanceReviewSection`, `ContractRequestDetailPage`, `ContractViewPage`, and booking-related components to utilize the new file viewer for document previews. - Added "Approve all" button in `ContractClearanceReviewSection` to bulk approve documents. - Enhanced document action buttons to include view and download options based on file type. - Introduced `isViewable` utility to determine if a file can be previewed inline. - Created `FileViewer` component to handle rendering of various file types and added appropriate fallback for unsupported formats.
25 lines
826 B
TypeScript
25 lines
826 B
TypeScript
import { useCallback, useState } from "react";
|
|
import { FileViewerModal, type ViewableFile } from "@edr/ui-common";
|
|
|
|
/**
|
|
* Drives a single shared {@link FileViewerModal} for a page. Call `view(file)`
|
|
* from any file row to open the document inline (pdf / image / video / office /
|
|
* text); render `viewer` once near the page root.
|
|
*
|
|
* const { view, viewer } = useFileViewer();
|
|
* <Button onClick={() => view({ name, url, mimeType })}>View</Button>
|
|
* {viewer}
|
|
*/
|
|
export function useFileViewer() {
|
|
const [file, setFile] = useState<ViewableFile | null>(null);
|
|
|
|
const view = useCallback((f: ViewableFile) => setFile(f), []);
|
|
const close = useCallback(() => setFile(null), []);
|
|
|
|
const viewer = (
|
|
<FileViewerModal open={file !== null} file={file} onClose={close} />
|
|
);
|
|
|
|
return { view, close, viewer };
|
|
}
|