datasheets

scripts/pdf/react-pdf/DatasheetDocument.tsx

@@ -16,13 +16,6 @@ type Assets = {
   qrDataUrl: string | null;
 };
 
-function chunk<T>(arr: T[], size: number): T[][] {
-  if (size <= 0) return [arr];
-  const out: T[][] = [];
-  for (let i = 0; i < arr.length; i += size) out.push(arr.slice(i, i + size));
-  return out;
-}
-
 export function DatasheetDocument(props: { model: DatasheetModel; assets: Assets }): React.ReactElement {
   const { model, assets } = props;
   const headerTitle = model.labels.datasheet;
@@ -30,13 +23,6 @@ export function DatasheetDocument(props: { model: DatasheetModel; assets: Assets
   // Dense tables require compact headers (no wrapping). Use standard abbreviations.
   const firstColLabel = model.locale === 'de' ? 'Adern & QS' : 'Cores & CS';
 
-  const tablePages: Array<{ table: DatasheetVoltageTable; rows: DatasheetVoltageTable['rows'] }> =
-    model.voltageTables.flatMap(t => {
-      const perPage = 30;
-      const chunks = chunk(t.rows, perPage);
-      return chunks.map(rows => ({ table: t, rows }));
-    });
-
   return (
     <Document>
       <Page size="A4" style={styles.page}>
@@ -67,18 +53,28 @@ export function DatasheetDocument(props: { model: DatasheetModel; assets: Assets
         ) : null}
       </Page>
 
-       {tablePages.map((p, index) => (
-         <Page key={`${p.table.voltageLabel}-${index}`} size="A4" style={styles.page}>
-           <Header title={headerTitle} logoDataUrl={assets.logoDataUrl} qrDataUrl={assets.qrDataUrl} />
-           <Footer locale={model.locale} siteUrl={CONFIG.siteUrl} />
+      {/*
+        Render all voltage sections in a single flow so React-PDF can paginate naturally.
+        This avoids hard page breaks that waste remaining whitespace at the bottom of a page.
+      */}
+      <Page size="A4" style={styles.page}>
+        <Header title={headerTitle} logoDataUrl={assets.logoDataUrl} qrDataUrl={assets.qrDataUrl} />
+        <Footer locale={model.locale} siteUrl={CONFIG.siteUrl} />
 
-          <Section title={`${model.labels.crossSection} — ${p.table.voltageLabel}`}>
-            {p.table.metaItems.length ? <KeyValueGrid items={p.table.metaItems} /> : null}
-          </Section>
+        {model.voltageTables.map((t: DatasheetVoltageTable) => (
+          <View key={t.voltageLabel}>
+            <Section
+              title={`${model.labels.crossSection} — ${t.voltageLabel}`}
+              // Prevent orphaned voltage headings at page bottom; let the rest flow.
+              minPresenceAhead={140}
+            >
+              {t.metaItems.length ? <KeyValueGrid items={t.metaItems} /> : null}
+            </Section>
 
-          <DenseTable table={{ columns: p.table.columns, rows: p.rows }} firstColLabel={firstColLabel} />
-         </Page>
-       ))}
-     </Document>
-   );
+            <DenseTable table={{ columns: t.columns, rows: t.rows }} firstColLabel={firstColLabel} />
+          </View>
+        ))}
+      </Page>
+    </Document>
+  );
 }