react-ink-scripter 0.0.3 → 0.0.5

package/dist/InkScripter.css

@@ -0,0 +1,121 @@
+
+.inks-root {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 4px;
+}
+
+.inks-title{
+  text-align: center;
+  flex: 1 0;
+  padding: 16px;
+  font-size: 20px;
+}
+
+.inks-footer {
+  margin-left: -8px;
+}
+
+.inks-grid {
+  --Grid-Columns: 12;
+  --Grid-RowSpacing: 8px;
+  --Grid-ColumnSpacing: 32px;
+
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+
+  flex-direction: row;
+
+  flex-wrap: wrap;
+
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+.inks-grid-item {
+  flex-basis: auto;
+  flex-grow: 0;
+  padding: calc(var(--Grid-RowSpacing) / 2) calc(var(--Grid-ColumnSpacing) / 2);
+}
+
+.inks-field {
+  display: flex;
+  flex-direction: row;
+}
+
+.inks-field-label {
+}
+
+.inks-field-value{
+  margin-left: 16px;
+}
+
+.inks-span-1 {
+  width: calc(100% * 1 / var(--Grid-Columns));
+}
+.inks-span-2 {
+  width: calc(100% * 2 / var(--Grid-Columns));
+}
+.inks-span-3 {
+  width: calc(100% * 3 / var(--Grid-Columns));
+}
+.inks-span-4 {
+  width: calc(100% * 4 / var(--Grid-Columns));
+}
+.inks-span-5 {
+  width: calc(100% * 5 / var(--Grid-Columns));
+}
+.inks-span-6 {
+  width: calc(100% * 6 / var(--Grid-Columns));
+}
+.inks-span-7 {
+  width: calc(100% * 7 / var(--Grid-Columns));
+}
+.inks-span-8 {
+  width: calc(100% * 8 / var(--Grid-Columns));
+}
+.inks-span-9 {
+  width: calc(100% * 9 / var(--Grid-Columns));
+}
+.inks-span-10 {
+  width: calc(100% * 10 / var(--Grid-Columns));
+}
+.inks-span-11 {
+  width: calc(100% * 11 / var(--Grid-Columns));
+}
+.inks-span-12 {
+  width: calc(100% * 12 / var(--Grid-Columns));
+}
+
+.inks-table {
+  --Border-Props: 0.8px solid #bbb;
+  margin: 8px 0;
+  padding: 0;
+  text-align: left;
+  border-spacing: 0;
+
+  border-top: var(--Border-Props);
+  border-left: var(--Border-Props);
+}
+
+
+.inks-table-head {
+}
+.inks-table-body{
+}
+.inks-table-foot{
+}
+
+.inks-table-row {
+}
+
+.inks-cell {
+  padding: 8px 4px;
+  margin: 0;
+  border-right: var(--Border-Props);
+  border-bottom: var(--Border-Props);
+}
+

package/dist/PrinterFrame.css

@@ -0,0 +1,21 @@
+.inks-iframe-root {
+  position: fixed;
+  z-index: 1300;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  background: #fff;
+
+  opacity: 0;
+  transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.inks-iframe-root-open {
+  width: 100%;
+  height: 100%;
+
+  opacity: 1;
+  transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+

package/dist/cjs/index.js

@@ -1,27 +1,60 @@
 '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 clsx = require('clsx');
 var jsxRuntime = require('react/jsx-runtime');
+var _extends = require('@babel/runtime/helpers/extends');
+
+var PrinterFrame = function PrinterFrame(props) {
+  var _node$contentWindow, _node$contentWindow$d, _node$contentWindow2, _node$contentWindow2$;
+  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;
+  return jsxRuntime.jsxs("iframe", {
+    ref: setNode,
+    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)]
+  });
+};
 
 var Title = function Title(_ref) {
-  var value = _ref.value;
+  var value = _ref.value,
+    id = _ref.id;
   return jsxRuntime.jsx("div", {
+    id: id,
+    className: "inks-title",
     children: value
   });
 };
 var Container = function Container(_ref2) {
-  var _ref2$content = _ref2.content,
+  var id = _ref2.id,
+    _ref2$content = _ref2.content,
     content = _ref2$content === void 0 ? [] : _ref2$content,
     className = _ref2.className;
   return jsxRuntime.jsx("div", {
-    className: clsx("ink-scripter-container", className),
+    id: id,
+    className: clsx("inks-grid", className),
     children: content.map(function (item, idx) {
       switch (item.type) {
         case "field":
-          return jsxRuntime.jsx(Field, _extends({}, item), idx);
+          return jsxRuntime.jsx(Field, _extends({
+            className: "inks-grid-item"
+          }, item), idx);
         case "text":
-          return jsxRuntime.jsx(Text, _extends({}, item), idx);
+          return jsxRuntime.jsx(Text, _extends({
+            className: "inks-grid-item"
+          }, item), idx);
       }
     })
   });
@@ -31,26 +64,36 @@ var Grid = function Grid(props) {
 };
 var Footer = function Footer(props) {
   return jsxRuntime.jsx(Container, _extends({}, props, {
-    className: "ink-scripter-footer"
+    className: "inks-footer"
   }));
 };
 var TableCell = function TableCell(_ref3) {
   var item = _ref3.item;
   if (typeof item === "string") {
     return jsxRuntime.jsx("td", {
+      className: "inks-cell",
       children: item
     });
   }
-  var header = item.header;
-    item.span;
-    item.offset;
-    var value = item.value;
+  var id = item.id,
+    header = item.header,
+    colSpan = item.colSpan,
+    rowSpan = item.rowSpan,
+    value = item.value;
   if (header) {
     return jsxRuntime.jsx("th", {
+      id: id,
+      className: "inks-cell",
+      colSpan: colSpan,
+      rowSpan: rowSpan,
       children: value
     });
   }
   return jsxRuntime.jsx("td", {
+    id: id,
+    className: "inks-cell",
+    colSpan: colSpan,
+    rowSpan: rowSpan,
     children: value
   });
 };
@@ -60,6 +103,7 @@ var TableRow = function TableRow(_ref4) {
     return null;
   }
   return jsxRuntime.jsx("tr", {
+    className: "inks-table-row",
     children: cells.map(function (v, idx) {
       return jsxRuntime.jsx(TableCell, {
         item: v
@@ -73,6 +117,7 @@ var TableHead = function TableHead(props) {
     return null;
   }
   return jsxRuntime.jsx("thead", {
+    className: "inks-table-head",
     children: cells.map(function (v, idx) {
       return jsxRuntime.jsx(TableCell, {
         item: v
@@ -85,12 +130,13 @@ var TableFoot = function TableFoot(props) {
   if (!cells || !cells.length) {
     return null;
   }
-  return jsxRuntime.jsx("tfoot", {
-    children: cells.map(function (v, idx) {
+  return jsxRuntime.jsxs("tfoot", {
+    className: "inks-table-foot",
+    children: [cells.map(function (v, idx) {
       return jsxRuntime.jsx(TableCell, {
         item: v
       }, idx);
-    })
+    }), " "]
   });
 };
 var TableBody = function TableBody(props) {
@@ -99,6 +145,7 @@ var TableBody = function TableBody(props) {
     return null;
   }
   return jsxRuntime.jsx("tbody", {
+    className: "inks-table-body",
     children: rows.map(function (v, idx) {
       return jsxRuntime.jsx(TableRow, {
         cells: v
@@ -107,14 +154,16 @@ var TableBody = function TableBody(props) {
   });
 };
 var Table = function Table(props) {
-  var head = props.head,
+  var id = props.id,
+    head = props.head,
     body = props.body,
     foot = props.foot;
   if (!(head !== null && head !== void 0 && head.length) && !(body !== null && body !== void 0 && body.length) && !(foot !== null && foot !== void 0 && foot.length)) {
     return null;
   }
   return jsxRuntime.jsxs("table", {
-    className: "ink-scripter-table",
+    id: id,
+    className: "inks-table",
     children: [jsxRuntime.jsx(TableHead, {
       cells: head
     }), jsxRuntime.jsx(TableBody, {
@@ -125,30 +174,40 @@ var Table = function Table(props) {
   });
 };
 var Text = function Text(_ref5) {
-  var value = _ref5.value;
-    _ref5.span;
+  var id = _ref5.id,
+    value = _ref5.value,
+    span = _ref5.span,
+    className = _ref5.className;
   return jsxRuntime.jsx("div", {
-    className: "ink-scripter-text",
+    id: id,
+    className: clsx("inks-text", span && "inks-grid", span && "inks-span-".concat(span), className),
     children: value
   });
 };
 var Field = function Field(_ref6) {
-  var value = _ref6.value,
-    label = _ref6.label;
+  var id = _ref6.id,
+    value = _ref6.value,
+    label = _ref6.label,
+    span = _ref6.span,
+    className = _ref6.className;
   return jsxRuntime.jsxs("div", {
-    className: "ink-scripter-filed",
+    id: id,
+    className: clsx("inks-field", span && "inks-grid", span && "inks-span-".concat(span), className),
     children: [jsxRuntime.jsxs("label", {
+      className: "inks-field-label",
       children: [label, ":"]
-    }), jsxRuntime.jsx("span", {
+    }), jsxRuntime.jsx("div", {
+      className: "inks-field-value",
       children: value
     })]
   });
 };
-var ReactInkScripter = function ReactInkScripter(_ref7) {
-  var _ref7$value = _ref7.value,
-    value = _ref7$value === void 0 ? [] : _ref7$value;
+var InkScripter = function InkScripter(props) {
+  var _props$value = props.value,
+    value = _props$value === void 0 ? [] : _props$value,
+    className = props.className;
   return jsxRuntime.jsx("div", {
-    className: "ink-scripter-root",
+    className: clsx("inks-root", className),
     children: value.map(function (item, index) {
       switch (item.type) {
         case "title":
@@ -168,4 +227,5 @@ var ReactInkScripter = function ReactInkScripter(_ref7) {
   });
 };
 
-exports.ReactInkScripter = ReactInkScripter;
+exports.InkScripter = InkScripter;
+exports.PrinterFrame = PrinterFrame;

package/dist/{ReactInkScripter.d.ts → esm/InkScripter.d.ts}

@@ -1,30 +1,37 @@
 /// <reference types="react" />
+import { ClassValue } from "clsx";
 export type ContentTitleItem = {
+    id?: string;
     type: "title";
     value: string;
 };
 export type ContentFieldItem = {
+    id?: string;
     type: "field";
     label: string;
     value: string;
     span?: number;
 };
 export type ContentTextItem = {
+    id?: string;
     type: "text";
     value: string;
     span?: number;
 };
 export type ContentContainerItem = {
+    id?: string;
     type: "grid" | "footer";
     content: (ContentFieldItem | ContentTextItem)[];
 };
 export type ContentTableCellItem = {
+    id?: string;
     header?: boolean;
-    span?: number;
-    offset?: number;
+    rowSpan?: number;
+    colSpan?: number;
     value: string;
 } | string;
 export type ContentTableItem = {
+    id?: string;
     type: "table";
     head?: ContentTableCellItem[];
     body?: ContentTableCellItem[][];
@@ -33,6 +40,10 @@ export type ContentTableItem = {
 export type ContentType = (ContentTitleItem | ContentContainerItem | ContentTableItem | ContentTextItem | ContentFieldItem)[];
 export type ReactInkScripterProps = {
     value?: ContentType;
+    className?: string;
+};
+export type TypeWithClassName<T> = T & {
+    className?: ClassValue;
 };
-export declare const ReactInkScripter: ({ value }: ReactInkScripterProps) => JSX.Element;
-export default ReactInkScripter;
+export declare const InkScripter: (props: ReactInkScripterProps) => JSX.Element;
+export default InkScripter;

package/dist/esm/PrinterFrame.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+export interface PrinterFrameProps {
+    styleCss?: string;
+    open?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+export declare const PrinterFrame: (props: PrinterFrameProps) => JSX.Element;
+export default PrinterFrame;

package/dist/esm/index.d.ts

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

package/dist/esm/index.js

@@ -0,0 +1,108 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
+import clsx from 'clsx';
+
+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 Title = ({ value, id }) => {
+    return (jsx("div", { id: id, className: "inks-title", children: value }));
+};
+const Container = ({ id, content = [], className, }) => {
+    return (jsx("div", { id: id, className: clsx("inks-grid", className), children: content.map((item, idx) => {
+            switch (item.type) {
+                case "field":
+                    return jsx(Field, { className: "inks-grid-item", ...item }, idx);
+                case "text":
+                    return jsx(Text, { className: "inks-grid-item", ...item }, idx);
+            }
+        }) }));
+};
+const Grid = (props) => {
+    return jsx(Container, { ...props });
+};
+const Footer = (props) => {
+    return jsx(Container, { ...props, className: "inks-footer" });
+};
+const TableCell = ({ item }) => {
+    if (typeof item === "string") {
+        return jsx("td", { className: "inks-cell", children: item });
+    }
+    const { id, header, colSpan, rowSpan, value } = item;
+    if (header) {
+        return (jsx("th", { id: id, className: "inks-cell", colSpan: colSpan, rowSpan: rowSpan, children: value }));
+    }
+    return (jsx("td", { id: id, className: "inks-cell", colSpan: colSpan, rowSpan: rowSpan, children: value }));
+};
+const TableRow = ({ cells }) => {
+    if (!cells.length) {
+        return null;
+    }
+    return (jsx("tr", { className: "inks-table-row", children: cells.map((v, idx) => (jsx(TableCell, { item: v }, idx))) }));
+};
+const TableHead = (props) => {
+    const { cells } = props;
+    if (!cells || !cells.length) {
+        return null;
+    }
+    return (jsx("thead", { className: "inks-table-head", children: cells.map((v, idx) => (jsx(TableCell, { item: v }, idx))) }));
+};
+const TableFoot = (props) => {
+    const { cells } = props;
+    if (!cells || !cells.length) {
+        return null;
+    }
+    return (jsxs("tfoot", { className: "inks-table-foot", children: [cells.map((v, idx) => (jsx(TableCell, { item: v }, idx))), " "] }));
+};
+const TableBody = (props) => {
+    const { rows } = props;
+    if (!rows || !rows.length) {
+        return null;
+    }
+    return (jsx("tbody", { className: "inks-table-body", children: rows.map((v, idx) => (jsx(TableRow, { cells: v }, idx))) }));
+};
+const Table = (props) => {
+    const { id, head, body, foot } = props;
+    if (!head?.length && !body?.length && !foot?.length) {
+        return null;
+    }
+    return (jsxs("table", { id: id, className: "inks-table", children: [jsx(TableHead, { cells: head }), jsx(TableBody, { rows: body }), jsx(TableFoot, { cells: 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 }));
+};
+const Field = ({ id, value, label, span, className, }) => {
+    return (jsxs("div", { id: id, className: clsx("inks-field", span && "inks-grid", span && `inks-span-${span}`, className), children: [jsxs("label", { className: "inks-field-label", children: [label, ":"] }), jsx("div", { className: "inks-field-value", children: value })] }));
+};
+const InkScripter = (props) => {
+    const { value = [], className } = props;
+    return (jsx("div", { className: clsx("inks-root", className), children: value.map((item, index) => {
+            switch (item.type) {
+                case "title":
+                    return jsx(Title, { ...item }, index);
+                case "footer":
+                    return jsx(Footer, { ...item }, index);
+                case "grid":
+                    return jsx(Grid, { ...item }, index);
+                case "table":
+                    return jsx(Table, { ...item }, index);
+                case "text":
+                    return jsx(Text, { ...item }, index);
+                case "field":
+                    return jsx(Field, { ...item }, index);
+            }
+        }) }));
+};
+
+export { InkScripter, PrinterFrame };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "react-ink-scripter",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "a react component for generate page to print",
   "main": "dist/cjs/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/lawrsp/react-ink-scripter.git"

package/dist/index.d.ts

@@ -1 +0,0 @@
-export * from "./ReactInkScripter";

package/dist/index.js

@@ -1,92 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import clsx from 'clsx';
-
-const Title = ({ value }) => {
-    return jsx("div", { children: value });
-};
-const Container = ({ content = [], className, }) => {
-    return (jsx("div", { className: clsx("ink-scripter-container", className), children: content.map((item, idx) => {
-            switch (item.type) {
-                case "field":
-                    return jsx(Field, { ...item }, idx);
-                case "text":
-                    return jsx(Text, { ...item }, idx);
-            }
-        }) }));
-};
-const Grid = (props) => {
-    return jsx(Container, { ...props });
-};
-const Footer = (props) => {
-    return jsx(Container, { ...props, className: "ink-scripter-footer" });
-};
-const TableCell = ({ item }) => {
-    if (typeof item === "string") {
-        return jsx("td", { children: item });
-    }
-    const { header, span, offset, value } = item;
-    if (header) {
-        return jsx("th", { children: value });
-    }
-    return jsx("td", { children: value });
-};
-const TableRow = ({ cells }) => {
-    if (!cells.length) {
-        return null;
-    }
-    return (jsx("tr", { children: cells.map((v, idx) => (jsx(TableCell, { item: v }, idx))) }));
-};
-const TableHead = (props) => {
-    const { cells } = props;
-    if (!cells || !cells.length) {
-        return null;
-    }
-    return (jsx("thead", { children: cells.map((v, idx) => (jsx(TableCell, { item: v }, idx))) }));
-};
-const TableFoot = (props) => {
-    const { cells } = props;
-    if (!cells || !cells.length) {
-        return null;
-    }
-    return (jsx("tfoot", { children: cells.map((v, idx) => (jsx(TableCell, { item: v }, idx))) }));
-};
-const TableBody = (props) => {
-    const { rows } = props;
-    if (!rows || !rows.length) {
-        return null;
-    }
-    return (jsx("tbody", { children: rows.map((v, idx) => (jsx(TableRow, { cells: v }, idx))) }));
-};
-const Table = (props) => {
-    const { head, body, foot } = props;
-    if (!head?.length && !body?.length && !foot?.length) {
-        return null;
-    }
-    return (jsxs("table", { className: "ink-scripter-table", children: [jsx(TableHead, { cells: head }), jsx(TableBody, { rows: body }), jsx(TableFoot, { cells: foot })] }));
-};
-const Text = ({ value, span }) => {
-    return jsx("div", { className: "ink-scripter-text", children: value });
-};
-const Field = ({ value, label }) => {
-    return (jsxs("div", { className: "ink-scripter-filed", children: [jsxs("label", { children: [label, ":"] }), jsx("span", { children: value })] }));
-};
-const ReactInkScripter = ({ value = [] }) => {
-    return (jsx("div", { className: "ink-scripter-root", children: value.map((item, index) => {
-            switch (item.type) {
-                case "title":
-                    return jsx(Title, { ...item }, index);
-                case "footer":
-                    return jsx(Footer, { ...item }, index);
-                case "grid":
-                    return jsx(Grid, { ...item }, index);
-                case "table":
-                    return jsx(Table, { ...item }, index);
-                case "text":
-                    return jsx(Text, { ...item }, index);
-                case "field":
-                    return jsx(Field, { ...item }, index);
-            }
-        }) }));
-};
-
-export { ReactInkScripter };