@pdfme/ui 5.5.5 → 5.5.6-dev.1

package/dist/types/src/Designer.d.ts

@@ -3,13 +3,19 @@ import { BaseUIClass } from './class.js';
 declare class Designer extends BaseUIClass {
     private onSaveTemplateCallback?;
     private onChangeTemplateCallback?;
+    private onPageChangeCallback?;
     private pageCursor;
     constructor(props: DesignerProps);
     saveTemplate(): void;
     updateTemplate(template: Template): void;
     onSaveTemplate(cb: (template: Template) => void): void;
     onChangeTemplate(cb: (template: Template) => void): void;
+    onPageChange(cb: (pageInfo: {
+        currentPage: number;
+        totalPages: number;
+    }) => void): void;
     getPageCursor(): number;
+    getTotalPages(): number;
     protected render(): void;
 }
 export default Designer;

package/dist/types/src/Form.d.ts

@@ -2,12 +2,20 @@ import { PreviewProps } from '@pdfme/common';
 import { PreviewUI } from './class.js';
 declare class Form extends PreviewUI {
     private onChangeInputCallback?;
+    private onPageChangeCallback?;
+    private pageCursor;
     constructor(props: PreviewProps);
     onChangeInput(cb: (arg: {
         index: number;
         value: string;
         name: string;
     }) => void): void;
+    onPageChange(cb: (pageInfo: {
+        currentPage: number;
+        totalPages: number;
+    }) => void): void;
+    getPageCursor(): number;
+    getTotalPages(): number;
     setInputs(inputs: {
         [key: string]: string;
     }[]): void;

package/dist/types/src/Viewer.d.ts

@@ -1,7 +1,15 @@
 import { PreviewProps } from '@pdfme/common';
 import { PreviewUI } from './class.js';
 declare class Viewer extends PreviewUI {
+    private onPageChangeCallback?;
+    private pageCursor;
     constructor(props: PreviewProps);
+    onPageChange(cb: (pageInfo: {
+        currentPage: number;
+        totalPages: number;
+    }) => void): void;
+    getPageCursor(): number;
+    getTotalPages(): number;
     protected render(): void;
 }
 export default Viewer;

package/dist/types/src/components/Designer/index.d.ts

@@ -6,6 +6,6 @@ declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplat
     onChangeTemplate: (t: Template) => void;
 } & {
     onChangeTemplate: (t: Template) => void;
-    onPageCursorChange: (newPageCursor: number) => void;
+    onPageCursorChange: (newPageCursor: number, totalPages: number) => void;
 }) => React.JSX.Element;
 export default TemplateEditor;

package/dist/types/src/components/Preview.d.ts

@@ -1,11 +1,15 @@
 import React from 'react';
 import { PreviewProps, Size } from '@pdfme/common';
