From 89ed6006fc7c52c45af52fc188a865ec912ad916 Mon Sep 17 00:00:00 2001 From: toma Date: Mon, 29 Sep 2025 13:30:58 +0200 Subject: [PATCH 1/4] add pagination controls, add example in stories --- README.md | 5 +- package-lock.json | 8 +- src/DocViewer.stories.tsx | 81 ++++++++++++++++++++ src/models.ts | 22 +++--- src/renderers/pdf/components/PDFControls.tsx | 11 ++- 5 files changed, 109 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 63da976..69a025d 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ -[![npm-version](https://img.shields.io/npm/v/@cyntler/react-doc-viewer.svg)](https://www.npmjs.com/package/@cyntler/react-doc-viewer) -[![npm-download](https://img.shields.io/npm/dt/@cyntler/react-doc-viewer.svg)](https://www.npmjs.com/package/@cyntler/react-doc-viewer) +[![npm-version](https://img.shields.io/npm/v/@t0kar/react-doc-viewer.svg)](https://www.npmjs.com/package/@t0kar/react-doc-viewer) +[![npm-download](https://img.shields.io/npm/dt/@t0kar/react-doc-viewer.svg)](https://www.npmjs.com/package/@t0kar/react-doc-viewer) ## I am stopping work on this library @@ -48,6 +48,7 @@ File viewer for **React v17+**. - [Config](#config) - [Overriding Header Component](#overriding-header-component) - [Overriding Loading Renderer](#overriding-loading-renderer) + - [Overriding PDF Controls](#overriding-pdf-controls) - [Overriding No Renderer (Error)](#overriding-no-renderer-error) diff --git a/package-lock.json b/package-lock.json index 84ff9a3..f3b082a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { - "name": "@cyntler/react-doc-viewer", - "version": "1.17.1", + "name": "@t0kar/react-doc-viewer", + "version": "1.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "@cyntler/react-doc-viewer", - "version": "1.17.1", + "name": "@t0kar/react-doc-viewer", + "version": "1.0.0", "license": "Apache License 2.0", "dependencies": { "@types/mustache": "^4.2.5", diff --git a/src/DocViewer.stories.tsx b/src/DocViewer.stories.tsx index 4eeef9a..5af3109 100644 --- a/src/DocViewer.stories.tsx +++ b/src/DocViewer.stories.tsx @@ -10,6 +10,7 @@ import epsFile from "./exampleFiles/eps-file.eps?url"; import webpFile from "./exampleFiles/webp-file.webp?url"; import { DocViewerRef, IDocument } from "."; +import { IPdfControlsOverride } from "../dist"; export default { title: "DocViewer", @@ -135,3 +136,83 @@ export const NoRenderType = () => { /> ); }; + +export const CustomPDFControls = () => { + const [selectedDocs, setSelectedDocs] = useState([]); + + const customPDFControls: IPdfControlsOverride = ( + state, + config, + pdfZoomOut, + pdfZoomIn, + pdfZoomReset, + pdfTogglePaginated, + pdfNextPage, + pdfPrevPage, + ) => { + return ( +
+ + Zoom: {state.zoomLevel?.toFixed(2)} + + + + Paginated: {state.paginated ? "Yes" : "No"} + {state.paginated && state.numPages > 1 && ( + <> + {" "} + + + {state.currentPage} / {state.numPages} + + + + )} +
+ ); + }; + + return ( + <> + + el.target.files?.length && + setSelectedDocs(Array.from(el.target.files)) + } + /> + ({ + uri: window.URL.createObjectURL(file), + fileName: file.name, + }))} + config={{ + pdfControls: { + overrideComponent: customPDFControls, + }, + }} + /> + + ); +}; diff --git a/src/models.ts b/src/models.ts index bdcbcff..4f94729 100644 --- a/src/models.ts +++ b/src/models.ts @@ -60,17 +60,17 @@ export type IHeaderOverride = ( // eslint-disable-next-line @typescript-eslint/no-explicit-any ) => ReactElement | null; -export type IPdfControlsOverride = { - ( - state: IPDFState, - config: IPdfControlsConfig, - pdfZoomOut?: () => void, - pdfZoomIn?: () => void, - pdfZoomReset?: () => void, - pdfTogglePaginated?: () => void, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - ): ReactElement | null; -}; +export type IPdfControlsOverride = ( + state: IPDFState, + config: IPdfControlsConfig, + pdfZoomOut?: () => void, + pdfZoomIn?: () => void, + pdfZoomReset?: () => void, + pdfTogglePaginated?: () => void, + pdfNextPage?: () => void, + pdfPrevPage?: () => void, + // eslint-disable-next-line @typescript-eslint/no-explicit-any +) => ReactElement | null; export interface ITheme { primary?: string; diff --git a/src/renderers/pdf/components/PDFControls.tsx b/src/renderers/pdf/components/PDFControls.tsx index dea8051..4077725 100644 --- a/src/renderers/pdf/components/PDFControls.tsx +++ b/src/renderers/pdf/components/PDFControls.tsx @@ -3,7 +3,11 @@ import styled from "styled-components"; import { Button, LinkButton } from "../../../components/common"; import { IStyledProps } from "../../.."; import { PDFContext } from "../state"; -import { setPDFPaginated, setZoomLevel } from "../state/actions"; +import { + setCurrentPage, + setPDFPaginated, + setZoomLevel, +} from "../state/actions"; import { useTranslation } from "../../../hooks/useTranslation"; import { DownloadPDFIcon, @@ -23,6 +27,7 @@ const PDFControls: FC = () => { mainState, paginated, zoomLevel, + currentPage, numPages, zoomJump, defaultZoomLevel, @@ -37,6 +42,8 @@ const PDFControls: FC = () => { const pdfZoomIn = () => dispatch(setZoomLevel(zoomLevel + zoomJump)); const pdfZoomReset = () => dispatch(setZoomLevel(defaultZoomLevel)); const pdfTogglePaginated = () => dispatch(setPDFPaginated(!paginated)); + const pdfNextPage = () => dispatch(setCurrentPage(currentPage + 1)); + const pdfPrevPage = () => dispatch(setCurrentPage(currentPage - 1)); const override = config?.pdfControls?.overrideComponent?.( pdfState, @@ -45,6 +52,8 @@ const PDFControls: FC = () => { pdfZoomIn, pdfZoomReset, pdfTogglePaginated, + pdfNextPage, + pdfPrevPage, ); if (override) { From 284af982e28a32a644a9de4b33ffb3cd5cd3e50e Mon Sep 17 00:00:00 2001 From: toma Date: Mon, 29 Sep 2025 14:22:50 +0200 Subject: [PATCH 2/4] reacme updated --- README.md | 34 +++++++++++++++++++++++------- src/DocViewer.stories.tsx | 41 ++++++++++++++++++++++++++++++++++++ src/components/HeaderBar.tsx | 11 ++++++++++ 3 files changed, 78 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 69a025d..dbf832a 100644 --- a/README.md +++ b/README.md @@ -544,7 +544,7 @@ const MyLoadingRenderer = ({ document, fileName }) => { ``` ### Overriding PDF Controls -You can override the default PDF controls by passing a callback function to `config.pdfControls.overrideComponent`. This function receives several parameters: the current PDF state, the pdfControls config, and handler functions for zooming in, zooming out, resetting zoom, and toggling pagination. Your function should return a React element to render custom controls. +You can override the default PDF controls by passing a callback function to `config.pdfControls.overrideComponent`. This function receives several parameters: the current PDF state, the pdfControls config, and handler functions for zooming in, zooming out, resetting zoom, toggling pagination, going to next or back to previous page. Your function should return a React element to render custom controls. Example: @@ -555,20 +555,36 @@ const MyPDFControls = ( pdfZoomOut, pdfZoomIn, pdfZoomReset, - pdfTogglePaginated + pdfTogglePaginated, + pdfNextPage, + pdfPrevPage ) => { - // Example: Only show a custom zoom in/out + return ( -
- - {pdfState.zoomLevel.toFixed(2)} - +
+ + + Zoom: {pdfState.zoomLevel?.toFixed(2)} + + + + Paginated: {pdfState.paginated ? "Yes" : "No"} + + { pdfState.paginated && pdfState.numPages > 1 && + + {pdfState.currentPage} / {pdfState.numPages} + + }
); }; @@ -592,6 +608,8 @@ The parameters provided to your override function are: - `pdfZoomIn`: Function to increase zoom. - `pdfZoomReset`: Function to reset zoom to default. - `pdfTogglePaginated`: Function to toggle between paginated and continuous scroll. +- `pdfNextPage`: Function to go to the next page. +- `pdfPrevPage`: Function to go to the previous page. If your override returns a React element, it will replace the default PDF controls UI. diff --git a/src/DocViewer.stories.tsx b/src/DocViewer.stories.tsx index 5af3109..485b150 100644 --- a/src/DocViewer.stories.tsx +++ b/src/DocViewer.stories.tsx @@ -216,3 +216,44 @@ export const CustomPDFControls = () => { ); }; + + +const MyPDFControls = ( + pdfState, + pdfControlsConfig, + pdfZoomOut, + pdfZoomIn, + pdfZoomReset, + pdfTogglePaginated, + pdfNextPage, + pdfPrevPage +) => { + // Example: Only show a custom zoom in/out + return ( +
+ + + Zoom: {pdfState.zoomLevel?.toFixed(2)} + + + + + + Paginated: {pdfState.paginated ? "Yes" : "No"} + + { pdfState.paginated && pdfState.numPages > 1 && + + {pdfState.currentPage} / {pdfState.numPages} + + } +
+ ); +}; \ No newline at end of file diff --git a/src/components/HeaderBar.tsx b/src/components/HeaderBar.tsx index 8d934d2..855c769 100644 --- a/src/components/HeaderBar.tsx +++ b/src/components/HeaderBar.tsx @@ -26,12 +26,23 @@ export const HeaderBar: FC = () => { return ( + { pdfState.paginated && pdfState.numPages > 1 && + + {pdfState.currentPage} / {pdfState.numPages} + + } ); } }; + + const Container = styled.div` display: flex; justify-content: flex-end; From e377a245e9dd26c9d79c309f2b745f3490e9dd42 Mon Sep 17 00:00:00 2001 From: toma Date: Mon, 29 Sep 2025 14:24:29 +0200 Subject: [PATCH 3/4] remove github pipeline --- .github/workflows/publish.yml | 44 ----------------------------------- 1 file changed, 44 deletions(-) delete mode 100644 .github/workflows/publish.yml diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml deleted file mode 100644 index 0c26eb9..0000000 --- a/.github/workflows/publish.yml +++ /dev/null @@ -1,44 +0,0 @@ -name: Publish Package to Azure Artifacts - -on: - push: - branches: - - main # triggers on any push or merge into main - -jobs: - publish: - runs-on: ubuntu-latest - - steps: - # 1. Checkout the code - - name: Checkout repo - uses: actions/checkout@v3 - - # 2. Set up Node.js - - name: Set up Node.js - uses: actions/setup-node@v3 - with: - node-version: 20 - registry-url: "https://registry.npmjs.org" # fallback for public packages - - # 3. Authenticate to Azure Artifacts - - name: Authenticate to Azure Artifacts - run: | - # Set registry for your scoped package - npm config set @${{ secrets.AZURE_ORG }}:registry https://pkgs.dev.azure.com/${{ secrets.AZURE_ORG }}/${{ secrets.AZURE_PROJECT }}/_packaging/${{ secrets.AZURE_FEED }}/npm/registry/ - # Set auth token for Azure feed - npm config set //pkgs.dev.azure.com/${{ secrets.AZURE_ORG }}/${{ secrets.AZURE_PROJECT }}/_packaging/${{ secrets.AZURE_FEED }}/npm/registry/:_authToken=${{ secrets.AZURE_NPM_TOKEN }} - - # 4. Install dependencies - - name: Install dependencies - run: yarn install --frozen-lockfile - - # 5. Build the package - - name: Build - run: yarn build - - # 6. Publish to Azure Artifacts - - name: Publish to Azure Artifacts - run: npm publish - env: - NODE_AUTH_TOKEN: ${{ secrets.AZURE_NPM_TOKEN }} From 4ace924cb9b051bb419010478cd89ea1957df580 Mon Sep 17 00:00:00 2001 From: toma Date: Mon, 29 Sep 2025 14:25:21 +0200 Subject: [PATCH 4/4] stories update --- src/DocViewer.stories.tsx | 41 --------------------------------------- 1 file changed, 41 deletions(-) diff --git a/src/DocViewer.stories.tsx b/src/DocViewer.stories.tsx index 485b150..5af3109 100644 --- a/src/DocViewer.stories.tsx +++ b/src/DocViewer.stories.tsx @@ -216,44 +216,3 @@ export const CustomPDFControls = () => { ); }; - - -const MyPDFControls = ( - pdfState, - pdfControlsConfig, - pdfZoomOut, - pdfZoomIn, - pdfZoomReset, - pdfTogglePaginated, - pdfNextPage, - pdfPrevPage -) => { - // Example: Only show a custom zoom in/out - return ( -
- - - Zoom: {pdfState.zoomLevel?.toFixed(2)} - - - - - - Paginated: {pdfState.paginated ? "Yes" : "No"} - - { pdfState.paginated && pdfState.numPages > 1 && - - {pdfState.currentPage} / {pdfState.numPages} - - } -
- ); -}; \ No newline at end of file