react-ink-scripter 0.0.11 → 0.0.13

package/dist/cjs/index.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react = require('react');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
@@ -10,8 +11,16 @@ 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;
+    children = props.children,
+    width = props.width,
+    height = props.height;
   var iframeRef = react.useRef(null);
+  var _useMemo = react.useMemo(function () {
+      return [width, height];
+    }, [width, height]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    frameWidth = _useMemo2[0],
+    frameHeight = _useMemo2[1];
   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 () {
@@ -20,13 +29,15 @@ var IFrame = react.forwardRef(function (props, ref) {
   return jsxRuntime.jsxs("iframe", {
     ref: iframeRef,
     className: className,
+    width: frameWidth,
+    height: frameHeight,
     children: [attachBody && reactDom.createPortal(children, attachBody), attachHead && reactDom.createPortal(jsxRuntime.jsx("style", {
       children: styleCss
     }), attachHead)]
   });
 });
 
-var PrinterFrame = function PrinterFrame(props) {
+var PrinterFrame = react.forwardRef(function (props, ref) {
   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,
@@ -34,7 +45,9 @@ var PrinterFrame = function PrinterFrame(props) {
     children = props.children,
     actionRef = props.actionRef,
     src = props.src,
-    containerId = props.containerId;
+    containerId = props.containerId,
+    width = props.width,
+    height = props.height;
   var iframeRef = react.useRef(null);
   react.useImperativeHandle(actionRef, function () {
     return {
@@ -48,17 +61,22 @@ var PrinterFrame = function PrinterFrame(props) {
       }
     };
   }, []);
+  react.useImperativeHandle(ref, function () {
+    return iframeRef === null || iframeRef === void 0 ? void 0 : iframeRef.current;
+  });
   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: iframeRef,
     className: clsx("inks-iframe-root", !!open && "inks-iframe-root-open", className),
     src: src,
+    width: width,
+    height: height,
     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)]
   });
-};
+});
 
 var Container = function Container(_ref) {
   var id = _ref.id,
@@ -71,13 +89,13 @@ var Container = function Container(_ref) {
     children: content.map(function (item, idx) {
       switch (item.type) {
         case "pair":
-          return jsxRuntime.jsx(Pair, _extends({
-            className: "inks-grid-item"
-          }, item), idx);
+          return jsxRuntime.jsx(Pair, _extends({}, item, {
+            className: clsx("inks-grid-item", item.className)
+          }), idx);
         case "text":
-          return jsxRuntime.jsx(Text, _extends({
-            className: "inks-grid-item"
-          }, item), idx);
+          return jsxRuntime.jsx(Text, _extends({}, item, {
+            className: clsx("inks-grid-item", item.className)
+          }), idx);
       }
     })
   });
@@ -220,12 +238,13 @@ var Pair = function Pair(_ref5) {
     })]
   });
 };
-var InkScripter = function InkScripter(props) {
+var InkScripter = react.forwardRef(function (props, ref) {
   var _props$value = props.value,
     value = _props$value === void 0 ? [] : _props$value,
     className = props.className;
   return jsxRuntime.jsx("div", {
     className: clsx("inks-root", className),
+    ref: ref,
     children: value.map(function (item, index) {
       switch (item.type) {
         case "grid":
@@ -239,7 +258,7 @@ var InkScripter = function InkScripter(props) {
       }
     })
   });
-};
+});
 
 exports.IFrame = IFrame;
 exports.InkScripter = InkScripter;

package/dist/esm/IFrame.d.ts

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

package/dist/esm/InkScripter.d.ts

@@ -1,13 +1,14 @@
-/// <reference types="react" />
-import { ClassValue } from "clsx";
+import type { ForwardRefExoticComponent, RefAttributes } from "react";
 export type ContentTextItem = {
     id?: string;
+    className?: string;
     type: "text";
     value: string;
     span?: number;
 };
 export type ContentPairItem = {
     id?: string;
+    className?: string;
     type: "pair";
     label: string;
     value: string;
@@ -20,6 +21,7 @@ export type ContentGridItem = {
 };
 export type ContentTableCellItem = {
     id?: string;
+    className?: string;
     header?: boolean;
     rowSpan?: number;
     colSpan?: number;
@@ -34,12 +36,9 @@ export type ContentTableItem = {
 };
 export type ContentItemType = ContentGridItem | ContentTableItem | ContentTextItem | ContentPairItem;
 export type ContentType = ContentItemType[];
-export type ReactInkScripterProps = {
+export type InkScripterProps = {
     value?: ContentType;
     className?: string;
 };
-export type TypeWithClassName<T> = T & {
-    className?: ClassValue;
-};
-export declare const InkScripter: (props: ReactInkScripterProps) => JSX.Element;
+export declare const InkScripter: ForwardRefExoticComponent<InkScripterProps & RefAttributes<any>>;
 export default InkScripter;

package/dist/esm/PrinterFrame.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, Ref } from "react";
+import type { Ref, ReactNode, ForwardRefExoticComponent, RefAttributes } from "react";
 export interface PrinterActions {
     print: () => void;
 }
@@ -10,6 +10,8 @@ export interface PrinterFrameProps {
     actionRef?: Ref<PrinterActions>;
     src?: string;
     containerId?: string;
+    width?: string | number;
+    height?: string | number;
 }
-export declare const PrinterFrame: (props: PrinterFrameProps) => JSX.Element;
+export declare const PrinterFrame: ForwardRefExoticComponent<PrinterFrameProps & RefAttributes<any>>;
 export default PrinterFrame;

package/dist/esm/index.js

@@ -1,21 +1,24 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { forwardRef, useRef, useMemo, useImperativeHandle } from 'react';
 import { createPortal } from 'react-dom';
 import clsx from 'clsx';
 
 const IFrame = forwardRef((props, ref) => {
-    const { styleCss, className, children } = props;
+    const { styleCss, className, children, width, height } = props;
     const iframeRef = useRef(null);
+    const [frameWidth, frameHeight] = useMemo(() => {
+        return [width, height];
+    }, [width, height]);
     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)] }));