-declare const Preview: ({ template, inputs, size, onChangeInput, }: Omit<PreviewProps, "domContainer"> & {
+declare const Preview: ({ template, inputs, size, onChangeInput, onPageChange, }: Omit<PreviewProps, "domContainer"> & {
     onChangeInput?: (args: {
         index: number;
         value: string;
         name: string;
     }) => void;
+    onPageChange?: (pageInfo: {
+        currentPage: number;
+        totalPages: number;
+    }) => void;
     size: Size;
 }) => React.JSX.Element;
 export default Preview;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "5.5.5",
+  "version": "5.5.6-dev.1",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/Designer.tsx

@@ -16,6 +16,7 @@ import AppContextProvider from './components/AppContextProvider.js';
 class Designer extends BaseUIClass {
   private onSaveTemplateCallback?: (template: Template) => void;
   private onChangeTemplateCallback?: (template: Template) => void;
+  private onPageChangeCallback?: (pageInfo: { currentPage: number; totalPages: number }) => void;
   private pageCursor: number = 0;
 
   constructor(props: DesignerProps) {
@@ -48,10 +49,19 @@ class Designer extends BaseUIClass {
     this.onChangeTemplateCallback = cb;
   }
 
+  public onPageChange(cb: (pageInfo: { currentPage: number; totalPages: number }) => void) {
+    this.onPageChangeCallback = cb;
+  }
+
   public getPageCursor() {
     return this.pageCursor;
   }
 
+  public getTotalPages() {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    return this.template.schemas.length;
+  }
+
   protected render() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
     ReactDOM.render(
@@ -77,8 +87,14 @@ class Designer extends BaseUIClass {
               this.onChangeTemplateCallback(template);
             }
           }}
-          onPageCursorChange={(newPageCursor: number) => {
+          onPageCursorChange={(newPageCursor: number, totalPages: number) => {
             this.pageCursor = newPageCursor;
+            if (this.onPageChangeCallback) {
+              this.onPageChangeCallback({
+                currentPage: newPageCursor,
+                totalPages: totalPages,
+              });
+            }
           }}
           size={this.size}
         />

package/src/Form.tsx

@@ -8,6 +8,8 @@ import Preview from './components/Preview.js';
 
 class Form extends PreviewUI {
   private onChangeInputCallback?: (arg: { index: number; value: string; name: string }) => void;
+  private onPageChangeCallback?: (pageInfo: { currentPage: number; totalPages: number }) => void;
+  private pageCursor: number = 0;
 
   constructor(props: PreviewProps) {
     super(props);
@@ -17,6 +19,19 @@ class Form extends PreviewUI {
     this.onChangeInputCallback = cb;
   }
 
+  public onPageChange(cb: (pageInfo: { currentPage: number; totalPages: number }) => void) {
+    this.onPageChangeCallback = cb;
+  }
+
+  public getPageCursor() {
+    return this.pageCursor;
+  }
+
+  public getTotalPages() {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    return this.template.schemas.length;
+  }
+
   public setInputs(inputs: { [key: string]: string }[]): void {
     const previousInputs = this.getInputs();
 
@@ -71,6 +86,12 @@ class Form extends PreviewUI {
               }
             }
           }}
+          onPageChange={(pageInfo) => {
+            this.pageCursor = pageInfo.currentPage;
+            if (this.onPageChangeCallback) {
+              this.onPageChangeCallback(pageInfo);
+            }
+          }}
         />
       </AppContextProvider>,
       this.domContainer,

package/src/Viewer.tsx

@@ -7,6 +7,9 @@ import Preview from './components/Preview.js';
 import AppContextProvider from './components/AppContextProvider.js';
 
 class Viewer extends PreviewUI {
+  private onPageChangeCallback?: (pageInfo: { currentPage: number; totalPages: number }) => void;
+  private pageCursor: number = 0;
+
   constructor(props: PreviewProps) {
     super(props);
     console.warn(
@@ -14,6 +17,19 @@ class Viewer extends PreviewUI {
     );
   }
 
+  public onPageChange(cb: (pageInfo: { currentPage: number; totalPages: number }) => void) {
+    this.onPageChangeCallback = cb;
+  }
+
+  public getPageCursor() {
+    return this.pageCursor;
+  }
+
+  public getTotalPages() {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    return this.template.schemas.length;
+  }
+
   protected render() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
     ReactDOM.render(
@@ -23,7 +39,17 @@ class Viewer extends PreviewUI {
         plugins={this.getPluginsRegistry()}
         options={this.getOptions()}
       >
-        <Preview template={this.template} size={this.size} inputs={this.inputs} />
+        <Preview
+          template={this.template}
+          size={this.size}
+          inputs={this.inputs}
+          onPageChange={(pageInfo) => {
+            this.pageCursor = pageInfo.currentPage;
+            if (this.onPageChangeCallback) {
+              this.onPageChangeCallback(pageInfo);
+            }
+          }}
+        />
       </AppContextProvider>,
       this.domContainer,
     );

package/src/components/Designer/RightSidebar/DetailView/index.tsx

@@ -87,7 +87,9 @@ const DetailView = (props: DetailViewProps) => {
       });
     }
     setWidgets(newWidgets);
-  }, [activeSchema, options, pluginsRegistry, props, token, typedI18n]);
+  }, [activeSchema, pluginsRegistry, JSON.stringify(options)]);
+
+  useEffect(() => form.resetFields(), [activeSchema.id]);
 
   useEffect(() => {
     // Create a type-safe copy of the schema with editable property
@@ -96,9 +98,7 @@ const DetailView = (props: DetailViewProps) => {
     const readOnly = typeof values.readOnly === 'boolean' ? values.readOnly : false;
     values.editable = !readOnly;
     form.setValues(values);
-  }, [activeSchema, form]);
-
-  useEffect(() => form.resetFields(), [activeSchema.id, form]);
+  }, [activeSchema]);
 
   useEffect(() => {
     uniqueSchemaName.current = (value: string): boolean => {

package/src/components/Designer/index.tsx

@@ -54,7 +54,7 @@ const TemplateEditor = ({
   onChangeTemplate: (t: Template) => void;
 } & {
   onChangeTemplate: (t: Template) => void;
-  onPageCursorChange: (newPageCursor: number) => void;
+  onPageCursorChange: (newPageCursor: number, totalPages: number) => void;
 }) => {
   const past = useRef<SchemaForUI[][]>([]);
   const future = useRef<SchemaForUI[][]>([]);
@@ -110,7 +110,7 @@ const TemplateEditor = ({
     pageCursor,
     onChangePageCursor: (p) => {
       setPageCursor(p);
-      onPageCursorChange(p);
+      onPageCursorChange(p, schemasList.length);
       onEditEnd();
     },
   });
@@ -239,6 +239,9 @@ const TemplateEditor = ({
     onChangeTemplate(newTemplate);
     await updateTemplate(newTemplate);
     void refresh(newTemplate);
+    
+    // Notify page change with updated total pages
+    onPageCursorChange(newPageCursor, sl.length);
 
     // Use setTimeout to update scroll position after render
     setTimeout(() => {
@@ -326,6 +329,7 @@ const TemplateEditor = ({
               // Update scroll position and state
               canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
               setPageCursor(p);
+              onPageCursorChange(p, schemasList.length);
               onEditEnd();
             }}
             zoomLevel={zoomLevel}

package/src/components/Preview.tsx

@@ -27,8 +27,10 @@ const Preview = ({
   inputs,
   size,
   onChangeInput,
+  onPageChange,
 }: Omit<PreviewProps, 'domContainer'> & {
   onChangeInput?: (args: { index: number; value: string; name: string }) => void;
+  onPageChange?: (pageInfo: { currentPage: number; totalPages: number }) => void;
   size: Size;
 }) => {
   const { token } = theme.useToken();
@@ -102,7 +104,12 @@ const Preview = ({
     pageSizes,
     scale,
     pageCursor,
-    onChangePageCursor: setPageCursor,
+    onChangePageCursor: (p) => {
+      setPageCursor(p);
+      if (onPageChange) {
+        onPageChange({ currentPage: p, totalPages: schemasList.length });
+      }
+    },
   });
 
   const handleChangeInput = ({ name, value }: { name: string; value: string }) =>
@@ -146,6 +153,9 @@ const Preview = ({
           if (!containerRef.current) return;
           containerRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
           setPageCursor(p);
+          if (onPageChange) {
+            onPageChange({ currentPage: p, totalPages: schemasList.length });
+          }
         }}
         zoomLevel={zoomLevel}
         setZoomLevel={setZoomLevel}