react-ink-scripter 0.0.7 → 0.0.9

package/dist/cjs/index.js

@@ -1,30 +1,62 @@
 'use strict';
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react = require('react');
 var reactDom = require('react-dom');
-var clsx = require('clsx');
 var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
 var _extends = require('@babel/runtime/helpers/extends');
 
+var IFrame = react.forwardRef(function (props, ref) {
+  var _iframeRef$current, _iframeRef$current$co, _iframeRef$current$co2, _iframeRef$current2, _iframeRef$current2$c, _iframeRef$current2$c2;
+  var styleCss = props.styleCss,
+    className = props.className,
+    children = props.children;
+  var iframeRef = react.useRef(null);
+  var attachBody = iframeRef === null || iframeRef === void 0 ? void 0 : (_iframeRef$current = iframeRef.current) === null || _iframeRef$current === void 0 ? void 0 : (_iframeRef$current$co = _iframeRef$current.contentWindow) === null || _iframeRef$current$co === void 0 ? void 0 : (_iframeRef$current$co2 = _iframeRef$current$co.document) === null || _iframeRef$current$co2 === void 0 ? void 0 : _iframeRef$current$co2.body;
+  var attachHead = iframeRef === null || iframeRef === void 0 ? void 0 : (_iframeRef$current2 = iframeRef.current) === null || _iframeRef$current2 === void 0 ? void 0 : (_iframeRef$current2$c = _iframeRef$current2.contentWindow) === null || _iframeRef$current2$c === void 0 ? void 0 : (_iframeRef$current2$c2 = _iframeRef$current2$c.document) === null || _iframeRef$current2$c2 === void 0 ? void 0 : _iframeRef$current2$c2.head;
+  react.useImperativeHandle(ref, function () {
+    return iframeRef === null || iframeRef === void 0 ? void 0 : iframeRef.current;
+  }, []);
+  return jsxRuntime.jsxs("iframe", {
+    ref: iframeRef,
+    className: className,
+    children: [attachBody && reactDom.createPortal(children, attachBody), attachHead && reactDom.createPortal(jsxRuntime.jsx("style", {
+      children: styleCss
+    }), attachHead)]
+  });
+});
+
 var PrinterFrame = function PrinterFrame(props) {
-  var _node$contentWindow, _node$contentWindow$d, _node$contentWindow2, _node$contentWindow2$;
+  var _iframeRef$current2, _iframeRef$current2$c, _iframeRef$current2$c2, _iframeRef$current3, _iframeRef$current3$c, _iframeRef$current3$c2, _iframeRef$current4, _iframeRef$current4$c, _iframeRef$current4$c2;
   var styleCss = props.styleCss,
     open = props.open,
     className = props.className,
-    children = props.children;
-  var _useState = react.useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    node = _useState2[0],
-    setNode = _useState2[1];
-  var attachBody = node === null || node === void 0 ? void 0 : (_node$contentWindow = node.contentWindow) === null || _node$contentWindow === void 0 ? void 0 : (_node$contentWindow$d = _node$contentWindow.document) === null || _node$contentWindow$d === void 0 ? void 0 : _node$contentWindow$d.body;
-  var attachHead = node === null || node === void 0 ? void 0 : (_node$contentWindow2 = node.contentWindow) === null || _node$contentWindow2 === void 0 ? void 0 : (_node$contentWindow2$ = _node$contentWindow2.document) === null || _node$contentWindow2$ === void 0 ? void 0 : _node$contentWindow2$.head;
+    children = props.children,
+    actionRef = props.actionRef,
+    src = props.src,
+    containerId = props.containerId;
+  var iframeRef = react.useRef(null);
+  react.useImperativeHandle(actionRef, function () {
+    return {
+      print: function print() {
+        var _iframeRef$current;
+        var cw = iframeRef === null || iframeRef === void 0 ? void 0 : (_iframeRef$current = iframeRef.current) === null || _iframeRef$current === void 0 ? void 0 : _iframeRef$current.contentWindow;
+        if (cw) {
+          cw.focus();
+          cw.print();
+        }
+      }
+    };
+  }, []);
+  var attachNode = containerId ? iframeRef === null || iframeRef === void 0 ? void 0 : (_iframeRef$current2 = iframeRef.current) === null || _iframeRef$current2 === void 0 ? void 0 : (_iframeRef$current2$c = _iframeRef$current2.contentWindow) === null || _iframeRef$current2$c === void 0 ? void 0 : (_iframeRef$current2$c2 = _iframeRef$current2$c.document) === null || _iframeRef$current2$c2 === void 0 ? void 0 : _iframeRef$current2$c2.getElementById(containerId) : iframeRef === null || iframeRef === void 0 ? void 0 : (_iframeRef$current3 = iframeRef.current) === null || _iframeRef$current3 === void 0 ? void 0 : (_iframeRef$current3$c = _iframeRef$current3.contentWindow) === null || _iframeRef$current3$c === void 0 ? void 0 : (_iframeRef$current3$c2 = _iframeRef$current3$c.document) === null || _iframeRef$current3$c2 === void 0 ? void 0 : _iframeRef$current3$c2.body;
+  var attachStyle = iframeRef === null || iframeRef === void 0 ? void 0 : (_iframeRef$current4 = iframeRef.current) === null || _iframeRef$current4 === void 0 ? void 0 : (_iframeRef$current4$c = _iframeRef$current4.contentWindow) === null || _iframeRef$current4$c === void 0 ? void 0 : (_iframeRef$current4$c2 = _iframeRef$current4$c.document) === null || _iframeRef$current4$c2 === void 0 ? void 0 : _iframeRef$current4$c2.head;
   return jsxRuntime.jsxs("iframe", {
-    ref: setNode,
+    ref: iframeRef,
     className: clsx("inks-iframe-root", !!open && "inks-iframe-root-open", className),
-    children: [attachBody && reactDom.createPortal(children, attachBody), attachHead && reactDom.createPortal(jsxRuntime.jsxs("style", {
-      children: ["@media print {\n              .hidden-print {\n               display: none !important;\n              }\n             }", styleCss]
-    }), attachHead)]
+    src: src,
+    children: [!!attachStyle && reactDom.createPortal(jsxRuntime.jsxs("style", {
+      children: ["\n@media print {\n  .hidden-print {\n     display: none !important;\n  }\n}\n          ", styleCss]
+    }), attachStyle), !!attachNode && reactDom.createPortal(children, attachNode)]
   });
 };
 
