react-pdfjs-multi 0.5.0 → 1.0.0-rc.1

package/README.md

@@ -1,15 +1,9 @@
 # react-pdfjs-multi
 
-[![Build Status](https://travis-ci.com/marcklei/react-pdfjs-multi.svg?branch=master)](https://travis-ci.com/marcklei/react-pdfjs-multi)
-[![David Dependencies](https://david-dm.org/marcklei/react-pdfjs-multi.svg)](https://david-dm.org/marcklei/react-pdfjs-multi)
-[![Coverage Status](https://coveralls.io/repos/github/marcklei/react-pdfjs-multi/badge.svg?branch=master)](https://coveralls.io/github/marcklei/react-pdfjs-multi?branch=master)
-
 React wrapper for pdfjs with multiple file support.
 
 This library uses [pdf.js][1].
 
-For a preview of the current development visit [github pages][2].
-
 > What does in development mean:
 >
 > 1.  **MINOR** versions represent **breaking changes**
@@ -24,45 +18,171 @@ or
 
 `npm i react-pdfjs-multi`
 
-Example Usage:
+Example Usage MultiViewer:
 
 ```javascript
-import React, { PureComponent } from 'react';
+import React from 'react';
 import { PdfMultiViewer } from 'react-pdfjs-multi';
 import 'react-pdfjs-multi/dist/react-pdfjs-multi.css';
 
-const pdfFiles = [
-  'pdfs/test-pdf-a.pdf',
-  {
-    title: 'Trace-based Just-in-Time Type Specialization for DynamicLanguages',
-    source: 'pdfs/compressed.tracemonkey-pldi-09.pdf',
-  },
-  'pdfs/test-pdf-b.pdf',
-  'pdfs/test-pdf-c.pdf',
-];
-
-class MultiViewerExample extends PureComponent {
-  render() {
-    return <PdfMultiViewer pdfs={pdfFiles} />;
-  }
-}
+const MultiViewerExample = () => {
+  const pdfFiles = [
+    'pdfs/test-pdf-a.pdf',
+    {
+      title:
+        'Trace-based Just-in-Time Type Specialization for DynamicLanguages',
+      source: 'pdfs/compressed.tracemonkey-pldi-09.pdf',
+    },
+    'pdfs/test-pdf-b.pdf',
+    'pdfs/test-pdf-c.pdf',
+  ];
+
+  return (
+    <PdfMultiViewer
+      pdfs={pdfFiles}
+      i18nData={{
+        download: 'Herunterladen',
+        scaleDown: 'Verkleinern',
+        scaleUp: 'Vergrößern',
+        originalSize: 'Originalgröße',
+        pages: 'Seiten',
+        zoom: 'Automatischer Zoom',
+      }}
+    />
+  );
+};
 
 export default MultiViewerExample;
 ```
 
+Example Usage Renderer (Typescript)
+
+```typescript
+import React, { FC, useState, useEffect } from 'react';
+import { PdfRenderer, PdfjsLib, PDFDocumentProxy } from 'react-pdfjs-multi';
+import workerSrc from 'react-pdfjs-multi/dist/pdf.worker.min.mjs?url';
+
+PdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;
+
+const RendererExample: FC = () => {
+  const [pdfDoc, setPdfDoc] = useState<PDFDocumentProxy>();
+
+  useEffect(() => {
+    const getPdfDoc = async () => {
+      const doc = await PdfjsLib.getDocument({
+        url: 'pdfs/compressed.tracemonkey-pldi-09.pdf',
+      }).promise;
+
+      setPdfDoc(doc);
+    };
+
+    getPdfDoc();
+  }, []);
+
+  if (!pdfDoc) return null;
+
+  return <PdfRenderer pdfDoc={pdfDoc} downloadBtn={false} />;
+};
+
+export default RendererExample;
+```
+
+### Example App
+
+A minimal workspace example lives at `apps/example`.
+
+```bash
+pnpm install
+pnpm start
+pnpm dev:example
+```
+
+Run `pnpm start` and `pnpm dev:example` in separate terminals during development.
+
+### Styling
+
+This library ships with optional default styles in
+`react-pdfjs-multi/dist/react-pdfjs-multi.css`. You can:
+
+- Use the defaults as-is.
+- Skip the CSS import and provide your own styles.
+- Override the defaults via CSS variables.
+
+Example override:
+
+```css
+.pdfjs-multi {
+  --pdfjs-multi-bg: #f7f7f7;
+  --pdfjs-multi-text: #1f2933;
+  --pdfjs-multi-surface: #ffffff;
+  --pdfjs-multi-texture: none;
+}
+```
+
+Available variables (non-exhaustive):
+
+| Scope | Variable | Default | Purpose |
+| --- | --- | --- | --- |
+| MultiViewer | `--pdfjs-multi-bg` | `#404040` | Base background |
+| MultiViewer | `--pdfjs-multi-text` | `#fff` | Text color |
+| MultiViewer | `--pdfjs-multi-surface` | `#565656` | List background |
+| MultiViewer | `--pdfjs-multi-surface-active` | `#474747` | Active list item |
+| MultiViewer | `--pdfjs-multi-muted-text` | `#cecece` | Metadata text |
+| MultiViewer | `--pdfjs-multi-divider` | `rgba(53, 52, 52, 0.81)` | List divider |
+| MultiViewer | `--pdfjs-multi-list-width` | `300px` | List width |
+| MultiViewer | `--pdfjs-multi-list-item-padding` | `25px 35px` | List item padding |
+| MultiViewer | `--pdfjs-multi-option-bar-height` | `33px` | Option bar height |
+| MultiViewer | `--pdfjs-multi-option-bar-padding` | `4px 2px 4px 10px` | Option bar padding |
+| MultiViewer | `--pdfjs-multi-min-height` | `360px` | Minimum viewer height |
+| Shared | `--pdfjs-multi-texture` | `url("./assets/texture.png")` | Background texture |
+| Controls | `--pdfjs-multi-controls-bg` | `#474747` | Controls background |
+| Controls | `--pdfjs-multi-controls-text` | `hsla(0, 0%, 100%, 0.8)` | Controls text |
+| Controls | `--pdfjs-multi-control-icon-zoom-out` | `image-set(...)` | Zoom out icon |
+| Controls | `--pdfjs-multi-control-icon-zoom-in` | `image-set(...)` | Zoom in icon |
+| Controls | `--pdfjs-multi-control-icon-rotate-left` | `image-set(...)` | Rotate left icon |
+| Controls | `--pdfjs-multi-control-icon-rotate-right` | `image-set(...)` | Rotate right icon |
+| Controls | `--pdfjs-multi-control-icon-download` | `image-set(...)` | Download icon |
+| Controls | `--pdfjs-multi-control-icon-toggle-list` | `image-set(...)` | Toggle list icon |
+| Select | `--pdfjs-multi-select-icon` | `url("./assets/toolbarButton-menuArrows.png")` | Select icon |
+
+### Icons
+
+Use the `icons` prop to override the default PNGs. Values can be plain
+URLs (wrapped as `url(...)`) or full CSS values (e.g. `image-set(...)` or
+`url(...)`).
+
+```tsx
+import type { IconConfig } from 'react-pdfjs-multi';
+
+const icons: IconConfig = {
+  zoomIn: '/icons/zoom-in.svg',
+  zoomOut: '/icons/zoom-out.svg',
+  rotateLeft: '/icons/rotate-left.svg',
+  rotateRight: '/icons/rotate-right.svg',
+  download: '/icons/download.svg',
+  toggleList: '/icons/toggle-list.svg',
+  selectArrow: '/icons/select-arrow.svg',
+  texture: 'none',
+};
+```
+
 ### PdfMultiViewer
 
-The MultiViewer allows you to pass an array of source strings or an object definition and it then loads all PDF's async and shows the renderer as soon as the first PDF is loaded.
+The MultiViewer allows you to pass an array of source strings or an object definition and it lazy-loads PDFs by default, showing the renderer as soon as the active PDF is loaded.
 
 Props:
 
-| Name       | Required | Default | Type       | Description                                                    |
-| ---------- | -------- | ------- | ---------- | -------------------------------------------------------------- |
-| pdfs       | true     |         | {array}    | An array of strings or objects                                 |
-| autoZoom   |          | true    | {boolean}  | enables/disables autoZoom on component mount and window resize |
-| controls   |          | true    | {boolean}  | enables/disables controls to e.g. change renderer zoom         |
-| i18nData   |          | {}\*    | {I18nData} | An object of translated strings, default language is en        |
-| startIndex |          | 0       | {number}   | first pdf to load using array index                            |
+| Name            | Required | Default | Type            | Description                                                    |
+| --------------- | -------- | ------- | --------------- | -------------------------------------------------------------- |
+| pdfs            | true     |         | {array}         | An array of strings or objects                                 |
+| autoZoom        |          | true    | {boolean}       | enables/disables autoZoom on component mount and window resize |
+| controls        |          | true    | {boolean}       | enables/disables controls to e.g. change renderer zoom         |
+| icons           |          |         | {IconConfig}    | Override default icons and texture                             |
+| i18nData        |          | {}\*    | {I18nData}      | An object of translated strings, default language is en        |
+| startIndex      |          | 0       | {number}        | first pdf to display using array index                         |
+| lazyLoad        |          | true    | {boolean}       | load only the active PDF until a list item is selected         |
+| initialLoadIndex|          | startIndex | {number|string} | which PDF to prefetch on mount when lazyLoad is enabled     |
+| workerSrc       |          |         | {string}        | pdf.js worker URL                                              |
 
 ### i18n
 
@@ -73,6 +193,7 @@ To be able to use different i18n libraries eg. i18next or react-intl you can pas
 ```javascript
 {
   // Viewer
+  loading: 'Loading...',
   pages: 'Pages',
   // Renderer
   zoom: 'Automatic zoom',
@@ -87,7 +208,7 @@ To be able to use different i18n libraries eg. i18next or react-intl you can pas
 
 ### PdfRenderer
 
-If you like to implement your own custom multi renderer logic you can use the PdfRenderer component. For an implementation example see [Example][3].
+If you like to implement your own custom multi renderer logic you can use the PdfRenderer component.
 
 Props:
 
@@ -97,6 +218,7 @@ Props:
 | autoZoom      |          | true    | {boolean}          | enables/disables autoZoom on component mount and window resize |
 | controls      |          | true    | {boolean}          | enables/disables controls to e.g. change renderer zoom         |
 | downloadBtn   |          | true    | {boolean}          | enables/disables download button                               |
+| icons         |          |         | {IconConfig}       | Override default icons and texture                             |
 | i18nData      |          | {}\*    | {I18nDataRenderer} | An object of translated strings, default language is en        |
 | zoom          |          | null    | {number}           | Initial Zoom                                                   |
 | rotation      |          | null    | {number}           | Initial Rotation                                               |
@@ -106,5 +228,3 @@ Props:
 | pdfChangeHook |          | null    | {func}             | Callback function which gets a position object                 |
 
 [1]: https://mozilla.github.io/pdf.js/
-[2]: https://marcklei.github.io/react-pdfjs-multi/
-[3]: https://github.com/marcklei/react-pdfjs-multi/blob/master/examples/src/RendererExample.js

package/dist/components/PdfMultiViewer/PdfMultiViewer.d.ts

@@ -0,0 +1,19 @@
+import '@/components/PdfMultiViewer/PdfMultiViewer.css';
+import { type I18nData, type PdfSource } from '@/components/PdfMultiViewer/usePdfMultiViewer';
+import type { IconConfig } from '@/types/iconConfig';
+type DefaultProps = {
+    autoZoom?: boolean;
+    controls?: boolean;
+    icons?: IconConfig;
+    lazyLoad?: boolean;
+    initialLoadIndex?: string | number;
+    startIndex?: string;
+    i18nData?: I18nData;
+    workerSrc?: string;
+};
+type Props = {
+    pdfs: PdfSource[];
+} & Partial<DefaultProps>;
+declare const PdfMultiViewer: ({ pdfs, autoZoom, controls, icons, lazyLoad, initialLoadIndex, startIndex, i18nData, workerSrc, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default PdfMultiViewer;
+export type { I18nData };

package/dist/components/PdfMultiViewer/PdfMultiViewerView.d.ts

@@ -0,0 +1,20 @@
+import type { CSSProperties, RefObject } from 'react';
+import type { I18nData, PdfFile } from '@/components/PdfMultiViewer/usePdfMultiViewer';
+import type { RendererDocumentPosition } from '@/components/PdfRenderer/usePdfRenderer';
+type Props = {
+    activeIndex: string;
+    autoZoom: boolean;
+    controls: boolean;
+    files: PdfFile[];
+    iconStyles?: CSSProperties;
+    i18nData: I18nData;
+    listVisible: boolean;
+    overlayMode: boolean;
+    pdfToShow?: PdfFile;
+    viewerContainerRef: RefObject<HTMLDivElement>;
+    onRememberPosition: (index: string, position: RendererDocumentPosition) => void;
+    onSelectPdf: (nextIndex: string, file: PdfFile) => () => void;
+    onToggleList: () => void;
+};
+declare const PdfMultiViewerView: ({ activeIndex, autoZoom, controls, files, iconStyles, i18nData, listVisible, overlayMode, pdfToShow, viewerContainerRef, onRememberPosition, onSelectPdf, onToggleList, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default PdfMultiViewerView;

package/dist/components/PdfMultiViewer/index.d.ts

@@ -0,0 +1,4 @@
+export { default, default as PdfMultiViewer } from './PdfMultiViewer';
+export { default as PdfMultiViewerView } from './PdfMultiViewerView';
+export type { I18nData, PdfDefinition, PdfFile, PdfSource, } from './usePdfMultiViewer';
+export { usePdfMultiViewer } from './usePdfMultiViewer';

package/dist/components/PdfMultiViewer/usePdfMultiViewer.d.ts

@@ -0,0 +1,44 @@
+import type { PDFDocumentProxy } from 'pdfjs-dist';
+import type { RendererDocumentPosition } from '@/components/PdfRenderer/usePdfRenderer';
+import type { I18nDataRenderer } from '@/contexts';
+export type PdfDefinition = {
+    title: string;
+    source: string;
+};
+export type PdfSource = string | PdfDefinition;
+export type PdfFile = {
+    index?: number;
+    title?: string;
+    zoom?: number;
+    rotation?: number;
+    scrollTop?: number | null;
+    scrollLeft?: number | null;
+    isLoading?: boolean;
+    source: string;
+    pdfProxy: PDFDocumentProxy | null;
+};
+export type I18nData = {
+    loading?: string;
+    pages?: string;
+} & I18nDataRenderer;
+type UsePdfMultiViewerArgs = {
+    pdfs: PdfSource[];
+    startIndex: string;
+    i18nData: I18nData;
+    lazyLoad: boolean;
+    initialLoadIndex?: string | number;
+    workerSrc?: string;
+};
+export declare const usePdfMultiViewer: ({ pdfs, startIndex, i18nData, lazyLoad, initialLoadIndex, workerSrc, }: UsePdfMultiViewerArgs) => {
+    activeIndex: string;
+    files: PdfFile[];
+    i18nData: I18nData;
+    listVisible: boolean;
+    overlayMode: boolean;
+    pdfToShow: PdfFile;
+    rememberPosition: (index: string, position: RendererDocumentPosition) => void;
+    selectPdf: (nextIndex: string, file: PdfFile) => () => void;
+    toggleList: () => void;
+    viewerContainerRef: import("react").RefObject<HTMLDivElement>;
+};
+export {};

package/dist/components/PdfRenderer/PdfRenderer.d.ts

@@ -0,0 +1,28 @@
+import type { PDFDocumentProxy } from 'pdfjs-dist';
+import type { PDFViewer } from 'pdfjs-dist/web/pdf_viewer.mjs';
+import 'pdfjs-dist/web/pdf_viewer.css';
+import '@/components/PdfRenderer/PdfRenderer.css';
+import { type PdfChangeHook } from '@/components/PdfRenderer/usePdfRenderer';
+import { type I18nDataRenderer } from '@/contexts';
+import type { IconConfig } from '@/types/iconConfig';
+export type { RendererDocumentPosition } from '@/components/PdfRenderer/usePdfRenderer';
+type DefaultProps = {
+    activeIndex?: string;
+    autoZoom?: boolean;
+    controls?: boolean;
+    downloadBtn: boolean;
+    icons?: IconConfig;
+    i18nData?: I18nDataRenderer;
+    pdfChangeHook?: PdfChangeHook | null;
+    zoom?: number;
+    rotation?: number;
+    scrollTop?: number | null;
+    scrollLeft?: number | null;
+};
+export type PdfRendererHandle = {
+    pdfViewer: PDFViewer | null;
+};
+declare const PdfRenderer: import("react").ForwardRefExoticComponent<{
+    pdfDoc: PDFDocumentProxy;
+} & Partial<DefaultProps> & import("react").RefAttributes<PdfRendererHandle>>;
+export default PdfRenderer;

package/dist/{PdfRendererControls.d.ts → components/PdfRenderer/PdfRendererControls.d.ts}

@@ -1,15 +1,14 @@
-import { SFC } from 'react';
-import './PdfRendererControls.scss';
-declare type Props = {
-    autoZoom?: boolean;
-    downloadBtn?: boolean;
-    onDownload: () => void;
-    onZoomIn: () => void;
-    onZoomOut: () => void;
-    onRotateRight: () => void;
-    onRotateLeft: () => void;
-    scale: number;
-    setScale: (scale: number) => void;
-};
-declare const PdfControls: SFC<Props>;
-export default PdfControls;
+import '@/components/PdfRenderer/PdfRendererControls.css';
+type Props = {
+    autoZoom?: boolean;
+    downloadBtn?: boolean;
+    onDownload: () => void;
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+    onRotateRight: () => void;
+    onRotateLeft: () => void;
+    scale: number;
+    setScale: (scale: number) => void;
+};
+declare const PdfControls: ({ autoZoom, downloadBtn, onDownload, onZoomIn, onZoomOut, onRotateRight, onRotateLeft, scale, setScale, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default PdfControls;

package/dist/components/PdfRenderer/PdfRendererView.d.ts

@@ -0,0 +1,20 @@
+import type { CSSProperties, RefObject } from 'react';
+import { type I18nDataRenderer } from '@/contexts';
+type Props = {
+    autoZoom: boolean;
+    containerRef: RefObject<HTMLDivElement>;
+    controls: boolean;
+    downloadBtn: boolean;
+    iconStyles?: CSSProperties;
+    i18nData?: I18nDataRenderer;
+    isLoading: boolean;
+    scale: number;
+    setScale: (scale: number) => void;
+    onDownload: () => void;
+    onRotateLeft: () => void;
+    onRotateRight: () => void;
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+};
+declare const PdfRendererView: ({ autoZoom, containerRef, controls, downloadBtn, iconStyles, i18nData, isLoading, scale, setScale, onDownload, onRotateLeft, onRotateRight, onZoomIn, onZoomOut, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default PdfRendererView;

package/dist/components/PdfRenderer/ZoomSelectBox.d.ts

@@ -0,0 +1,9 @@
+import '@/lib/resizeAutoZoomEvent';
+import '@/components/PdfRenderer/ZoomSelectBox.css';
+type Props = {
+    autoZoom?: boolean;
+    scale: number;
+    setScale: (scale: number) => void;
+};
+declare const ZoomSelectBox: ({ autoZoom, scale, setScale }: Props) => import("react/jsx-runtime").JSX.Element;
+export default ZoomSelectBox;

package/dist/components/PdfRenderer/index.d.ts

@@ -0,0 +1,7 @@
+export type { PdfRendererHandle } from './PdfRenderer';
+export { default, default as PdfRenderer } from './PdfRenderer';
+export { default as PdfRendererControls } from './PdfRendererControls';
+export { default as PdfRendererView } from './PdfRendererView';
+export type { PdfChangeHook, RendererDocumentPosition, } from './usePdfRenderer';
+export { usePdfRenderer } from './usePdfRenderer';
+export { default as ZoomSelectBox } from './ZoomSelectBox';

package/dist/components/PdfRenderer/usePdfRenderer.d.ts

@@ -0,0 +1,32 @@
+import type { PDFDocumentProxy } from 'pdfjs-dist';
+import type { PDFViewer } from 'pdfjs-dist/web/pdf_viewer.mjs';
+export type RendererDocumentPosition = {
+    zoom: number;
+    rotation: number;
+    scrollTop: number | null;
+    scrollLeft?: number | null;
+};
+export type PdfChangeHook = (documentIndex: string, position: RendererDocumentPosition) => void;
+type UsePdfRendererArgs = {
+    activeIndex: string;
+    autoZoom: boolean;
+    pdfChangeHook?: PdfChangeHook | null;
+    pdfDoc: PDFDocumentProxy;
+    rotation: number;
+    scrollLeft?: number | null;
+    scrollTop?: number | null;
+    zoom?: number;
+};
+export declare const usePdfRenderer: ({ activeIndex, autoZoom, pdfChangeHook, pdfDoc, rotation, scrollLeft, scrollTop, zoom, }: UsePdfRendererArgs) => {
+    containerRef: import("react").RefObject<HTMLDivElement>;
+    download: () => Promise<void>;
+    isLoading: boolean;
+    pdfViewerRef: import("react").MutableRefObject<PDFViewer | null>;
+    rotateLeft: () => void;
+    rotateRight: () => void;
+    scale: number;
+    setScale: (nextScaleValue: number) => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+};
+export {};

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export { type I18nData, type PdfDefinition, type PdfFile, PdfMultiViewer, type PdfSource, usePdfMultiViewer, } from './PdfMultiViewer';
+export { type PdfChangeHook, PdfRenderer, PdfRendererControls, type PdfRendererHandle, PdfRendererView, type RendererDocumentPosition, usePdfRenderer, ZoomSelectBox, } from './PdfRenderer';

package/dist/{I18nContext.d.ts → contexts/I18nContext.d.ts}

@@ -1,12 +1,12 @@
-import React from 'react';
-export declare type I18nDataRenderer = {
-    zoom?: string;
-    originalSize?: string;
-    scaleUp?: string;
-    scaleDown?: string;
-    rotateLeft?: string;
-    rotateRight?: string;
-    download?: string;
-};
-export declare const defaultI18n: I18nDataRenderer;
-export declare const I18nContext: React.Context<I18nDataRenderer>;
+import React from 'react';
+export type I18nDataRenderer = {
+    zoom?: string;
+    originalSize?: string;
+    scaleUp?: string;
+    scaleDown?: string;
+    rotateLeft?: string;
+    rotateRight?: string;
+    download?: string;
+};
+export declare const defaultI18n: I18nDataRenderer;
+export declare const I18nContext: React.Context<I18nDataRenderer>;

package/dist/contexts/index.d.ts

@@ -0,0 +1 @@
+export { defaultI18n, I18nContext, type I18nDataRenderer, } from './I18nContext';

package/dist/index.css

@@ -0,0 +1,6 @@
+
+
+
+
+
+/*# sourceMappingURL=index.css.map*/

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.css","names":[],"sources":["../src/components/PdfMultiViewer/PdfMultiViewer.css","../src/components/PdfRenderer/PdfRenderer.css","../src/components/PdfRenderer/ZoomSelectBox.css","../src/components/PdfRenderer/PdfRendererControls.css"],"sourcesContent":["","","",""],"mappings":""}

package/dist/index.d.ts

@@ -1,5 +1,6 @@
-import PdfRenderer, { RendererDocumentPosition } from './PdfRenderer';
-import PdfMultiViewer, { I18nData } from './PdfMultiViewer';
-import { PDFDocumentProxy } from 'pdfjs-dist';
-declare const PdfjsLib: any;
-export { I18nData, PdfMultiViewer, PdfRenderer, PdfjsLib, PDFDocumentProxy, RendererDocumentPosition, };
+import type { PDFDocumentProxy } from 'pdfjs-dist';
+import { type I18nData, PdfMultiViewer, PdfRenderer, type RendererDocumentPosition } from '@/components';
+import { PdfjsLib } from '@/lib';
+import type { IconConfig } from '@/types/iconConfig';
+export { PdfMultiViewer, PdfRenderer, PdfjsLib };
+export type { I18nData, IconConfig, PDFDocumentProxy, RendererDocumentPosition, };