List

1import { Text as PDFText, View } from '@react-pdf/renderer';
2import type { Style } from '@react-pdf/types';
3import type React from 'react';
4import { usePdfxTheme, useSafeMemo } from '../lib/pdfx-theme-context';
5import { createListStyles } from './pdfx-list.styles';
6import type { ListItem, ListVariant, PdfListProps } from './pdfx-list.types';
7 
8type Styles = ReturnType<typeof createListStyles>;
9type GapProp = 'xs' | 'sm' | 'md';
10 
11function getGapStyle(gap: GapProp, styles: Styles): Style {
12  if (gap === 'xs') return styles.itemRowGapXs;
13  if (gap === 'md') return styles.itemRowGapMd;
14  return styles.itemRowGapSm;
15}
16 
17function buildRowStyles(
18  index: number,
19  total: number,
20  gap: GapProp,
21  styles: Styles,
22  align: 'start' | 'center' = 'start'
23): Style[] {
24  const row: Style[] = [align === 'center' ? styles.itemRowCenter : styles.itemRow];
25  if (index !== total - 1) row.push(getGapStyle(gap, styles));
26  return row;
27}
28 
29/** Bullet dot marker — solid filled for level 0, outline ring for nested levels. */
30function dotMarker(level: number, styles: Styles): React.ReactElement {
31  return level === 0 ? (
32    <View style={styles.markerBulletWrap}>
33      <View style={styles.markerBulletDot} />
34    </View>
35  ) : (
36    <View style={styles.markerBulletSubWrap}>
37      <View style={styles.markerBulletSubDot} />
38    </View>
39  );
40}
41 
42function renderBulletItem(
43  item: ListItem,
44  index: number,
45  total: number,
46  gap: GapProp,
47  styles: Styles,
48  level: number
49): React.ReactElement {
50  return (
51    <View key={index}>
52      <View style={buildRowStyles(index, total, gap, styles)}>
53        {dotMarker(level, styles)}
54        {/* flex:1 on the View, NOT on the Text — avoids Yoga height underestimation
55            for multi-line Text nodes that would cause overlapping rows. */}
56        <View style={styles.itemTextWrap}>
57          <PDFText style={styles.itemText}>{item.text}</PDFText>
58        </View>
59      </View>
60      {item.children && item.children.length > 0
61        ? renderItemList(item.children, 'bullet', gap, styles, level + 1)
62        : null}
63    </View>
64  );
65}
66 
67function renderNumberedItem(
68  item: ListItem,
69  index: number,
70  total: number,
71  gap: GapProp,
72  styles: Styles
73): React.ReactElement {
74  return (
75    <View key={index} style={buildRowStyles(index, total, gap, styles, 'center')}>
76      <View style={styles.markerNumberBadge}>
77        <PDFText style={styles.markerNumberText}>{`${index + 1}`}</PDFText>
78      </View>
79      <View style={styles.itemTextWrap}>
80// … truncated