From b136d50923b78ab038e32e69c00cfd1c61216d01 Mon Sep 17 00:00:00 2001 From: toma Date: Fri, 26 Sep 2025 16:07:53 +0200 Subject: [PATCH 1/5] adding override for pdfControls --- src/models.ts | 26 ++++ src/renderers/pdf/components/PDFControls.tsx | 128 ++++++++++--------- 2 files changed, 97 insertions(+), 57 deletions(-) diff --git a/src/models.ts b/src/models.ts index 6624f32..b3369b9 100644 --- a/src/models.ts +++ b/src/models.ts @@ -1,12 +1,14 @@ import { FC, ReactElement, ComponentType, PropsWithChildren } from "react"; import { IMainState } from "./store/mainStateReducer"; import { FileLoaderFunction } from "./utils/fileLoaders"; +import { IPDFState } from "./renderers/pdf/state/reducer"; export interface IConfig { header?: IHeaderConfig; loadingRenderer?: ILoadingRendererConfig; noRenderer?: INoRendererConfig; csvDelimiter?: string; + pdfControls?: IPdfControlsConfig; pdfZoom?: IPdfZoomConfig; pdfVerticalScrollByDefault?: boolean; } @@ -33,6 +35,19 @@ export interface IHeaderConfig { overrideComponent?: IHeaderOverride; } +export interface IPdfControlsConfig { + disableControls?: boolean; + disableZoom?: boolean; + disablePagination?: boolean; + disableDownload?: boolean; + position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"; + paginated?: boolean; + initialZoom?: number; + zoomJump?: number; + defaultZoom?: number; + overrideComponent?: IPdfControlsOverride; +} + export interface IPdfZoomConfig { defaultZoom: number; zoomJump: number; @@ -45,6 +60,17 @@ export type IHeaderOverride = ( // eslint-disable-next-line @typescript-eslint/no-explicit-any ) => ReactElement | null; +export type IPdfControlsOverride = { + ( + state: IPDFState, + pdfZoomOut?: () => void, + pdfZoomIn?: () => void, + pdfZoomReset?: () => void, + pdfTogglePaginated?: () => void, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + ): ReactElement | null; +}; + export interface ITheme { primary?: string; secondary?: string; diff --git a/src/renderers/pdf/components/PDFControls.tsx b/src/renderers/pdf/components/PDFControls.tsx index 4a86c34..2073e5f 100644 --- a/src/renderers/pdf/components/PDFControls.tsx +++ b/src/renderers/pdf/components/PDFControls.tsx @@ -13,74 +13,88 @@ import { ZoomOutPDFIcon, } from "./icons"; import PDFPagination from "./PDFPagination"; +import { DocViewerContext } from "../../../store/DocViewerProvider"; const PDFControls: FC = () => { const { t } = useTranslation(); + const { state: pdfState, dispatch } = useContext(PDFContext); + const { - state: { - mainState, - paginated, - zoomLevel, - numPages, - zoomJump, - defaultZoomLevel, - }, - dispatch, - } = useContext(PDFContext); + mainState, + paginated, + zoomLevel, + numPages, + zoomJump, + defaultZoomLevel, + } = pdfState; + + const { state: viewerState } = useContext(DocViewerContext); + const { config } = viewerState; const currentDocument = mainState?.currentDocument || null; - return ( - - {paginated && numPages > 1 && } + const pdfZoomOut = () => dispatch(setZoomLevel(zoomLevel - zoomJump)); + const pdfZoomIn = () => dispatch(setZoomLevel(zoomLevel + zoomJump)); + const pdfZoomReset = () => dispatch(setZoomLevel(defaultZoomLevel)); + const pdfTogglePaginated = () => dispatch(setPDFPaginated(!paginated)); + + const override = config?.pdfControls?.overrideComponent?.( + pdfState, + pdfZoomOut, + pdfZoomIn, + pdfZoomReset, + pdfTogglePaginated, + ); + + if (override) { + return override; + } else { + return ( + + {paginated && numPages > 1 && } + + {currentDocument?.fileData && ( + + + + )} + + + + + + + + - {currentDocument?.fileData && ( - - - - )} - - dispatch(setZoomLevel(zoomLevel - zoomJump))} - > - - - - dispatch(setZoomLevel(zoomLevel + zoomJump))} - > - - - - dispatch(setZoomLevel(defaultZoomLevel))} - disabled={zoomLevel === defaultZoomLevel} - > - - - - {numPages > 1 && ( dispatch(setPDFPaginated(!paginated))} + id="pdf-zoom-reset" + onMouseDown={pdfZoomReset} + disabled={zoomLevel === defaultZoomLevel} > - + - )} - - ); + + {numPages > 1 && ( + + + + )} + + ); + } }; export default PDFControls; From 4015922c07556874900464ecd4044f29440fe7b6 Mon Sep 17 00:00:00 2001 From: toma Date: Fri, 26 Sep 2025 16:16:23 +0200 Subject: [PATCH 2/5] add changes description in README --- README.md | 52 ++++++++++++++++++++ src/models.ts | 1 + src/renderers/pdf/components/PDFControls.tsx | 1 + 3 files changed, 54 insertions(+) diff --git a/README.md b/README.md index ee9c322..cca30ed 100644 --- a/README.md +++ b/README.md @@ -540,6 +540,58 @@ 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. + +Example: + +```tsx +const MyPDFControls = ( + pdfState, + pdfControlsConfig, + pdfZoomOut, + pdfZoomIn, + pdfZoomReset, + pdfTogglePaginated +) => { + // Example: Only show a custom zoom in/out + return ( +
+ + {pdfState.zoomLevel.toFixed(2)} + + + +
+ ); +}; + + +``` + +The parameters provided to your override function are: + +- `pdfState`: The current PDF renderer state (e.g., `zoomLevel`, `paginated`, `numPages`, etc.) +- `pdfControlsConfig`: The current pdfControls config object. +- `pdfZoomOut`: Function to decrease zoom. +- `pdfZoomIn`: Function to increase zoom. +- `pdfZoomReset`: Function to reset zoom to default. +- `pdfTogglePaginated`: Function to toggle between paginated and continuous scroll. + +If your override returns a React element, it will replace the default PDF controls UI. ### Overriding No Renderer (Error) diff --git a/src/models.ts b/src/models.ts index b3369b9..bdcbcff 100644 --- a/src/models.ts +++ b/src/models.ts @@ -63,6 +63,7 @@ export type IHeaderOverride = ( export type IPdfControlsOverride = { ( state: IPDFState, + config: IPdfControlsConfig, pdfZoomOut?: () => void, pdfZoomIn?: () => void, pdfZoomReset?: () => void, diff --git a/src/renderers/pdf/components/PDFControls.tsx b/src/renderers/pdf/components/PDFControls.tsx index 2073e5f..dea8051 100644 --- a/src/renderers/pdf/components/PDFControls.tsx +++ b/src/renderers/pdf/components/PDFControls.tsx @@ -40,6 +40,7 @@ const PDFControls: FC = () => { const override = config?.pdfControls?.overrideComponent?.( pdfState, + config.pdfControls, pdfZoomOut, pdfZoomIn, pdfZoomReset, From 0a7570c1b550bae1ffa964372bf60c216ddca293 Mon Sep 17 00:00:00 2001 From: toma Date: Fri, 26 Sep 2025 16:37:37 +0200 Subject: [PATCH 3/5] package.json and readme update --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index e8f9691..4e8d37e 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { - "name": "@cyntler/react-doc-viewer", + "name": "@unitfly/react-doc-viewer", "version": "1.17.1", "description": "File viewer for React.", - "author": "Matthew Mogford / Damian Cyntler", + "author": "Matthew Mogford / Damian Cyntler / Toma Karadole", "type": "module", "keywords": [ "reactjs", From 91289db236058ed08a28163394282edbd462354a Mon Sep 17 00:00:00 2001 From: toma Date: Fri, 26 Sep 2025 16:57:38 +0200 Subject: [PATCH 4/5] add github publish pipeline --- .github/workflows/publish.yml | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 .github/workflows/publish.yml diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml new file mode 100644 index 0000000..befd069 --- /dev/null +++ b/.github/workflows/publish.yml @@ -0,0 +1,31 @@ +name: Publish Package to Azure Artifacts + +on: + push: + tags: + - "*.*.*" # publish when you push a version tag like 1.0.0 + +jobs: + publish: + runs-on: ubuntu-latest + + steps: + - name: Checkout repo + uses: actions/checkout@v3 + + - name: Set up Node.js + uses: actions/setup-node@v3 + with: + node-version: 20 + registry-url: "https://pkgs.dev.azure.com/${{ secrets.AZURE_ORG }}/${{ secrets.AZURE_PROJECT }}/_packaging/${{ secrets.AZURE_FEED }}/npm/registry/" + + - name: Install dependencies + run: yarn install --frozen-lockfile + + - name: Build + run: yarn build + + - name: Publish to Azure Artifacts + run: npm publish + env: + NODE_AUTH_TOKEN: ${{ secrets.AZURE_NPM_TOKEN }} From d0997b84a149731fa8a4fe30b6956b894fe81d37 Mon Sep 17 00:00:00 2001 From: toma Date: Fri, 26 Sep 2025 17:22:45 +0200 Subject: [PATCH 5/5] changes in github publish yaml --- .github/workflows/publish.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index befd069..a317865 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -2,8 +2,8 @@ name: Publish Package to Azure Artifacts on: push: - tags: - - "*.*.*" # publish when you push a version tag like 1.0.0 + branches: + - main # only run when commits land in main (direct push or PR merge) jobs: publish: