react-ink-scripter 0.0.22 → 0.0.24

package/dist/cjs/index.js

@@ -1,85 +1,11 @@
 'use strict';
 
-var _extends = require('@babel/runtime/helpers/extends');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react = require('react');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-
-var getPageHeight = function getPageHeight(height, page) {
-  var _page$marginTop = page.marginTop,
-    marginTop = _page$marginTop === void 0 ? 0 : _page$marginTop,
-    _page$marginBottom = page.marginBottom,
-    marginBottom = _page$marginBottom === void 0 ? 0 : _page$marginBottom;
-  return height + marginTop + marginBottom;
-};
-var pix2mm = function pix2mm(pix) {
-  return Math.round(pix * 0.2645833333);
-};
-var usePagePrint = function usePagePrint(_ref) {
-  var open = _ref.open,
-    pageConfig = _ref.pageConfig,
-    style = _ref.style;
-  var _useState = react.useState({
-      width: pageConfig.width || 0,
-      height: pageConfig.height || 0,
-      marginLeft: pageConfig.marginLeft || 0,
-      marginRight: pageConfig.marginRight || 0,
-      marginTop: pageConfig.marginTop || 0,
-      marginBottom: pageConfig.marginBottom || 0
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    page = _useState2[0],
-    setPage = _useState2[1];
-  var _useState3 = react.useState(),
-    _useState4 = _slicedToArray(_useState3, 2),
-    pageNode = _useState4[0],
-    setPageNode = _useState4[1];
-  var setPageNodeRef = react.useCallback(function (node) {
-    setPageNode(node);
-  }, []);
-  react.useLayoutEffect(function () {
-    if (!open) {
-      return;
-    }
-    var rect = pageNode === null || pageNode === void 0 ? void 0 : pageNode.getBoundingClientRect();
-    if (!rect) {
-      return;
-    }
-    var width = pageConfig.width,
-      height = pageConfig.height;
-    var elmHeight = rect.height,
-      elmWidth = rect.width;
-    var pageWidth = width || pix2mm(elmWidth);
-    var pageHeight = height ? height : getPageHeight(pix2mm(elmHeight), pageConfig);
-    setPage(function (old) {
-      return _extends({}, old, {
-        width: pageWidth,
-        height: pageHeight
-      });
-    });
-  }, [pageNode, open, pageConfig]);
-  var getPageContent = react.useCallback(function () {
-    return (pageNode === null || pageNode === void 0 ? void 0 : pageNode.innerHTML) || '';
-  }, [pageNode]);
-  var pageStyle = react.useMemo(function () {
-    var width = page.width,
-      height = page.height,
-      marginLeft = page.marginLeft,
-      marginRight = page.marginRight,
-      marginTop = page.marginTop;
-    var extraStyle = "\nhtml {\nmargin: 0;\npadding: 0;\nwidth: ".concat(width, "mm;\nheight: ").concat(height, "mm\n}\n\nbody {\nwidth: ").concat(width, "mm;\nmargin: 0;\npadding: 0;\nbox-sizing: border-box;\npadding-left: ").concat(marginLeft, "mm;\npadding-right: ").concat(marginRight, "mm;\npadding-top: ").concat(marginTop, "mm;\n}\n");
-    return style + '\n' + extraStyle;
-  }, [page, style, page]);
-  return {
-    setPageNodeRef: setPageNodeRef,
-    page: page,
-    getPageContent: getPageContent,
-    pageNode: pageNode,
-    pageStyle: pageStyle
-  };
-};
+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;
@@ -152,6 +78,84 @@ var PrinterFrame = react.forwardRef(function (props, ref) {
   });
 });
 
+var getPageHeight = function getPageHeight(height, page) {
+  var _page$marginTop = page.marginTop,
+    marginTop = _page$marginTop === void 0 ? 0 : _page$marginTop,
+    _page$marginBottom = page.marginBottom,
+    marginBottom = _page$marginBottom === void 0 ? 0 : _page$marginBottom;
+  return height + marginTop + marginBottom;
+};
+var pix2mm = function pix2mm(pix) {
+  return Math.round(pix * 0.2645833333);
+};
+var usePagePrint = function usePagePrint(_ref) {
+  var open = _ref.open,
+    pageConfig = _ref.pageConfig;
+  var _useState = react.useState({
+      width: pageConfig.width || 0,
+      height: pageConfig.height || 0,
+      marginLeft: pageConfig.marginLeft || 0,
+      marginRight: pageConfig.marginRight || 0,
+      marginTop: pageConfig.marginTop || 0,
+      marginBottom: pageConfig.marginBottom || 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    page = _useState2[0],
+    setPage = _useState2[1];
+  var _useState3 = react.useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    pageNode = _useState4[0],
+    setPageNode = _useState4[1];
+  var setPageNodeRef = react.useCallback(function (node) {
+    setPageNode(node);
+  }, []);
+  react.useLayoutEffect(function () {
+    if (!open) {
+      return;
+    }
+    var rect = pageNode === null || pageNode === void 0 ? void 0 : pageNode.getBoundingClientRect();
+    if (!rect) {
+      return;
+    }
+    var width = pageConfig.width,
+      height = pageConfig.height;
+    var elmHeight = rect.height,
+      elmWidth = rect.width;
+    var pageWidth = width || pix2mm(elmWidth);
+    var pageHeight = height ? height : getPageHeight(pix2mm(elmHeight), pageConfig);
+    setPage(function (old) {
+      return _extends({}, old, {
+        width: pageWidth,
+        height: pageHeight
+      });
+    });
+  }, [pageNode, open, pageConfig]);
+  var getPageContent = react.useCallback(function () {
+    return (pageNode === null || pageNode === void 0 ? void 0 : pageNode.innerHTML) || '';
+  }, [pageNode]);
+  return {
+    setPageNodeRef: setPageNodeRef,
+    page: page,
+    getPageContent: getPageContent,
+    pageNode: pageNode
+  };
+};
+
+var useFrameStyle = function useFrameStyle(_ref) {
+  var page = _ref.page,
+    style = _ref.style;
+  var pageStyle = react.useMemo(function () {
+    var width = page.width,
+      height = page.height,
+      marginLeft = page.marginLeft,
+      marginRight = page.marginRight,
+      marginTop = page.marginTop;
+    var extraStyle = "\nhtml {\nmargin: 0;\npadding: 0;\nwidth: ".concat(width, "mm;\nheight: ").concat(height, "mm\n}\n\nbody {\nwidth: ").concat(width, "mm;\nmargin: 0;\npadding: 0;\nbox-sizing: border-box;\npadding-left: ").concat(marginLeft, "mm;\npadding-right: ").concat(marginRight, "mm;\npadding-top: ").concat(marginTop, "mm;\n}\n");
+    return style + '\n' + extraStyle;
+  }, [page, style, page]);
+  return pageStyle;
+};
+
 var Container = function Container(_ref) {
   var id = _ref.id,
     _ref$content = _ref.content,
@@ -189,11 +193,12 @@ var TableCell = function TableCell(_ref2) {
     header = item.header,
     colSpan = item.colSpan,
     rowSpan = item.rowSpan,
-    value = item.value;
+    value = item.value,
+    className = item.className;
   if (header) {
     return jsxRuntime.jsx("th", {
       id: id,
-      className: "inks-cell",
+      className: clsx('inks-cell', className),
       colSpan: colSpan,
       rowSpan: rowSpan,
       children: value
@@ -201,7 +206,7 @@ var TableCell = function TableCell(_ref2) {
   }
   return jsxRuntime.jsx("td", {
     id: id,
-    className: "inks-cell",
+    className: clsx('inks-cell', className),
     colSpan: colSpan,
     rowSpan: rowSpan,
     children: value
@@ -339,4 +344,5 @@ exports.InkScripter = InkScripter;
 exports.PrinterFrame = PrinterFrame;
 exports.getPageHeight = getPageHeight;
 exports.pix2mm = pix2mm;
+exports.useFrameStyle = useFrameStyle;
 exports.usePagePrint = usePagePrint;

package/dist/esm/index.d.ts

@@ -1,4 +1,5 @@
-export * from './usePagePrint';
 export * from './IFrame';
 export * from './PrinterFrame';
+export * from './usePagePrint';
+export * from './useFrameStyle';
 export * from './InkScripter';

package/dist/esm/index.js

@@ -1,14 +1,59 @@
-import { useState, useCallback, useLayoutEffect, useMemo, forwardRef, useRef, useImperativeHandle } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useMemo, useImperativeHandle, useState, useCallback, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import clsx from 'clsx';
 
+const IFrame = forwardRef((props, ref) => {
+    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, width: frameWidth, height: frameHeight, children: [attachBody && createPortal(children, attachBody), attachHead && createPortal(jsx("style", { children: styleCss }), attachHead)] }));
+});
+
+const PrinterFrame = forwardRef((props, ref) => {
+    const { styleCss, open, className, children, actionRef, src, containerId, width, height, } = props;
+    const iframeRef = useRef(null);
+    useImperativeHandle(actionRef, () => {
+        return {
+            print() {
+                const cw = iframeRef?.current?.contentWindow;
+                if (cw) {
+                    cw.focus();
+                    cw.print();
+                }
+            },
+        };
+    }, []);
+    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, width: width, height: height, children: [!!attachStyle &&
+                createPortal(jsxs("style", { children: [`
+@media print {
+  .hidden-print {
+     display: none !important;
+  }
+}
+          `, styleCss] }), attachStyle), !!attachNode && createPortal(children, attachNode)] }));
+});
+
 const getPageHeight = (height, page) => {
     const { marginTop = 0, marginBottom = 0 } = page;
     return height + marginTop + marginBottom;
 };
 const pix2mm = (pix) => Math.round(pix * 0.2645833333);
-const usePagePrint = ({ open, pageConfig, style, }) => {
+const usePagePrint = ({ open, pageConfig, }) => {
     const [page, setPage] = useState({
         width: pageConfig.width || 0,
         height: pageConfig.height || 0,
@@ -43,6 +88,10 @@ const usePagePrint = ({ open, pageConfig, style, }) => {
     const getPageContent = useCallback(() => {
         return pageNode?.innerHTML || '';
     }, [pageNode]);
+    return { setPageNodeRef, page, getPageContent, pageNode };
+};
+
+const useFrameStyle = ({ page, style }) => {
     const pageStyle = useMemo(() => {
         const { width, height, marginLeft, marginRight, marginTop } = page;
         const extraStyle = `
@@ -65,54 +114,9 @@ padding-top: ${marginTop}mm;
 `;
         return style + '\n' + extraStyle;
     }, [page, style, page]);
-    return { setPageNodeRef, page, getPageContent, pageNode, pageStyle };
+    return pageStyle;
 };
 
-const IFrame = forwardRef((props, ref) => {
-    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, width: frameWidth, height: frameHeight, children: [attachBody && createPortal(children, attachBody), attachHead && createPortal(jsx("style", { children: styleCss }), attachHead)] }));
-});
-
-const PrinterFrame = forwardRef((props, ref) => {
-    const { styleCss, open, className, children, actionRef, src, containerId, width, height, } = props;
-    const iframeRef = useRef(null);
-    useImperativeHandle(actionRef, () => {
-        return {
-            print() {
-                const cw = iframeRef?.current?.contentWindow;
-                if (cw) {
-                    cw.focus();
-                    cw.print();
-                }
-            },
-        };
-    }, []);
-    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, width: width, height: height, children: [!!attachStyle &&
-                createPortal(jsxs("style", { children: [`
-@media print {
-  .hidden-print {
-     display: none !important;
-  }
-}
-          `, 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) {
@@ -130,11 +134,11 @@ const TableCell = ({ item }) => {
     if (typeof item === 'string') {
         return jsx("td", { className: "inks-cell", children: item });
     }
-    const { id, header, colSpan, rowSpan, value } = item;
+    const { id, header, colSpan, rowSpan, value, className } = item;
     if (header) {
-        return (jsx("th", { id: id, className: "inks-cell", colSpan: colSpan, rowSpan: rowSpan, children: value }));
+        return (jsx("th", { id: id, className: clsx('inks-cell', className), colSpan: colSpan, rowSpan: rowSpan, children: value }));
     }
-    return (jsx("td", { id: id, className: "inks-cell", colSpan: colSpan, rowSpan: rowSpan, children: value }));
+    return (jsx("td", { id: id, className: clsx('inks-cell', className), colSpan: colSpan, rowSpan: rowSpan, children: value }));
 };
 const TableRow = ({ cells }) => {
     if (!cells.length) {
@@ -192,4 +196,4 @@ const InkScripter = forwardRef((props, ref) => {
         }) }));
 });
 
-export { IFrame, InkScripter, PrinterFrame, getPageHeight, pix2mm, usePagePrint };
+export { IFrame, InkScripter, PrinterFrame, getPageHeight, pix2mm, useFrameStyle, usePagePrint };

package/dist/esm/useFrameStyle.d.ts

@@ -0,0 +1,6 @@
+import { type PageConfig } from './usePagePrint';
+export type useFrameStyleProps = {
+    page: PageConfig;
+    style?: string;
+};
+export declare const useFrameStyle: ({ page, style }: useFrameStyleProps) => string;

package/dist/esm/usePagePrint.d.ts

@@ -11,13 +11,11 @@ export declare const pix2mm: (pix: number) => number;
 export type usePagePrintProps = {
     open?: boolean;
     pageConfig: Partial<PageConfig>;
-    style?: string;
 };
-export declare const usePagePrint: <T extends Element>({ open, pageConfig, style, }: usePagePrintProps) => {
+export declare const usePagePrint: <T extends Element>({ open, pageConfig, }: usePagePrintProps) => {
     setPageNodeRef: (node: T) => void;
     page: PageConfig;
     getPageContent: () => string;
     pageNode: T | undefined;
-    pageStyle: string;
 };
 export default usePagePrint;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ink-scripter",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "description": "a react component for generate page to print",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -9,7 +9,13 @@
     "type": "git",
     "url": "git+https://github.com/lawrsp/react-ink-scripter.git"
   },
-  "keywords": ["react", "component", "print", "printer", "iframe"],
+  "keywords": [
+    "react",
+    "component",
+    "print",
+    "printer",
+    "iframe"
+  ],
   "author": "lawrsp",
   "license": "MIT",
   "bugs": {
@@ -29,15 +35,13 @@
     "clsx": "^1.2.1"
   },
   "devDependencies": {
-    "@babel/runtime": "^7.21.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "@babel/core": "^7.21.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-transform-runtime": "^7.21.0",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
+    "@babel/runtime": "^7.21.0",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
@@ -55,9 +59,12 @@
     "@vitejs/plugin-react": "^3.1.0",
     "babel-loader": "^8.3.0",
     "json": "^11.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^4.1.3",
     "rollup": "^3.18.0",
     "rollup-plugin-sizes": "^1.0.5",
+    "tslib": "^2.8.1",
     "typescript": "^4.9.3",
     "vite": "^4.1.0"
   },
@@ -75,6 +82,11 @@
       "optional": true
     }
   },
-  "sideEffects": ["*.css"],
-  "files": ["dist"]
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "packageManager": "yarn@4.0.2+sha256.825003a0f561ad09a3b1ac4a3b3ea6207af2796d54f62a9420520915721f5186"
 }