@pdfme/schemas 4.3.2-dev.1 → 4.3.2-dev.3

package/src/tables/tableHelper.ts

@@ -5,6 +5,7 @@ import {
   CommonOptions,
   getDefaultFont,
   getFallbackFontName,
+  cloneDeep,
 } from '@pdfme/common';
 import type {
   TableSchema,
@@ -15,7 +16,6 @@ import type {
   StylesProps,
   Section,
 } from './types';
-import { cloneDeep } from '../utils';
 import { Cell, Column, Row, Table } from './classes';
 
 type StyleProp = 'styles' | 'headStyles' | 'bodyStyles' | 'alternateRowStyles' | 'columnStyles';
@@ -164,28 +164,6 @@ function mapCellStyle(style: CellStyle): Partial<Styles> {
   };
 }
 
-function createTableWithAvailableHeight(
-  tableBody: Row[],
-  availableHeight: number,
-  args: CreateTableArgs
-) {
-  let limit = availableHeight;
-  const newTableBody: string[][] = [];
-  let index = 0;
-  while (limit > 0 && index < tableBody.length) {
-    const row = tableBody.slice(0, index + 1).pop();
-    if (!row) break;
-    const rowHeight = row.height;
-    if (limit - rowHeight < 0) {
-      break;
-    }
-    newTableBody.push(row.raw);
-    limit -= rowHeight;
-    index++;
-  }
-  return createSingleTable(newTableBody, args);
-}
-
 function getTableOptions(schema: TableSchema, body: string[][]): UserOptions {
   const columnStylesWidth = schema.headWidthPercentages.reduce(
     (acc, cur, i) => ({ ...acc, [i]: { cellWidth: schema.width * (cur / 100) } }),
@@ -272,7 +250,16 @@ export function createSingleTable(body: string[][], args: CreateTableArgs) {
   const { options, _cache, basePdf } = args;
   if (!isBlankPdf(basePdf)) throw new Error('[@pdfme/schema/table] Custom PDF is not supported');
 
-  const input = parseInput(args.schema as TableSchema, body);
+  const schema = cloneDeep(args.schema) as TableSchema;
+  const { start } = schema.__bodyRange || { start: 0 };
+  if (start % 2 === 1) {
+    const alternateBackgroundColor = schema.bodyStyles.alternateBackgroundColor;
+    schema.bodyStyles.alternateBackgroundColor = schema.bodyStyles.backgroundColor;
+    schema.bodyStyles.backgroundColor = alternateBackgroundColor;
+  }
+  schema.showHead = start === 0;
+
+  const input = parseInput(schema, body);
 
   const font = options.font || getDefaultFont();
 
@@ -282,41 +269,3 @@ export function createSingleTable(body: string[][], args: CreateTableArgs) {
 
   return Table.create({ input, content, font, _cache });
 }
-
-export async function createMultiTables(body: string[][], args: CreateTableArgs): Promise<Table[]> {
-  const { basePdf, schema } = args;
-
-  if (!isBlankPdf(basePdf)) throw new Error('[@pdfme/schema/table] Custom PDF is not supported');
-  const pageHeight = basePdf.height;
-  const paddingBottom = basePdf.padding[2];
-  const paddingTop = basePdf.padding[0];
-  let availableHeight = pageHeight - paddingBottom - schema.position.y;
-
-  const testTable = await createSingleTable(body, args);
-  let remainingBody = testTable.body;
-  const tables: Table[] = [];
-
-  while (remainingBody.length > 0) {
-    const tableHeight =
-      tables.length === 0
-        ? availableHeight - testTable.getHeadHeight()
-        : availableHeight - paddingTop;
-
-    const table = await createTableWithAvailableHeight(remainingBody, tableHeight, args);
-
-    tables.push(table);
-
-    remainingBody = remainingBody.slice(table.body.length);
-
-    if (remainingBody.length > 0) {
-      const _schema = cloneDeep(schema);
-      _schema.showHead = false;
-      _schema.position.y = paddingTop;
-      args.schema = _schema;
-
-      availableHeight = pageHeight - paddingTop - paddingBottom;
-    }
-  }
-
-  return tables;
-}

package/src/tables/uiRender.ts

@@ -6,6 +6,8 @@ import { getBody, getBodyWithRange } from './helper.js';
 import cell from './cell.js';
 import { Row } from './classes';
 
+const buttonSize = 30;
+
 type RowType = InstanceType<typeof Row>;
 
 const cellUiRender = cell.ui;
@@ -218,11 +220,11 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
       schema.__bodyRange.end >= (JSON.parse(value || '[]') as string[][]).length
     ) {
       const addRowButton = document.createElement('button');
-      addRowButton.style.width = '30px';
-      addRowButton.style.height = '30px';
+      addRowButton.style.width = `${buttonSize}px`;
+      addRowButton.style.height = `${buttonSize}px`;
       addRowButton.style.position = 'absolute';
       addRowButton.style.top = `${table.getHeight()}mm`;
-      addRowButton.style.left = 'calc(50% - 15px)';
+      addRowButton.style.left = `calc(50% - ${buttonSize / 2}px)`;
       addRowButton.innerText = '+';
       addRowButton.onclick = () => {
         const newRow = Array(schema.head.length).fill('') as string[];
@@ -235,11 +237,11 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
     table.body.forEach((row, i) => {
       offsetY = offsetY + row.height;
       const removeRowButton = document.createElement('button');
-      removeRowButton.style.width = '30px';
-      removeRowButton.style.height = '30px';
+      removeRowButton.style.width = `${buttonSize}px`;
+      removeRowButton.style.height = `${buttonSize}px`;
       removeRowButton.style.position = 'absolute';
-      removeRowButton.style.top = `${offsetY - px2mm(30)}mm`;
-      removeRowButton.style.right = '-30px';
+      removeRowButton.style.top = `${offsetY - px2mm(buttonSize)}mm`;
+      removeRowButton.style.right = `-${buttonSize}px`;
       removeRowButton.innerText = '-';
       removeRowButton.onclick = () => {
         const newTableBody = body.filter((_, j) => j !== i + (schema.__bodyRange?.start ?? 0));
@@ -251,11 +253,11 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
 
   if (mode === 'designer' && onChange) {
     const addColumnButton = document.createElement('button');
-    addColumnButton.style.width = '30px';
-    addColumnButton.style.height = '30px';
+    addColumnButton.style.width = `${buttonSize}px`;
+    addColumnButton.style.height = `${buttonSize}px`;
     addColumnButton.style.position = 'absolute';
-    addColumnButton.style.top = `${table.getHeadHeight() - px2mm(30)}mm`;
-    addColumnButton.style.right = '-30px';
+    addColumnButton.style.top = `${table.getHeadHeight() - px2mm(buttonSize)}mm`;
+    addColumnButton.style.right = `-${buttonSize}px`;
     addColumnButton.innerText = '+';
     addColumnButton.onclick = (e) => {
       e.preventDefault();
@@ -278,11 +280,11 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
     table.columns.forEach((column, i) => {
       offsetX = offsetX + column.width;
       const removeColumnButton = document.createElement('button');
-      removeColumnButton.style.width = '30px';
-      removeColumnButton.style.height = '30px';
+      removeColumnButton.style.width = `${buttonSize}px`;
+      removeColumnButton.style.height = `${buttonSize}px`;
       removeColumnButton.style.position = 'absolute';
-      removeColumnButton.style.top = '-30px';
-      removeColumnButton.style.left = `${offsetX - px2mm(30)}mm`;
+      removeColumnButton.style.top = `-${buttonSize}px`;
+      removeColumnButton.style.left = `${offsetX - px2mm(buttonSize)}mm`;
       removeColumnButton.innerText = '-';
       removeColumnButton.onclick = (e) => {
         e.preventDefault();
@@ -390,4 +392,4 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
   if (schema.height !== tableHeight && onChange) {
     onChange({ key: 'height', value: tableHeight });
   }
-};
+};

package/src/utils.ts

@@ -202,5 +202,4 @@ export const createErrorElm = () => {
   container.appendChild(span);
 
   return container;
-};
-export const cloneDeep = <T>(value: T): T => JSON.parse(JSON.stringify(value));
+};