+    return (jsxs("iframe", { ref: iframeRef, className: className, width: frameWidth, height: frameHeight, children: [attachBody && createPortal(children, attachBody), attachHead && createPortal(jsx("style", { children: styleCss }), attachHead)] }));
 });
 
-const PrinterFrame = (props) => {
-    const { styleCss, open, className, children, actionRef, src, containerId } = props;
+const PrinterFrame = forwardRef((props, ref) => {
+    const { styleCss, open, className, children, actionRef, src, containerId, width, height, } = props;
     const iframeRef = useRef(null);
     useImperativeHandle(actionRef, () => {
         return {
@@ -28,11 +31,14 @@ const PrinterFrame = (props) => {
             },
         };
     }, []);
+    useImperativeHandle(ref, () => {
+        return iframeRef?.current;
+    });
     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 &&
+    return (jsxs("iframe", { ref: iframeRef, className: clsx("inks-iframe-root", !!open && "inks-iframe-root-open", className), src: src, width: width, height: height, children: [!!attachStyle &&
                 createPortal(jsxs("style", { children: [`
 @media print {
   .hidden-print {
@@ -40,15 +46,15 @@ const PrinterFrame = (props) => {
   }
 }
           `, styleCss] }), attachStyle), !!attachNode && createPortal(children, attachNode)] }));
-};
+});
 
 const Container = ({ id, content = [], className, }) => {
     return (jsx("div", { id: id, className: clsx("inks-grid", className), children: content.map((item, idx) => {
             switch (item.type) {
                 case "pair":
-                    return jsx(Pair, { className: "inks-grid-item", ...item }, idx);
+                    return (jsx(Pair, { ...item, className: clsx("inks-grid-item", item.className) }, idx));
                 case "text":
-                    return jsx(Text, { className: "inks-grid-item", ...item }, idx);
+                    return (jsx(Text, { ...item, className: clsx("inks-grid-item", item.className) }, idx));
             }
         }) }));
 };
@@ -99,15 +105,15 @@ const Table = (props) => {
     }
     return (jsxs("table", { id: id, className: "inks-table", children: [jsx(TableHead, { rows: head }), jsx(TableBody, { rows: body }), jsx(TableFoot, { rows: foot })] }));
 };
-const Text = ({ id, value, span, className, }) => {
+const Text = ({ id, value, span, className }) => {
     return (jsx("div", { id: id, className: clsx("inks-text", span && "inks-grid", span && `inks-span-${span}`, className), children: value }));
 };
-const Pair = ({ id, value, label, span, className, }) => {
+const Pair = ({ id, value, label, span, className }) => {
     return (jsxs("div", { id: id, className: clsx("inks-pair", span && "inks-grid", span && `inks-span-${span}`, className), children: [jsxs("label", { className: "inks-pair-label", children: [label, ":"] }), jsx("div", { className: "inks-pair-value", children: value })] }));
 };
-const InkScripter = (props) => {
+const InkScripter = forwardRef((props, ref) => {
     const { value = [], className } = props;
-    return (jsx("div", { className: clsx("inks-root", className), children: value.map((item, index) => {
+    return (jsx("div", { className: clsx("inks-root", className), ref: ref, children: value.map((item, index) => {
             switch (item.type) {
                 case "grid":
                     return jsx(Grid, { ...item }, index);
@@ -119,6 +125,6 @@ const InkScripter = (props) => {
                     return jsx(Pair, { ...item }, index);
             }
         }) }));
-};
+});
 
 export { IFrame, InkScripter, PrinterFrame };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ink-scripter",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "a react component for generate page to print",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",