Form

1import { Text as PDFText, View } from '@react-pdf/renderer';
2import type { Style } from '@react-pdf/types';
3import { usePdfxTheme, useSafeMemo } from '../lib/pdfx-theme-context';
4import { createFormStyles } from './pdfx-form.styles';
5import type { FormLayout, PdfFormField, PdfFormGroup, PdfFormProps } from './pdfx-form.types';
6 
7function renderFieldAbove(
8  field: PdfFormField,
9  idx: number,
10  styles: ReturnType<typeof createFormStyles>
11) {
12  const areaHeight = field.height ?? 18;
13  const areaStyle: Style[] = [styles.fieldArea, { minHeight: areaHeight }];
14 
15  return (
16    <View key={`${field.label}-${idx}`} style={styles.fieldAbove}>
17      <PDFText style={styles.labelAbove}>{field.label}</PDFText>
18      <View style={areaStyle}>
19        {field.hint ? <PDFText style={styles.hint}>{field.hint}</PDFText> : null}
20      </View>
21    </View>
22  );
23}
24 
25function renderFieldLeft(
26  field: PdfFormField,
27  idx: number,
28  styles: ReturnType<typeof createFormStyles>
29) {
30  const areaHeight = field.height ?? 18;
31  const areaStyle: Style[] = [styles.fieldArea, styles.fieldLeftArea, { minHeight: areaHeight }];
32 
33  return (
34    <View key={`${field.label}-${idx}`} style={styles.fieldLeft}>
35      <PDFText style={styles.labelLeft}>{field.label}</PDFText>
36      <View style={areaStyle}>
37        {field.hint ? <PDFText style={styles.hint}>{field.hint}</PDFText> : null}
38      </View>
39    </View>
40  );
41}
42 
43function renderGroup(
44  group: PdfFormGroup,
45  gi: number,
46  styles: ReturnType<typeof createFormStyles>,
47  labelPosition: 'above' | 'left'
48) {
49  const layout: FormLayout = group.layout ?? 'single';
50  const cols = layout === 'three-column' ? 3 : layout === 'two-column' ? 2 : 1;
51 
52  const renderField = (field: PdfFormField, idx: number) =>
53    labelPosition === 'left'
54      ? renderFieldLeft(field, idx, styles)
55      : renderFieldAbove(field, idx, styles);
56 
57  if (cols === 1) {
58    return (
59      <View key={`group-${gi}`} style={styles.group}>
60        {group.title ? <PDFText style={styles.groupTitle}>{group.title}</PDFText> : null}
61        {group.fields.map(renderField)}
62      </View>
63    );
64  }
65 
66  const chunkSize = Math.ceil(group.fields.length / cols);
67  const chunks: PdfFormField[][] = [];
68  for (let i = 0; i < group.fields.length; i += chunkSize) {
69    chunks.push(group.fields.slice(i, i + chunkSize));
70  }
71  while (chunks.length < cols) {
72    chunks.push([]);
73  }
74 
75  return (
76    <View key={`group-${gi}`} style={styles.group}>
77// … truncated