@lglab/react-qr-code 1.2.0 → 1.2.1
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 +46 -0
- package/dist/index.es.js +273 -242
- package/package.json +22 -3
package/README.md
CHANGED
|
@@ -1,6 +1,52 @@
|
|
|
1
|
+

|
|
2
|
+
|
|
1
3
|
# @lglab/react-qr-code
|
|
2
4
|
|
|
3
5
|
A highly customizable and lightweight QR code generator for React applications.
|
|
4
6
|
|
|
5
7
|
🚀 **Live Demo:** [reactqrcode.com/demo](https://reactqrcode.com/demo)
|
|
6
8
|
📖 **Documentation:** [reactqrcode.com](https://reactqrcode.com/)
|
|
9
|
+
|
|
10
|
+
## Quick Features
|
|
11
|
+
|
|
12
|
+
- **Highly Customizable** - Style the finder patterns, modules, and colors exactly how you want.
|
|
13
|
+
- **Performance Optimized** - Generates QR codes efficiently without sacrificing quality.
|
|
14
|
+
- **SVG-Based Rendering** - Crisp and scalable output for web and print
|
|
15
|
+
- **Developer-Friendly** - Style the finder patterns, modules, and colors exactly how you want.
|
|
16
|
+
- **Highly Customizable** - Built with TypeScript, easy to use, and well-documented
|
|
17
|
+
|
|
18
|
+
## Install
|
|
19
|
+
|
|
20
|
+
```
|
|
21
|
+
pnpm add @lglab/react-qr-code
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
or
|
|
25
|
+
|
|
26
|
+
```
|
|
27
|
+
npm i @lglab/react-qr-code
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
or
|
|
31
|
+
|
|
32
|
+
```
|
|
33
|
+
yarn add @lglab/react-qr-code
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
or
|
|
37
|
+
|
|
38
|
+
```
|
|
39
|
+
bun add @lglab/react-qr-code
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## Quick Start
|
|
43
|
+
|
|
44
|
+
```
|
|
45
|
+
import { ReactQRCode } from '@lglab/react-qr-code'
|
|
46
|
+
|
|
47
|
+
const Page = () => {
|
|
48
|
+
return (
|
|
49
|
+
<ReactQRCode value='https://reactqrcode.com' />
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
```
|
package/dist/index.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useMemo as L, useCallback as
|
|
1
|
+
import { jsx as C, jsxs as V, Fragment as nt } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo as L, useCallback as rt, useRef as st, useImperativeHandle as it } from "react";
|
|
3
3
|
/**
|
|
4
4
|
* @license QR Code generator library (TypeScript)
|
|
5
5
|
* Copyright (c) Project Nayuki.
|
|
@@ -69,9 +69,9 @@ var O;
|
|
|
69
69
|
throw new RangeError("Invalid value");
|
|
70
70
|
let f, p;
|
|
71
71
|
for (f = n; ; f++) {
|
|
72
|
-
const R = d.getNumDataCodewords(f, o) * 8,
|
|
73
|
-
if (
|
|
74
|
-
p =
|
|
72
|
+
const R = d.getNumDataCodewords(f, o) * 8, w = c.getTotalBits(e, f);
|
|
73
|
+
if (w <= R) {
|
|
74
|
+
p = w;
|
|
75
75
|
break;
|
|
76
76
|
}
|
|
77
77
|
if (f >= i)
|
|
@@ -81,19 +81,19 @@ var O;
|
|
|
81
81
|
$ && p <= d.getNumDataCodewords(f, R) * 8 && (o = R);
|
|
82
82
|
let M = [];
|
|
83
83
|
for (const R of e) {
|
|
84
|
-
|
|
85
|
-
for (const
|
|
86
|
-
M.push(
|
|
84
|
+
l(R.mode.modeBits, 4, M), l(R.numChars, R.mode.numCharCountBits(f), M);
|
|
85
|
+
for (const w of R.getData())
|
|
86
|
+
M.push(w);
|
|
87
87
|
}
|
|
88
88
|
t(M.length == p);
|
|
89
89
|
const E = d.getNumDataCodewords(f, o) * 8;
|
|
90
|
-
t(M.length <= E),
|
|
90
|
+
t(M.length <= E), l(0, Math.min(4, E - M.length), M), l(0, (8 - M.length % 8) % 8, M), t(M.length % 8 == 0);
|
|
91
91
|
for (let R = 236; M.length < E; R ^= 253)
|
|
92
|
-
|
|
92
|
+
l(R, 8, M);
|
|
93
93
|
let m = [];
|
|
94
94
|
for (; m.length * 8 < M.length; )
|
|
95
95
|
m.push(0);
|
|
96
|
-
return M.forEach((R,
|
|
96
|
+
return M.forEach((R, w) => m[w >>> 3] |= R << 7 - (w & 7)), new d(f, o, m, h);
|
|
97
97
|
}
|
|
98
98
|
/*-- Accessor methods --*/
|
|
99
99
|
// Returns the color of the module (pixel) at the given coordinates, which is false
|
|
@@ -184,16 +184,16 @@ var O;
|
|
|
184
184
|
const i = d.NUM_ERROR_CORRECTION_BLOCKS[n.ordinal][o], h = d.ECC_CODEWORDS_PER_BLOCK[n.ordinal][o], $ = Math.floor(d.getNumRawDataModules(o) / 8), f = i - $ % i, p = Math.floor($ / i);
|
|
185
185
|
let M = [];
|
|
186
186
|
const E = d.reedSolomonComputeDivisor(h);
|
|
187
|
-
for (let R = 0,
|
|
188
|
-
let
|
|
189
|
-
|
|
190
|
-
const
|
|
191
|
-
R < f &&
|
|
187
|
+
for (let R = 0, w = 0; R < i; R++) {
|
|
188
|
+
let A = e.slice(w, w + p - h + (R < f ? 0 : 1));
|
|
189
|
+
w += A.length;
|
|
190
|
+
const N = d.reedSolomonComputeRemainder(A, E);
|
|
191
|
+
R < f && A.push(0), M.push(A.concat(N));
|
|
192
192
|
}
|
|
193
193
|
let m = [];
|
|
194
194
|
for (let R = 0; R < M[0].length; R++)
|
|
195
|
-
M.forEach((
|
|
196
|
-
(R != p - h ||
|
|
195
|
+
M.forEach((w, A) => {
|
|
196
|
+
(R != p - h || A >= f) && m.push(w[R]);
|
|
197
197
|
});
|
|
198
198
|
return t(m.length == $), m;
|
|
199
199
|
}
|
|
@@ -394,7 +394,7 @@ var O;
|
|
|
394
394
|
];
|
|
395
395
|
let s = d;
|
|
396
396
|
r.QrCode = s;
|
|
397
|
-
function
|
|
397
|
+
function l(g, e, o) {
|
|
398
398
|
if (e < 0 || e > 31 || g >>> e)
|
|
399
399
|
throw new RangeError("Value out of range");
|
|
400
400
|
for (let n = e - 1; n >= 0; n--)
|
|
@@ -424,7 +424,7 @@ var O;
|
|
|
424
424
|
static makeBytes(e) {
|
|
425
425
|
let o = [];
|
|
426
426
|
for (const n of e)
|
|
427
|
-
|
|
427
|
+
l(n, 8, o);
|
|
428
428
|
return new u(u.Mode.BYTE, e.length, o);
|
|
429
429
|
}
|
|
430
430
|
// Returns a segment representing the given string of decimal digits encoded in numeric mode.
|
|
@@ -434,7 +434,7 @@ var O;
|
|
|
434
434
|
let o = [];
|
|
435
435
|
for (let n = 0; n < e.length; ) {
|
|
436
436
|
const i = Math.min(e.length - n, 3);
|
|
437
|
-
|
|
437
|
+
l(parseInt(e.substring(n, n + i), 10), i * 3 + 1, o), n += i;
|
|
438
438
|
}
|
|
439
439
|
return new u(u.Mode.NUMERIC, e.length, o);
|
|
440
440
|
}
|
|
@@ -447,9 +447,9 @@ var O;
|
|
|
447
447
|
let o = [], n;
|
|
448
448
|
for (n = 0; n + 2 <= e.length; n += 2) {
|
|
449
449
|
let i = u.ALPHANUMERIC_CHARSET.indexOf(e.charAt(n)) * 45;
|
|
450
|
-
i += u.ALPHANUMERIC_CHARSET.indexOf(e.charAt(n + 1)),
|
|
450
|
+
i += u.ALPHANUMERIC_CHARSET.indexOf(e.charAt(n + 1)), l(i, 11, o);
|
|
451
451
|
}
|
|
452
|
-
return n < e.length &&
|
|
452
|
+
return n < e.length && l(u.ALPHANUMERIC_CHARSET.indexOf(e.charAt(n)), 6, o), new u(u.Mode.ALPHANUMERIC, e.length, o);
|
|
453
453
|
}
|
|
454
454
|
// Returns a new mutable list of zero or more segments to represent the given Unicode text string.
|
|
455
455
|
// The result may use various segment modes and switch modes to optimize the length of the bit stream.
|
|
@@ -463,11 +463,11 @@ var O;
|
|
|
463
463
|
if (e < 0)
|
|
464
464
|
throw new RangeError("ECI assignment value out of range");
|
|
465
465
|
if (e < 128)
|
|
466
|
-
|
|
466
|
+
l(e, 8, o);
|
|
467
467
|
else if (e < 16384)
|
|
468
|
-
|
|
468
|
+
l(2, 2, o), l(e, 14, o);
|
|
469
469
|
else if (e < 1e6)
|
|
470
|
-
|
|
470
|
+
l(6, 3, o), l(e, 21, o);
|
|
471
471
|
else
|
|
472
472
|
throw new RangeError("ECI assignment value out of range");
|
|
473
473
|
return new u(u.Mode.ECI, 0, o);
|
|
@@ -510,48 +510,48 @@ var O;
|
|
|
510
510
|
}
|
|
511
511
|
};
|
|
512
512
|
u.NUMERIC_REGEX = /^[0-9]*$/, u.ALPHANUMERIC_REGEX = /^[A-Z0-9 $%*+.\/:-]*$/, u.ALPHANUMERIC_CHARSET = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:";
|
|
513
|
-
let
|
|
514
|
-
r.QrSegment =
|
|
513
|
+
let c = u;
|
|
514
|
+
r.QrSegment = c;
|
|
515
515
|
})(O || (O = {}));
|
|
516
516
|
((r) => {
|
|
517
517
|
((s) => {
|
|
518
518
|
const a = class a {
|
|
519
519
|
// The QR Code can tolerate about 30% erroneous codewords
|
|
520
520
|
/*-- Constructor and fields --*/
|
|
521
|
-
constructor(
|
|
522
|
-
this.ordinal =
|
|
521
|
+
constructor(c, d) {
|
|
522
|
+
this.ordinal = c, this.formatBits = d;
|
|
523
523
|
}
|
|
524
524
|
};
|
|
525
525
|
a.LOW = new a(0, 1), a.MEDIUM = new a(1, 0), a.QUARTILE = new a(2, 3), a.HIGH = new a(3, 2);
|
|
526
|
-
let
|
|
527
|
-
s.Ecc =
|
|
526
|
+
let l = a;
|
|
527
|
+
s.Ecc = l;
|
|
528
528
|
})(r.QrCode || (r.QrCode = {}));
|
|
529
529
|
})(O || (O = {}));
|
|
530
530
|
((r) => {
|
|
531
531
|
((s) => {
|
|
532
532
|
const a = class a {
|
|
533
533
|
/*-- Constructor and fields --*/
|
|
534
|
-
constructor(
|
|
535
|
-
this.modeBits =
|
|
534
|
+
constructor(c, d) {
|
|
535
|
+
this.modeBits = c, this.numBitsCharCount = d;
|
|
536
536
|
}
|
|
537
537
|
/*-- Method --*/
|
|
538
538
|
// (Package-private) Returns the bit width of the character count field for a segment in
|
|
539
539
|
// this mode in a QR Code at the given version number. The result is in the range [0, 16].
|
|
540
|
-
numCharCountBits(
|
|
541
|
-
return this.numBitsCharCount[Math.floor((
|
|
540
|
+
numCharCountBits(c) {
|
|
541
|
+
return this.numBitsCharCount[Math.floor((c + 7) / 17)];
|
|
542
542
|
}
|
|
543
543
|
};
|
|
544
544
|
a.NUMERIC = new a(1, [10, 12, 14]), a.ALPHANUMERIC = new a(2, [9, 11, 13]), a.BYTE = new a(4, [8, 16, 16]), a.KANJI = new a(8, [8, 10, 12]), a.ECI = new a(7, [0, 0, 0]);
|
|
545
|
-
let
|
|
546
|
-
s.Mode =
|
|
545
|
+
let l = a;
|
|
546
|
+
s.Mode = l;
|
|
547
547
|
})(r.QrSegment || (r.QrSegment = {}));
|
|
548
548
|
})(O || (O = {}));
|
|
549
|
-
const
|
|
550
|
-
L:
|
|
551
|
-
M:
|
|
552
|
-
Q:
|
|
553
|
-
H:
|
|
554
|
-
},
|
|
549
|
+
const y = O, at = {
|
|
550
|
+
L: y.QrCode.Ecc.LOW,
|
|
551
|
+
M: y.QrCode.Ecc.MEDIUM,
|
|
552
|
+
Q: y.QrCode.Ecc.QUARTILE,
|
|
553
|
+
H: y.QrCode.Ecc.HIGH
|
|
554
|
+
}, lt = 128, ct = "M", ht = 1, ut = 4, W = 5, x = "#000000", dt = "square", ft = "square", $t = "square", pt = "react-qr-code", U = "react-qr-code-gradient", F = "react-qr-code-bg-gradient", mt = 0.1, I = 7, T = 3, B = [
|
|
555
555
|
[1, 1, 1, 1, 1, 1, 1],
|
|
556
556
|
[1, 0, 0, 0, 0, 0, 1],
|
|
557
557
|
[1, 0, 0, 0, 0, 0, 1],
|
|
@@ -559,7 +559,7 @@ const v = O, rt = {
|
|
|
559
559
|
[1, 0, 0, 0, 0, 0, 1],
|
|
560
560
|
[1, 0, 0, 0, 0, 0, 1],
|
|
561
561
|
[1, 1, 1, 1, 1, 1, 1]
|
|
562
|
-
],
|
|
562
|
+
], J = {
|
|
563
563
|
"inpoint-sm": [0, 90, -90],
|
|
564
564
|
inpoint: [0, 90, -90],
|
|
565
565
|
"inpoint-lg": [0, 90, -90],
|
|
@@ -582,7 +582,7 @@ const v = O, rt = {
|
|
|
582
582
|
"outpoint-sm": 3,
|
|
583
583
|
outpoint: 4,
|
|
584
584
|
"outpoint-lg": 5
|
|
585
|
-
},
|
|
585
|
+
}, Y = {
|
|
586
586
|
square: 0,
|
|
587
587
|
diamond: 0,
|
|
588
588
|
circle: 3,
|
|
@@ -598,7 +598,7 @@ const v = O, rt = {
|
|
|
598
598
|
"outpoint-sm": 1.5,
|
|
599
599
|
outpoint: 2,
|
|
600
600
|
"outpoint-lg": 2.3
|
|
601
|
-
},
|
|
601
|
+
}, z = [
|
|
602
602
|
[0, 0, 0, 0, 0, 0, 0],
|
|
603
603
|
[0, 0, 0, 0, 0, 0, 0],
|
|
604
604
|
[0, 0, 1, 1, 1, 0, 0],
|
|
@@ -606,27 +606,27 @@ const v = O, rt = {
|
|
|
606
606
|
[0, 0, 1, 1, 1, 0, 0],
|
|
607
607
|
[0, 0, 0, 0, 0, 0, 0],
|
|
608
608
|
[0, 0, 0, 0, 0, 0, 0]
|
|
609
|
-
],
|
|
610
|
-
function
|
|
611
|
-
return r.toFixed(7).replace(
|
|
609
|
+
], Et = /\.?0+$/;
|
|
610
|
+
function Mt(r) {
|
|
611
|
+
return r.toFixed(7).replace(Et, "");
|
|
612
612
|
}
|
|
613
|
-
const
|
|
614
|
-
const s = r % 360 * (Math.PI / 180),
|
|
613
|
+
const tt = (r) => {
|
|
614
|
+
const s = r % 360 * (Math.PI / 180), l = Math.max(0, Math.min(100, 50 - 50 * Math.cos(s))), a = Math.max(0, Math.min(100, 50 - 50 * Math.sin(s))), t = Math.max(0, Math.min(100, 50 + 50 * Math.cos(s))), c = Math.max(0, Math.min(100, 50 + 50 * Math.sin(s)));
|
|
615
615
|
return {
|
|
616
|
-
x1: `${
|
|
616
|
+
x1: `${l}%`,
|
|
617
617
|
y1: `${a}%`,
|
|
618
618
|
x2: `${t}%`,
|
|
619
|
-
y2: `${
|
|
619
|
+
y2: `${c}%`
|
|
620
620
|
};
|
|
621
|
-
},
|
|
622
|
-
const t =
|
|
621
|
+
}, et = (r, s, l, a) => {
|
|
622
|
+
const t = l / 2, c = t / 2, d = Math.PI / a;
|
|
623
623
|
let u = "";
|
|
624
624
|
for (let g = 0; g < 2 * a; g++) {
|
|
625
|
-
const e = g * d - Math.PI / 2, o = g % 2 === 0 ? t :
|
|
625
|
+
const e = g * d - Math.PI / 2, o = g % 2 === 0 ? t : c, n = r + o * Math.cos(e), i = s + o * Math.sin(e);
|
|
626
626
|
u += `${g === 0 ? "M" : "L"} ${n},${i} `;
|
|
627
627
|
}
|
|
628
628
|
return u + "Z";
|
|
629
|
-
},
|
|
629
|
+
}, ot = (r, s, l) => {
|
|
630
630
|
let a = !1, t = 0;
|
|
631
631
|
return [
|
|
632
632
|
"M",
|
|
@@ -739,205 +739,220 @@ const V = (r) => {
|
|
|
739
739
|
1,
|
|
740
740
|
0.3262506,
|
|
741
741
|
"z"
|
|
742
|
-
].map((
|
|
743
|
-
},
|
|
742
|
+
].map((c) => typeof c == "string" ? (t = 0, a = c.toUpperCase() == c, c) : (t++, c = c * l, a && (c += t % 2 == 1 ? r : s), Mt(c))).join(" ");
|
|
743
|
+
}, G = {
|
|
744
|
+
"data-testid": "background"
|
|
745
|
+
}, Rt = ({ background: r, numCells: s }) => {
|
|
744
746
|
var a, t;
|
|
745
747
|
if (!r)
|
|
746
|
-
return
|
|
748
|
+
return null;
|
|
747
749
|
if (typeof r == "string")
|
|
748
|
-
return /* @__PURE__ */
|
|
749
|
-
const
|
|
750
|
-
return /* @__PURE__ */
|
|
751
|
-
/* @__PURE__ */
|
|
750
|
+
return /* @__PURE__ */ C("path", { fill: r, d: `M0,0 h${s}v${s}H0z`, ...G });
|
|
751
|
+
const l = tt((r == null ? void 0 : r.rotation) || 0);
|
|
752
|
+
return /* @__PURE__ */ V(nt, { children: [
|
|
753
|
+
/* @__PURE__ */ C("defs", { children: r.type === "linear" ? /* @__PURE__ */ C("linearGradient", { id: F, gradientUnits: "userSpaceOnUse", ...l, children: (a = r.stops) == null ? void 0 : a.map((c, d) => /* @__PURE__ */ C("stop", { offset: c.offset, stopColor: c.color }, d)) }) : /* @__PURE__ */ C(
|
|
752
754
|
"radialGradient",
|
|
753
755
|
{
|
|
754
|
-
id:
|
|
756
|
+
id: F,
|
|
755
757
|
gradientUnits: "userSpaceOnUse",
|
|
756
758
|
cx: "50%",
|
|
757
759
|
cy: "50%",
|
|
758
760
|
r: "50%",
|
|
759
|
-
children: (t = r.stops) == null ? void 0 : t.map((
|
|
761
|
+
children: (t = r.stops) == null ? void 0 : t.map((c, d) => /* @__PURE__ */ C("stop", { offset: c.offset, stopColor: c.color }, d))
|
|
760
762
|
}
|
|
761
763
|
) }),
|
|
762
|
-
/* @__PURE__ */
|
|
764
|
+
/* @__PURE__ */ C(
|
|
765
|
+
"path",
|
|
766
|
+
{
|
|
767
|
+
fill: `url(#${F})`,
|
|
768
|
+
d: `M0,0 h${s}v${s}H0z`,
|
|
769
|
+
...G
|
|
770
|
+
}
|
|
771
|
+
)
|
|
763
772
|
] });
|
|
764
|
-
},
|
|
773
|
+
}, gt = (r) => r === "square" || r === "circle" || r === "star" || r === "heart" || r === "diamond", wt = (r, s) => r === "square-sm" ? 0.75 : s ? Math.random() * (1 - 0.75) + 0.75 : 1, b = (r, s, l) => {
|
|
765
774
|
const a = {
|
|
766
|
-
left: r === 0 ?
|
|
767
|
-
right: r ===
|
|
768
|
-
top: s === 0 ?
|
|
769
|
-
bottom: s ===
|
|
775
|
+
left: r === 0 ? !1 : l[s][r - 1],
|
|
776
|
+
right: r === l[s].length - 1 ? !1 : l[s][r + 1],
|
|
777
|
+
top: s === 0 ? !1 : l[s - 1][r],
|
|
778
|
+
bottom: s === l.length - 1 ? !1 : l[s + 1][r]
|
|
770
779
|
};
|
|
771
780
|
return {
|
|
772
781
|
...a,
|
|
773
782
|
count: Object.values(a).filter(Boolean).length
|
|
774
783
|
};
|
|
775
|
-
},
|
|
784
|
+
}, v = (r, s, l) => `M${r},${s}h${l}v${l}h-${l}Z`, D = (r, s, l) => `M${r},${s + l / 2}a${l / 2},${l / 2} 0 1,0 ${l},0a${l / 2},${l / 2} 0 1,0 -${l},0Z`, At = (r, s, l) => `M${r},${s + l / 2}l${l / 2},-${l / 2}l${l / 2},${l / 2}l-${l / 2},${l / 2}Z`, Ct = (r, s) => `M ${r} ${s}
|
|
776
785
|
v 1
|
|
777
786
|
h 1
|
|
778
787
|
v -0.5
|
|
779
|
-
a 0.5 0.5, 0, 0, 0, -0.5 -0.5`,
|
|
788
|
+
a 0.5 0.5, 0, 0, 0, -0.5 -0.5`, q = (r, s) => `M ${r + 1} ${s}
|
|
780
789
|
v 1
|
|
781
790
|
h -1
|
|
782
791
|
v -0.5
|
|
783
|
-
a 0.5 0.5, 0, 0, 1, 0.5 -0.5`,
|
|
792
|
+
a 0.5 0.5, 0, 0, 1, 0.5 -0.5`, j = (r, s) => `M ${r} ${s}
|
|
784
793
|
v 1
|
|
785
794
|
h 0.5
|
|
786
795
|
a 0.5 0.5, 0, 0, 0, 0.5 -0.5
|
|
787
796
|
v -0.5
|
|
788
|
-
h -1`,
|
|
797
|
+
h -1`, Nt = (r, s) => `M ${r + 1} ${s}
|
|
789
798
|
v 1
|
|
790
799
|
h -0.5
|
|
791
800
|
a 0.5 0.5, 0, 0, 1, -0.5 -0.5
|
|
792
801
|
v -0.5
|
|
793
|
-
h 1`,
|
|
802
|
+
h 1`, X = (r, s) => `M ${r} ${s}
|
|
794
803
|
v 1
|
|
795
804
|
h 0.5
|
|
796
|
-
a 0.5 0.5, 0, 0, 0, 0 -1`,
|
|
805
|
+
a 0.5 0.5, 0, 0, 0, 0 -1`, Q = (r, s) => `M ${r + 1} ${s}
|
|
797
806
|
v 1
|
|
798
807
|
h -0.5
|
|
799
|
-
a 0.5 0.5, 0, 0, 1, 0 -1`,
|
|
808
|
+
a 0.5 0.5, 0, 0, 1, 0 -1`, Z = (r, s) => `M ${r} ${s + 1}
|
|
800
809
|
h 1
|
|
801
810
|
v -0.5
|
|
802
811
|
a 0.5 0.5, 0, 0, 0, -1 0`, _ = (r, s) => `M ${r} ${s}
|
|
803
812
|
h 1
|
|
804
813
|
v 0.5
|
|
805
|
-
a 0.5 0.5, 0, 0, 1, -1 0`,
|
|
814
|
+
a 0.5 0.5, 0, 0, 1, -1 0`, It = (r, s, l) => `M ${r + 1} ${s}h -${l / 2}a ${l / 2.5} ${l / 2.5}, 0, 0, 0, ${-l / 2.5} ${l / 2.5}v ${l / 2}h ${l / 2}a ${l / 2.5} ${l / 2.5}, 0, 0, 0, ${l / 2.5} ${-l / 2.5}`, Pt = ({
|
|
806
815
|
x: r,
|
|
807
816
|
y: s,
|
|
808
|
-
numCells:
|
|
817
|
+
numCells: l
|
|
809
818
|
}) => {
|
|
810
|
-
var a, t,
|
|
811
|
-
return !!((a =
|
|
812
|
-
},
|
|
819
|
+
var a, t, c;
|
|
820
|
+
return !!((a = z[r]) != null && a[s] || (t = z[r - l + 7]) != null && t[s] || (c = z[r]) != null && c[s - l + 7]);
|
|
821
|
+
}, Tt = ({
|
|
813
822
|
x: r,
|
|
814
823
|
y: s,
|
|
815
|
-
radius:
|
|
824
|
+
radius: l
|
|
816
825
|
}) => {
|
|
817
|
-
const a = T -
|
|
818
|
-
return `M ${r} ${s + t}v ${a}a ${t} ${t}, 0, 0, 0, ${t} ${t}h ${
|
|
819
|
-
},
|
|
826
|
+
const a = T - l, t = l / 2, c = T - t;
|
|
827
|
+
return `M ${r} ${s + t}v ${a}a ${t} ${t}, 0, 0, 0, ${t} ${t}h ${c}v ${-c}a ${t} ${t}, 0, 0, 0, ${-t} ${-t}h ${-a}H ${r}z`;
|
|
828
|
+
}, Lt = ({
|
|
820
829
|
x: r,
|
|
821
830
|
y: s,
|
|
822
|
-
radius:
|
|
831
|
+
radius: l
|
|
823
832
|
}) => {
|
|
824
|
-
const a = T -
|
|
825
|
-
return `M ${r} ${s + t}v ${a}a ${t} ${t}, 0, 0, 0, ${t} ${t}h ${
|
|
826
|
-
},
|
|
833
|
+
const a = T - l, t = l / 2, c = T - t;
|
|
834
|
+
return `M ${r} ${s + t}v ${a}a ${t} ${t}, 0, 0, 0, ${t} ${t}h ${c}v ${-c}a ${t} ${t}, 0, 0, 0, ${-t} ${-t}h ${-a}a ${t} ${t}, 0, 0, 0, ${-t} ${t}`;
|
|
835
|
+
}, Ot = ({
|
|
827
836
|
x: r,
|
|
828
837
|
y: s,
|
|
829
|
-
numCells:
|
|
838
|
+
numCells: l
|
|
830
839
|
}) => {
|
|
831
|
-
var a, t,
|
|
832
|
-
return !!((a =
|
|
833
|
-
},
|
|
840
|
+
var a, t, c;
|
|
841
|
+
return !!((a = B[r]) != null && a[s] || (t = B[r - l + 7]) != null && t[s] || (c = B[r]) != null && c[s - l + 7]);
|
|
842
|
+
}, yt = ({
|
|
834
843
|
x: r,
|
|
835
844
|
y: s,
|
|
836
|
-
radius:
|
|
845
|
+
radius: l
|
|
837
846
|
}) => {
|
|
838
|
-
const a = I -
|
|
847
|
+
const a = I - l, t = l / 2;
|
|
839
848
|
return `M ${r} ${s + t}v ${a}a ${t} ${t}, 0, 0, 0, ${t} ${t}h ${a}a ${t} ${t}, 0, 0, 0, ${t} ${-t}v ${-a}a ${t} ${t}, 0, 0, 0, ${-t} ${-t}h ${-a}a ${t} ${t}, 0, 0, 0, ${-t} ${t}M ${r + t} ${s + 1}h ${a}a ${t - 1} ${t - 1}, 0, 0, 1, ${t - 1} ${t - 1}v ${a}a ${t - 1} ${t - 1}, 0, 0, 1, ${-(t - 1)} ${t - 1}h ${-a}a ${t - 1} ${t - 1}, 0, 0, 1, ${-(t - 1)} ${-(t - 1)}v ${-a}a ${t - 1} ${t - 1}, 0, 0, 1, ${t - 1} ${-(t - 1)}`;
|
|
840
|
-
},
|
|
849
|
+
}, vt = ({
|
|
841
850
|
x: r,
|
|
842
851
|
y: s,
|
|
843
|
-
radius:
|
|
852
|
+
radius: l
|
|
844
853
|
}) => {
|
|
845
|
-
const a = I -
|
|
846
|
-
return `M ${r} ${s + t}v ${a}a ${t} ${t}, 0, 0, 0, ${t} ${t}h ${
|
|
847
|
-
},
|
|
854
|
+
const a = I - l, t = l / 2, c = I - t;
|
|
855
|
+
return `M ${r} ${s + t}v ${a}a ${t} ${t}, 0, 0, 0, ${t} ${t}h ${c}v ${-c}a ${t} ${t}, 0, 0, 0, ${-t} ${-t}h ${-a}H ${r}zM ${r + t} ${s + 1}h ${a}a ${t - 1} ${t - 1}, 0, 0, 1, ${t - 1} ${t - 1}v ${c - 1}h ${-(c - 1)}a ${t - 1} ${t - 1}, 0, 0, 1, ${-(t - 1)} ${-(t - 1)}v ${-(c - 1)}z`;
|
|
856
|
+
}, St = ({
|
|
848
857
|
x: r,
|
|
849
858
|
y: s,
|
|
850
|
-
radius:
|
|
859
|
+
radius: l
|
|
851
860
|
}) => {
|
|
852
|
-
const a = I -
|
|
853
|
-
return `M ${r} ${s + t}v ${a}a ${t} ${t}, 0, 0, 0, ${t} ${t}h ${
|
|
854
|
-
},
|
|
855
|
-
color: (r == null ? void 0 : r.color) ||
|
|
856
|
-
style: (r == null ? void 0 : r.style) ||
|
|
861
|
+
const a = I - l, t = l / 2, c = I - t;
|
|
862
|
+
return `M ${r} ${s + t}v ${a}a ${t} ${t}, 0, 0, 0, ${t} ${t}h ${c}v ${-c}a ${t} ${t}, 0, 0, 0, ${-t} ${-t}h ${-a}a ${t} ${t}, 0, 0, 0, ${-t} ${t}M ${r + t} ${s + 1}h ${a}a ${t - 1} ${t - 1}, 0, 0, 1, ${t - 1} ${t - 1}v ${c - 1}h ${-(c - 1)}a ${t - 1} ${t - 1}, 0, 0, 1, ${-(t - 1)} ${-(t - 1)}v ${-a}a ${t - 1} ${t - 1}, 0, 0, 1, ${t - 1} ${-(t - 1)}`;
|
|
863
|
+
}, Ut = (r) => ({
|
|
864
|
+
color: (r == null ? void 0 : r.color) || x,
|
|
865
|
+
style: (r == null ? void 0 : r.style) || $t,
|
|
857
866
|
randomSize: (r == null ? void 0 : r.randomSize) || !1
|
|
858
|
-
}),
|
|
859
|
-
color: (r == null ? void 0 : r.color) ||
|
|
860
|
-
style: (r == null ? void 0 : r.style) ||
|
|
861
|
-
}),
|
|
862
|
-
color: (r == null ? void 0 : r.color) ||
|
|
863
|
-
style: (r == null ? void 0 : r.style) ||
|
|
867
|
+
}), bt = (r) => ({
|
|
868
|
+
color: (r == null ? void 0 : r.color) || x,
|
|
869
|
+
style: (r == null ? void 0 : r.style) || dt
|
|
870
|
+
}), Dt = (r) => ({
|
|
871
|
+
color: (r == null ? void 0 : r.color) || x,
|
|
872
|
+
style: (r == null ? void 0 : r.style) || ft
|
|
864
873
|
}), Ft = ({
|
|
865
874
|
modules: r,
|
|
866
875
|
margin: s,
|
|
867
|
-
settings:
|
|
876
|
+
settings: l,
|
|
868
877
|
gradient: a
|
|
869
878
|
}) => {
|
|
870
|
-
const { color: t, style:
|
|
871
|
-
() =>
|
|
872
|
-
[
|
|
873
|
-
), u = [], g = r.length, e =
|
|
879
|
+
const { color: t, style: c, randomSize: d } = L(
|
|
880
|
+
() => Ut(l),
|
|
881
|
+
[l]
|
|
882
|
+
), u = [], g = r.length, e = gt(c) && d, o = rt(
|
|
883
|
+
() => wt(c, e),
|
|
884
|
+
[c, e]
|
|
885
|
+
);
|
|
874
886
|
return r.forEach((n, i) => {
|
|
875
887
|
n.forEach((h, $) => {
|
|
876
|
-
if (
|
|
888
|
+
if (Ot({ x: $, y: i, numCells: g }) || Pt({ x: $, y: i, numCells: g }))
|
|
877
889
|
return;
|
|
878
890
|
const f = o(), p = 1 * f, M = (1 - 1 * f) / 2, E = $ + s + M, m = i + s + M;
|
|
879
891
|
if (h) {
|
|
880
|
-
if (
|
|
881
|
-
u.push(
|
|
882
|
-
else if (
|
|
883
|
-
u.push(
|
|
884
|
-
else if (
|
|
885
|
-
u.push(
|
|
886
|
-
else if (
|
|
892
|
+
if (c === "square" || c === "square-sm")
|
|
893
|
+
u.push(v(E, m, p));
|
|
894
|
+
else if (c === "circle")
|
|
895
|
+
u.push(D(E, m, p));
|
|
896
|
+
else if (c === "diamond")
|
|
897
|
+
u.push(At(E, m, p));
|
|
898
|
+
else if (c === "star")
|
|
887
899
|
u.push(
|
|
888
|
-
|
|
900
|
+
et(E + p / 2, m + p / 2, p * 1.1, W)
|
|
889
901
|
);
|
|
890
|
-
else if (
|
|
891
|
-
u.push(
|
|
892
|
-
else if (
|
|
893
|
-
const { left: R, right:
|
|
894
|
-
P === 0 ? u.push(
|
|
895
|
-
} else if (
|
|
896
|
-
const { left: R, right:
|
|
902
|
+
else if (c === "heart")
|
|
903
|
+
u.push(ot(E, m, p));
|
|
904
|
+
else if (c === "rounded") {
|
|
905
|
+
const { left: R, right: w, top: A, bottom: N, count: P } = b($, i, r);
|
|
906
|
+
P === 0 ? u.push(D(E, m, 1)) : P > 2 || R && w || A && N ? u.push(v(E, m, 1)) : P === 2 ? R && A ? u.push(j(E, m)) : A && w ? u.push(Nt(E, m)) : w && N ? u.push(q(E, m)) : u.push(Ct(E, m)) : A ? u.push(_(E, m)) : w ? u.push(Q(E, m)) : N ? u.push(Z(E, m)) : u.push(X(E, m));
|
|
907
|
+
} else if (c === "leaf") {
|
|
908
|
+
const { left: R, right: w, top: A, bottom: N, count: P } = b($, i, r);
|
|
897
909
|
if (P === 0)
|
|
898
|
-
u.push(
|
|
899
|
-
else if (!R && !
|
|
900
|
-
u.push(
|
|
910
|
+
u.push(It(E, m, p));
|
|
911
|
+
else if (!R && !A) {
|
|
912
|
+
u.push(q(E, m));
|
|
901
913
|
return;
|
|
902
|
-
} else !
|
|
903
|
-
} else if (
|
|
904
|
-
const { left: R, right:
|
|
905
|
-
P === 0 || R && !(
|
|
906
|
-
} else if (
|
|
907
|
-
const { left: R, right:
|
|
908
|
-
P === 0 ||
|
|
914
|
+
} else !w && !N ? u.push(j(E, m)) : u.push(v(E, m, 1));
|
|
915
|
+
} else if (c === "vertical-line") {
|
|
916
|
+
const { left: R, right: w, top: A, bottom: N, count: P } = b($, i, r);
|
|
917
|
+
P === 0 || R && !(A || N) || w && !(A || N) ? u.push(D(E, m, 1)) : A && N ? u.push(v(E, m, 1)) : A && !N ? u.push(_(E, m)) : N && !A && u.push(Z(E, m));
|
|
918
|
+
} else if (c === "horizontal-line") {
|
|
919
|
+
const { left: R, right: w, top: A, bottom: N, count: P } = b($, i, r);
|
|
920
|
+
P === 0 || A && !(R || w) || N && !(R || w) ? u.push(D(E, m, 1)) : R && w ? u.push(v(E, m, 1)) : R && !w ? u.push(X(E, m)) : w && !R && u.push(Q(E, m));
|
|
909
921
|
}
|
|
910
922
|
}
|
|
911
923
|
});
|
|
912
|
-
}), /* @__PURE__ */
|
|
924
|
+
}), /* @__PURE__ */ C(
|
|
913
925
|
"path",
|
|
914
926
|
{
|
|
915
|
-
fill: a ? `url(#${
|
|
927
|
+
fill: a ? `url(#${U})` : t,
|
|
916
928
|
d: u.join(""),
|
|
917
|
-
shapeRendering:
|
|
929
|
+
shapeRendering: c === "square" ? "crispEdges" : "geometricPrecision",
|
|
930
|
+
"data-testid": "data-modules"
|
|
918
931
|
}
|
|
919
932
|
);
|
|
920
|
-
},
|
|
933
|
+
}, S = {
|
|
934
|
+
"data-testid": "finder-patterns-inner"
|
|
935
|
+
}, Bt = ({
|
|
921
936
|
modules: r,
|
|
922
937
|
margin: s,
|
|
923
|
-
settings:
|
|
938
|
+
settings: l,
|
|
924
939
|
gradient: a
|
|
925
940
|
}) => {
|
|
926
|
-
const { color: t, style:
|
|
927
|
-
() =>
|
|
928
|
-
[
|
|
929
|
-
), d = a ? `url(#${
|
|
941
|
+
const { color: t, style: c } = L(
|
|
942
|
+
() => Dt(l),
|
|
943
|
+
[l]
|
|
944
|
+
), d = a ? `url(#${U})` : t, u = L(
|
|
930
945
|
() => [
|
|
931
946
|
{ x: s + 2, y: s + 2 },
|
|
932
947
|
{ x: r.length + s - I + 2, y: s + 2 },
|
|
933
948
|
{ x: s + 2, y: r.length + s - I + 2 }
|
|
934
949
|
],
|
|
935
950
|
[s, r.length]
|
|
936
|
-
), g = (e, o) => `finder-patterns-inner-${
|
|
937
|
-
if (
|
|
951
|
+
), g = (e, o) => `finder-patterns-inner-${c}-${e}-${o}`;
|
|
952
|
+
if (c === "rounded-sm" || c === "rounded" || c === "rounded-lg" || c === "circle" || c === "square")
|
|
938
953
|
return u.map((e) => {
|
|
939
954
|
const { x: o, y: n } = e;
|
|
940
|
-
return /* @__PURE__ */
|
|
955
|
+
return /* @__PURE__ */ C(
|
|
941
956
|
"rect",
|
|
942
957
|
{
|
|
943
958
|
x: o,
|
|
@@ -945,15 +960,16 @@ const V = (r) => {
|
|
|
945
960
|
width: T,
|
|
946
961
|
height: T,
|
|
947
962
|
fill: d,
|
|
948
|
-
rx:
|
|
963
|
+
rx: Y[c],
|
|
964
|
+
...S
|
|
949
965
|
},
|
|
950
966
|
g(o, n)
|
|
951
967
|
);
|
|
952
968
|
});
|
|
953
|
-
if (
|
|
969
|
+
if (c === "diamond")
|
|
954
970
|
return u.map((e) => {
|
|
955
971
|
const { x: o, y: n } = e, i = Math.sqrt(1.5), h = T / i, $ = h - h / i;
|
|
956
|
-
return /* @__PURE__ */
|
|
972
|
+
return /* @__PURE__ */ C(
|
|
957
973
|
"rect",
|
|
958
974
|
{
|
|
959
975
|
x: o + $ / 2,
|
|
@@ -965,23 +981,24 @@ const V = (r) => {
|
|
|
965
981
|
transform: "rotate(45deg)",
|
|
966
982
|
transformOrigin: "center",
|
|
967
983
|
transformBox: "fill-box"
|
|
968
|
-
}
|
|
984
|
+
},
|
|
985
|
+
...S
|
|
969
986
|
},
|
|
970
987
|
g(o, n)
|
|
971
988
|
);
|
|
972
989
|
});
|
|
973
|
-
if (
|
|
974
|
-
const e =
|
|
990
|
+
if (c === "inpoint-sm" || c === "inpoint" || c === "inpoint-lg" || c === "outpoint-sm" || c === "outpoint" || c === "outpoint-lg" || c === "leaf-sm" || c === "leaf" || c === "leaf-lg") {
|
|
991
|
+
const e = c === "leaf-sm" || c === "leaf" || c === "leaf-lg" ? Tt : Lt;
|
|
975
992
|
return u.map((o, n) => ({
|
|
976
993
|
...o,
|
|
977
|
-
rotation:
|
|
994
|
+
rotation: J[c][n]
|
|
978
995
|
})).map(({ x: o, y: n, rotation: i }) => {
|
|
979
996
|
const h = e({
|
|
980
997
|
x: o,
|
|
981
998
|
y: n,
|
|
982
|
-
radius:
|
|
999
|
+
radius: Y[c]
|
|
983
1000
|
});
|
|
984
|
-
return /* @__PURE__ */
|
|
1001
|
+
return /* @__PURE__ */ C(
|
|
985
1002
|
"path",
|
|
986
1003
|
{
|
|
987
1004
|
fill: d,
|
|
@@ -990,26 +1007,40 @@ const V = (r) => {
|
|
|
990
1007
|
transform: `rotate(${i}deg)`,
|
|
991
1008
|
transformOrigin: "center",
|
|
992
1009
|
transformBox: "fill-box"
|
|
993
|
-
}
|
|
1010
|
+
},
|
|
1011
|
+
...S
|
|
994
1012
|
},
|
|
995
1013
|
g(o, n)
|
|
996
1014
|
);
|
|
997
1015
|
});
|
|
998
1016
|
}
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1017
|
+
if (c === "heart")
|
|
1018
|
+
return u.map(({ x: e, y: o }) => /* @__PURE__ */ C(
|
|
1019
|
+
"path",
|
|
1020
|
+
{
|
|
1021
|
+
fill: d,
|
|
1022
|
+
d: ot(e, o, T),
|
|
1023
|
+
...S
|
|
1024
|
+
},
|
|
1025
|
+
g(e, o)
|
|
1026
|
+
));
|
|
1027
|
+
if (c === "star")
|
|
1028
|
+
return u.map(({ x: e, y: o }) => {
|
|
1029
|
+
const n = e + T / 2, i = o + T / 2, h = et(n, i, T * 1.2, W);
|
|
1030
|
+
return /* @__PURE__ */ C("path", { fill: d, d: h, ...S }, g(e, o));
|
|
1031
|
+
});
|
|
1032
|
+
}, K = {
|
|
1033
|
+
"data-testid": "finder-patterns-outer"
|
|
1034
|
+
}, zt = ({
|
|
1004
1035
|
modules: r,
|
|
1005
1036
|
margin: s,
|
|
1006
|
-
settings:
|
|
1037
|
+
settings: l,
|
|
1007
1038
|
gradient: a
|
|
1008
1039
|
}) => {
|
|
1009
|
-
const { style: t, color:
|
|
1010
|
-
() =>
|
|
1011
|
-
[
|
|
1012
|
-
), d = a ? `url(#${
|
|
1040
|
+
const { style: t, color: c } = L(
|
|
1041
|
+
() => bt(l),
|
|
1042
|
+
[l]
|
|
1043
|
+
), d = a ? `url(#${U})` : c, u = [], g = L(
|
|
1013
1044
|
() => [
|
|
1014
1045
|
{ x: s, y: s },
|
|
1015
1046
|
{ x: r.length + s - I, y: s },
|
|
@@ -1021,7 +1052,7 @@ const V = (r) => {
|
|
|
1021
1052
|
for (const e of g) {
|
|
1022
1053
|
const { x: o, y: n } = e;
|
|
1023
1054
|
t === "rounded-sm" || t === "rounded" || t === "rounded-lg" ? u.push(
|
|
1024
|
-
|
|
1055
|
+
yt({
|
|
1025
1056
|
x: o,
|
|
1026
1057
|
y: n,
|
|
1027
1058
|
radius: H[t]
|
|
@@ -1032,20 +1063,20 @@ const V = (r) => {
|
|
|
1032
1063
|
`M ${o} ${n}v ${I}h ${I}v -7zM ${o + 1} ${n + 1}h ${I - 2 * 1}v ${I - 2 * 1}h ${-7 + 2 * 1}z`
|
|
1033
1064
|
);
|
|
1034
1065
|
}
|
|
1035
|
-
return /* @__PURE__ */
|
|
1066
|
+
return /* @__PURE__ */ C("path", { fill: d, d: u.join(""), ...K });
|
|
1036
1067
|
}
|
|
1037
1068
|
if (t === "inpoint-sm" || t === "inpoint" || t === "inpoint-lg" || t === "outpoint-sm" || t === "outpoint" || t === "outpoint-lg" || t === "leaf-sm" || t === "leaf" || t === "leaf-lg") {
|
|
1038
|
-
const e = t === "leaf-sm" || t === "leaf" || t === "leaf-lg" ?
|
|
1069
|
+
const e = t === "leaf-sm" || t === "leaf" || t === "leaf-lg" ? vt : St;
|
|
1039
1070
|
return g.map((o, n) => ({
|
|
1040
1071
|
...o,
|
|
1041
|
-
rotation:
|
|
1072
|
+
rotation: J[t][n]
|
|
1042
1073
|
})).map(({ x: o, y: n, rotation: i }) => {
|
|
1043
1074
|
const h = e({
|
|
1044
1075
|
x: o,
|
|
1045
1076
|
y: n,
|
|
1046
1077
|
radius: H[t]
|
|
1047
1078
|
});
|
|
1048
|
-
return /* @__PURE__ */
|
|
1079
|
+
return /* @__PURE__ */ C(
|
|
1049
1080
|
"path",
|
|
1050
1081
|
{
|
|
1051
1082
|
fill: d,
|
|
@@ -1054,33 +1085,33 @@ const V = (r) => {
|
|
|
1054
1085
|
transform: `rotate(${i}deg)`,
|
|
1055
1086
|
transformOrigin: "center",
|
|
1056
1087
|
transformBox: "fill-box"
|
|
1057
|
-
}
|
|
1088
|
+
},
|
|
1089
|
+
...K
|
|
1058
1090
|
},
|
|
1059
1091
|
`finder-patterns-outer-${t}-${o}-${n}`
|
|
1060
1092
|
);
|
|
1061
1093
|
});
|
|
1062
1094
|
}
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
var c, a;
|
|
1095
|
+
}, xt = ({ gradient: r }) => {
|
|
1096
|
+
var l, a;
|
|
1066
1097
|
if (!r)
|
|
1067
1098
|
return null;
|
|
1068
|
-
const s =
|
|
1069
|
-
return /* @__PURE__ */
|
|
1099
|
+
const s = tt((r == null ? void 0 : r.rotation) || 0);
|
|
1100
|
+
return /* @__PURE__ */ C("defs", { children: r.type === "linear" ? /* @__PURE__ */ C("linearGradient", { id: U, gradientUnits: "userSpaceOnUse", ...s, children: (l = r.stops) == null ? void 0 : l.map((t, c) => /* @__PURE__ */ C("stop", { offset: t.offset, stopColor: t.color }, c)) }) : /* @__PURE__ */ C(
|
|
1070
1101
|
"radialGradient",
|
|
1071
1102
|
{
|
|
1072
|
-
id:
|
|
1103
|
+
id: U,
|
|
1073
1104
|
gradientUnits: "userSpaceOnUse",
|
|
1074
1105
|
cx: "50%",
|
|
1075
1106
|
cy: "50%",
|
|
1076
1107
|
r: "50%",
|
|
1077
|
-
children: (a = r.stops) == null ? void 0 : a.map((t,
|
|
1108
|
+
children: (a = r.stops) == null ? void 0 : a.map((t, c) => /* @__PURE__ */ C("stop", { offset: t.offset, stopColor: t.color }, c))
|
|
1078
1109
|
}
|
|
1079
1110
|
) });
|
|
1080
|
-
},
|
|
1111
|
+
}, kt = (r, s) => r.slice().map((l, a) => a < s.y || a >= s.y + s.h ? l : l.map((t, c) => c < s.x || c >= s.x + s.w ? t : !1)), Ht = (r, s, l, a) => {
|
|
1081
1112
|
if (a == null)
|
|
1082
1113
|
return null;
|
|
1083
|
-
const t = r.length +
|
|
1114
|
+
const t = r.length + l * 2, c = Math.floor(s * mt), d = t / s, u = (a.width || c) * d, g = (a.height || c) * d, e = a.x == null ? r.length / 2 - u / 2 : a.x * d, o = a.y == null ? r.length / 2 - g / 2 : a.y * d, n = a.opacity == null ? 1 : a.opacity;
|
|
1084
1115
|
let i = null;
|
|
1085
1116
|
if (a.excavate) {
|
|
1086
1117
|
const $ = Math.floor(e), f = Math.floor(o), p = Math.ceil(u + e - $), M = Math.ceil(g + o - f);
|
|
@@ -1088,34 +1119,34 @@ const V = (r) => {
|
|
|
1088
1119
|
}
|
|
1089
1120
|
const h = a.crossOrigin;
|
|
1090
1121
|
return { x: e, y: o, h: g, w: u, excavation: i, opacity: n, crossOrigin: h };
|
|
1091
|
-
},
|
|
1122
|
+
}, Yt = (r) => r != null ? Math.max(Math.floor(r), 0) : ut, Gt = ({
|
|
1092
1123
|
value: r,
|
|
1093
1124
|
level: s,
|
|
1094
|
-
minVersion:
|
|
1125
|
+
minVersion: l,
|
|
1095
1126
|
marginSize: a,
|
|
1096
1127
|
imageSettings: t,
|
|
1097
|
-
size:
|
|
1128
|
+
size: c,
|
|
1098
1129
|
boostLevel: d
|
|
1099
1130
|
}) => {
|
|
1100
1131
|
const u = L(() => {
|
|
1101
|
-
const h = (Array.isArray(r) ? r : [r]).reduce(($, f) => ($.push(...
|
|
1102
|
-
return
|
|
1132
|
+
const h = (Array.isArray(r) ? r : [r]).reduce(($, f) => ($.push(...y.QrSegment.makeSegments(f)), $), []);
|
|
1133
|
+
return y.QrCode.encodeSegments(
|
|
1103
1134
|
h,
|
|
1104
|
-
|
|
1105
|
-
|
|
1135
|
+
at[s],
|
|
1136
|
+
l,
|
|
1106
1137
|
void 0,
|
|
1107
1138
|
void 0,
|
|
1108
1139
|
d
|
|
1109
1140
|
);
|
|
1110
|
-
}, [r, s,
|
|
1111
|
-
const i = u.getModules(), h =
|
|
1141
|
+
}, [r, s, l, d]), { cells: g, margin: e, numCells: o, calculatedImageSettings: n } = L(() => {
|
|
1142
|
+
const i = u.getModules(), h = Yt(a), $ = i.length + h * 2, f = Ht(i, c, h, t);
|
|
1112
1143
|
return {
|
|
1113
1144
|
cells: i,
|
|
1114
1145
|
margin: h,
|
|
1115
1146
|
numCells: $,
|
|
1116
1147
|
calculatedImageSettings: f
|
|
1117
1148
|
};
|
|
1118
|
-
}, [u,
|
|
1149
|
+
}, [u, c, t, a]);
|
|
1119
1150
|
return {
|
|
1120
1151
|
qrcode: u,
|
|
1121
1152
|
margin: e,
|
|
@@ -1123,21 +1154,21 @@ const V = (r) => {
|
|
|
1123
1154
|
numCells: o,
|
|
1124
1155
|
calculatedImageSettings: n
|
|
1125
1156
|
};
|
|
1126
|
-
},
|
|
1157
|
+
}, qt = ({ svgRef: r, fileSize: s, fileName: l }) => {
|
|
1127
1158
|
if (!r.current) return;
|
|
1128
1159
|
const a = r.current.cloneNode(!0);
|
|
1129
1160
|
a.setAttribute("width", s.toString()), a.setAttribute("height", s.toString());
|
|
1130
|
-
const t = new XMLSerializer(),
|
|
1161
|
+
const t = new XMLSerializer(), c = new Blob([t.serializeToString(a)], {
|
|
1131
1162
|
type: "image/svg+xml"
|
|
1132
|
-
}), d = URL.createObjectURL(
|
|
1133
|
-
u.href = d, u.download = `${
|
|
1134
|
-
},
|
|
1163
|
+
}), d = URL.createObjectURL(c), u = document.createElement("a");
|
|
1164
|
+
u.href = d, u.download = `${l}.svg`, document.body.appendChild(u), u.click(), document.body.removeChild(u), URL.revokeObjectURL(d);
|
|
1165
|
+
}, jt = ({
|
|
1135
1166
|
svgRef: r,
|
|
1136
1167
|
fileSize: s,
|
|
1137
|
-
fileName:
|
|
1168
|
+
fileName: l,
|
|
1138
1169
|
fileFormat: a,
|
|
1139
1170
|
imageSettings: t,
|
|
1140
|
-
calculatedImageSettings:
|
|
1171
|
+
calculatedImageSettings: c,
|
|
1141
1172
|
size: d,
|
|
1142
1173
|
numCells: u,
|
|
1143
1174
|
margin: g
|
|
@@ -1148,28 +1179,28 @@ const V = (r) => {
|
|
|
1148
1179
|
e.width = s, e.height = s;
|
|
1149
1180
|
const n = new XMLSerializer().serializeToString(r.current), i = new Blob([n], { type: "image/svg+xml;charset=utf-8" }), h = URL.createObjectURL(i), $ = new Image();
|
|
1150
1181
|
$.crossOrigin = "anonymous", $.src = h, $.onload = () => {
|
|
1151
|
-
if (o.drawImage($, 0, 0, s, s), URL.revokeObjectURL(h), t != null && t.src &&
|
|
1182
|
+
if (o.drawImage($, 0, 0, s, s), URL.revokeObjectURL(h), t != null && t.src && c) {
|
|
1152
1183
|
const f = new Image();
|
|
1153
1184
|
f.crossOrigin = "anonymous", f.src = t.src, f.onload = () => {
|
|
1154
|
-
const p = s / d, M = u / s, E = t.width * p, m = t.x ? (
|
|
1185
|
+
const p = s / d, M = u / s, E = t.width * p, m = t.x ? (c.x + g) / M : (s - E) / 2, R = t.y ? (c.y + g) / M : (s - E) / 2;
|
|
1155
1186
|
o.drawImage(f, m, R, E, E);
|
|
1156
|
-
const
|
|
1157
|
-
|
|
1187
|
+
const w = a === "png" ? "image/png" : "image/jpeg", A = document.createElement("a");
|
|
1188
|
+
A.href = e.toDataURL(w), A.download = `${l}.${a}`, document.body.appendChild(A), A.click(), document.body.removeChild(A);
|
|
1158
1189
|
}, f.onerror = (p) => console.error("Error loading logo:", p);
|
|
1159
1190
|
} else {
|
|
1160
1191
|
const f = a === "png" ? "image/png" : "image/jpeg", p = document.createElement("a");
|
|
1161
|
-
p.href = e.toDataURL(f), p.download = `${
|
|
1192
|
+
p.href = e.toDataURL(f), p.download = `${l}.${a}`, document.body.appendChild(p), p.click(), document.body.removeChild(p);
|
|
1162
1193
|
}
|
|
1163
1194
|
}, $.onerror = (f) => console.error("Error loading QR code:", f);
|
|
1164
|
-
},
|
|
1195
|
+
}, Xt = (r) => {
|
|
1165
1196
|
const {
|
|
1166
1197
|
ref: s,
|
|
1167
|
-
value:
|
|
1168
|
-
size: a =
|
|
1169
|
-
level: t =
|
|
1170
|
-
background:
|
|
1198
|
+
value: l,
|
|
1199
|
+
size: a = lt,
|
|
1200
|
+
level: t = ct,
|
|
1201
|
+
background: c,
|
|
1171
1202
|
gradient: d,
|
|
1172
|
-
minVersion: u =
|
|
1203
|
+
minVersion: u = ht,
|
|
1173
1204
|
boostLevel: g,
|
|
1174
1205
|
marginSize: e,
|
|
1175
1206
|
finderPatternOuterSettings: o,
|
|
@@ -1177,8 +1208,8 @@ const V = (r) => {
|
|
|
1177
1208
|
dataModulesSettings: i,
|
|
1178
1209
|
imageSettings: h,
|
|
1179
1210
|
svgProps: $
|
|
1180
|
-
} = r, f =
|
|
1181
|
-
value:
|
|
1211
|
+
} = r, f = st(null), { margin: p, cells: M, numCells: E, calculatedImageSettings: m } = Gt({
|
|
1212
|
+
value: l,
|
|
1182
1213
|
level: t,
|
|
1183
1214
|
minVersion: u,
|
|
1184
1215
|
boostLevel: g,
|
|
@@ -1186,17 +1217,17 @@ const V = (r) => {
|
|
|
1186
1217
|
imageSettings: h,
|
|
1187
1218
|
size: a
|
|
1188
1219
|
});
|
|
1189
|
-
|
|
1220
|
+
it(s, () => ({
|
|
1190
1221
|
svg: f.current,
|
|
1191
1222
|
download: ({
|
|
1192
|
-
name:
|
|
1223
|
+
name: N = pt,
|
|
1193
1224
|
format: P = "svg",
|
|
1194
|
-
size:
|
|
1225
|
+
size: k = 500
|
|
1195
1226
|
}) => {
|
|
1196
|
-
f.current && (P === "svg" ?
|
|
1227
|
+
f.current && (P === "svg" ? qt({ svgRef: f, fileSize: k, fileName: N }) : jt({
|
|
1197
1228
|
svgRef: f,
|
|
1198
|
-
fileSize:
|
|
1199
|
-
fileName:
|
|
1229
|
+
fileSize: k,
|
|
1230
|
+
fileName: N,
|
|
1200
1231
|
fileFormat: P,
|
|
1201
1232
|
imageSettings: h,
|
|
1202
1233
|
calculatedImageSettings: m,
|
|
@@ -1206,8 +1237,8 @@ const V = (r) => {
|
|
|
1206
1237
|
}));
|
|
1207
1238
|
}
|
|
1208
1239
|
}));
|
|
1209
|
-
let R = M,
|
|
1210
|
-
h != null && m != null && (m.excavation != null && (R =
|
|
1240
|
+
let R = M, w = null;
|
|
1241
|
+
h != null && m != null && (m.excavation != null && (R = kt(M, m.excavation)), w = /* @__PURE__ */ C(
|
|
1211
1242
|
"image",
|
|
1212
1243
|
{
|
|
1213
1244
|
href: h.src,
|
|
@@ -1220,12 +1251,12 @@ const V = (r) => {
|
|
|
1220
1251
|
crossOrigin: m.crossOrigin
|
|
1221
1252
|
}
|
|
1222
1253
|
));
|
|
1223
|
-
const
|
|
1254
|
+
const A = {
|
|
1224
1255
|
modules: R,
|
|
1225
1256
|
margin: p,
|
|
1226
1257
|
gradient: d
|
|
1227
1258
|
};
|
|
1228
|
-
return /* @__PURE__ */
|
|
1259
|
+
return /* @__PURE__ */ V(
|
|
1229
1260
|
"svg",
|
|
1230
1261
|
{
|
|
1231
1262
|
height: a,
|
|
@@ -1236,17 +1267,17 @@ const V = (r) => {
|
|
|
1236
1267
|
"aria-label": ($ == null ? void 0 : $["aria-label"]) || "QR Code",
|
|
1237
1268
|
...$,
|
|
1238
1269
|
children: [
|
|
1239
|
-
/* @__PURE__ */
|
|
1240
|
-
/* @__PURE__ */
|
|
1241
|
-
/* @__PURE__ */
|
|
1242
|
-
/* @__PURE__ */
|
|
1243
|
-
/* @__PURE__ */
|
|
1244
|
-
|
|
1270
|
+
/* @__PURE__ */ C(xt, { gradient: d }),
|
|
1271
|
+
/* @__PURE__ */ C(Rt, { background: c, numCells: E }),
|
|
1272
|
+
/* @__PURE__ */ C(zt, { settings: o, ...A }),
|
|
1273
|
+
/* @__PURE__ */ C(Bt, { settings: n, ...A }),
|
|
1274
|
+
/* @__PURE__ */ C(Ft, { settings: i, ...A }),
|
|
1275
|
+
w
|
|
1245
1276
|
]
|
|
1246
1277
|
}
|
|
1247
1278
|
);
|
|
1248
1279
|
};
|
|
1249
|
-
|
|
1280
|
+
Xt.displayName = "ReactQRCode";
|
|
1250
1281
|
export {
|
|
1251
|
-
|
|
1282
|
+
Xt as ReactQRCode
|
|
1252
1283
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lglab/react-qr-code",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"description": "React library to generate QR codes",
|
|
5
5
|
"author": "LGLab",
|
|
6
6
|
"license": "MIT",
|
|
@@ -10,6 +10,25 @@
|
|
|
10
10
|
"directory": "packages/react-qr-code"
|
|
11
11
|
},
|
|
12
12
|
"homepage": "https://reactqrcode.com",
|
|
13
|
+
"keywords": [
|
|
14
|
+
"react",
|
|
15
|
+
"react-component",
|
|
16
|
+
"react-library",
|
|
17
|
+
"qr",
|
|
18
|
+
"code",
|
|
19
|
+
"qrcode",
|
|
20
|
+
"qr-code",
|
|
21
|
+
"qr-code-generator",
|
|
22
|
+
"qr-code-library",
|
|
23
|
+
"qr-code-react",
|
|
24
|
+
"customizable-qr-code",
|
|
25
|
+
"qr-code-with-logo",
|
|
26
|
+
"qr-code-svg",
|
|
27
|
+
"qr-code-image",
|
|
28
|
+
"qr-code-download",
|
|
29
|
+
"typescript",
|
|
30
|
+
"open-source"
|
|
31
|
+
],
|
|
13
32
|
"type": "module",
|
|
14
33
|
"types": "./dist/index.d.ts",
|
|
15
34
|
"main": "./dist/index.es.js",
|
|
@@ -27,7 +46,7 @@
|
|
|
27
46
|
"react": "^18 || ^19"
|
|
28
47
|
},
|
|
29
48
|
"devDependencies": {
|
|
30
|
-
"@types/node": "^22.
|
|
49
|
+
"@types/node": "^22.13.1",
|
|
31
50
|
"@types/react": "^19.0.8",
|
|
32
51
|
"@types/react-dom": "^19.0.3",
|
|
33
52
|
"@vitejs/plugin-react": "^4.3.4",
|
|
@@ -36,7 +55,7 @@
|
|
|
36
55
|
"react-dom": "^19.0.0",
|
|
37
56
|
"typescript": "~5.7.3",
|
|
38
57
|
"typescript-eslint": "^8.23.0",
|
|
39
|
-
"vite": "^6.0
|
|
58
|
+
"vite": "^6.1.0",
|
|
40
59
|
"vite-plugin-dts": "^4.5.0"
|
|
41
60
|
},
|
|
42
61
|
"scripts": {
|