Image

1import { Image, 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 
6/** HTTP method used when fetching the image from a URL. */
7export type PdfImageHTTPMethod = 'GET' | 'HEAD' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
8 
9export type PdfImageSrc =
10  | string
11  | { uri: string; method?: PdfImageHTTPMethod; headers?: Record<string, string>; body?: string };
12 
13export type PdfImageFit = 'cover' | 'contain' | 'fill' | 'none';
14 
15export type PdfImageVariant =
16  | 'default'
17  | 'full-width'
18  | 'thumbnail'
19  | 'avatar'
20  | 'cover'
21  | 'bordered'
22  | 'rounded';
23 
24/**
25 * Image element with layout presets, caption, and aspect ratio support.
26 * Props - `src` | `variant` | `width` | `height` | `fit` | `position` | `caption` | `aspectRatio` | `borderRadius` | `noWrap` | `style`
27 * @see {@link PdfImageProps}
28 */
29export interface PdfImageProps {
30  src: PdfImageSrc;
31  /**
32   * @default 'default'
33   */
34  variant?: PdfImageVariant;
35  width?: number | string;
36  height?: number | string;
37  fit?: PdfImageFit;
38  /**
39   * @default '50% 50%'
40   */
41  position?: string;
42  caption?: string;
43  aspectRatio?: number;
44  borderRadius?: number;
45  /**
46   * @default true
47   */
48  noWrap?: boolean;
49  style?: Style;
50}
51 
52interface VariantDefaults {
53  width?: number | string;
54  height?: number | string;
55  fit: PdfImageFit;
56  borderRadius?: number;
57}
58 
59const VARIANT_DEFAULTS: Record<PdfImageVariant, VariantDefaults> = {
60  default: { fit: 'contain' },
61  'full-width': { width: '100%', fit: 'cover' },
62  thumbnail: { width: 80, height: 80, fit: 'cover' },
63  avatar: { width: 48, height: 48, fit: 'cover', borderRadius: 999 },
64  cover: { width: '100%', height: 160, fit: 'cover' },
65  bordered: { width: '100%', fit: 'contain' },
66  rounded: { width: 200, fit: 'contain', borderRadius: 8 },
67};
68 
69const UNSUPPORTED_FORMATS = ['webp', 'avif', 'heic', 'heif', 'ico'];
70 
71function detectFormat(src: PdfImageSrc): string | null {
72  if (typeof src !== 'string') return null;
73  const dataMatch = src.match(/^data:image\/([a-zA-Z0-9+.-]+)/);
74  if (dataMatch) return dataMatch[1].toLowerCase();
75  return src.split('?')[0].split('.').pop()?.toLowerCase() ?? null;
76}
77 
78function warnIfUnsupported(src: PdfImageSrc): void {
79  const fmt = detectFormat(src);
80  if (fmt && UNSUPPORTED_FORMATS.includes(fmt)) {
81    console.warn(
82// … truncated