@garage-panda/react-pdf-export - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

lib/components/PdfExport.d.ts

@@ -1,8 +0,15 @@
-import React, { RefObject } from 'react';
+import React, { MutableRefObject, RefObject } from 'react';
 import { HeadOptions } from '../types';
+import '../css/index.css';
 interface PdfExportProps {
-    containerRef: RefObject<HTMLIFrameElement>;
+    containerRef: {
+        iframeRef: RefObject<HTMLIFrameElement>;
+        populateRef: MutableRefObject<() => void>;
+    };
+    className?: string;
+    showInDom?: boolean;
     options?: HeadOptions;
+    lazyLoad?: boolean;
 }
 declare const PdfExport: React.FC<PdfExportProps>;
 export default PdfExport;

lib/components/PdfExport.js

@@ -27,29 +27,56 @@ "use strict";
 var react_dom_1 = __importDefault(require("react-dom"));
+var use_await_dom_render_1 = require("@garage-panda/use-await-dom-render");
 var common_utils_1 = require("../utils/common-utils");
+require("../css/index.css");
 var PdfExport = function (_a) {
-    var containerRef = _a.containerRef, options = _a.options, children = _a.children;
-    react_1.useEffect(function () {
-        if (!containerRef.current) {
-            return;
-        }
-        var mergedOptions = common_utils_1.mergeOptions(options);
-        var mountNode = containerRef.current.contentWindow.document;
-        mergedOptions.styles.forEach(function (styleHref) {
-            var linkElement = mountNode.createElement('link');
-            linkElement.type = 'text/css';
-            linkElement.rel = 'stylesheet';
-            linkElement.href = styleHref;
-            mountNode.head.appendChild(linkElement);
+    var containerRef = _a.containerRef, className = _a.className, _b = _a.showInDom, showInDom = _b === void 0 ? true : _b, options = _a.options, _c = _a.lazyLoad, lazyLoad = _c === void 0 ? false : _c, children = _a.children;
+    var _d = use_await_dom_render_1.useAwaitDomRender(), observer = _d[0], startWait = _d[1];
+    var attachObserverListener = function (mountNode, pdfContainer) {
+        observer.on('load', function () {
+            observer.removeListeners();
+            containerRef.iframeRef.current.contentWindow.print();
+            mountNode.head.innerHTML = '';
+            mountNode.body.innerHTML = '';
         });
-        mergedOptions.scripts.forEach(function (scriptSrc) {
-            var scriptElement = mountNode.createElement('script');
-            scriptElement.src = scriptSrc;
-            mountNode.head.appendChild(scriptElement);
-        });
+        startWait(pdfContainer);
+    };
+    var populateChildren = function (mountNode) {
         var pdfContainer = mountNode.createElement('div');
         mountNode.body.appendChild(pdfContainer);
+        if (lazyLoad) {
+            attachObserverListener(mountNode, pdfContainer);
+        }
         react_dom_1.default.render(children, pdfContainer);
+    };
+    react_1.useEffect(function () {
+        if (!lazyLoad) {
+            return;
+        }
+        var mountNode = containerRef.iframeRef.current.contentWindow.document;
+        containerRef.populateRef.current = function () {
+            populateChildren(mountNode);
+        };
+    }, [lazyLoad]);
+    react_1.useEffect(function () {
+        if (!containerRef.iframeRef.current) {
+            return;
+        }
+        var _a = common_utils_1.mergeOptions(options), includeParentStyles = _a.includeParentStyles, styles = _a.styles, scripts = _a.scripts;
+        var mountNode = containerRef.iframeRef.current.contentWindow.document;
+        if (includeParentStyles) {
+            var parentStyles = document.querySelectorAll('style');
+            parentStyles.forEach(function (style) { return common_utils_1.cloneStyle(mountNode, style); });
+        }
+        styles.forEach(function (href) { return common_utils_1.appendStyle(mountNode, href); });
+        scripts.forEach(function (src) { return common_utils_1.appendScript(mountNode, src); });
+        if (!lazyLoad) {
+            populateChildren(mountNode);
+        }
+        return function () {
+            mountNode.head.innerHTML = '';
+            mountNode.body.innerHTML = '';
+        };
     }, [options]);
-    return (react_1.default.createElement("iframe", { ref: containerRef, title: 'hahha' }));
+    return (react_1.default.createElement("iframe", { ref: containerRef.iframeRef, className: className + " " + (!showInDom ? 'react-pdf-export-hide' : '') }));
 };
 exports.default = PdfExport;

lib/hooks/useGeneratePdf.d.ts

@@ -1,5 +0,2 @@
-declare const _default: () => {
-    generatePdf: any;
-    containerRef: any;
-};
+declare const _default: () => any;
 export default _default;

lib/hooks/useGeneratePdf.js

@@ -5,11 +5,23 @@ "use strict";
 exports.default = (function () {
-    var containerRef = react_1.useRef();
+    var iframeRef = react_1.useRef();
+    var populateRef = react_1.useRef(null);
     var generatePdf = react_1.useCallback(function () {
-        if (!containerRef.current) {
+        if (!iframeRef.current) {
             return;
         }
-        ;
-        containerRef.current.contentWindow.print();
-    }, [containerRef]);
-    return { generatePdf: generatePdf, containerRef: containerRef };
+        var isLazyLoad = !!populateRef.current;
+        if (isLazyLoad) {
+            populateRef.current();
+        }
+        else {
+            iframeRef.current.contentWindow.print();
+        }
+    }, [iframeRef]);
+    return {
+        generatePdf: generatePdf,
+        containerRef: {
+            iframeRef: iframeRef,
+            populateRef: populateRef,
+        },
+    };
 });

lib/types.d.ts

 export interface HeadOptions {
     styles?: string[];
     scripts?: string[];
+    includeParentStyles?: boolean;
 }

lib/utils/common-utils.d.ts

 import { HeadOptions } from '../types';
-export declare const mergeOptions: (options: HeadOptions) => {
-    styles?: string[];
-    scripts?: string[];
-};
+export declare const mergeOptions: (options: HeadOptions) => HeadOptions;
+export declare const appendStyle: (target: Document, href: string) => void;
+export declare const appendScript: (target: Document, src: string) => void;
+export declare const cloneStyle: (target: Document, style: Node) => void;

lib/utils/common-utils.js

@@ -14,6 +14,7 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mergeOptions = void 0;
+exports.cloneStyle = exports.appendScript = exports.appendStyle = exports.mergeOptions = void 0;
 var DEFAULT_HEAD_OPTIONS = {
     styles: [],
     scripts: [],
+    includeParentStyles: true,
 };
@@ -24,1 +25,20 @@ var mergeOptions = function (options) {
 exports.mergeOptions = mergeOptions;
+var appendStyle = function (target, href) {
+    var styleLink = target.createElement('link');
+    styleLink.type = 'text/css';
+    styleLink.rel = 'stylesheet';
+    styleLink.href = href;
+    target.head.appendChild(styleLink);
+};
+exports.appendStyle = appendStyle;
+var appendScript = function (target, src) {
+    var scriptTag = target.createElement('script');
+    scriptTag.src = src;
+    target.head.appendChild(scriptTag);
+};
+exports.appendScript = appendScript;
+var cloneStyle = function (target, style) {
+    var clone = style.cloneNode(true);
+    target.head.appendChild(clone);
+};
+exports.cloneStyle = cloneStyle;

package.json

 {
   "name": "@garage-panda/react-pdf-export",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "A PDF generator for React applications",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -1,5 +0,1 @@
-# Important
-
-The package is under development and this is the Alpha version of it. Stay still, we are doing our best to finish it soon.
-
 ## react-pdf-export
@@ -23,2 +19,6 @@
 
+or
+
+`yarn add @garage-panda/react-pdf-export`
+
 Import the package
@@ -63,3 +63,3 @@
 | Prop      | Type        | Default                                                | Description                                                                                                                                                                                      | Optional |
-|-----------|-------------|--------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|
+| --------- | ----------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- |
 | className | string      | none                                                   | A custom class passed down to the iframe container                                                                                                                                               | yes      |
@@ -70,3 +70,2 @@ | showInDom | boolean     | true                                                   | Show the preview of the PDF in the DOM                                                                                                                                                           | yes      |
 
-
 ## Contributing
@@ -76,3 +75,3 @@
 
-## Support 
+## Support
 
@@ -86,2 +85,2 @@ If you like what you see, feel free to support us!
 
-[MIT](https://choosealicense.com/licenses/mit/)
+[MIT](https://choosealicense.com/licenses/mit/)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14437

increased by21.43%

Lines of code

202

increased by46.38%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes