react-ink-scripter 0.0.21 → 0.0.23

package/dist/cjs/index.js

@@ -1,74 +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;
-  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 _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;
@@ -141,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,
@@ -328,4 +343,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,8 +1,53 @@
-import { useState, useCallback, useLayoutEffect, forwardRef, useRef, useMemo, 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;
@@ -46,50 +91,31 @@ const usePagePrint = ({ open, pageConfig, }) => {
     return { setPageNodeRef, page, getPageContent, pageNode };
 };
 
-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 useFrameStyle = ({ page, style }) => {
+    const pageStyle = useMemo(() => {
+        const { width, height, marginLeft, marginRight, marginTop } = page;
+        const extraStyle = `
+html {
+margin: 0;
+padding: 0;
+width: ${width}mm;
+height: ${height}mm
+}
 
-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;
-  }
+body {
+width: ${width}mm;
+margin: 0;
+padding: 0;
+box-sizing: border-box;
+padding-left: ${marginLeft}mm;
+padding-right: ${marginRight}mm;
+padding-top: ${marginTop}mm;
 }
-          `, styleCss] }), attachStyle), !!attachNode && createPortal(children, attachNode)] }));
-});
+`;
+        return style + '\n' + extraStyle;
+    }, [page, style, page]);
+    return pageStyle;
+};
 
 const Container = ({ id, content = [], className, }) => {
     return (jsx("div", { id: id, className: clsx('inks-grid', className), children: content.map((item, idx) => {
@@ -170,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/package.json

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