[@types/pdfmake] table layout & widths errors #43758 (#43794)

* fix(pdfmake): table layout & widths errors #43758

* test(pdfmake): tableLayouts is an object

* fix(pdfmake): tableLayouts contains CustomTableLayouts

* fix(pdfmake): restricting table.widths string value to 'auto' & '*'

* prettier

* test BufferOptions and CustomTableLayout

* Update vfs and tableLayouts types

* Add test for vfs & layout dictionary

Co-authored-by: Jean-Raphaël Matte <35611957+jeralm@users.noreply.github.com>

types/pdfmake/build/pdfmake.d.ts

@@ -1,15 +1,15 @@
 /// <reference lib="dom" />
-import { BufferOptions, TableLayout, TDocumentDefinitions, TFontDictionary } from '../interfaces';
+import { BufferOptions, CustomTableLayout, TDocumentDefinitions, TFontDictionary } from '../interfaces';
 
-export let vfs: TFontDictionary;
+export let vfs: { [file: string]: string };
 export let fonts: TFontDictionary;
-export let tableLayouts: TableLayout;
+export let tableLayouts: { [name: string]: CustomTableLayout };
 
 export function createPdf(
     documentDefinitions: TDocumentDefinitions,
-    tableLayouts?: TableLayout,
+    tableLayouts?: { [name: string]: CustomTableLayout },
     fonts?: TFontDictionary,
-    vfs?: TFontDictionary,
+    vfs?: { [file: string]: string },
 ): TCreatedPdf;
 
 export interface TCreatedPdf {

types/pdfmake/build/vfs_fonts.d.ts

@@ -1,5 +1,3 @@
-import { TFontDictionary } from '../interfaces';
-
 export namespace pdfMake {
-    let vfs: TFontDictionary;
+    let vfs: { [file: string]: string };
 }

types/pdfmake/interfaces.d.ts

@@ -79,8 +79,8 @@ export interface CustomTableLayout {
     hLineStyle?: DynamicLayout<LineStyle>;
     vLineStyle?: DynamicLayout<LineStyle>;
     fillColor?: string | DynamicLayout<string>;
-    paddingLeft?: number | DynamicLayout<number>;
-    paddingRight?: number | DynamicLayout<number>;
+    paddingLeft?: DynamicLayout<number>;
+    paddingRight?: DynamicLayout<number>;
     paddingTop?: DynamicLayout<number>;
     paddingBottom?: DynamicLayout<number>;
     fillOpacity?: number | DynamicLayout<number>;
@@ -108,7 +108,7 @@ export type TableCell =
 
 export interface Table {
     body: TableCell[][];
-    widths?: Size[];
+    widths?: '*' | 'auto' | Size[];
     heights?: number | number[] | DynamicRowSize;
     headerRows?: number;
     dontBreakRows?: boolean;
@@ -117,7 +117,7 @@ export interface Table {
 }
 
 export type PredefinedTableLayout = 'noBorders' | 'headerLineOnly' | 'lightHorizontalLines';
-export type TableLayout = PredefinedTableLayout | CustomTableLayout;
+export type TableLayout = string | PredefinedTableLayout | CustomTableLayout;
 
 export interface Style {
     /** name of the font */
@@ -453,7 +453,7 @@ export interface ContextPageSize {
 export interface BufferOptions {
     fontLayoutCache?: boolean;
     bufferPages?: boolean;
-    tableLayouts?: TableLayout;
+    tableLayouts?: { [key: string]: CustomTableLayout };
     autoPrint?: boolean;
     progressCallback?: (progress: number) => void;
 }

types/pdfmake/test/pdfmake-interfaces-tests.ts

@@ -5,6 +5,8 @@ import {
     ContentSvg,
     ContentUnorderedList,
     TDocumentDefinitions,
+    BufferOptions,
+    CustomTableLayout,
 } from 'pdfmake/interfaces';
 
 const createContent: () => Content = () => 'allo';
@@ -236,3 +238,32 @@ const image2: ContentImage = {
     image: 'test',
     fit: [50, 50],
 };
+
+const bufferOptions: BufferOptions = {
+    fontLayoutCache: true,
+    bufferPages: true,
+    tableLayouts: { foo: { fillColor: '#ff0000' } },
+    autoPrint: true,
+    progressCallback: (progress: number) => {}
+};
+
+const customTableLayouts: CustomTableLayout[] = [
+    {},
+    { hLineWidth: () => 50 },
+    { vLineWidth: () => 50 },
+    { hLineColor: () => '#ff0000' },
+    { hLineColor: '#ff0000' },
+    { vLineColor: () => '#ff0000' },
+    { vLineColor: '#ff0000' },
+    { hLineStyle: () => ({ dash: { length: 10, space: 5 }}) },
+    { vLineStyle: () => ({ dash: { length: 10, space: 5 }}) },
+    { fillColor: () => '#ff0000' },
+    { fillColor: '#ff0000' },
+    { paddingLeft: () => 50 },
+    { paddingRight: () => 50 },
+    { paddingTop: () => 50 },
+    { paddingBottom: () => 50 },
+    { fillOpacity: () => 50 },
+    { fillOpacity: 50 },
+    { defaultBorder: true }
+];

types/pdfmake/test/pdfmake-module-browser-tests.ts

@@ -1,6 +1,6 @@
 import pdfFonts = require('pdfmake/build/vfs_fonts');
 import pdfMake = require('pdfmake/build/pdfmake');
-import { BufferOptions } from 'pdfmake/interfaces';
+import { BufferOptions, CustomTableLayout, TFontDictionary } from 'pdfmake/interfaces';
 
 pdfMake.vfs = pdfFonts.pdfMake.vfs;
 
@@ -44,3 +44,25 @@ pdfDocGenerator.getDataUrl((dataUrl) => {
     iframe.src = dataUrl;
     targetElement!.appendChild(iframe);
 });
+
+const layouts: { [name: string]: CustomTableLayout } = {
+    pretty: {
+        hLineWidth: () => 50,
+        paddingLeft: () => 50,
+        hLineStyle: () => ({ dash: { length: 10, space: 5 } }),
+    },
+    ugly: {
+        fillColor: '#ff0000',
+        fillOpacity: () => 50,
+        defaultBorder: true,
+    },
+};
+const fonts: TFontDictionary = {
+    roboto: {
+        normal: 'roboto-regular.ttf',
+    },
+};
+const vfs2: { [file: string]: string } = {
+    'roboto-regular.ttf': 'AAEAAAASAQAABAAgR0RFRrRCsIIAAjGsAAA....base64 of font binary',
+};
+pdfMake.createPdf(dd, layouts, fonts, vfs2).open();

types/pdfmake/test/pdfmake-module-server-tests.ts

@@ -3,6 +3,7 @@ import {
     BufferOptions,
     TDocumentDefinitions,
     TFontDictionary,
+    CustomTableLayout,
 } from 'pdfmake/interfaces';
 
 const fonts: TFontDictionary = {
@@ -20,10 +21,17 @@ const dd: TDocumentDefinitions = {
     content: 'Hello world!',
 };
 
+const customTableLayouts: {[key: string]: CustomTableLayout} = {
+    customLayout: {
+        hLineColor: 'red',
+        vLineColor: () => 'red',
+    }
+};
+
 const options: BufferOptions = {
     fontLayoutCache: true,
     bufferPages: true,
-    tableLayouts: 'noBorders',
+    tableLayouts: customTableLayouts,
     autoPrint: true,
     progressCallback: progress =>
         console.log('Creating pdf: ', progress * 100, '%...'),