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 }} diff --git a/README.md b/README.md index 63da976..dbf832a 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) @@ -543,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: @@ -554,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} + + }
); }; @@ -591,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/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/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; 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) {