react-pdf-levelup 1.0.16 → 2.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +52 -38
- package/dist/index.cjs +263 -194
- package/dist/index.d.cts +29 -21
- package/dist/index.d.ts +29 -21
- package/dist/index.js +261 -198
- package/package.json +23 -23
package/dist/index.d.ts
CHANGED
|
@@ -6,23 +6,12 @@ interface LayoutPDFProps {
|
|
|
6
6
|
orientation?: "portrait" | "landscape";
|
|
7
7
|
backgroundColor?: string;
|
|
8
8
|
showPageNumbers?: boolean;
|
|
9
|
-
padding?: number | string;
|
|
10
|
-
paddingTop?: number;
|
|
11
|
-
paddingRight?: number;
|
|
12
|
-
paddingBottom?: number;
|
|
13
|
-
paddingLeft?: number;
|
|
14
9
|
style?: any;
|
|
15
|
-
width?: number;
|
|
16
|
-
height?: number;
|
|
17
|
-
fontFamily?: string;
|
|
18
|
-
fontSize?: number;
|
|
19
|
-
lineHeight?: number;
|
|
20
10
|
}
|
|
21
11
|
declare const LayoutPDF: React.FC<LayoutPDFProps>;
|
|
22
12
|
|
|
23
13
|
interface ImgProps {
|
|
24
14
|
src?: string;
|
|
25
|
-
alt?: string;
|
|
26
15
|
style?: any;
|
|
27
16
|
}
|
|
28
17
|
declare const Img: React.FC<ImgProps>;
|
|
@@ -113,19 +102,38 @@ interface PageElementProps {
|
|
|
113
102
|
declare const Header: React.FC<PageElementProps>;
|
|
114
103
|
declare const Footer: React.FC<PageElementProps>;
|
|
115
104
|
|
|
116
|
-
interface
|
|
105
|
+
interface QRProps {
|
|
117
106
|
value: string;
|
|
118
107
|
size?: number;
|
|
119
|
-
color?: string;
|
|
120
|
-
backgroundColor?: string;
|
|
121
|
-
errorCorrectionLevel?: "L" | "M" | "Q" | "H";
|
|
122
108
|
style?: any;
|
|
123
|
-
|
|
109
|
+
colorDark?: string;
|
|
110
|
+
colorLight?: string;
|
|
111
|
+
margin?: number;
|
|
124
112
|
logo?: string;
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
113
|
+
logoWidth?: number;
|
|
114
|
+
logoHeight?: number;
|
|
115
|
+
errorCorrectionLevel?: "L" | "M" | "Q" | "H";
|
|
128
116
|
}
|
|
129
|
-
declare const
|
|
117
|
+
declare const QR: React.FC<QRProps>;
|
|
118
|
+
|
|
119
|
+
interface ListProps {
|
|
120
|
+
children: React.ReactNode;
|
|
121
|
+
style?: any;
|
|
122
|
+
start?: number;
|
|
123
|
+
type?: "disc" | "circle" | "square" | "decimal" | "lower-alpha" | "upper-alpha" | "lower-roman" | "upper-roman";
|
|
124
|
+
}
|
|
125
|
+
interface ListItemProps {
|
|
126
|
+
children: React.ReactNode;
|
|
127
|
+
style?: any;
|
|
128
|
+
value?: number | string;
|
|
129
|
+
}
|
|
130
|
+
declare const UL: React.FC<ListProps>;
|
|
131
|
+
declare const OL: React.FC<ListProps>;
|
|
132
|
+
declare const LI: React.FC<ListItemProps & {
|
|
133
|
+
bulletType?: string;
|
|
134
|
+
isOrdered?: boolean;
|
|
135
|
+
index?: number;
|
|
136
|
+
start?: number;
|
|
137
|
+
}>;
|
|
130
138
|
|
|
131
|
-
export { A, BR, Blockquote, Center, Col1, Col10, Col11, Col12, Col2, Col3, Col4, Col5, Col6, Col7, Col8, Col9, Container, Em, Footer, H1, H2, H3, H4, H5, H6, Header, Img, LayoutPDF, Left, Mark, P,
|
|
139
|
+
export { A, BR, Blockquote, Center, Col1, Col10, Col11, Col12, Col2, Col3, Col4, Col5, Col6, Col7, Col8, Col9, Container, Em, Footer, H1, H2, H3, H4, H5, H6, Header, Img, LI, LayoutPDF, Left, Mark, OL, P, QR, Right, Row, Small, Span, Strong, Table, Tbody, Td, Th, Thead, Tr, U, UL };
|
package/dist/index.js
CHANGED
|
@@ -1,74 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
var __defProps = Object.defineProperties;
|
|
3
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
-
var __spreadValues = (a, b) => {
|
|
9
|
-
for (var prop in b || (b = {}))
|
|
10
|
-
if (__hasOwnProp.call(b, prop))
|
|
11
|
-
__defNormalProp(a, prop, b[prop]);
|
|
12
|
-
if (__getOwnPropSymbols)
|
|
13
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
-
if (__propIsEnum.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
}
|
|
17
|
-
return a;
|
|
18
|
-
};
|
|
19
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
|
|
21
|
-
// src/components/PDF/core/LayoutPDF.tsx
|
|
1
|
+
// src/components/core/LayoutPDF.tsx
|
|
22
2
|
import React from "react";
|
|
23
|
-
import { Page, Document, StyleSheet,
|
|
24
|
-
Font.register({
|
|
25
|
-
family: "Times New Roman",
|
|
26
|
-
fonts: [
|
|
27
|
-
{ src: "/fonts/TimesNewerRoman-Regular.otf", fontWeight: 400, fontStyle: "normal" },
|
|
28
|
-
{ src: "/fonts/TimesNewerRoman-Bold.otf", fontWeight: 700, fontStyle: "normal" },
|
|
29
|
-
{ src: "/fonts/TimesNewerRoman-Italic.otf", fontWeight: 400, fontStyle: "italic" },
|
|
30
|
-
{ src: "/fonts/TimesNewerRoman-BoldItalic.otf", fontWeight: 700, fontStyle: "italic" }
|
|
31
|
-
// Bold Italic
|
|
32
|
-
]
|
|
33
|
-
});
|
|
34
|
-
var PAPER_SIZES = {
|
|
35
|
-
A0: [2384, 3370],
|
|
36
|
-
// 841 × 1189 mm
|
|
37
|
-
A1: [1684, 2384],
|
|
38
|
-
// 594 × 841 mm
|
|
39
|
-
A2: [1191, 1684],
|
|
40
|
-
// 420 × 594 mm
|
|
41
|
-
A3: [842, 1191],
|
|
42
|
-
// 297 × 420 mm
|
|
43
|
-
A4: [595, 842],
|
|
44
|
-
// 210 × 297 mm
|
|
45
|
-
A5: [420, 595],
|
|
46
|
-
// 148 × 210 mm
|
|
47
|
-
A6: [298, 420],
|
|
48
|
-
// 105 × 148 mm
|
|
49
|
-
A7: [210, 298],
|
|
50
|
-
// 74 × 105 mm
|
|
51
|
-
A8: [147, 210],
|
|
52
|
-
// 52 × 74 mm
|
|
53
|
-
A9: [105, 147],
|
|
54
|
-
// 37 × 52 mm
|
|
55
|
-
A10: [74, 105]
|
|
56
|
-
// 26 × 37 mm
|
|
57
|
-
};
|
|
3
|
+
import { Page, Document, StyleSheet, Text } from "@react-pdf/renderer";
|
|
58
4
|
var styles = StyleSheet.create({
|
|
59
5
|
page: {
|
|
60
6
|
backgroundColor: "white",
|
|
61
|
-
padding:
|
|
62
|
-
|
|
63
|
-
fontFamily: "Times New Roman",
|
|
7
|
+
padding: 30,
|
|
8
|
+
fontFamily: "Helvetica",
|
|
64
9
|
fontSize: 12,
|
|
65
|
-
lineHeight: 1.5
|
|
66
|
-
position: "relative"
|
|
10
|
+
lineHeight: 1.5
|
|
67
11
|
},
|
|
68
12
|
pageNumber: {
|
|
69
13
|
position: "absolute",
|
|
70
14
|
fontSize: 10,
|
|
71
|
-
|
|
15
|
+
bottom: 30,
|
|
72
16
|
left: 0,
|
|
73
17
|
right: 0,
|
|
74
18
|
textAlign: "center",
|
|
@@ -81,75 +25,17 @@ var LayoutPDF = ({
|
|
|
81
25
|
orientation = "portrait",
|
|
82
26
|
backgroundColor = "white",
|
|
83
27
|
showPageNumbers = true,
|
|
84
|
-
|
|
85
|
-
paddingTop,
|
|
86
|
-
paddingRight,
|
|
87
|
-
paddingBottom,
|
|
88
|
-
paddingLeft,
|
|
89
|
-
style = {},
|
|
90
|
-
width,
|
|
91
|
-
height,
|
|
92
|
-
fontFamily = "Helvetica",
|
|
93
|
-
fontSize = 12,
|
|
94
|
-
lineHeight = 1.5
|
|
28
|
+
style = {}
|
|
95
29
|
}) => {
|
|
96
|
-
const pageStyle =
|
|
30
|
+
const pageStyle = {
|
|
31
|
+
...styles.page,
|
|
97
32
|
backgroundColor,
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
}), style);
|
|
102
|
-
if (paddingTop !== void 0 || paddingRight !== void 0 || paddingBottom !== void 0 || paddingLeft !== void 0) {
|
|
103
|
-
if (paddingTop !== void 0) pageStyle.paddingTop = paddingTop;
|
|
104
|
-
if (paddingRight !== void 0) pageStyle.paddingRight = paddingRight;
|
|
105
|
-
if (paddingBottom !== void 0) pageStyle.paddingBottom = paddingBottom;
|
|
106
|
-
if (paddingLeft !== void 0) pageStyle.paddingLeft = paddingLeft;
|
|
107
|
-
} else {
|
|
108
|
-
pageStyle.padding = padding;
|
|
109
|
-
if (showPageNumbers) {
|
|
110
|
-
pageStyle.paddingBottom = Number(padding) + 14;
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
let pageProps = {};
|
|
114
|
-
const customSize = PAPER_SIZES[size.toUpperCase()];
|
|
115
|
-
if (customSize) {
|
|
116
|
-
const [pageWidth, pageHeight] = customSize;
|
|
117
|
-
if (orientation === "landscape") {
|
|
118
|
-
pageProps = {
|
|
119
|
-
style: pageStyle,
|
|
120
|
-
size: [pageHeight, pageWidth]
|
|
121
|
-
};
|
|
122
|
-
} else {
|
|
123
|
-
pageProps = {
|
|
124
|
-
style: pageStyle,
|
|
125
|
-
size: [pageWidth, pageHeight]
|
|
126
|
-
};
|
|
127
|
-
}
|
|
128
|
-
console.log(`Using custom size for ${size}: ${JSON.stringify(pageProps.size)}`);
|
|
129
|
-
} else if (width && height) {
|
|
130
|
-
pageProps = {
|
|
131
|
-
style: pageStyle,
|
|
132
|
-
size: [width, height]
|
|
133
|
-
};
|
|
134
|
-
} else {
|
|
135
|
-
pageProps = {
|
|
136
|
-
size,
|
|
137
|
-
orientation,
|
|
138
|
-
style: pageStyle
|
|
139
|
-
};
|
|
140
|
-
}
|
|
141
|
-
let pageNumberStyle = __spreadValues({}, styles.pageNumber);
|
|
142
|
-
if (customSize) {
|
|
143
|
-
const [pageWidth, pageHeight] = customSize;
|
|
144
|
-
const actualHeight = orientation === "landscape" ? pageWidth : pageHeight;
|
|
145
|
-
pageNumberStyle = __spreadProps(__spreadValues({}, pageNumberStyle), {
|
|
146
|
-
top: actualHeight - 80
|
|
147
|
-
});
|
|
148
|
-
}
|
|
149
|
-
return /* @__PURE__ */ React.createElement(Document, null, /* @__PURE__ */ React.createElement(Page, __spreadValues({}, pageProps), children, /* @__PURE__ */ React.createElement(
|
|
33
|
+
...style
|
|
34
|
+
};
|
|
35
|
+
return /* @__PURE__ */ React.createElement(Document, null, /* @__PURE__ */ React.createElement(Page, { size, orientation, style: pageStyle }, children, showPageNumbers && /* @__PURE__ */ React.createElement(
|
|
150
36
|
Text,
|
|
151
37
|
{
|
|
152
|
-
style:
|
|
38
|
+
style: styles.pageNumber,
|
|
153
39
|
render: ({ pageNumber, totalPages }) => `${pageNumber} / ${totalPages}`,
|
|
154
40
|
fixed: true
|
|
155
41
|
}
|
|
@@ -157,9 +43,9 @@ var LayoutPDF = ({
|
|
|
157
43
|
};
|
|
158
44
|
var LayoutPDF_default = LayoutPDF;
|
|
159
45
|
|
|
160
|
-
// src/components/
|
|
46
|
+
// src/components/core/Img.tsx
|
|
161
47
|
import React2 from "react";
|
|
162
|
-
import { Image, StyleSheet as StyleSheet2 } from "@react-pdf/renderer";
|
|
48
|
+
import { Image as Image2, StyleSheet as StyleSheet2 } from "@react-pdf/renderer";
|
|
163
49
|
var styles2 = StyleSheet2.create({
|
|
164
50
|
image: {
|
|
165
51
|
width: "100%",
|
|
@@ -167,12 +53,12 @@ var styles2 = StyleSheet2.create({
|
|
|
167
53
|
marginBottom: 14
|
|
168
54
|
}
|
|
169
55
|
});
|
|
170
|
-
var Img = ({ src,
|
|
171
|
-
return /* @__PURE__ */ React2.createElement(
|
|
56
|
+
var Img = ({ src, style }) => {
|
|
57
|
+
return /* @__PURE__ */ React2.createElement(Image2, { src, style: [styles2.image, style] });
|
|
172
58
|
};
|
|
173
59
|
var Img_default = Img;
|
|
174
60
|
|
|
175
|
-
// src/components/
|
|
61
|
+
// src/components/core/Position.tsx
|
|
176
62
|
import React3 from "react";
|
|
177
63
|
import { View, StyleSheet as StyleSheet3 } from "@react-pdf/renderer";
|
|
178
64
|
var styles3 = StyleSheet3.create({
|
|
@@ -196,7 +82,7 @@ var Center = ({ children, style }) => {
|
|
|
196
82
|
return /* @__PURE__ */ React3.createElement(View, { style: [styles3.center, style] }, children);
|
|
197
83
|
};
|
|
198
84
|
|
|
199
|
-
// src/components/
|
|
85
|
+
// src/components/core/Etiquetas.tsx
|
|
200
86
|
import React4 from "react";
|
|
201
87
|
import { Text as Text2, StyleSheet as StyleSheet4, Link } from "@react-pdf/renderer";
|
|
202
88
|
var styles4 = StyleSheet4.create({
|
|
@@ -317,7 +203,7 @@ var Span = ({ children, style }) => {
|
|
|
317
203
|
return /* @__PURE__ */ React4.createElement(Text2, { style: [style] }, children);
|
|
318
204
|
};
|
|
319
205
|
|
|
320
|
-
// src/components/
|
|
206
|
+
// src/components/core/Tablet.tsx
|
|
321
207
|
import React5 from "react";
|
|
322
208
|
import { View as View2, Text as Text3, StyleSheet as StyleSheet5 } from "@react-pdf/renderer";
|
|
323
209
|
var styles5 = StyleSheet5.create({
|
|
@@ -385,21 +271,23 @@ var Tr = ({ children, style }) => {
|
|
|
385
271
|
var Th = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
|
|
386
272
|
const spanWidth = colSpan ? `${100 / 3 * colSpan}%` : void 0;
|
|
387
273
|
const sizeStyle = cellSizeMapping[cellSize];
|
|
388
|
-
const customStyle =
|
|
389
|
-
width: width || spanWidth ||
|
|
390
|
-
|
|
274
|
+
const customStyle = {
|
|
275
|
+
width: width || spanWidth || sizeStyle?.width,
|
|
276
|
+
...height !== void 0 && { height }
|
|
277
|
+
};
|
|
391
278
|
return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.th, customStyle, style] }, /* @__PURE__ */ React5.createElement(Text3, null, children));
|
|
392
279
|
};
|
|
393
280
|
var Td = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
|
|
394
281
|
const spanWidth = colSpan ? `${100 / 3 * colSpan}%` : void 0;
|
|
395
282
|
const sizeStyle = cellSizeMapping[cellSize];
|
|
396
|
-
const customStyle =
|
|
397
|
-
width: width || spanWidth ||
|
|
398
|
-
|
|
283
|
+
const customStyle = {
|
|
284
|
+
width: width || spanWidth || sizeStyle?.width,
|
|
285
|
+
...height !== void 0 && { height }
|
|
286
|
+
};
|
|
399
287
|
return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.td, customStyle, style] }, /* @__PURE__ */ React5.createElement(Text3, null, children));
|
|
400
288
|
};
|
|
401
289
|
|
|
402
|
-
// src/components/
|
|
290
|
+
// src/components/core/Grid.tsx
|
|
403
291
|
import React6 from "react";
|
|
404
292
|
import { View as View3, StyleSheet as StyleSheet6 } from "@react-pdf/renderer";
|
|
405
293
|
var styles6 = StyleSheet6.create({
|
|
@@ -411,7 +299,6 @@ var styles6 = StyleSheet6.create({
|
|
|
411
299
|
flexDirection: "row",
|
|
412
300
|
flexWrap: "wrap",
|
|
413
301
|
marginHorizontal: -5
|
|
414
|
-
// Negative margin to offset column padding
|
|
415
302
|
},
|
|
416
303
|
col: {
|
|
417
304
|
paddingHorizontal: 5
|
|
@@ -472,7 +359,7 @@ var Col12 = ({ children, style }) => {
|
|
|
472
359
|
return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col12, style] }, children);
|
|
473
360
|
};
|
|
474
361
|
|
|
475
|
-
// src/components/
|
|
362
|
+
// src/components/core/PageElements.tsx
|
|
476
363
|
import React7 from "react";
|
|
477
364
|
import { Text as Text4, View as View4, StyleSheet as StyleSheet7 } from "@react-pdf/renderer";
|
|
478
365
|
var styles7 = StyleSheet7.create({
|
|
@@ -504,78 +391,251 @@ var Footer = ({ children, style, fixed = false }) => {
|
|
|
504
391
|
return /* @__PURE__ */ React7.createElement(View4, { style: [styles7.footer, style], fixed }, typeof children === "string" ? /* @__PURE__ */ React7.createElement(Text4, null, children) : children);
|
|
505
392
|
};
|
|
506
393
|
|
|
507
|
-
// src/components/
|
|
394
|
+
// src/components/core/QR.tsx
|
|
508
395
|
import React8 from "react";
|
|
396
|
+
import { Image as Image3, StyleSheet as StyleSheet8, View as View5 } from "@react-pdf/renderer";
|
|
509
397
|
import { useEffect, useState } from "react";
|
|
510
|
-
|
|
511
|
-
|
|
398
|
+
|
|
399
|
+
// src/components/core/QRGenerator.tsx
|
|
400
|
+
import QRCode from "qrcode";
|
|
401
|
+
var generateQRAsBase64 = async ({
|
|
402
|
+
value,
|
|
403
|
+
size = 150,
|
|
404
|
+
colorDark = "#000000",
|
|
405
|
+
colorLight = "#ffffff",
|
|
406
|
+
margin = 0,
|
|
407
|
+
errorCorrectionLevel = "M"
|
|
408
|
+
}) => {
|
|
409
|
+
try {
|
|
410
|
+
const options = {
|
|
411
|
+
errorCorrectionLevel,
|
|
412
|
+
type: "image/png",
|
|
413
|
+
quality: 0.92,
|
|
414
|
+
margin,
|
|
415
|
+
color: {
|
|
416
|
+
dark: colorDark,
|
|
417
|
+
light: colorLight
|
|
418
|
+
},
|
|
419
|
+
width: size
|
|
420
|
+
};
|
|
421
|
+
const qrDataUrl = QRCode.toDataURL(value, options);
|
|
422
|
+
return qrDataUrl;
|
|
423
|
+
} catch (error) {
|
|
424
|
+
console.error("Error generando QR:", error);
|
|
425
|
+
return "";
|
|
426
|
+
}
|
|
427
|
+
};
|
|
428
|
+
var addLogoToQR = async (qrDataUrl, logoUrl, logoWidth, logoHeight) => {
|
|
429
|
+
return new Promise((resolve) => {
|
|
430
|
+
if (!qrDataUrl || !logoUrl) {
|
|
431
|
+
resolve(qrDataUrl);
|
|
432
|
+
return;
|
|
433
|
+
}
|
|
434
|
+
try {
|
|
435
|
+
const canvas = document.createElement("canvas");
|
|
436
|
+
const ctx = canvas.getContext("2d");
|
|
437
|
+
if (!ctx) {
|
|
438
|
+
resolve(qrDataUrl);
|
|
439
|
+
return;
|
|
440
|
+
}
|
|
441
|
+
const qrImage = new Image();
|
|
442
|
+
qrImage.crossOrigin = "anonymous";
|
|
443
|
+
qrImage.onload = () => {
|
|
444
|
+
canvas.width = qrImage.width;
|
|
445
|
+
canvas.height = qrImage.height;
|
|
446
|
+
ctx.drawImage(qrImage, 0, 0, canvas.width, canvas.height);
|
|
447
|
+
const logoImage = new Image();
|
|
448
|
+
logoImage.crossOrigin = "anonymous";
|
|
449
|
+
logoImage.onload = () => {
|
|
450
|
+
const x = (canvas.width - logoWidth) / 2;
|
|
451
|
+
const y = (canvas.height - logoHeight) / 2;
|
|
452
|
+
ctx.fillStyle = "#FFFFFF";
|
|
453
|
+
ctx.fillRect(x - 5, y - 5, logoWidth + 10, logoHeight + 10);
|
|
454
|
+
ctx.drawImage(logoImage, x, y, logoWidth, logoHeight);
|
|
455
|
+
const finalQrDataUrl = canvas.toDataURL("image/png");
|
|
456
|
+
resolve(finalQrDataUrl);
|
|
457
|
+
};
|
|
458
|
+
logoImage.onerror = () => {
|
|
459
|
+
console.error("Error cargando el logo");
|
|
460
|
+
resolve(qrDataUrl);
|
|
461
|
+
};
|
|
462
|
+
logoImage.src = logoUrl;
|
|
463
|
+
};
|
|
464
|
+
qrImage.onerror = () => {
|
|
465
|
+
console.error("Error cargando el QR");
|
|
466
|
+
resolve("");
|
|
467
|
+
};
|
|
468
|
+
qrImage.src = qrDataUrl;
|
|
469
|
+
} catch (error) {
|
|
470
|
+
console.error("Error procesando el QR con logo:", error);
|
|
471
|
+
resolve(qrDataUrl);
|
|
472
|
+
}
|
|
473
|
+
});
|
|
474
|
+
};
|
|
475
|
+
|
|
476
|
+
// src/components/core/QR.tsx
|
|
512
477
|
var styles8 = StyleSheet8.create({
|
|
513
478
|
qrContainer: {
|
|
514
|
-
|
|
479
|
+
display: "flex",
|
|
515
480
|
alignItems: "center",
|
|
516
|
-
justifyContent: "center"
|
|
517
|
-
|
|
518
|
-
logo: {
|
|
519
|
-
position: "absolute",
|
|
520
|
-
zIndex: 2
|
|
521
|
-
},
|
|
522
|
-
logoBackground: {
|
|
523
|
-
position: "absolute",
|
|
524
|
-
zIndex: 1
|
|
481
|
+
justifyContent: "center",
|
|
482
|
+
margin: 10
|
|
525
483
|
}
|
|
526
484
|
});
|
|
527
|
-
var
|
|
485
|
+
var errorLevelMap = {
|
|
486
|
+
0: "L",
|
|
487
|
+
1: "M",
|
|
488
|
+
2: "Q",
|
|
489
|
+
3: "H"
|
|
490
|
+
};
|
|
491
|
+
var QR = ({
|
|
528
492
|
value,
|
|
529
493
|
size = 150,
|
|
530
|
-
color = "#000000",
|
|
531
|
-
backgroundColor = "#ffffff",
|
|
532
|
-
errorCorrectionLevel = "M",
|
|
533
494
|
style,
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
495
|
+
colorDark = "#000000",
|
|
496
|
+
colorLight = "#ffffff",
|
|
497
|
+
margin = 0,
|
|
498
|
+
logo = "",
|
|
499
|
+
logoWidth = 30,
|
|
500
|
+
logoHeight = 30,
|
|
501
|
+
errorCorrectionLevel = "M"
|
|
539
502
|
}) => {
|
|
540
|
-
const [
|
|
503
|
+
const [qrDataUrl, setQrDataUrl] = useState("");
|
|
541
504
|
useEffect(() => {
|
|
542
|
-
const
|
|
505
|
+
const generateQR = async () => {
|
|
543
506
|
try {
|
|
544
|
-
const
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
507
|
+
const baseQrDataUrl = await generateQRAsBase64({
|
|
508
|
+
value,
|
|
509
|
+
size,
|
|
510
|
+
colorDark,
|
|
511
|
+
colorLight,
|
|
512
|
+
margin,
|
|
513
|
+
errorCorrectionLevel: typeof errorCorrectionLevel === "number" ? errorLevelMap[errorCorrectionLevel] || "M" : errorCorrectionLevel
|
|
514
|
+
});
|
|
515
|
+
if (logo && logoWidth && logoHeight) {
|
|
516
|
+
const qrWithLogo = await addLogoToQR(baseQrDataUrl, logo, logoWidth, logoHeight);
|
|
517
|
+
setQrDataUrl(qrWithLogo);
|
|
518
|
+
} else {
|
|
519
|
+
setQrDataUrl(baseQrDataUrl);
|
|
520
|
+
}
|
|
555
521
|
} catch (error) {
|
|
556
|
-
console.error("Error
|
|
522
|
+
console.error("Error generando QR:", error);
|
|
523
|
+
const fallbackUrl2 = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(
|
|
524
|
+
value
|
|
525
|
+
)}&size=${size}x${size}&color=${encodeURIComponent(colorDark.replace("#", ""))}&bgcolor=${encodeURIComponent(
|
|
526
|
+
colorLight.replace("#", "")
|
|
527
|
+
)}`;
|
|
528
|
+
setQrDataUrl(fallbackUrl2);
|
|
557
529
|
}
|
|
558
530
|
};
|
|
559
|
-
|
|
560
|
-
}, [value, size,
|
|
561
|
-
const
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
}
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
531
|
+
generateQR();
|
|
532
|
+
}, [value, size, colorDark, colorLight, margin, logo, logoWidth, logoHeight, errorCorrectionLevel]);
|
|
533
|
+
const fallbackUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(
|
|
534
|
+
value
|
|
535
|
+
)}&size=${size}x${size}`;
|
|
536
|
+
return /* @__PURE__ */ React8.createElement(View5, { style: [styles8.qrContainer, style] }, /* @__PURE__ */ React8.createElement(Image3, { src: qrDataUrl || fallbackUrl, style: { width: size, height: size } }));
|
|
537
|
+
};
|
|
538
|
+
var QR_default = QR;
|
|
539
|
+
|
|
540
|
+
// src/components/core/Lista.tsx
|
|
541
|
+
import React9 from "react";
|
|
542
|
+
import { View as View6, Text as Text5, StyleSheet as StyleSheet9 } from "@react-pdf/renderer";
|
|
543
|
+
var styles9 = StyleSheet9.create({
|
|
544
|
+
ul: {
|
|
545
|
+
marginBottom: 10,
|
|
546
|
+
paddingLeft: 15
|
|
547
|
+
},
|
|
548
|
+
ol: {
|
|
549
|
+
marginBottom: 10,
|
|
550
|
+
paddingLeft: 15
|
|
551
|
+
},
|
|
552
|
+
li: {
|
|
553
|
+
marginBottom: 5,
|
|
554
|
+
flexDirection: "row"
|
|
555
|
+
},
|
|
556
|
+
bulletPoint: {
|
|
557
|
+
width: 15,
|
|
558
|
+
marginRight: 5,
|
|
559
|
+
fontSize: 12
|
|
560
|
+
},
|
|
561
|
+
itemContent: {
|
|
562
|
+
flex: 1
|
|
563
|
+
}
|
|
564
|
+
});
|
|
565
|
+
var getBulletPoint = (type = "disc") => {
|
|
566
|
+
switch (type) {
|
|
567
|
+
case "circle":
|
|
568
|
+
return "\u25CB";
|
|
569
|
+
case "square":
|
|
570
|
+
return "\u25A0";
|
|
571
|
+
case "disc":
|
|
572
|
+
default:
|
|
573
|
+
return "\u2022";
|
|
574
|
+
}
|
|
575
|
+
};
|
|
576
|
+
var getOrderedMarker = (index, type = "decimal", start = 1) => {
|
|
577
|
+
const actualIndex = start + index - 1;
|
|
578
|
+
switch (type) {
|
|
579
|
+
case "lower-alpha":
|
|
580
|
+
return String.fromCharCode(97 + actualIndex % 26) + ".";
|
|
581
|
+
case "upper-alpha":
|
|
582
|
+
return String.fromCharCode(65 + actualIndex % 26) + ".";
|
|
583
|
+
case "lower-roman":
|
|
584
|
+
return toRoman(actualIndex).toLowerCase() + ".";
|
|
585
|
+
case "upper-roman":
|
|
586
|
+
return toRoman(actualIndex) + ".";
|
|
587
|
+
case "decimal":
|
|
588
|
+
default:
|
|
589
|
+
return actualIndex + ".";
|
|
590
|
+
}
|
|
591
|
+
};
|
|
592
|
+
var toRoman = (num) => {
|
|
593
|
+
if (num <= 0 || num > 3999) return String(num);
|
|
594
|
+
const romanNumerals = [
|
|
595
|
+
["", "I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX"],
|
|
596
|
+
["", "X", "XX", "XXX", "XL", "L", "LX", "LXX", "LXXX", "XC"],
|
|
597
|
+
["", "C", "CC", "CCC", "CD", "D", "DC", "DCC", "DCCC", "CM"],
|
|
598
|
+
["", "M", "MM", "MMM"]
|
|
599
|
+
];
|
|
600
|
+
return romanNumerals[3][Math.floor(num / 1e3)] + romanNumerals[2][Math.floor(num % 1e3 / 100)] + romanNumerals[1][Math.floor(num % 100 / 10)] + romanNumerals[0][num % 10];
|
|
601
|
+
};
|
|
602
|
+
var UL = ({ children, style, type = "disc" }) => {
|
|
603
|
+
const childrenWithBullets = React9.Children.map(children, (child, index) => {
|
|
604
|
+
if (React9.isValidElement(child)) {
|
|
605
|
+
return React9.cloneElement(child, {
|
|
606
|
+
bulletType: type,
|
|
607
|
+
isOrdered: false,
|
|
608
|
+
index: index + 1
|
|
609
|
+
});
|
|
610
|
+
}
|
|
611
|
+
return child;
|
|
571
612
|
});
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
613
|
+
return /* @__PURE__ */ React9.createElement(View6, { style: [styles9.ul, style] }, childrenWithBullets);
|
|
614
|
+
};
|
|
615
|
+
var OL = ({ children, style, type = "decimal", start = 1 }) => {
|
|
616
|
+
const childrenWithNumbers = React9.Children.map(children, (child, index) => {
|
|
617
|
+
if (React9.isValidElement(child)) {
|
|
618
|
+
return React9.cloneElement(child, {
|
|
619
|
+
bulletType: type,
|
|
620
|
+
isOrdered: true,
|
|
621
|
+
index: index + 1,
|
|
622
|
+
start
|
|
623
|
+
});
|
|
624
|
+
}
|
|
625
|
+
return child;
|
|
575
626
|
});
|
|
576
|
-
return /* @__PURE__ */
|
|
627
|
+
return /* @__PURE__ */ React9.createElement(View6, { style: [styles9.ol, style] }, childrenWithNumbers);
|
|
628
|
+
};
|
|
629
|
+
var LI = ({ children, style, bulletType = "disc", isOrdered = false, index = 1, start = 1, value }) => {
|
|
630
|
+
let marker;
|
|
631
|
+
if (isOrdered) {
|
|
632
|
+
const actualIndex = value !== void 0 ? Number(value) : index;
|
|
633
|
+
marker = getOrderedMarker(actualIndex, bulletType, start);
|
|
634
|
+
} else {
|
|
635
|
+
marker = getBulletPoint(bulletType);
|
|
636
|
+
}
|
|
637
|
+
return /* @__PURE__ */ React9.createElement(View6, { style: [styles9.li, style] }, /* @__PURE__ */ React9.createElement(Text5, { style: styles9.bulletPoint }, marker), /* @__PURE__ */ React9.createElement(View6, { style: styles9.itemContent }, typeof children === "string" ? /* @__PURE__ */ React9.createElement(Text5, null, children) : children));
|
|
577
638
|
};
|
|
578
|
-
var QRCode_default = QRCode;
|
|
579
639
|
export {
|
|
580
640
|
A,
|
|
581
641
|
BR,
|
|
@@ -604,11 +664,13 @@ export {
|
|
|
604
664
|
H6,
|
|
605
665
|
Header,
|
|
606
666
|
Img_default as Img,
|
|
667
|
+
LI,
|
|
607
668
|
LayoutPDF_default as LayoutPDF,
|
|
608
669
|
Left,
|
|
609
670
|
Mark,
|
|
671
|
+
OL,
|
|
610
672
|
P,
|
|
611
|
-
|
|
673
|
+
QR_default as QR,
|
|
612
674
|
Right,
|
|
613
675
|
Row,
|
|
614
676
|
Small,
|
|
@@ -620,5 +682,6 @@ export {
|
|
|
620
682
|
Th,
|
|
621
683
|
Thead,
|
|
622
684
|
Tr,
|
|
623
|
-
U
|
|
685
|
+
U,
|
|
686
|
+
UL
|
|
624
687
|
};
|