@nu-art/ts-pdf-frontend 0.401.8 → 0.500.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nu-art/ts-pdf-frontend",
-  "version": "0.401.8",
+  "version": "0.500.0",
   "description": "ts-pdf - Express & Typescript based backend framework Frontend",
   "keywords": [
     "TacB0sS",
@@ -31,9 +31,7 @@
     "build": "tsc"
   },
   "dependencies": {
-    "@nu-art/ts-common": "0.401.8",
-    "@nu-art/thunderstorm-frontend": "0.401.8",
-    "@nu-art/thunderstorm-shared": "0.401.8",
+    "@nu-art/ts-common": "0.500.0",
     "react": "^18.0.0",
     "pdf.js": "^0.1.0",
     "pdfjs-dist": "5.4.149"

package/ui/PDF_Loader.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+/** Minimal loading spinner for PDF_Renderer. No external UI dependency. */
+export declare function PDF_Loader(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/ui/PDF_Loader.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Minimal loading spinner for PDF_Renderer. No external UI dependency. */
+export function PDF_Loader(props) {
+    return (_jsx("div", { ...props, className: props.className ? `pdf-loader ${props.className}` : 'pdf-loader', children: _jsx("div", { className: "pdf-loader__spinner" }) }));
+}

package/ui/PDF_Renderer.d.ts

@@ -1,32 +1,27 @@
 import * as React from 'react';
 import './PDF_Renderer.scss';
-import { ComponentAsync } from '@nu-art/thunderstorm-frontend/index';
 import { PDFDocumentProxy } from 'pdfjs-dist';
 type State = {
     index: number;
     pdfFile?: PDFDocumentProxy;
     width: number;
     height: number;
+    isLoading?: boolean;
+    error?: string;
 };
 type Props = {
     pageIndex?: number;
     src: string;
 };
-export declare class PDF_Renderer extends ComponentAsync<Props, State> {
+export declare class PDF_Renderer extends React.Component<Props, State> {
     private ctx;
     private textLayer;
     constructor(props: Props);
-    protected deriveStateFromProps(nextProps: Props): Promise<{
-        index: number;
-        isLoading: boolean;
-        width: number;
-        height: number;
-    }>;
     private loadPdf;
-    componentDidMount(): Promise<void>;
-    componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any): Promise<void>;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<Props>): void;
     render(): import("react/jsx-runtime").JSX.Element;
-    renderState(): React.ReactNode;
+    private renderState;
     private renderPage;
 }
 export {};

package/ui/PDF_Renderer.js

@@ -1,22 +1,18 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
 import './PDF_Renderer.scss';
 import { ModuleFE_PDF } from '../modules/ModuleFE_PDF.js';
-import { ComponentAsync, TS_Loader } from '@nu-art/thunderstorm-frontend/index';
-import { _logger_logException } from '@nu-art/ts-common';
-export class PDF_Renderer extends ComponentAsync {
+import { PDF_Loader } from './PDF_Loader.js';
+export class PDF_Renderer extends React.Component {
     ctx;
     textLayer;
     constructor(props) {
         super(props);
-    }
-    async deriveStateFromProps(nextProps) {
-        const state = {
-            index: nextProps.pageIndex || 1,
-            isLoading: false,
+        this.state = {
+            index: props.pageIndex ?? 1,
             width: 500,
-            height: 500
+            height: 500,
         };
-        return state;
     }
     async loadPdf(pdfSrc) {
         this.setState({ isLoading: true });
@@ -27,51 +23,41 @@ export class PDF_Renderer extends ComponentAsync {
             this.setState({ isLoading: false });
         }
         catch (err) {
-            this.setState({ error: err.message, isLoading: false });
+            this.setState({ error: err instanceof Error ? err.message : String(err), isLoading: false });
         }
     }
-    async componentDidMount() {
-        return this.loadPdf(this.props.src);
+    componentDidMount() {
+        void this.loadPdf(this.props.src);
     }
-    async componentDidUpdate(prevProps, prevState, snapshot) {
-        if (this.props.src !== prevProps.src) {
-            return this.loadPdf(this.props.src);
-        }
+    componentDidUpdate(prevProps) {
+        if (this.props.src !== prevProps.src)
+            void this.loadPdf(this.props.src);
     }
     render() {
-        return _jsxs(_Fragment, { children: [_jsx("div", { className: 'pdf-renderer', ref: instance => {
+        return _jsxs(_Fragment, { children: [_jsx("div", { className: "pdf-renderer", ref: instance => {
                         if (!instance)
                             return;
                         if (!this.ctx)
                             this.ctx = ModuleFE_PDF.appendCanvas(instance, { position: 'absolute' });
                     }, children: this.renderState() }), _jsx("div", { ref: instance => {
-                        if (!instance)
-                            return;
-                        if (!this.textLayer)
+                        if (instance)
                             this.textLayer = instance;
                     } })] });
-        // new Array(this.state.pdfFile?._pdfInfo.numPages || 0)
-        // 	.fill(0)
-        // 	.map((val, index) => <div key={index} className="clickable" style={{margin: "5px", padding: "3px"}}
-        // 	                          onClick={async () => {
-        // 		                          await this.renderPage(index + 1);
-        // 	                          }}>{index + 1}</div>);
     }
     renderState() {
         if (this.state.isLoading)
-            return _jsx(TS_Loader, {});
+            return _jsx(PDF_Loader, {});
         if (this.state.error)
-            return _jsx("div", { children: _logger_logException(this.state.error) });
+            return _jsx("div", { className: "pdf-renderer-error", children: this.state.error });
+        return null;
     }
     async renderPage(index) {
         const pdfFile = this.state.pdfFile;
         if (!pdfFile) {
-            this.logError('cannot render pdfFile - undefined');
+            console.warn('PDF_Renderer: cannot render pdfFile - undefined');
             return;
         }
-        this.logInfo(`isLoading page ${index}`);
         const viewport = await ModuleFE_PDF.renderPage(this.ctx, pdfFile, index, this.textLayer);
-        this.logInfo(`loaded page ${index}`);
         this.setState({ index, width: viewport.width, height: viewport.height });
     }
 }

package/ui/PDF_Renderer.scss

@@ -2,4 +2,27 @@
   position: relative;
   width: 500px;
   height: 500px;
+}
+
+.pdf-loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.pdf-loader__spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid rgba(0, 0, 0, 0.1);
+  border-top-color: #333;
+  border-radius: 50%;
+  animation: pdf-loader-spin 0.8s linear infinite;
+}
+
+@keyframes pdf-loader-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }