@lateralus-ai/shipping-ui 1.4.10 → 1.4.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lateralus-ai/shipping-ui",
-  "version": "1.4.10",
+  "version": "1.4.11",
   "description": "Shared UI theme and components for Lateralus shipping applications",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",

package/src/components/PdfViewer/ImageViewer.tsx

@@ -14,6 +14,7 @@ interface ImageViewerProps {
   canvasClassName?: string
   documentUrl?: string
   mainCanvasClassname?: string
+  initialPage?: number
   onClose: () => void
   totalPages: number
   getImageSrc: (page: number) => string | Promise<string>
@@ -24,6 +25,7 @@ export const ImageViewer = ({
   className,
   canvasClassName,
   mainCanvasClassname,
+  initialPage = 1,
   onClose,
   totalPages,
   getImageSrc,
@@ -33,7 +35,10 @@ export const ImageViewer = ({
   const [zoom, zoomActions] = useZoom()
   const [rotation, rotationActions] = useRotation()
   const [{ pan, isDragging }, panActions] = usePanning()
-  const [{ currentPage }, pageActions] = usePageManagement(totalPages)
+  const [{ currentPage }, pageActions] = usePageManagement(
+    totalPages,
+    initialPage
+  )
   const [imageSrc, setImageSrc] = useState<string>(() => {
     const initialResult = getImageSrc(currentPage)
     return typeof initialResult === "string" ? initialResult : ""

package/src/components/PdfViewer/usePageManagement.ts

@@ -1,29 +1,32 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback } from "react"
 
-export const usePageManagement = (initialTotalPages: number = 0) => {
-  const [currentPage, setCurrentPage] = useState<number>(1);
-  const [totalPages, setTotalPages] = useState<number>(initialTotalPages);
+export const usePageManagement = (
+  initialTotalPages: number = 0,
+  initialPage: number = 1
+) => {
+  const [currentPage, setCurrentPage] = useState<number>(initialPage)
+  const [totalPages, setTotalPages] = useState<number>(initialTotalPages)
 
   const actions = {
     nextPage: useCallback(() => {
       setCurrentPage((prev) => {
-        return prev < totalPages ? prev + 1 : prev;
-      });
+        return prev < totalPages ? prev + 1 : prev
+      })
     }, [totalPages]),
     prevPage: useCallback(() => {
-      setCurrentPage((prev) => Math.max(prev - 1, 1));
+      setCurrentPage((prev) => Math.max(prev - 1, 1))
     }, []),
     goToPage: useCallback(
       (page: number) => {
-        setCurrentPage(() => Math.max(1, Math.min(page, totalPages)));
+        setCurrentPage(() => Math.max(1, Math.min(page, totalPages)))
       },
-      [totalPages],
+      [totalPages]
     ),
     setTotalPages: useCallback((pages: number) => {
-      setTotalPages(pages);
-      setCurrentPage((prev) => Math.min(prev, pages));
+      setTotalPages(pages)
+      setCurrentPage((prev) => Math.min(prev, pages))
     }, []),
-  };
+  }
 
-  return [{ currentPage, totalPages }, actions] as const;
-};
+  return [{ currentPage, totalPages }, actions] as const
+}

package/src/stories/PDFViewer.stories.tsx

@@ -7,6 +7,7 @@ const StoryPage = () => {
       <div className="w-[600px] h-[800px] p-8">
         <ImageViewer
           totalPages={100}
+          initialPage={10}
           mainCanvasClassname="max-h-[650px]"
           title="Image Viewer"
           getImageSrc={(page) =>