PageNumber

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 PageNumberAlign = 'left' | 'center' | 'right';
7export type PageNumberSize = 'xs' | 'sm' | 'md';
8 
9/**
10 * Auto page number rendered with a configurable format string at a fixed or inline position.
11 * Props - `format` | `align` | `size` | `fixed` | `muted` | `style`
12 * @see {@link PdfPageNumberProps}
13 */
14export interface PdfPageNumberProps {
15  /** Custom styles to merge with component defaults */
16  style?: Style;
17  /**
18   * Format string — use `{page}` for current page and `{total}` for total page count.
19   * @default 'Page {page} of {total}'
20   */
21  format?: string;
22  /**
23   * @default 'center'
24   */
25  align?: PageNumberAlign;
26  /**
27   * @default 'sm'
28   */
29  size?: PageNumberSize;
30  /**
31   * @default false
32   */
33  fixed?: boolean;
34  /**
35   * @default true
36   */
37  muted?: boolean;
38  children?: never;
39}
40 
41function createPageNumberStyles(t: PdfxTheme) {
42  const { typography, colors, primitives } = t;
43  return StyleSheet.create({
44    container: { width: '100%' },
45    text: { fontFamily: typography.body.fontFamily },
46    alignLeft: { textAlign: 'left' },
47    alignCenter: { textAlign: 'center' },
48    alignRight: { textAlign: 'right' },
49    sizeXs: { fontSize: primitives.typography.xs },
50    sizeSm: { fontSize: primitives.typography.sm },
51    sizeMd: { fontSize: primitives.typography.base },
52    colorForeground: { color: colors.foreground },
53    colorMuted: { color: colors.mutedForeground },
54  });
55}
56 
57function formatPageNumber(format: string, pageNumber: number, totalPages: number): string {
58  return format.replace('{page}', String(pageNumber)).replace('{total}', String(totalPages));
59}
60 
61export function PdfPageNumber({
62  format = 'Page {page} of {total}',
63  align = 'center',
64  size = 'sm',
65  fixed = false,
66  muted = true,
67  style,
68}: PdfPageNumberProps) {
69  const theme = usePdfxTheme();
70  const styles = useSafeMemo(() => createPageNumberStyles(theme), [theme]);
71  const alignMap = {
72    left: styles.alignLeft,
73    center: styles.alignCenter,
74    right: styles.alignRight,
75  } as Record<PageNumberAlign, Style>;
76  const sizeMap = { xs: styles.sizeXs, sm: styles.sizeSm, md: styles.sizeMd } as Record<
77    PageNumberSize,
78    Style
79  >;
80  const textStyles: Style[] = [
81    styles.text,
82    alignMap[align],
83// … truncated