diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
new file mode 100644
index 0000000..a317865
--- /dev/null
+++ b/.github/workflows/publish.yml
@@ -0,0 +1,31 @@
+name: Publish Package to Azure Artifacts
+
+on:
+ push:
+ branches:
+ - main # only run when commits land in main (direct push or PR merge)
+
+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 }}
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/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",
diff --git a/src/models.ts b/src/models.ts
index 6624f32..bdcbcff 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,18 @@ 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 interface ITheme {
primary?: string;
secondary?: string;
diff --git a/src/renderers/pdf/components/PDFControls.tsx b/src/renderers/pdf/components/PDFControls.tsx
index 4a86c34..dea8051 100644
--- a/src/renderers/pdf/components/PDFControls.tsx
+++ b/src/renderers/pdf/components/PDFControls.tsx
@@ -13,74 +13,89 @@ 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,
+ config.pdfControls,
+ 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 && (
- )}
-
- );
+
+ {numPages > 1 && (
+
+ )}
+
+ );
+ }
};
export default PDFControls;