53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
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>
|
|
);
|
|
}
|
|
|