wip

scripts/pdf/react-pdf/components/DenseTable.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Text, View } from '@react-pdf/renderer';
+
+import type { DatasheetVoltageTable } from '../../model/types';
+import { styles } from '../styles';
+
+function clamp(n: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, n));
+}
+
+export function DenseTable(props: {
+  table: Pick<DatasheetVoltageTable, 'columns' | 'rows'>;
+  firstColLabel: string;
+}): React.ReactElement {
+  const cols = props.table.columns;
+  const rows = props.table.rows;
+
+  const cfgPct = cols.length >= 12 ? 0.28 : 0.32;
+  const dataPct = 1 - cfgPct;
+  const each = cols.length ? dataPct / cols.length : dataPct;
+  const cfgW = `${Math.round(cfgPct * 100)}%`;
+  const dataW = `${Math.round(clamp(each, 0.03, 0.12) * 1000) / 10}%`;
+
+  return (
+    <View style={styles.tableWrap}>
+      <View style={styles.tableHeader}>
+        <View style={{ width: cfgW }}>
+          <Text style={styles.tableHeaderCell}>{props.firstColLabel}</Text>
+        </View>
+        {cols.map(c => (
+          <View key={c.key} style={{ width: dataW }}>
+            <Text style={styles.tableHeaderCell}>{c.label}</Text>
+          </View>
+        ))}
+      </View>
+
+      {rows.map((r, ri) => (
+        <View key={`${r.configuration}-${ri}`} style={[styles.tableRow, ri % 2 === 0 ? styles.tableRowAlt : null]}>
+          <View style={{ width: cfgW }}>
+            <Text style={styles.tableCell}>{r.configuration}</Text>
+          </View>
+          {r.cells.map((cell, ci) => (
+            <View key={`${cols[ci]?.key || ci}`} style={{ width: dataW }}>
+              <Text style={styles.tableCell}>{cell}</Text>
+            </View>
+          ))}
+        </View>
+      ))}
+    </View>
+  );
+}
+