75 lines
2.8 KiB
TypeScript
75 lines
2.8 KiB
TypeScript
import * as React from 'react';
|
|
import { Document, Image, Page, Text, View } from '@react-pdf/renderer';
|
|
|
|
import type { DatasheetModel, DatasheetVoltageTable } from '../model/types';
|
|
import { CONFIG } from '../model/utils';
|
|
import { styles } from './styles';
|
|
import { Header } from './components/Header';
|
|
import { Footer } from './components/Footer';
|
|
import { Section } from './components/Section';
|
|
import { KeyValueGrid } from './components/KeyValueGrid';
|
|
import { DenseTable } from './components/DenseTable';
|
|
|
|
type Assets = {
|
|
logoDataUrl: string | null;
|
|
heroDataUrl: string | null;
|
|
qrDataUrl: string | null;
|
|
};
|
|
|
|
export function DatasheetDocument(props: { model: DatasheetModel; assets: Assets }): React.ReactElement {
|
|
const { model, assets } = props;
|
|
const headerTitle = model.labels.datasheet;
|
|
|
|
// Dense tables require compact headers (no wrapping). Use standard abbreviations.
|
|
const firstColLabel = model.locale === 'de' ? 'Adern & QS' : 'Cores & CS';
|
|
|
|
return (
|
|
<Document>
|
|
<Page size="A4" style={styles.page}>
|
|
<Header title={headerTitle} logoDataUrl={assets.logoDataUrl} qrDataUrl={assets.qrDataUrl} />
|
|
<Footer locale={model.locale} siteUrl={CONFIG.siteUrl} />
|
|
|
|
<Text style={styles.h1}>{model.product.name}</Text>
|
|
{model.product.categoriesLine ? <Text style={styles.subhead}>{model.product.categoriesLine}</Text> : null}
|
|
|
|
<View style={styles.heroBox}>
|
|
{assets.heroDataUrl ? (
|
|
<Image src={assets.heroDataUrl} style={styles.heroImage} />
|
|
) : (
|
|
<Text style={styles.noImage}>{model.labels.noImage}</Text>
|
|
)}
|
|
</View>
|
|
|
|
{model.product.descriptionText ? (
|
|
<Section title={model.labels.description}>
|
|
<Text style={styles.body}>{model.product.descriptionText}</Text>
|
|
</Section>
|
|
) : null}
|
|
|
|
{model.technicalItems.length ? (
|
|
<Section title={model.labels.technicalData}>
|
|
<KeyValueGrid items={model.technicalItems} />
|
|
</Section>
|
|
) : null}
|
|
</Page>
|
|
|
|
{/*
|
|
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} />
|
|
|
|
{model.voltageTables.map((t: DatasheetVoltageTable) => (
|
|
<View key={t.voltageLabel} style={{ marginBottom: 14 }}>
|
|
<Text style={styles.sectionTitle}>{`${model.labels.crossSection} — ${t.voltageLabel}`}</Text>
|
|
|
|
<DenseTable table={{ columns: t.columns, rows: t.rows }} firstColLabel={firstColLabel} />
|
|
</View>
|
|
))}
|
|
</Page>
|
|
</Document>
|
|
);
|
|
}
|