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.cjs
CHANGED
|
@@ -1,27 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __create = Object.create;
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
|
-
var __defProps = Object.defineProperties;
|
|
5
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
10
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13
|
-
var __spreadValues = (a, b) => {
|
|
14
|
-
for (var prop in b || (b = {}))
|
|
15
|
-
if (__hasOwnProp.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
if (__getOwnPropSymbols)
|
|
18
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
19
|
-
if (__propIsEnum.call(b, prop))
|
|
20
|
-
__defNormalProp(a, prop, b[prop]);
|
|
21
|
-
}
|
|
22
|
-
return a;
|
|
23
|
-
};
|
|
24
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
8
|
var __export = (target, all) => {
|
|
26
9
|
for (var name in all)
|
|
27
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -44,7 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
44
27
|
));
|
|
45
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
46
29
|
|
|
47
|
-
// src/components/
|
|
30
|
+
// src/components/core/index.tsx
|
|
48
31
|
var index_exports = {};
|
|
49
32
|
__export(index_exports, {
|
|
50
33
|
A: () => A,
|
|
@@ -74,11 +57,13 @@ __export(index_exports, {
|
|
|
74
57
|
H6: () => H6,
|
|
75
58
|
Header: () => Header,
|
|
76
59
|
Img: () => Img_default,
|
|
60
|
+
LI: () => LI,
|
|
77
61
|
LayoutPDF: () => LayoutPDF_default,
|
|
78
62
|
Left: () => Left,
|
|
79
63
|
Mark: () => Mark,
|
|
64
|
+
OL: () => OL,
|
|
80
65
|
P: () => P,
|
|
81
|
-
|
|
66
|
+
QR: () => QR_default,
|
|
82
67
|
Right: () => Right,
|
|
83
68
|
Row: () => Row,
|
|
84
69
|
Small: () => Small,
|
|
@@ -90,61 +75,26 @@ __export(index_exports, {
|
|
|
90
75
|
Th: () => Th,
|
|
91
76
|
Thead: () => Thead,
|
|
92
77
|
Tr: () => Tr,
|
|
93
|
-
U: () => U
|
|
78
|
+
U: () => U,
|
|
79
|
+
UL: () => UL
|
|
94
80
|
});
|
|
95
81
|
module.exports = __toCommonJS(index_exports);
|
|
96
82
|
|
|
97
|
-
// src/components/
|
|
83
|
+
// src/components/core/LayoutPDF.tsx
|
|
98
84
|
var import_react = __toESM(require("react"), 1);
|
|
99
85
|
var import_renderer = require("@react-pdf/renderer");
|
|
100
|
-
import_renderer.Font.register({
|
|
101
|
-
family: "Times New Roman",
|
|
102
|
-
fonts: [
|
|
103
|
-
{ src: "/fonts/TimesNewerRoman-Regular.otf", fontWeight: 400, fontStyle: "normal" },
|
|
104
|
-
{ src: "/fonts/TimesNewerRoman-Bold.otf", fontWeight: 700, fontStyle: "normal" },
|
|
105
|
-
{ src: "/fonts/TimesNewerRoman-Italic.otf", fontWeight: 400, fontStyle: "italic" },
|
|
106
|
-
{ src: "/fonts/TimesNewerRoman-BoldItalic.otf", fontWeight: 700, fontStyle: "italic" }
|
|
107
|
-
// Bold Italic
|
|
108
|
-
]
|
|
109
|
-
});
|
|
110
|
-
var PAPER_SIZES = {
|
|
111
|
-
A0: [2384, 3370],
|
|
112
|
-
// 841 × 1189 mm
|
|
113
|
-
A1: [1684, 2384],
|
|
114
|
-
// 594 × 841 mm
|
|
115
|
-
A2: [1191, 1684],
|
|
116
|
-
// 420 × 594 mm
|
|
117
|
-
A3: [842, 1191],
|
|
118
|
-
// 297 × 420 mm
|
|
119
|
-
A4: [595, 842],
|
|
120
|
-
// 210 × 297 mm
|
|
121
|
-
A5: [420, 595],
|
|
122
|
-
// 148 × 210 mm
|
|
123
|
-
A6: [298, 420],
|
|
124
|
-
// 105 × 148 mm
|
|
125
|
-
A7: [210, 298],
|
|
126
|
-
// 74 × 105 mm
|
|
127
|
-
A8: [147, 210],
|
|
128
|
-
// 52 × 74 mm
|
|
129
|
-
A9: [105, 147],
|
|
130
|
-
// 37 × 52 mm
|
|
131
|
-
A10: [74, 105]
|
|
132
|
-
// 26 × 37 mm
|
|
133
|
-
};
|
|
134
86
|
var styles = import_renderer.StyleSheet.create({
|
|
135
87
|
page: {
|
|
136
88
|
backgroundColor: "white",
|
|
137
|
-
padding:
|
|
138
|
-
|
|
139
|
-
fontFamily: "Times New Roman",
|
|
89
|
+
padding: 30,
|
|
90
|
+
fontFamily: "Helvetica",
|
|
140
91
|
fontSize: 12,
|
|
141
|
-
lineHeight: 1.5
|
|
142
|
-
position: "relative"
|
|
92
|
+
lineHeight: 1.5
|
|
143
93
|
},
|
|
144
94
|
pageNumber: {
|
|
145
95
|
position: "absolute",
|
|
146
96
|
fontSize: 10,
|
|
147
|
-
|
|
97
|
+
bottom: 30,
|
|
148
98
|
left: 0,
|
|
149
99
|
right: 0,
|
|
150
100
|
textAlign: "center",
|
|
@@ -157,75 +107,17 @@ var LayoutPDF = ({
|
|
|
157
107
|
orientation = "portrait",
|
|
158
108
|
backgroundColor = "white",
|
|
159
109
|
showPageNumbers = true,
|
|
160
|
-
|
|
161
|
-
paddingTop,
|
|
162
|
-
paddingRight,
|
|
163
|
-
paddingBottom,
|
|
164
|
-
paddingLeft,
|
|
165
|
-
style = {},
|
|
166
|
-
width,
|
|
167
|
-
height,
|
|
168
|
-
fontFamily = "Helvetica",
|
|
169
|
-
fontSize = 12,
|
|
170
|
-
lineHeight = 1.5
|
|
110
|
+
style = {}
|
|
171
111
|
}) => {
|
|
172
|
-
const pageStyle =
|
|
112
|
+
const pageStyle = {
|
|
113
|
+
...styles.page,
|
|
173
114
|
backgroundColor,
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
}), style);
|
|
178
|
-
if (paddingTop !== void 0 || paddingRight !== void 0 || paddingBottom !== void 0 || paddingLeft !== void 0) {
|
|
179
|
-
if (paddingTop !== void 0) pageStyle.paddingTop = paddingTop;
|
|
180
|
-
if (paddingRight !== void 0) pageStyle.paddingRight = paddingRight;
|
|
181
|
-
if (paddingBottom !== void 0) pageStyle.paddingBottom = paddingBottom;
|
|
182
|
-
if (paddingLeft !== void 0) pageStyle.paddingLeft = paddingLeft;
|
|
183
|
-
} else {
|
|
184
|
-
pageStyle.padding = padding;
|
|
185
|
-
if (showPageNumbers) {
|
|
186
|
-
pageStyle.paddingBottom = Number(padding) + 14;
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
let pageProps = {};
|
|
190
|
-
const customSize = PAPER_SIZES[size.toUpperCase()];
|
|
191
|
-
if (customSize) {
|
|
192
|
-
const [pageWidth, pageHeight] = customSize;
|
|
193
|
-
if (orientation === "landscape") {
|
|
194
|
-
pageProps = {
|
|
195
|
-
style: pageStyle,
|
|
196
|
-
size: [pageHeight, pageWidth]
|
|
197
|
-
};
|
|
198
|
-
} else {
|
|
199
|
-
pageProps = {
|
|
200
|
-
style: pageStyle,
|
|
201
|
-
size: [pageWidth, pageHeight]
|
|
202
|
-
};
|
|
203
|
-
}
|
|
204
|
-
console.log(`Using custom size for ${size}: ${JSON.stringify(pageProps.size)}`);
|
|
205
|
-
} else if (width && height) {
|
|
206
|
-
pageProps = {
|
|
207
|
-
style: pageStyle,
|
|
208
|
-
size: [width, height]
|
|
209
|
-
};
|
|
210
|
-
} else {
|
|
211
|
-
pageProps = {
|
|
212
|
-
size,
|
|
213
|
-
orientation,
|
|
214
|
-
style: pageStyle
|
|
215
|
-
};
|
|
216
|
-
}
|
|
217
|
-
let pageNumberStyle = __spreadValues({}, styles.pageNumber);
|
|
218
|
-
if (customSize) {
|
|
219
|
-
const [pageWidth, pageHeight] = customSize;
|
|
220
|
-
const actualHeight = orientation === "landscape" ? pageWidth : pageHeight;
|
|
221
|
-
pageNumberStyle = __spreadProps(__spreadValues({}, pageNumberStyle), {
|
|
222
|
-
top: actualHeight - 80
|
|
223
|
-
});
|
|
224
|
-
}
|
|
225
|
-
return /* @__PURE__ */ import_react.default.createElement(import_renderer.Document, null, /* @__PURE__ */ import_react.default.createElement(import_renderer.Page, __spreadValues({}, pageProps), children, /* @__PURE__ */ import_react.default.createElement(
|
|
115
|
+
...style
|
|
116
|
+
};
|
|
117
|
+
return /* @__PURE__ */ import_react.default.createElement(import_renderer.Document, null, /* @__PURE__ */ import_react.default.createElement(import_renderer.Page, { size, orientation, style: pageStyle }, children, showPageNumbers && /* @__PURE__ */ import_react.default.createElement(
|
|
226
118
|
import_renderer.Text,
|
|
227
119
|
{
|
|
228
|
-
style:
|
|
120
|
+
style: styles.pageNumber,
|
|
229
121
|
render: ({ pageNumber, totalPages }) => `${pageNumber} / ${totalPages}`,
|
|
230
122
|
fixed: true
|
|
231
123
|
}
|
|
@@ -233,7 +125,7 @@ var LayoutPDF = ({
|
|
|
233
125
|
};
|
|
234
126
|
var LayoutPDF_default = LayoutPDF;
|
|
235
127
|
|
|
236
|
-
// src/components/
|
|
128
|
+
// src/components/core/Img.tsx
|
|
237
129
|
var import_react2 = __toESM(require("react"), 1);
|
|
238
130
|
var import_renderer2 = require("@react-pdf/renderer");
|
|
239
131
|
var styles2 = import_renderer2.StyleSheet.create({
|
|
@@ -243,12 +135,12 @@ var styles2 = import_renderer2.StyleSheet.create({
|
|
|
243
135
|
marginBottom: 14
|
|
244
136
|
}
|
|
245
137
|
});
|
|
246
|
-
var Img = ({ src,
|
|
138
|
+
var Img = ({ src, style }) => {
|
|
247
139
|
return /* @__PURE__ */ import_react2.default.createElement(import_renderer2.Image, { src, style: [styles2.image, style] });
|
|
248
140
|
};
|
|
249
141
|
var Img_default = Img;
|
|
250
142
|
|
|
251
|
-
// src/components/
|
|
143
|
+
// src/components/core/Position.tsx
|
|
252
144
|
var import_react3 = __toESM(require("react"), 1);
|
|
253
145
|
var import_renderer3 = require("@react-pdf/renderer");
|
|
254
146
|
var styles3 = import_renderer3.StyleSheet.create({
|
|
@@ -272,7 +164,7 @@ var Center = ({ children, style }) => {
|
|
|
272
164
|
return /* @__PURE__ */ import_react3.default.createElement(import_renderer3.View, { style: [styles3.center, style] }, children);
|
|
273
165
|
};
|
|
274
166
|
|
|
275
|
-
// src/components/
|
|
167
|
+
// src/components/core/Etiquetas.tsx
|
|
276
168
|
var import_react4 = __toESM(require("react"), 1);
|
|
277
169
|
var import_renderer4 = require("@react-pdf/renderer");
|
|
278
170
|
var styles4 = import_renderer4.StyleSheet.create({
|
|
@@ -393,7 +285,7 @@ var Span = ({ children, style }) => {
|
|
|
393
285
|
return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [style] }, children);
|
|
394
286
|
};
|
|
395
287
|
|
|
396
|
-
// src/components/
|
|
288
|
+
// src/components/core/Tablet.tsx
|
|
397
289
|
var import_react5 = __toESM(require("react"), 1);
|
|
398
290
|
var import_renderer5 = require("@react-pdf/renderer");
|
|
399
291
|
var styles5 = import_renderer5.StyleSheet.create({
|
|
@@ -461,21 +353,23 @@ var Tr = ({ children, style }) => {
|
|
|
461
353
|
var Th = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
|
|
462
354
|
const spanWidth = colSpan ? `${100 / 3 * colSpan}%` : void 0;
|
|
463
355
|
const sizeStyle = cellSizeMapping[cellSize];
|
|
464
|
-
const customStyle =
|
|
465
|
-
width: width || spanWidth ||
|
|
466
|
-
|
|
356
|
+
const customStyle = {
|
|
357
|
+
width: width || spanWidth || sizeStyle?.width,
|
|
358
|
+
...height !== void 0 && { height }
|
|
359
|
+
};
|
|
467
360
|
return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.th, customStyle, style] }, /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, null, children));
|
|
468
361
|
};
|
|
469
362
|
var Td = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
|
|
470
363
|
const spanWidth = colSpan ? `${100 / 3 * colSpan}%` : void 0;
|
|
471
364
|
const sizeStyle = cellSizeMapping[cellSize];
|
|
472
|
-
const customStyle =
|
|
473
|
-
width: width || spanWidth ||
|
|
474
|
-
|
|
365
|
+
const customStyle = {
|
|
366
|
+
width: width || spanWidth || sizeStyle?.width,
|
|
367
|
+
...height !== void 0 && { height }
|
|
368
|
+
};
|
|
475
369
|
return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.td, customStyle, style] }, /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, null, children));
|
|
476
370
|
};
|
|
477
371
|
|
|
478
|
-
// src/components/
|
|
372
|
+
// src/components/core/Grid.tsx
|
|
479
373
|
var import_react6 = __toESM(require("react"), 1);
|
|
480
374
|
var import_renderer6 = require("@react-pdf/renderer");
|
|
481
375
|
var styles6 = import_renderer6.StyleSheet.create({
|
|
@@ -487,7 +381,6 @@ var styles6 = import_renderer6.StyleSheet.create({
|
|
|
487
381
|
flexDirection: "row",
|
|
488
382
|
flexWrap: "wrap",
|
|
489
383
|
marginHorizontal: -5
|
|
490
|
-
// Negative margin to offset column padding
|
|
491
384
|
},
|
|
492
385
|
col: {
|
|
493
386
|
paddingHorizontal: 5
|
|
@@ -548,7 +441,7 @@ var Col12 = ({ children, style }) => {
|
|
|
548
441
|
return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col12, style] }, children);
|
|
549
442
|
};
|
|
550
443
|
|
|
551
|
-
// src/components/
|
|
444
|
+
// src/components/core/PageElements.tsx
|
|
552
445
|
var import_react7 = __toESM(require("react"), 1);
|
|
553
446
|
var import_renderer7 = require("@react-pdf/renderer");
|
|
554
447
|
var styles7 = import_renderer7.StyleSheet.create({
|
|
@@ -580,78 +473,251 @@ var Footer = ({ children, style, fixed = false }) => {
|
|
|
580
473
|
return /* @__PURE__ */ import_react7.default.createElement(import_renderer7.View, { style: [styles7.footer, style], fixed }, typeof children === "string" ? /* @__PURE__ */ import_react7.default.createElement(import_renderer7.Text, null, children) : children);
|
|
581
474
|
};
|
|
582
475
|
|
|
583
|
-
// src/components/
|
|
476
|
+
// src/components/core/QR.tsx
|
|
584
477
|
var import_react8 = __toESM(require("react"), 1);
|
|
585
|
-
var import_react9 = require("react");
|
|
586
478
|
var import_renderer8 = require("@react-pdf/renderer");
|
|
479
|
+
var import_react9 = require("react");
|
|
480
|
+
|
|
481
|
+
// src/components/core/QRGenerator.tsx
|
|
587
482
|
var import_qrcode = __toESM(require("qrcode"), 1);
|
|
483
|
+
var generateQRAsBase64 = async ({
|
|
484
|
+
value,
|
|
485
|
+
size = 150,
|
|
486
|
+
colorDark = "#000000",
|
|
487
|
+
colorLight = "#ffffff",
|
|
488
|
+
margin = 0,
|
|
489
|
+
errorCorrectionLevel = "M"
|
|
490
|
+
}) => {
|
|
491
|
+
try {
|
|
492
|
+
const options = {
|
|
493
|
+
errorCorrectionLevel,
|
|
494
|
+
type: "image/png",
|
|
495
|
+
quality: 0.92,
|
|
496
|
+
margin,
|
|
497
|
+
color: {
|
|
498
|
+
dark: colorDark,
|
|
499
|
+
light: colorLight
|
|
500
|
+
},
|
|
501
|
+
width: size
|
|
502
|
+
};
|
|
503
|
+
const qrDataUrl = import_qrcode.default.toDataURL(value, options);
|
|
504
|
+
return qrDataUrl;
|
|
505
|
+
} catch (error) {
|
|
506
|
+
console.error("Error generando QR:", error);
|
|
507
|
+
return "";
|
|
508
|
+
}
|
|
509
|
+
};
|
|
510
|
+
var addLogoToQR = async (qrDataUrl, logoUrl, logoWidth, logoHeight) => {
|
|
511
|
+
return new Promise((resolve) => {
|
|
512
|
+
if (!qrDataUrl || !logoUrl) {
|
|
513
|
+
resolve(qrDataUrl);
|
|
514
|
+
return;
|
|
515
|
+
}
|
|
516
|
+
try {
|
|
517
|
+
const canvas = document.createElement("canvas");
|
|
518
|
+
const ctx = canvas.getContext("2d");
|
|
519
|
+
if (!ctx) {
|
|
520
|
+
resolve(qrDataUrl);
|
|
521
|
+
return;
|
|
522
|
+
}
|
|
523
|
+
const qrImage = new Image();
|
|
524
|
+
qrImage.crossOrigin = "anonymous";
|
|
525
|
+
qrImage.onload = () => {
|
|
526
|
+
canvas.width = qrImage.width;
|
|
527
|
+
canvas.height = qrImage.height;
|
|
528
|
+
ctx.drawImage(qrImage, 0, 0, canvas.width, canvas.height);
|
|
529
|
+
const logoImage = new Image();
|
|
530
|
+
logoImage.crossOrigin = "anonymous";
|
|
531
|
+
logoImage.onload = () => {
|
|
532
|
+
const x = (canvas.width - logoWidth) / 2;
|
|
533
|
+
const y = (canvas.height - logoHeight) / 2;
|
|
534
|
+
ctx.fillStyle = "#FFFFFF";
|
|
535
|
+
ctx.fillRect(x - 5, y - 5, logoWidth + 10, logoHeight + 10);
|
|
536
|
+
ctx.drawImage(logoImage, x, y, logoWidth, logoHeight);
|
|
537
|
+
const finalQrDataUrl = canvas.toDataURL("image/png");
|
|
538
|
+
resolve(finalQrDataUrl);
|
|
539
|
+
};
|
|
540
|
+
logoImage.onerror = () => {
|
|
541
|
+
console.error("Error cargando el logo");
|
|
542
|
+
resolve(qrDataUrl);
|
|
543
|
+
};
|
|
544
|
+
logoImage.src = logoUrl;
|
|
545
|
+
};
|
|
546
|
+
qrImage.onerror = () => {
|
|
547
|
+
console.error("Error cargando el QR");
|
|
548
|
+
resolve("");
|
|
549
|
+
};
|
|
550
|
+
qrImage.src = qrDataUrl;
|
|
551
|
+
} catch (error) {
|
|
552
|
+
console.error("Error procesando el QR con logo:", error);
|
|
553
|
+
resolve(qrDataUrl);
|
|
554
|
+
}
|
|
555
|
+
});
|
|
556
|
+
};
|
|
557
|
+
|
|
558
|
+
// src/components/core/QR.tsx
|
|
588
559
|
var styles8 = import_renderer8.StyleSheet.create({
|
|
589
560
|
qrContainer: {
|
|
590
|
-
|
|
561
|
+
display: "flex",
|
|
591
562
|
alignItems: "center",
|
|
592
|
-
justifyContent: "center"
|
|
593
|
-
|
|
594
|
-
logo: {
|
|
595
|
-
position: "absolute",
|
|
596
|
-
zIndex: 2
|
|
597
|
-
},
|
|
598
|
-
logoBackground: {
|
|
599
|
-
position: "absolute",
|
|
600
|
-
zIndex: 1
|
|
563
|
+
justifyContent: "center",
|
|
564
|
+
margin: 10
|
|
601
565
|
}
|
|
602
566
|
});
|
|
603
|
-
var
|
|
567
|
+
var errorLevelMap = {
|
|
568
|
+
0: "L",
|
|
569
|
+
1: "M",
|
|
570
|
+
2: "Q",
|
|
571
|
+
3: "H"
|
|
572
|
+
};
|
|
573
|
+
var QR = ({
|
|
604
574
|
value,
|
|
605
575
|
size = 150,
|
|
606
|
-
color = "#000000",
|
|
607
|
-
backgroundColor = "#ffffff",
|
|
608
|
-
errorCorrectionLevel = "M",
|
|
609
576
|
style,
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
577
|
+
colorDark = "#000000",
|
|
578
|
+
colorLight = "#ffffff",
|
|
579
|
+
margin = 0,
|
|
580
|
+
logo = "",
|
|
581
|
+
logoWidth = 30,
|
|
582
|
+
logoHeight = 30,
|
|
583
|
+
errorCorrectionLevel = "M"
|
|
615
584
|
}) => {
|
|
616
|
-
const [
|
|
585
|
+
const [qrDataUrl, setQrDataUrl] = (0, import_react9.useState)("");
|
|
617
586
|
(0, import_react9.useEffect)(() => {
|
|
618
|
-
const
|
|
587
|
+
const generateQR = async () => {
|
|
619
588
|
try {
|
|
620
|
-
const
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
589
|
+
const baseQrDataUrl = await generateQRAsBase64({
|
|
590
|
+
value,
|
|
591
|
+
size,
|
|
592
|
+
colorDark,
|
|
593
|
+
colorLight,
|
|
594
|
+
margin,
|
|
595
|
+
errorCorrectionLevel: typeof errorCorrectionLevel === "number" ? errorLevelMap[errorCorrectionLevel] || "M" : errorCorrectionLevel
|
|
596
|
+
});
|
|
597
|
+
if (logo && logoWidth && logoHeight) {
|
|
598
|
+
const qrWithLogo = await addLogoToQR(baseQrDataUrl, logo, logoWidth, logoHeight);
|
|
599
|
+
setQrDataUrl(qrWithLogo);
|
|
600
|
+
} else {
|
|
601
|
+
setQrDataUrl(baseQrDataUrl);
|
|
602
|
+
}
|
|
631
603
|
} catch (error) {
|
|
632
|
-
console.error("Error
|
|
604
|
+
console.error("Error generando QR:", error);
|
|
605
|
+
const fallbackUrl2 = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(
|
|
606
|
+
value
|
|
607
|
+
)}&size=${size}x${size}&color=${encodeURIComponent(colorDark.replace("#", ""))}&bgcolor=${encodeURIComponent(
|
|
608
|
+
colorLight.replace("#", "")
|
|
609
|
+
)}`;
|
|
610
|
+
setQrDataUrl(fallbackUrl2);
|
|
633
611
|
}
|
|
634
612
|
};
|
|
635
|
-
|
|
636
|
-
}, [value, size,
|
|
637
|
-
const
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
}
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
613
|
+
generateQR();
|
|
614
|
+
}, [value, size, colorDark, colorLight, margin, logo, logoWidth, logoHeight, errorCorrectionLevel]);
|
|
615
|
+
const fallbackUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(
|
|
616
|
+
value
|
|
617
|
+
)}&size=${size}x${size}`;
|
|
618
|
+
return /* @__PURE__ */ import_react8.default.createElement(import_renderer8.View, { style: [styles8.qrContainer, style] }, /* @__PURE__ */ import_react8.default.createElement(import_renderer8.Image, { src: qrDataUrl || fallbackUrl, style: { width: size, height: size } }));
|
|
619
|
+
};
|
|
620
|
+
var QR_default = QR;
|
|
621
|
+
|
|
622
|
+
// src/components/core/Lista.tsx
|
|
623
|
+
var import_react10 = __toESM(require("react"), 1);
|
|
624
|
+
var import_renderer9 = require("@react-pdf/renderer");
|
|
625
|
+
var styles9 = import_renderer9.StyleSheet.create({
|
|
626
|
+
ul: {
|
|
627
|
+
marginBottom: 10,
|
|
628
|
+
paddingLeft: 15
|
|
629
|
+
},
|
|
630
|
+
ol: {
|
|
631
|
+
marginBottom: 10,
|
|
632
|
+
paddingLeft: 15
|
|
633
|
+
},
|
|
634
|
+
li: {
|
|
635
|
+
marginBottom: 5,
|
|
636
|
+
flexDirection: "row"
|
|
637
|
+
},
|
|
638
|
+
bulletPoint: {
|
|
639
|
+
width: 15,
|
|
640
|
+
marginRight: 5,
|
|
641
|
+
fontSize: 12
|
|
642
|
+
},
|
|
643
|
+
itemContent: {
|
|
644
|
+
flex: 1
|
|
645
|
+
}
|
|
646
|
+
});
|
|
647
|
+
var getBulletPoint = (type = "disc") => {
|
|
648
|
+
switch (type) {
|
|
649
|
+
case "circle":
|
|
650
|
+
return "\u25CB";
|
|
651
|
+
case "square":
|
|
652
|
+
return "\u25A0";
|
|
653
|
+
case "disc":
|
|
654
|
+
default:
|
|
655
|
+
return "\u2022";
|
|
656
|
+
}
|
|
657
|
+
};
|
|
658
|
+
var getOrderedMarker = (index, type = "decimal", start = 1) => {
|
|
659
|
+
const actualIndex = start + index - 1;
|
|
660
|
+
switch (type) {
|
|
661
|
+
case "lower-alpha":
|
|
662
|
+
return String.fromCharCode(97 + actualIndex % 26) + ".";
|
|
663
|
+
case "upper-alpha":
|
|
664
|
+
return String.fromCharCode(65 + actualIndex % 26) + ".";
|
|
665
|
+
case "lower-roman":
|
|
666
|
+
return toRoman(actualIndex).toLowerCase() + ".";
|
|
667
|
+
case "upper-roman":
|
|
668
|
+
return toRoman(actualIndex) + ".";
|
|
669
|
+
case "decimal":
|
|
670
|
+
default:
|
|
671
|
+
return actualIndex + ".";
|
|
672
|
+
}
|
|
673
|
+
};
|
|
674
|
+
var toRoman = (num) => {
|
|
675
|
+
if (num <= 0 || num > 3999) return String(num);
|
|
676
|
+
const romanNumerals = [
|
|
677
|
+
["", "I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX"],
|
|
678
|
+
["", "X", "XX", "XXX", "XL", "L", "LX", "LXX", "LXXX", "XC"],
|
|
679
|
+
["", "C", "CC", "CCC", "CD", "D", "DC", "DCC", "DCCC", "CM"],
|
|
680
|
+
["", "M", "MM", "MMM"]
|
|
681
|
+
];
|
|
682
|
+
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];
|
|
683
|
+
};
|
|
684
|
+
var UL = ({ children, style, type = "disc" }) => {
|
|
685
|
+
const childrenWithBullets = import_react10.default.Children.map(children, (child, index) => {
|
|
686
|
+
if (import_react10.default.isValidElement(child)) {
|
|
687
|
+
return import_react10.default.cloneElement(child, {
|
|
688
|
+
bulletType: type,
|
|
689
|
+
isOrdered: false,
|
|
690
|
+
index: index + 1
|
|
691
|
+
});
|
|
692
|
+
}
|
|
693
|
+
return child;
|
|
647
694
|
});
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
695
|
+
return /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: [styles9.ul, style] }, childrenWithBullets);
|
|
696
|
+
};
|
|
697
|
+
var OL = ({ children, style, type = "decimal", start = 1 }) => {
|
|
698
|
+
const childrenWithNumbers = import_react10.default.Children.map(children, (child, index) => {
|
|
699
|
+
if (import_react10.default.isValidElement(child)) {
|
|
700
|
+
return import_react10.default.cloneElement(child, {
|
|
701
|
+
bulletType: type,
|
|
702
|
+
isOrdered: true,
|
|
703
|
+
index: index + 1,
|
|
704
|
+
start
|
|
705
|
+
});
|
|
706
|
+
}
|
|
707
|
+
return child;
|
|
651
708
|
});
|
|
652
|
-
return /* @__PURE__ */
|
|
709
|
+
return /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: [styles9.ol, style] }, childrenWithNumbers);
|
|
710
|
+
};
|
|
711
|
+
var LI = ({ children, style, bulletType = "disc", isOrdered = false, index = 1, start = 1, value }) => {
|
|
712
|
+
let marker;
|
|
713
|
+
if (isOrdered) {
|
|
714
|
+
const actualIndex = value !== void 0 ? Number(value) : index;
|
|
715
|
+
marker = getOrderedMarker(actualIndex, bulletType, start);
|
|
716
|
+
} else {
|
|
717
|
+
marker = getBulletPoint(bulletType);
|
|
718
|
+
}
|
|
719
|
+
return /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: [styles9.li, style] }, /* @__PURE__ */ import_react10.default.createElement(import_renderer9.Text, { style: styles9.bulletPoint }, marker), /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: styles9.itemContent }, typeof children === "string" ? /* @__PURE__ */ import_react10.default.createElement(import_renderer9.Text, null, children) : children));
|
|
653
720
|
};
|
|
654
|
-
var QRCode_default = QRCode;
|
|
655
721
|
// Annotate the CommonJS export names for ESM import in node:
|
|
656
722
|
0 && (module.exports = {
|
|
657
723
|
A,
|
|
@@ -681,11 +747,13 @@ var QRCode_default = QRCode;
|
|
|
681
747
|
H6,
|
|
682
748
|
Header,
|
|
683
749
|
Img,
|
|
750
|
+
LI,
|
|
684
751
|
LayoutPDF,
|
|
685
752
|
Left,
|
|
686
753
|
Mark,
|
|
754
|
+
OL,
|
|
687
755
|
P,
|
|
688
|
-
|
|
756
|
+
QR,
|
|
689
757
|
Right,
|
|
690
758
|
Row,
|
|
691
759
|
Small,
|
|
@@ -697,5 +765,6 @@ var QRCode_default = QRCode;
|
|
|
697
765
|
Th,
|
|
698
766
|
Thead,
|
|
699
767
|
Tr,
|
|
700
|
-
U
|
|
768
|
+
U,
|
|
769
|
+
UL
|
|
701
770
|
});
|
package/dist/index.d.cts
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 };
|