PageFooter

1import { Text as PDFText, StyleSheet, View } from '@react-pdf/renderer';
2import type { Style } from '@react-pdf/types';
3import { usePdfxTheme, useSafeMemo } from '../lib/pdfx-theme-context';
4type PdfxTheme = ReturnType<typeof usePdfxTheme>;
5 
6export type PageFooterVariant =
7  | 'simple'
8  | 'centered'
9  | 'branded'
10  | 'minimal'
11  | 'three-column'
12  | 'detailed';
13 
14/**
15 * Footer row with layout variants, optional sticky or fixed positioning, and contact info support.
16 * Props - `leftText` | `rightText` | `centerText` | `variant` | `background` | `textColor` | `marginTop` | `address` | `phone` | `email` | `website` | `fixed` | `sticky` | `pagePadding` | `noWrap` | `style`
17 * @see {@link PageFooterProps}
18 */
19export interface PageFooterProps {
20  /** Custom styles to merge with component defaults */
21  style?: Style;
22  leftText?: string;
23  rightText?: string;
24  centerText?: string;
25  /**
26   * @default 'simple'
27   */
28  variant?: PageFooterVariant;
29  background?: string;
30  textColor?: string;
31  marginTop?: number;
32  address?: string;
33  phone?: string;
34  email?: string;
35  website?: string;
36  /**
37   * @default false
38   */
39  fixed?: boolean;
40  /**
41   * @default false
42   */
43  sticky?: boolean;
44  /**
45   * @default 0
46   */
47  pagePadding?: number;
48  /**
49   * @default true
50   */
51  noWrap?: boolean;
52}
53 
54const THEME_COLOR_KEYS = ['foreground','muted','mutedForeground','primary','primaryForeground','accent','destructive','success','warning','info'] as const;
55function resolveColor(value: string, colors: Record<string, string>): string {
56  return THEME_COLOR_KEYS.includes(value as (typeof THEME_COLOR_KEYS)[number]) ? colors[value] : value;
57}
58function createPageFooterStyles(t: PdfxTheme) {
59  const { spacing, fontWeights } = t.primitives;
60  const c = t.colors;
61  const { body } = t.typography;
62 
63  const textBase = {
64    fontFamily: body.fontFamily,
65    fontSize: t.primitives.typography.xs,
66    color: c.mutedForeground,
67    lineHeight: body.lineHeight,
68  };
69 
70  return StyleSheet.create({
71    simpleContainer: {
72      display: 'flex',
73      flexDirection: 'row',
74      alignItems: 'center',
75      justifyContent: 'space-between',
76      paddingTop: spacing[3],
77      borderTopWidth: spacing[0.5],
78      borderTopColor: c.border,
79      borderTopStyle: 'solid',
80    },
81 
82    centeredContainer: {
83      display: 'flex',
84      flexDirection: 'column',
85      alignItems: 'center',
86      paddingTop: spacing[3],
87      borderTopWidth: spacing[0.5],
88      borderTopColor: c.border,
89// … truncated