react-fast-pdf - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/PDFPreviewer.js

@@ -36,3 +36,4 @@ "use strict";
 require("react-pdf/dist/Page/TextLayer.css");
-const styles_1 = __importDefault(require("./styles"));
+const styles_1 = require("./styles");
+const PDFPasswordForm_1 = __importDefault(require("./PDFPasswordForm"));
 /**
@@ -48,3 +49,7 @@ * Each page has a default border. The app should take this size into account
 const LARGE_SCREEN_SIDE_SPACING = 40;
-// TODO: Comment
+/**
+ * An object in which additional parameters to be passed to PDF.js can be defined.
+ * 1. cMapUrl - The URL where the predefined Adobe CMaps are located. Include the trailing slash.
+ * 2. cMapPacked - specifies if the Adobe CMaps are binary packed or not. The default value is `true`.
+ */
 const DEFAULT_DOCUMENT_OPTIONS = {
@@ -54,5 +59,14 @@ cMapUrl: 'cmaps/',
 };
-// TODO: Comment
+/**
+ * Link target for external links rendered in annotations.
+ */
 const DEFAULT_EXTERNAL_LINK_TARGET = '_blank';
 /**
+ * Constants for password-related error responses received from react-pdf.
+ */
+const PDF_PASSWORD_FORM_RESPONSES = {
+    NEED_PASSWORD: 1,
+    INCORRECT_PASSWORD: 2,
+};
+/**
  * Sets attributes to list container.
@@ -92,3 +106,6 @@ * It unblocks a default scroll by keyboard of browsers.
     const [containerHeight, setContainerHeight] = (0, react_1.useState)(0);
+    const [shouldRequestPassword, setShouldRequestPassword] = (0, react_1.useState)(false);
+    const [isPasswordInvalid, setIsPasswordInvalid] = (0, react_1.useState)(false);
     const containerRef = (0, react_1.useRef)(null);
+    const onPasswordCallbackRef = (0, react_1.useRef)(null);
     /**
@@ -130,8 +147,34 @@ * Calculates a proper page width.
             setNumPages(pdf.numPages);
-            // TODO: Implement behaviour
-            // shouldRequestPassword: false,
-            // isPasswordInvalid: false,
+            setShouldRequestPassword(false);
+            setIsPasswordInvalid(false);
         }, () => { });
     };
     /**
+     * Initiate password challenge process. The react-pdf/Document
+     * component calls this handler to indicate that a PDF requires a
+     * password, or to indicate that a previously provided password was
+     * invalid.
+     *
+     * The PasswordResponses constants used below were copied from react-pdf
+     * because they're not exported in entry.webpack.
+     */
+    const initiatePasswordChallenge = (callback, reason) => {
+        onPasswordCallbackRef.current = callback;
+        if (reason === PDF_PASSWORD_FORM_RESPONSES.NEED_PASSWORD) {
+            setShouldRequestPassword(true);
+        }
+        else if (reason === PDF_PASSWORD_FORM_RESPONSES.INCORRECT_PASSWORD) {
+            setShouldRequestPassword(true);
+            setIsPasswordInvalid(true);
+        }
+    };
+    /**
+     * Send password to react-pdf via its callback so that it can attempt to load
+     * the PDF.
+     */
+    const attemptPDFLoad = (password) => {
+        var _a;
+        (_a = onPasswordCallbackRef.current) === null || _a === void 0 ? void 0 : _a.call(onPasswordCallbackRef, password);
+    };
+    /**
      * Render a specific page based on its index.
@@ -155,6 +198,5 @@ * The method includes a wrapper to apply virtualized styles.
     }, []);
-    return (react_1.default.createElement("div", { ref: containerRef, style: Object.assign(Object.assign({}, styles_1.default.container), containerStyle) },
-        react_1.default.createElement(react_pdf_1.Document, { file: file, options: DEFAULT_DOCUMENT_OPTIONS, externalLinkTarget: DEFAULT_EXTERNAL_LINK_TARGET, error: react_1.default.createElement("p", null, "Failed to load the PDF file :("), loading: react_1.default.createElement("p", null, "Loading..."), onLoadSuccess: onDocumentLoadSuccess, 
-            // TODO: Implement behaviour
-            onPassword: () => { } }, pageViewports.length > 0 && (react_1.default.createElement(react_window_1.VariableSizeList, { style: Object.assign(Object.assign({}, styles_1.default.list), contentContainerStyle), outerRef: setListAttributes, width: containerWidth, height: containerHeight, itemCount: numPages, itemSize: calculatePageHeight, estimatedItemSize: calculatePageHeight(0) }, renderPage)))));
+    return (react_1.default.createElement("div", { ref: containerRef, style: Object.assign(Object.assign({}, styles_1.pdfPreviewerStyles.container), containerStyle) },
+        react_1.default.createElement(react_pdf_1.Document, { file: file, options: DEFAULT_DOCUMENT_OPTIONS, externalLinkTarget: DEFAULT_EXTERNAL_LINK_TARGET, error: react_1.default.createElement("p", null, "Failed to load the PDF file :("), loading: react_1.default.createElement("p", null, "Loading..."), onLoadSuccess: onDocumentLoadSuccess, onPassword: initiatePasswordChallenge }, pageViewports.length > 0 && (react_1.default.createElement(react_window_1.VariableSizeList, { style: Object.assign(Object.assign({}, styles_1.pdfPreviewerStyles.list), contentContainerStyle), outerRef: setListAttributes, width: containerWidth, height: containerHeight, itemCount: numPages, itemSize: calculatePageHeight, estimatedItemSize: calculatePageHeight(0) }, renderPage))),
+        shouldRequestPassword && (react_1.default.createElement(PDFPasswordForm_1.default, { isFocused: true, isPasswordInvalid: isPasswordInvalid, onSubmit: attemptPDFLoad, onPasswordChange: () => setIsPasswordInvalid(false) }))));
 }
@@ -161,0 +203,0 @@ PDFPreviewer.propTypes = propTypes;

dist/styles.d.ts

@@ -1,18 +0,5 @@
-declare const styles: {
-    container: {
-        width: string;
-        height: string;
-        /**
-         * It's being used on Web/Desktop only to vertically center short PDFs,
-         * while preventing the overflow of the top of long PDF files.
-         */
-        display: string;
-    };
-    list: {
-        readonly overflowX: "hidden";
-        readonly boxShadow: "none";
-        readonly outline: "none";
-    };
-};
-export default styles;
+import type { ComponentStyles } from './types';
+declare const pdfPreviewerStyles: ComponentStyles;
+declare const pdfPasswordFormStyles: ComponentStyles;
+export { pdfPreviewerStyles, pdfPasswordFormStyles };
 //# sourceMappingURL=styles.d.ts.map