@@ -227,5 +259,6 @@ var InkScripter = function InkScripter(props) {
   });
 };
 
+exports.IFrame = IFrame;
 exports.InkScripter = InkScripter;
 exports.PrinterFrame = PrinterFrame;

package/dist/esm/IFrame.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+export interface IFrameProps {
+    className?: string;
+    styleCss?: string;
+    children?: ReactNode;
+}
+export declare const IFrame: import("react").ForwardRefExoticComponent<IFrameProps & import("react").RefAttributes<HTMLIFrameElement>>;

package/dist/esm/PrinterFrame.d.ts

@@ -1,9 +1,15 @@
-import { ReactNode } from "react";
+import { ReactNode, Ref } from "react";
+export interface PrinterActions {
+    print: () => void;
+}
 export interface PrinterFrameProps {
     styleCss?: string;
     open?: boolean;
     className?: string;
     children?: ReactNode;
+    actionRef?: Ref<PrinterActions>;
+    src?: string;
+    containerId?: string;
 }
 export declare const PrinterFrame: (props: PrinterFrameProps) => JSX.Element;
 export default PrinterFrame;

package/dist/esm/index.d.ts

@@ -1,2 +1,3 @@
+export * from "./IFrame";
 export * from "./PrinterFrame";
 export * from "./InkScripter";

package/dist/esm/index.js

@@ -1,19 +1,45 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { createPortal } from 'react-dom';
 import clsx from 'clsx';
 
+const IFrame = forwardRef((props, ref) => {
+    const { styleCss, className, children } = props;
+    const iframeRef = useRef(null);
+    const attachBody = iframeRef?.current?.contentWindow?.document?.body;
+    const attachHead = iframeRef?.current?.contentWindow?.document?.head;
+    useImperativeHandle(ref, () => {
+        return iframeRef?.current;
+    }, []);
+    return (jsxs("iframe", { ref: iframeRef, className: className, children: [attachBody && createPortal(children, attachBody), attachHead && createPortal(jsx("style", { children: styleCss }), attachHead)] }));
+});
+
 const PrinterFrame = (props) => {
-    const { styleCss, open, className, children } = props;
-    const [node, setNode] = useState();
-    const attachBody = node?.contentWindow?.document?.body;
-    const attachHead = node?.contentWindow?.document?.head;
-    return (jsxs("iframe", { ref: setNode, className: clsx("inks-iframe-root", !!open && "inks-iframe-root-open", className), children: [attachBody && createPortal(children, attachBody), attachHead &&
-                createPortal(jsxs("style", { children: [`@media print {
-              .hidden-print {
-               display: none !important;
-              }
-             }`, styleCss] }), attachHead)] }));
+    const { styleCss, open, className, children, actionRef, src, containerId } = props;
+    const iframeRef = useRef(null);
+    useImperativeHandle(actionRef, () => {
+        return {
+            print() {
+                const cw = iframeRef?.current?.contentWindow;
+                if (cw) {
+                    cw.focus();
+                    cw.print();
+                }
+            },
+        };
+    }, []);
+    const attachNode = containerId
+        ? iframeRef?.current?.contentWindow?.document?.getElementById(containerId)
+        : iframeRef?.current?.contentWindow?.document?.body;
+    const attachStyle = iframeRef?.current?.contentWindow?.document?.head;
+    return (jsxs("iframe", { ref: iframeRef, className: clsx("inks-iframe-root", !!open && "inks-iframe-root-open", className), src: src, children: [!!attachStyle &&
+                createPortal(jsxs("style", { children: [`
+@media print {
+  .hidden-print {
+     display: none !important;
+  }
+}
+          `, styleCss] }), attachStyle), !!attachNode && createPortal(children, attachNode)] }));
 };
 
 const Title = ({ value, id }) => {
@@ -105,4 +131,4 @@ const InkScripter = (props) => {
         }) }));
 };
 
-export { InkScripter, PrinterFrame };
+export { IFrame, InkScripter, PrinterFrame };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ink-scripter",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "a react component for generate page to print",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -12,7 +12,9 @@
   "keywords": [
     "react",
     "component",
-    "printer"
+    "print",
+    "printer",
+    "iframe"
   ],
   "author": "lawrsp",
   "license": "MIT",