react-ink-scripter 0.0.13 → 0.0.16

package/dist/InkScripter.css

@@ -4,17 +4,18 @@
   flex-direction: column;
   overflow: hidden;
   padding: 4px;
+  font-size: 14px;
 }
 
 .inks-root > #title {
   text-align: center;
   flex: 1 0;
   padding: 16px;
-  font-size: 20px;
+  font-size: 28px;
 }
 
 .inks-root > #footer {
-  margin-left: -8px;
+  margin: 0;
 }
 
 .inks-grid {
@@ -96,9 +97,8 @@
   padding: 0;
   text-align: left;
   border-spacing: 0;
-
-  border-top: var(--Border-Props);
-  border-left: var(--Border-Props);
+  border-collapse: collapse;
+  border: var(--Border-Props);
 }
 
 
@@ -115,7 +115,6 @@
 .inks-cell {
   padding: 8px 4px;
   margin: 0;
-  border-right: var(--Border-Props);
-  border-bottom: var(--Border-Props);
+  border: var(--Border-Props);
 }
 

package/dist/cjs/index.js

@@ -1,11 +1,69 @@
 '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 _extends = require('@babel/runtime/helpers/extends');
+
+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: 0,
+      marginRight: 0,
+      marginTop: 0,
+      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 setNodeRef = 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]);
+  return {
+    setNodeRef: setNodeRef,
+    page: page
+  };
+};
 
 var IFrame = react.forwardRef(function (props, ref) {
   var _iframeRef$current, _iframeRef$current$co, _iframeRef$current$co2, _iframeRef$current2, _iframeRef$current2$c, _iframeRef$current2$c2;
@@ -68,7 +126,7 @@ var PrinterFrame = react.forwardRef(function (props, ref) {
   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),
+    className: clsx('inks-iframe-root', !!open && 'inks-iframe-root-open', className),
     src: src,
     width: width,
     height: height,
@@ -85,16 +143,16 @@ var Container = function Container(_ref) {
     className = _ref.className;
   return jsxRuntime.jsx("div", {
     id: id,
-    className: clsx("inks-grid", className),
+    className: clsx('inks-grid', className),
     children: content.map(function (item, idx) {
       switch (item.type) {
-        case "pair":
+        case 'pair':
           return jsxRuntime.jsx(Pair, _extends({}, item, {
-            className: clsx("inks-grid-item", item.className)
+            className: clsx('inks-grid-item', item.className)
           }), idx);
-        case "text":
+        case 'text':
           return jsxRuntime.jsx(Text, _extends({}, item, {
-            className: clsx("inks-grid-item", item.className)
+            className: clsx('inks-grid-item', item.className)
           }), idx);
       }
     })
@@ -105,7 +163,7 @@ var Grid = function Grid(props) {
 };
 var TableCell = function TableCell(_ref2) {
   var item = _ref2.item;
-  if (typeof item === "string") {
+  if (typeof item === 'string') {
     return jsxRuntime.jsx("td", {
       className: "inks-cell",
       children: item
@@ -216,7 +274,7 @@ var Text = function Text(_ref4) {
     className = _ref4.className;
   return jsxRuntime.jsx("div", {
     id: id,
-    className: clsx("inks-text", span && "inks-grid", span && "inks-span-".concat(span), className),
+    className: clsx('inks-text', span && "inks-span-".concat(span), className),
     children: value
   });
 };
@@ -228,7 +286,7 @@ var Pair = function Pair(_ref5) {
     className = _ref5.className;
   return jsxRuntime.jsxs("div", {
     id: id,
-    className: clsx("inks-pair", span && "inks-grid", span && "inks-span-".concat(span), className),
+    className: clsx('inks-pair', span && "inks-span-".concat(span), className),
     children: [jsxRuntime.jsxs("label", {
       className: "inks-pair-label",
       children: [label, ":"]
@@ -243,17 +301,17 @@ var InkScripter = react.forwardRef(function (props, ref) {
     value = _props$value === void 0 ? [] : _props$value,
     className = props.className;
   return jsxRuntime.jsx("div", {
-    className: clsx("inks-root", className),
+    className: clsx('inks-root', className),
     ref: ref,
     children: value.map(function (item, index) {
       switch (item.type) {
-        case "grid":
+        case 'grid':
           return jsxRuntime.jsx(Grid, _extends({}, item), index);
-        case "table":
+        case 'table':
           return jsxRuntime.jsx(Table, _extends({}, item), index);
-        case "text":
+        case 'text':
           return jsxRuntime.jsx(Text, _extends({}, item), index);
-        case "pair":
+        case 'pair':
           return jsxRuntime.jsx(Pair, _extends({}, item), index);
       }
     })
@@ -263,3 +321,6 @@ var InkScripter = react.forwardRef(function (props, ref) {
 exports.IFrame = IFrame;
 exports.InkScripter = InkScripter;
 exports.PrinterFrame = PrinterFrame;
+exports.getPageHeight = getPageHeight;
+exports.pix2mm = pix2mm;
+exports.usePagePrint = usePagePrint;

package/dist/esm/IFrame.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode, ForwardRefExoticComponent, RefAttributes } from "react";
+import type { ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface IFrameProps {
     className?: string;
     styleCss?: string;

package/dist/esm/InkScripter.d.ts

@@ -1,22 +1,22 @@
-import type { ForwardRefExoticComponent, RefAttributes } from "react";
+import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 export type ContentTextItem = {
     id?: string;
     className?: string;
-    type: "text";
+    type: 'text';
     value: string;
     span?: number;
 };
 export type ContentPairItem = {
     id?: string;
     className?: string;
-    type: "pair";
+    type: 'pair';
     label: string;
     value: string;
     span?: number;
 };
 export type ContentGridItem = {
     id?: string;
-    type: "grid";
+    type: 'grid';
     content: (ContentPairItem | ContentTextItem)[];
 };
 export type ContentTableCellItem = {
@@ -29,7 +29,7 @@ export type ContentTableCellItem = {
 } | string;
 export type ContentTableItem = {
     id?: string;
-    type: "table";
+    type: 'table';
     head?: ContentTableCellItem[][];
     body?: ContentTableCellItem[][];
     foot?: ContentTableCellItem[][];

package/dist/esm/PrinterFrame.d.ts

@@ -1,4 +1,4 @@
-import type { Ref, ReactNode, ForwardRefExoticComponent, RefAttributes } from "react";
+import type { Ref, ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface PrinterActions {
     print: () => void;
 }

package/dist/esm/index.d.ts

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

package/dist/esm/index.js

@@ -1,8 +1,48 @@
+import { useState, useCallback, useLayoutEffect, forwardRef, useRef, useMemo, useImperativeHandle } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useMemo, useImperativeHandle } from 'react';
 import { createPortal } from 'react-dom';
 import clsx from 'clsx';
 
+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, }) => {
+    const [page, setPage] = useState({
+        width: pageConfig.width || 0,
+        height: pageConfig.height || 0,
+        marginLeft: 0,
+        marginRight: 0,
+        marginTop: 0,
+        marginBottom: 0,
+    });
+    const [pageNode, setPageNode] = useState();
+    const setNodeRef = useCallback((node) => {
+        setPageNode(node);
+    }, []);
+    useLayoutEffect(() => {
+        if (!open) {
+            return;
+        }
+        const rect = pageNode?.getBoundingClientRect();
+        if (!rect) {
+            return;
+        }
+        // height === 0 means auto
+        const { width, height } = pageConfig;
+        const { height: elmHeight, width: elmWidth } = rect;
+        const pageWidth = width || pix2mm(elmWidth);
+        const pageHeight = height ? height : getPageHeight(pix2mm(elmHeight), pageConfig);
+        setPage((old) => ({
+            ...old,
+            width: pageWidth,
+            height: pageHeight,
+        }));
+    }, [pageNode, open, pageConfig]);
+    return { setNodeRef, page };
+};
+
 const IFrame = forwardRef((props, ref) => {
     const { styleCss, className, children, width, height } = props;
     const iframeRef = useRef(null);
@@ -38,7 +78,7 @@ const PrinterFrame = forwardRef((props, ref) => {
         ? 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 &&
+    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 {
@@ -49,12 +89,12 @@ const PrinterFrame = forwardRef((props, ref) => {
 });
 
 const Container = ({ id, content = [], className, }) => {
-    return (jsx("div", { id: id, className: clsx("inks-grid", className), children: content.map((item, idx) => {
+    return (jsx("div", { id: id, className: clsx('inks-grid', className), children: content.map((item, idx) => {
             switch (item.type) {
-                case "pair":
-                    return (jsx(Pair, { ...item, className: clsx("inks-grid-item", item.className) }, idx));
-                case "text":
-                    return (jsx(Text, { ...item, className: clsx("inks-grid-item", item.className) }, idx));
+                case 'pair':
+                    return (jsx(Pair, { ...item, className: clsx('inks-grid-item', item.className) }, idx));
+                case 'text':
+                    return (jsx(Text, { ...item, className: clsx('inks-grid-item', item.className) }, idx));
             }
         }) }));
 };
@@ -62,7 +102,7 @@ const Grid = (props) => {
     return jsx(Container, { ...props });
 };
 const TableCell = ({ item }) => {
-    if (typeof item === "string") {
+    if (typeof item === 'string') {
         return jsx("td", { className: "inks-cell", children: item });
     }
     const { id, header, colSpan, rowSpan, value } = item;
@@ -106,25 +146,25 @@ 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 }) => {
-    return (jsx("div", { id: id, className: clsx("inks-text", span && "inks-grid", span && `inks-span-${span}`, className), children: value }));
+    return (jsx("div", { id: id, className: clsx('inks-text', span && `inks-span-${span}`, className), children: value }));
 };
 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 })] }));
+    return (jsxs("div", { id: id, className: clsx('inks-pair', span && `inks-span-${span}`, className), children: [jsxs("label", { className: "inks-pair-label", children: [label, ":"] }), jsx("div", { className: "inks-pair-value", children: value })] }));
 };
 const InkScripter = forwardRef((props, ref) => {
     const { value = [], className } = props;
-    return (jsx("div", { className: clsx("inks-root", className), ref: ref, 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":
+                case 'grid':
                     return jsx(Grid, { ...item }, index);
-                case "table":
+                case 'table':
                     return jsx(Table, { ...item }, index);
-                case "text":
+                case 'text':
                     return jsx(Text, { ...item }, index);
-                case "pair":
+                case 'pair':
                     return jsx(Pair, { ...item }, index);
             }
         }) }));
 });
 
-export { IFrame, InkScripter, PrinterFrame };
+export { IFrame, InkScripter, PrinterFrame, getPageHeight, pix2mm, usePagePrint };

package/dist/esm/usePagePrint.d.ts

@@ -0,0 +1,19 @@
+export type PageConfig = {
+    width: number;
+    height: number;
+    marginLeft: number;
+    marginRight: number;
+    marginTop: number;
+    marginBottom: number;
+};
+export declare const getPageHeight: (height: number, page: Partial<PageConfig>) => number;
+export declare const pix2mm: (pix: number) => number;
+export type usePagePrintProps = {
+    open?: boolean;
+    pageConfig: Partial<PageConfig>;
+};
+export declare const usePagePrint: <T extends Element>({ open, pageConfig, }: usePagePrintProps) => {
+    setNodeRef: (node: T) => void;
+    page: PageConfig;
+};
+export default usePagePrint;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ink-scripter",
-  "version": "0.0.13",
+  "version": "0.0.16",
   "description": "a react component for generate page to print",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -29,8 +29,7 @@
     "@types/react": "^17.0.0 || ^18.0.0",
     "@types/react-dom": "^17.0.0 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0",
-    "@babel/runtime": "^7.21.0"
+    "react-dom": "^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {