Skip to content

Commit d28344f

Browse files
yordan-styordan-st
committed
feat: enhance generator with qr styling options and improve download support
1 parent 038944b commit d28344f

File tree

7 files changed

+377
-79
lines changed

7 files changed

+377
-79
lines changed

‎packages/pluggableWidgets/barcode-generator-web/src/BarcodeGenerator.editorConfig.ts‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,26 @@ export type Problem = {
1212

1313
export function getProperties(values: BarcodeGeneratorPreviewProps, defaultProperties: Properties): Properties {
1414
if (values.codeFormat === "QRCode") {
15-
hidePropertiesIn(defaultProperties, values, ["codeWidth", "codeHeight", "displayValue"]);
15+
hidePropertiesIn(defaultProperties, values, ["codeWidth", "codeHeight", "displayValue", "codeMargin"]);
1616
} else {
17-
hidePropertiesIn(defaultProperties, values, ["qrSize"]);
17+
hidePropertiesIn(defaultProperties, values, ["qrImage", "qrSize", "qrMargin", "qrLevel", "qrTitle"]);
18+
}
19+
20+
if (values.codeFormat !== "QRCode" || !values.qrImage) {
21+
hidePropertiesIn(defaultProperties, values, [
22+
"qrImageSrc",
23+
"qrImageCenter",
24+
"qrImageWidth",
25+
"qrImageHeight",
26+
"qrImageX",
27+
"qrImageY",
28+
"qrImageOpacity",
29+
"qrImageExcavate"
30+
]);
31+
}
32+
33+
if (values.qrImageCenter) {
34+
hidePropertiesIn(defaultProperties, values, ["qrImageX", "qrImageY"]);
1835
}
1936

2037
if (values.codeFormat !== "Custom") {

‎packages/pluggableWidgets/barcode-generator-web/src/BarcodeGenerator.tsx‎

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,20 @@ export default function BarcodeGenerator({
1010
codeWidth,
1111
codeHeight,
1212
codeFormat,
13+
customCodeFormat,
1314
codeMargin,
1415
displayValue,
1516
qrSize,
17+
qrMargin,
18+
qrTitle,
19+
qrLevel,
20+
qrImageSrc,
21+
qrImageX,
22+
qrImageY,
23+
qrImageHeight,
24+
qrImageWidth,
25+
qrImageOpacity,
26+
qrImageExcavate,
1627
tabIndex,
1728
allowDownload
1829
}: BarcodeGeneratorContainerProps): ReactElement {
@@ -22,11 +33,21 @@ export default function BarcodeGenerator({
2233
const value = codeValue?.status === "available" ? codeValue.value : "";
2334
const width = codeWidth ?? 128;
2435
const height = codeHeight ?? 128;
25-
const format = codeFormat ?? "CODE128";
36+
const format = codeFormat === "Custom" ? (customCodeFormat ?? "CODE128") : (codeFormat ?? "CODE128");
2637
const margin = codeMargin ?? 2;
2738
const showValue = displayValue ?? false;
2839
const download = allowDownload ?? false;
29-
const size = qrSize ?? 128;
40+
const qrsize = qrSize ?? 128;
41+
const qrmargin = qrMargin ?? 2;
42+
const qrtitle = qrTitle ?? "";
43+
const qrlevel = qrLevel ?? "L";
44+
const qrimageSrc = qrImageSrc?.status === "available" && qrImageSrc.value ? qrImageSrc.value.uri : "";
45+
const qrimageX = qrImageX === 0 ? undefined : qrImageX;
46+
const qrimageY = qrImageY === 0 ? undefined : qrImageY;
47+
const qrimageHeight = qrImageHeight ?? 24;
48+
const qrimageWidth = qrImageWidth ?? 24;
49+
const qrimageOpacity = qrImageOpacity?.toNumber() ?? 1;
50+
const qrimageExcavate = qrImageExcavate ?? true;
3051

3152
const { downloadSVG } = useDownload({ format, svgRef, qrContainerRef });
3253

@@ -37,13 +58,23 @@ export default function BarcodeGenerator({
3758
return (
3859
<div className="barcode-generator" tabIndex={tabIndex}>
3960
<CodeRenderer
40-
format={format}
4161
value={value}
42-
size={size}
62+
format={format}
4363
width={width}
4464
height={height}
4565
margin={margin}
4666
displayValue={showValue}
67+
qrsize={qrsize}
68+
qrmargin={qrmargin}
69+
qrlevel={qrlevel}
70+
qrtitle={qrtitle}
71+
qrimageSrc={qrimageSrc}
72+
qrimageX={qrimageX}
73+
qrimageY={qrimageY}
74+
qrimageWidth={qrimageWidth}
75+
qrimageHeight={qrimageHeight}
76+
qrimageOpacity={qrimageOpacity}
77+
qrimageExcavate={qrimageExcavate}
4778
svgRef={svgRef}
4879
qrContainerRef={qrContainerRef}
4980
/>

‎packages/pluggableWidgets/barcode-generator-web/src/BarcodeGenerator.xml‎

Lines changed: 75 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,25 @@
2121
<enumerationValues>
2222
<enumerationValue key="CODE128">Barcode</enumerationValue>
2323
<enumerationValue key="QRCode">QR Code</enumerationValue>
24-
<enumerationValue key="Custom">Custom Format</enumerationValue>
24+
<enumerationValue key="Custom">Custom</enumerationValue>
25+
</enumerationValues>
26+
</property>
27+
<property key="customCodeFormat" type="enumeration" required="true" defaultValue="CODE128">
28+
<caption>Custom Format</caption>
29+
<description>Choose between barcode types format</description>
30+
<enumerationValues>
31+
<enumerationValue key="CODE128">CODE128</enumerationValue>
32+
<enumerationValue key="EAN13">EAN-13</enumerationValue>
33+
<enumerationValue key="EAN8">EAN-8</enumerationValue>
34+
<enumerationValue key="EAN5">EAN-5</enumerationValue>
35+
<enumerationValue key="EAN2">EAN-2</enumerationValue>
36+
<enumerationValue key="UPC">UPC</enumerationValue>
37+
<enumerationValue key="CODE39">CODE39</enumerationValue>
38+
<enumerationValue key="ITF14">ITF-14</enumerationValue>
39+
<enumerationValue key="MSI">MSI</enumerationValue>
40+
<enumerationValue key="pharmacode">Pharmacode</enumerationValue>
41+
<enumerationValue key="codabar">Codabar</enumerationValue>
42+
<enumerationValue key="CODE93">CODE93</enumerationValue>
2543
</enumerationValues>
2644
</property>
2745
<property key="allowDownload" type="boolean" defaultValue="false">
@@ -42,35 +60,69 @@
4260
<caption>Code height</caption>
4361
<description>In pixels</description>
4462
</property>
63+
<property key="codeMargin" type="integer" required="true" defaultValue="2">
64+
<caption>Margin size</caption>
65+
<description>In pixels</description>
66+
</property>
4567
<property key="qrSize" type="integer" required="true" defaultValue="128">
4668
<caption>QR Size</caption>
4769
<description>The size of the QR box</description>
4870
</property>
49-
<property key="codeMargin" type="integer" required="true" defaultValue="2">
71+
<property key="qrMargin" type="integer" required="true" defaultValue="2">
5072
<caption>Margin size</caption>
51-
<description>In pixels</description>
73+
<description />
74+
</property>
75+
<property key="qrTitle" type="string" required="true">
76+
<caption>Title</caption>
77+
<description>Used for accessibility reasons.</description>
78+
</property>
79+
<property key="qrLevel" type="enumeration" required="true" defaultValue="L">
80+
<caption>Level</caption>
81+
<description>The Error Correction Level to use</description>
82+
<enumerationValues>
83+
<enumerationValue key="L">L</enumerationValue>
84+
<enumerationValue key="M">M</enumerationValue>
85+
<enumerationValue key="Q">Q</enumerationValue>
86+
<enumerationValue key="H">H</enumerationValue>
87+
</enumerationValues>
88+
</property>
89+
<property key="qrImage" type="boolean" required="true" defaultValue="false">
90+
<caption>Image</caption>
91+
<description>Include an image on top the QR code</description>
92+
</property>
93+
<property key="qrImageSrc" type="image" required="true">
94+
<caption>Image source</caption>
95+
<description>URL or path to the image to display on the QR code</description>
96+
</property>
97+
<property key="qrImageCenter" type="boolean" required="true" defaultValue="true">
98+
<caption>Center image</caption>
99+
<description>Center the image in the QR code</description>
100+
</property>
101+
<property key="qrImageX" type="integer" required="true" defaultValue="0">
102+
<caption>Image X position</caption>
103+
<description>Horizontal position of the image</description>
104+
</property>
105+
<property key="qrImageY" type="integer" required="true" defaultValue="0">
106+
<caption>Image Y position</caption>
107+
<description>Vertical position of the image</description>
108+
</property>
109+
<property key="qrImageHeight" type="integer" required="true" defaultValue="24">
110+
<caption>Image height</caption>
111+
<description>Height of the image in pixels</description>
112+
</property>
113+
<property key="qrImageWidth" type="integer" required="true" defaultValue="24">
114+
<caption>Image width</caption>
115+
<description>Width of the image in pixels</description>
116+
</property>
117+
<property key="qrImageOpacity" type="decimal" required="true" defaultValue="1">
118+
<caption>Image opacity</caption>
119+
<description>Opacity of the image (0.0 to 1.0)</description>
120+
</property>
121+
<property key="qrImageExcavate" type="boolean" required="true" defaultValue="true">
122+
<caption>Excavate background</caption>
123+
<description>Remove QR code dots behind the image</description>
52124
</property>
53125
</propertyGroup>
54126
</propertyGroup>
55-
<propertyGroup caption="Advanced">
56-
<property key="customCodeFormat" type="enumeration" required="true" defaultValue="CODE128">
57-
<caption>Barcode Format</caption>
58-
<description>Choose between barcode types format</description>
59-
<enumerationValues>
60-
<enumerationValue key="CODE128">CODE128</enumerationValue>
61-
<enumerationValue key="EAN13">EAN-13</enumerationValue>
62-
<enumerationValue key="EAN8">EAN-8</enumerationValue>
63-
<enumerationValue key="EAN5">EAN-5</enumerationValue>
64-
<enumerationValue key="EAN2">EAN-2</enumerationValue>
65-
<enumerationValue key="UPC">UPC</enumerationValue>
66-
<enumerationValue key="CODE39">CODE39</enumerationValue>
67-
<enumerationValue key="ITF14">ITF-14</enumerationValue>
68-
<enumerationValue key="MSI">MSI</enumerationValue>
69-
<enumerationValue key="pharmacode">Pharmacode</enumerationValue>
70-
<enumerationValue key="codabar">Codabar</enumerationValue>
71-
<enumerationValue key="CODE93">CODE93</enumerationValue>
72-
</enumerationValues>
73-
</property>
74-
</propertyGroup>
75127
</properties>
76128
</widget>

‎packages/pluggableWidgets/barcode-generator-web/src/components/CodeRenderer.tsx‎

Lines changed: 44 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,80 @@ import { QRCodeRenderer } from "./QRCodeRenderer";
33
import { BarcodeRenderer } from "./BarcodeRenderer";
44

55
interface CodeRendererProps {
6-
format: string;
76
value: string;
8-
// QR Code props
9-
size: number;
7+
format: string;
108
// Barcode props
119
width: number;
1210
height: number;
1311
margin: number;
1412
displayValue: boolean;
13+
// QR Code props
14+
qrsize: number;
15+
qrmargin: number;
16+
qrtitle: string;
17+
qrlevel: string;
18+
qrimageSrc: string;
19+
qrimageX?: number;
20+
qrimageY?: number;
21+
qrimageHeight: number;
22+
qrimageWidth: number;
23+
qrimageOpacity: number;
24+
qrimageExcavate: boolean;
1525
// Refs for download functionality
1626
svgRef: React.RefObject<SVGSVGElement>;
1727
qrContainerRef: React.RefObject<HTMLDivElement>;
1828
}
1929

2030
export function CodeRenderer({
21-
format,
2231
value,
23-
size,
32+
format,
2433
width,
2534
height,
2635
margin,
2736
displayValue,
37+
qrsize,
38+
qrmargin,
39+
qrtitle,
40+
qrlevel,
41+
qrimageSrc,
42+
qrimageX,
43+
qrimageY,
44+
qrimageHeight,
45+
qrimageWidth,
46+
qrimageOpacity,
47+
qrimageExcavate,
2848
svgRef,
2949
qrContainerRef
3050
}: CodeRendererProps): ReactElement {
3151
if (format === "QRCode") {
32-
return <QRCodeRenderer ref={qrContainerRef} value={value} size={size} />;
52+
return (
53+
<QRCodeRenderer
54+
ref={qrContainerRef}
55+
value={value}
56+
size={qrsize}
57+
margin={qrmargin}
58+
title={qrtitle}
59+
level={qrlevel}
60+
imageSrc={qrimageSrc}
61+
imageX={qrimageX}
62+
imageY={qrimageY}
63+
imageHeight={qrimageHeight}
64+
imageWidth={qrimageWidth}
65+
imageOpacity={qrimageOpacity}
66+
imageExcavate={qrimageExcavate}
67+
/>
68+
);
3369
}
3470

3571
return (
3672
<BarcodeRenderer
37-
ref={svgRef}
3873
value={value}
74+
format={format}
3975
width={width}
4076
height={height}
41-
format={format}
4277
margin={margin}
4378
displayValue={displayValue}
79+
ref={svgRef}
4480
/>
4581
);
4682
}

‎packages/pluggableWidgets/barcode-generator-web/src/components/QRCodeRenderer.tsx‎

Lines changed: 70 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,79 @@
11
import { QRCodeSVG } from "qrcode.react";
22
import { forwardRef } from "react";
33

4-
const QRCode = QRCodeSVG as React.ComponentType<{ value: string; size: number }>;
4+
const QRCode = QRCodeSVG as React.ComponentType<{
5+
value: string;
6+
size: number;
7+
level: string;
8+
marginSize: number;
9+
title: string;
10+
imageSettings?: {
11+
src: string;
12+
x?: number;
13+
y?: number;
14+
height: number;
15+
width: number;
16+
opacity: number;
17+
excavate: boolean;
18+
};
19+
}>;
520

621
interface QRCodeRendererProps {
722
value: string;
823
size: number;
24+
margin: number;
25+
title: string;
26+
level: string;
27+
imageSrc?: string;
28+
imageX?: number;
29+
imageY?: number;
30+
imageHeight: number;
31+
imageWidth: number;
32+
imageOpacity: number;
33+
imageExcavate: boolean;
934
}
1035

11-
export const QRCodeRenderer = forwardRef<HTMLDivElement, QRCodeRendererProps>(({ value, size }, ref) => {
12-
return (
13-
<div ref={ref}>
14-
<QRCode value={value} size={size} />
15-
</div>
16-
);
17-
});
36+
export const QRCodeRenderer = forwardRef<HTMLDivElement, QRCodeRendererProps>(
37+
(
38+
{
39+
value,
40+
size,
41+
margin,
42+
title,
43+
level,
44+
imageSrc,
45+
imageX,
46+
imageY,
47+
imageHeight,
48+
imageWidth,
49+
imageOpacity,
50+
imageExcavate
51+
},
52+
ref
53+
) => {
54+
const imageSettings = imageSrc
55+
? {
56+
src: imageSrc,
57+
x: imageX,
58+
y: imageY,
59+
height: imageHeight,
60+
width: imageWidth,
61+
opacity: imageOpacity,
62+
excavate: imageExcavate
63+
}
64+
: undefined;
65+
66+
return (
67+
<div ref={ref}>
68+
<QRCode
69+
value={value}
70+
size={size}
71+
level={level}
72+
marginSize={margin}
73+
title={title}
74+
imageSettings={imageSettings}
75+
/>
76+
</div>
77+
);
78+
}
79+
);

0 commit comments

Comments
 (0)