@monolith-forensics/monolith-ui 1.2.50 → 1.2.53

package/dist/FileViewer/FileViewer.d.ts

@@ -1,12 +1,13 @@
 export type File = {
     name: string;
-    ext: string;
-    size: number;
+    ext?: string;
+    size?: number;
     type?: string;
-    url: string;
+    url?: string;
 };
 export declare const FileViewer: React.FC<{
     file: File;
     open: boolean;
+    isPending?: boolean;
     onClose: () => void;
 }>;

package/dist/FileViewer/FileViewer.js

@@ -5,6 +5,7 @@ import { FloatingPortal } from "@floating-ui/react";
 import { DownloadIcon, XIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react";
 import Button from "../Button";
 import { useState } from "react";
+import Loader from "../Loader";
 var ViewerTypes;
 (function (ViewerTypes) {
     ViewerTypes["Office"] = "office";
@@ -151,7 +152,7 @@ const resolveViewerType = (file) => {
     }
     return ViewerTypes.Code;
 };
-export const FileViewer = ({ file, open, onClose }) => {
+export const FileViewer = ({ file, open, isPending, onClose }) => {
     const [zoomFactor, setZoomFactor] = useState(1);
     if (!open)
         return null;
@@ -163,5 +164,12 @@ export const FileViewer = ({ file, open, onClose }) => {
     return (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsxs(StyledContainer, { className: "mfui-FileViewer", children: [_jsxs(StyledMenu, { className: "FileViewer-menu", children: [_jsx(Button, { variant: "text", onClick: () => {
                                 onClose === null || onClose === void 0 ? void 0 : onClose();
                                 setZoomFactor(1);
-                            }, children: _jsx(XIcon, { size: 18 }) }), _jsx("div", { children: file.name }), _jsxs(StyledActionsMenu, { children: [ZoomableViewerTypes.includes(viewerType) && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "text", children: _jsx(ZoomInIcon, { size: 18, onClick: () => setZoomFactor((prev) => prev * 1.1) }) }), _jsx(Button, { variant: "text", children: _jsx(ZoomOutIcon, { size: 18, onClick: () => setZoomFactor((prev) => prev * 0.9) }) })] })), _jsx("a", { href: file.url, download: file.name, children: _jsx(Button, { variant: "text", children: _jsx(DownloadIcon, { size: 18 }) }) })] })] }), _jsxs(StyledInnerContainer, { onClick: handleBackgroundClick, "data-type": viewerType, children: [viewerType === ViewerTypes.PDF && (_jsx(PdfViewer, { file: file, zoomFactor: zoomFactor })), viewerType === ViewerTypes.Image && (_jsx(ImageViewer, { file: file, zoomFactor: zoomFactor })), viewerType === ViewerTypes.Video && (_jsx(VideoViewer, { file: file, zoomFactor: zoomFactor })), viewerType === ViewerTypes.Audio && (_jsx(VideoViewer, { file: file, zoomFactor: zoomFactor })), viewerType === ViewerTypes.Office && _jsx(OfficeViewer, { file: file }), viewerType === ViewerTypes.Text && (_jsx(CodeViewer, { file: file, zoomFactor: zoomFactor })), viewerType === ViewerTypes.Code && (_jsx(CodeViewer, { file: file, zoomFactor: zoomFactor }))] })] }) }));
+                            }, children: _jsx(XIcon, { size: 18 }) }), _jsx("div", { children: file.name }), file.url ? (_jsxs(StyledActionsMenu, { children: [ZoomableViewerTypes.includes(viewerType) && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "text", children: _jsx(ZoomInIcon, { size: 18, onClick: () => setZoomFactor((prev) => prev * 1.1) }) }), _jsx(Button, { variant: "text", children: _jsx(ZoomOutIcon, { size: 18, onClick: () => setZoomFactor((prev) => prev * 0.9) }) })] })), _jsx("a", { href: file.url, download: file.name, children: _jsx(Button, { variant: "text", children: _jsx(DownloadIcon, { size: 18 }) }) })] })) : (_jsx("div", {}) // used as placeholder for spacing and alignment
+                        )] }), file.url ? (_jsxs(StyledInnerContainer, { onClick: handleBackgroundClick, "data-type": viewerType, children: [viewerType === ViewerTypes.PDF && (_jsx(PdfViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending })), viewerType === ViewerTypes.Image && (_jsx(ImageViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending })), viewerType === ViewerTypes.Video && (_jsx(VideoViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending })), viewerType === ViewerTypes.Audio && (_jsx(VideoViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending })), viewerType === ViewerTypes.Office && (_jsx(OfficeViewer, { file: file, isPending: isPending })), viewerType === ViewerTypes.Text && (_jsx(CodeViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending })), viewerType === ViewerTypes.Code && (_jsx(CodeViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending }))] })) : (_jsx(StyledInnerContainer, { children: _jsxs("div", { style: {
+                            margin: "auto",
+                            display: "flex",
+                            gap: "10px",
+                            flexDirection: "column",
+                            alignItems: "center",
+                        }, children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading File..." })] }) }))] }) }));
 };

package/dist/FileViewer/viewers/CodeViewer.d.ts

@@ -2,4 +2,5 @@ import { File } from "../FileViewer";
 export declare const CodeViewer: React.FC<{
     file: File;
     zoomFactor?: number;
+    isPending?: boolean;
 }>;

package/dist/FileViewer/viewers/CodeViewer.js

@@ -27,6 +27,8 @@ const resolveLanguage = (file) => __awaiter(void 0, void 0, void 0, function* ()
     return null;
 });
 const getFileData = (file) => __awaiter(void 0, void 0, void 0, function* () {
+    if (!file.url)
+        return "";
     const response = yield fetch(file.url);
     const text = yield response.text();
     return text;
@@ -62,7 +64,7 @@ const StyledLoader = styled.div `
   align-items: center;
   gap: 10px;
 `;
-export const CodeViewer = ({ file, zoomFactor }) => {
+export const CodeViewer = ({ file, zoomFactor, isPending }) => {
     const [CodeMirror, setCodeMirror] = useState(null);
     const [language, setLanguage] = useState(null);
     const [theme, setTheme] = useState(null);
@@ -93,6 +95,9 @@ export const CodeViewer = ({ file, zoomFactor }) => {
     if (CodeMirror) {
         extensions.push(CodeMirror.EditorView.lineWrapping);
     }
+    if (isPending) {
+        return (_jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading Image..." })] }));
+    }
     return (_jsxs(StyledContainer, { zoomFactor: zoomFactor, children: [loading && (_jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading File..." })] })), !loading && (_jsx(CodeMirror.default, { value: query.data || "", theme: theme, extensions: extensions, readOnly: true, editable: false, onClick: (event) => {
                     event.stopPropagation();
                 } }))] }));

package/dist/FileViewer/viewers/ImageViewer.d.ts

@@ -2,4 +2,5 @@ import { File } from "../FileViewer";
 export declare const ImageViewer: React.FC<{
     file: File;
     zoomFactor?: number;
+    isPending?: boolean;
 }>;

package/dist/FileViewer/viewers/ImageViewer.js

@@ -24,7 +24,7 @@ const StyledLoader = styled.div `
   align-items: center;
   gap: 10px;
 `;
-export const ImageViewer = ({ file, zoomFactor = 1, }) => {
+export const ImageViewer = ({ file, zoomFactor = 1, isPending }) => {
     const [imageLoaded, setImageLoaded] = useState(false);
     const [originalDimensions, setOriginalDimensions] = useState({
         naturalWidth: 0,
@@ -36,6 +36,8 @@ export const ImageViewer = ({ file, zoomFactor = 1, }) => {
         setOriginalDimensions((prev) => (Object.assign(Object.assign({}, prev), { width: e.target.clientWidth, height: e.target.offsetHeight })));
     };
     const loadImage = () => {
+        if (!file.url)
+            return;
         const img = document.createElement("img");
         img.src = file.url;
         img.onload = () => {
@@ -46,6 +48,9 @@ export const ImageViewer = ({ file, zoomFactor = 1, }) => {
     useEffect(() => {
         loadImage();
     }, [file.url]);
+    if (isPending) {
+        return (_jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading Image..." })] }));
+    }
     return (_jsxs(ImageViewerContainer, { className: "mfui-ImageViewer", children: [!imageLoaded && (_jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading Image..." })] })), imageLoaded && (_jsx(Image, { src: file.url, alt: file.name ? file.name : "Image", zoomFactor: zoomFactor, onLoad: handleImageLoad, height: zoomFactor === 1 ? "100%" : originalDimensions.height * zoomFactor, onClick: (e) => {
                     e.stopPropagation();
                 } }))] }));

package/dist/FileViewer/viewers/OfficeViewer.d.ts

@@ -1,4 +1,5 @@
 import { File } from "../FileViewer";
 export declare const OfficeViewer: React.FC<{
     file: File;
+    isPending?: boolean;
 }>;

package/dist/FileViewer/viewers/OfficeViewer.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import Loader from "../../Loader";
 const StyledContainer = styled.div `
@@ -32,6 +32,13 @@ const StyledIframe = styled.iframe `
   height: 100%;
   border: none;
 `;
+const StyledLoader = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+`;
 const resolveOfficeType = (file) => {
     let ext = file.ext;
     if (!ext) {
@@ -54,7 +61,10 @@ const resolveOfficeType = (file) => {
             return null;
     }
 };
-export const OfficeViewer = ({ file }) => {
+export const OfficeViewer = ({ file, isPending }) => {
     const type = resolveOfficeType(file);
+    if (isPending) {
+        return (_jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading Image..." })] }));
+    }
     return (_jsx(StyledContainer, { children: _jsx(StyledInnerContainer, { "data-type": type, children: !(file === null || file === void 0 ? void 0 : file.url) ? (_jsx(Loader, {})) : (_jsx(StyledIframe, { id: "office-iframe", title: "office-iframe", src: `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(file.url)}` })) }) }));
 };

package/dist/FileViewer/viewers/PdfViewer.d.ts

@@ -3,5 +3,6 @@ import "react-pdf/dist/esm/Page/TextLayer.css";
 import { File } from "../FileViewer";
 export declare const PdfViewer: React.FC<{
     file: File;
+    isPending?: boolean;
     zoomFactor?: number;
 }>;

package/dist/FileViewer/viewers/PdfViewer.js

@@ -39,7 +39,7 @@ const StyledLoader = styled.div `
   left: 50%;
   transform: translate(-50%, -50%);
 `;
-export const PdfViewer = ({ file, zoomFactor = 1, }) => {
+export const PdfViewer = ({ file, zoomFactor = 1, isPending }) => {
     const [loading, setLoading] = useState(true);
     const [numPages, setNumPages] = useState();
     const [pageNumber, setPageNumber] = useState(1);
@@ -51,6 +51,9 @@ export const PdfViewer = ({ file, zoomFactor = 1, }) => {
     }
     // viewport width
     const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0) / 1.15;
+    if (isPending) {
+        return (_jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading PDF..." })] }));
+    }
     return (_jsx(StyledContainer, { className: "PdfViewer", children: _jsx(StyledDocument, { file: file.url, onLoadSuccess: onDocumentLoadSuccess, loading: _jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading PDF..." })] }), onClick: (e) => {
                 e.stopPropagation();
             }, children: Array.from(new Array(numPages), (el, index) => (_jsx(StyledPage, { pageNumber: index + 1, scale: zoomFactor, width: vw }, `page_${index + 1}`))) }) }));

package/dist/FileViewer/viewers/PlainTextViewer.js

@@ -12,6 +12,8 @@ import styled from "styled-components";
 import { useState } from "react";
 import Loader from "../../Loader";
 const getFileData = (file) => __awaiter(void 0, void 0, void 0, function* () {
+    if (!file.url)
+        return "";
     const response = yield fetch(file.url);
     const text = yield response.text();
     return text;

package/dist/FileViewer/viewers/VideoViewer.d.ts

@@ -2,4 +2,5 @@ import { File } from "../FileViewer";
 export declare const VideoViewer: React.FC<{
     file: File;
     zoomFactor?: number;
+    isPending?: boolean;
 }>;

package/dist/FileViewer/viewers/VideoViewer.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
+import Loader from "../../Loader";
 const StyledContainer = styled.div `
   display: flex;
   justify-content: center;
@@ -12,7 +13,17 @@ const StyledVideo = styled.video `
   max-height: 100%;
   object-fit: contain;
 `;
-export const VideoViewer = ({ file }) => {
+const StyledLoader = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+`;
+export const VideoViewer = ({ file, isPending }) => {
+    if (isPending) {
+        return (_jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading Image..." })] }));
+    }
     return (_jsx(StyledContainer, { className: "mfui-VideoViewer", children: _jsx(StyledVideo, { src: file.url, controls: true, autoPlay: true, onClick: (e) => {
                 e.stopPropagation();
             } }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.2.50",
+  "version": "1.2.53",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",