dist/styles.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const styles = {
+exports.pdfPasswordFormStyles = exports.pdfPreviewerStyles = void 0;
+const pdfPreviewerStyles = {
     container: {
@@ -12,2 +13,3 @@ width: '100%',
         display: 'grid',
+        position: 'relative',
     },
@@ -21,2 +23,59 @@ list: {
 };
-exports.default = styles;
+exports.pdfPreviewerStyles = pdfPreviewerStyles;
+const pdfPasswordFormStyles = {
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'absolute',
+        zIndex: 1,
+        bottom: 0,
+        right: 0,
+        left: 0,
+        top: 0,
+        backgroundColor: '#07271f',
+    },
+    infoMessage: {
+        fontSize: 18,
+        textAlign: 'center',
+    },
+    infoMessageButton: {
+        textDecoration: 'underline',
+        cursor: 'pointer',
+    },
+    form: {
+        marginTop: 16,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+    },
+    inputLabel: {
+        fontSize: 16,
+    },
+    input: {
+        marginLeft: 16,
+        padding: '8px 16px',
+        fontSize: 16,
+        border: 0,
+        borderRadius: 16,
+        backgroundColor: '#184e3d',
+        outline: 'none',
+    },
+    errorMessage: {
+        marginTop: 8,
+        color: '#f25730',
+        fontSize: 16,
+        textAlign: 'center',
+    },
+    confirmButton: {
+        marginTop: 16,
+        padding: '8px 16px',
+        fontSize: 18,
+        border: 0,
+        borderRadius: 16,
+        backgroundColor: '#03d47c',
+        cursor: 'pointer',
+    },
+};
+exports.pdfPasswordFormStyles = pdfPasswordFormStyles;

dist/types.d.ts

@@ -0,1 +1,2 @@
+import { CSSProperties } from 'react';
 type Page = {
@@ -14,3 +15,6 @@ getViewport: ({ scale }: {
 };
-export type { PDFDocument, PageViewport };
+type ComponentStyles = {
+    [key: string]: CSSProperties;
+};
+export type { PDFDocument, PageViewport, ComponentStyles };
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "react-fast-pdf",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "react-fast-pdf",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

src/styles.ts

@@ -1,2 +0,4 @@
-const styles = {
+import type {ComponentStyles} from './types';
+
+const pdfPreviewerStyles: ComponentStyles = {
     container: {
@@ -10,2 +12,3 @@ width: '100%',
         display: 'grid',
+        position: 'relative',
     },
@@ -20,2 +23,59 @@ list: {
 
-export default styles;
+const pdfPasswordFormStyles: ComponentStyles = {
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'absolute',
+        zIndex: 1,
+        bottom: 0,
+        right: 0,
+        left: 0,
+        top: 0,
+        backgroundColor: '#07271f',
+    },
+    infoMessage: {
+        fontSize: 18,
+        textAlign: 'center',
+    },
+    infoMessageButton: {
+        textDecoration: 'underline',
+        cursor: 'pointer',
+    },
+    form: {
+        marginTop: 16,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+    },
+    inputLabel: {
+        fontSize: 16,
+    },
+    input: {
+        marginLeft: 16,
+        padding: '8px 16px',
+        fontSize: 16,
+        border: 0,
+        borderRadius: 16,
+        backgroundColor: '#184e3d',
+        outline: 'none',
+    },
+    errorMessage: {
+        marginTop: 8,
+        color: '#f25730',
+        fontSize: 16,
+        textAlign: 'center',
+    },
+    confirmButton: {
+        marginTop: 16,
+        padding: '8px 16px',
+        fontSize: 18,
+        border: 0,
+        borderRadius: 16,
+        backgroundColor: '#03d47c',
+        cursor: 'pointer',
+    },
+};
+
+export {pdfPreviewerStyles, pdfPasswordFormStyles};

src/types.ts

@@ -0,1 +1,3 @@
+import {CSSProperties} from 'react';
+
 type Page = {
@@ -15,2 +17,6 @@ getViewport: ({scale}: {scale: number}) => PageViewport;
 
-export type {PDFDocument, PageViewport};
+type ComponentStyles = {
+    [key: string]: CSSProperties;
+};
+
+export type {PDFDocument, PageViewport, ComponentStyles};

No alert changes

Improved metrics

Total package byte prevSize

46643

increased by103.07%

Number of package files

25

increased by47.06%

Lines of code

1046

increased by118.83%

No dependency changes