feat(doc-viewer): add default text viewer and image viewer

Author: gjulivan

packages/pluggableWidgets/document-viewer-web/components/ErrorViewer.tsx

@@ -1,6 +1,5 @@
 import { createElement, useCallback } from "react";
 import { DocRendererElement, DocumentRendererProps } from "./documentRenderer";
-import { DocumentViewerContainerProps } from "../typings/DocumentViewerProps";
 import BaseViewer from "./BaseViewer";
 import { downloadFile } from "../utils/helpers";
 

packages/pluggableWidgets/document-viewer-web/components/ImageViewer.tsx

@@ -0,0 +1,19 @@
+import { createElement } from "react";
+import { BaseControlViewer } from "./BaseViewer";
+import { DocRendererElement, DocumentRendererProps } from "./documentRenderer";
+
+const ImageViewer: DocRendererElement = (props: DocumentRendererProps) => {
+    const { file } = props;
+
+    return (
+        <BaseControlViewer {...props} file={file}>
+            <img src={file.value?.uri} alt="Image" className="image-viewer-content" />
+        </BaseControlViewer>
+    );
+};
+
+ImageViewer.contentTypes = ["image/*", "image/jpeg", "image/png", "image/gif", "image/bmp", "image/tiff", "image/webp"];
+
+ImageViewer.fileTypes = ["jpg", "jpeg", "png", "gif", "bmp", "tiff", "webp"];
+
+export default ImageViewer;

packages/pluggableWidgets/document-viewer-web/components/TextViewer.tsx

@@ -0,0 +1,39 @@
+import { createElement, useEffect, useState } from "react";
+import { BaseControlViewer } from "./BaseViewer";
+import { DocRendererElement, DocumentRendererProps, DocumentStatus } from "./documentRenderer";
+
+const TextViewer: DocRendererElement = (props: DocumentRendererProps) => {
+    const { file, setDocumentStatus } = props;
+    const [text, setText] = useState<string | null>(null);
+
+    useEffect(() => {
+        const controller = new AbortController();
+        const { signal } = controller;
+        if (file.status === "available" && file.value.uri) {
+            fetch(file.value.uri, { method: "GET", signal })
+                .then(res => res.text())
+                .then(response => {
+                    setText(response);
+                })
+                .catch(() => {
+                    setDocumentStatus(DocumentStatus.error);
+                });
+        }
+
+        return () => {
+            controller.abort();
+        };
+    }, [file, file.status, file.value?.uri, setDocumentStatus]);
+
+    return (
+        <BaseControlViewer {...props} file={file}>
+            <pre className="text-content">{text}</pre>
+        </BaseControlViewer>
+    );
+};
+
+TextViewer.contentTypes = ["text/plain", "text/csv", "application/json"];
+
+TextViewer.fileTypes = ["txt", "csv", "json"];
+
+export default TextViewer;

packages/pluggableWidgets/document-viewer-web/components/index.ts

@@ -1,5 +1,7 @@
 import DocxViewer from "./DocxViewer";
 import PDFViewer from "./PDFViewer";
 import ExcelViewer from "./ExcelViewer";
+import TextViewer from "./TextViewer";
+import ImageViewer from "./ImageViewer";
 
-export const DocumentRenderers = [DocxViewer, ExcelViewer, PDFViewer];
+export const DocumentRenderers = [DocxViewer, ExcelViewer, PDFViewer, TextViewer, ImageViewer];

packages/pluggableWidgets/document-viewer-web/utils/useRendererSelector.ts

@@ -4,6 +4,7 @@ import { DocumentRenderers } from "../components";
 import { DocRendererElement, DocumentRendererProps, DocumentStatus } from "../components/documentRenderer";
 import ErrorViewer from "../components/ErrorViewer";
 import { DocumentViewerContainerProps } from "../typings/DocumentViewerProps";
+import TextViewer from "../components/TextViewer";
 
 interface DocumentRenderer {
     CurrentRenderer: DocRendererElement;
@@ -38,6 +39,8 @@ export function useRendererSelector(props: DocumentViewerContainerProps): Docume
                     }
                     if (selectedRenderer.length > 0) {
                         setComponent(() => selectedRenderer[0]);
+                    } else {
+                        setComponent(() => TextViewer);
                     }
                 }
             });