fix: update @types/react version in package.json

Author: yordan-st

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

@@ -1,11 +1,22 @@
 import { ReactElement } from "react";
 import { BarcodeGeneratorContainerProps } from "../typings/BarcodeGeneratorProps";
 import { barcodeConfig } from "./config/Barcode.config";
-import { BarcodeConfigProvider } from "./config/BarcodeConfigContext";
-import { BarcodeGeneratorInner } from "./components/BarcodeGeneratorInner";
+import { BarcodeContextProvider, useBarcodeConfig } from "./config/BarcodeContext";
+import { QRCodeRenderer } from "./components/QRCode";
+import { BarcodeRenderer } from "./components/Barcode";
 
 import "./ui/BarcodeGenerator.scss";
 
+function BarcodeContainer({ tabIndex }: { tabIndex?: number }): ReactElement {
+    const config = useBarcodeConfig();
+
+    return (
+        <div className="barcode-generator" tabIndex={tabIndex}>
+            {config.isQRCode ? <QRCodeRenderer /> : <BarcodeRenderer />}
+        </div>
+    );
+}
+
 export default function BarcodeGenerator(props: BarcodeGeneratorContainerProps): ReactElement {
     const config = barcodeConfig(props);
 
@@ -14,8 +25,8 @@ export default function BarcodeGenerator(props: BarcodeGeneratorContainerProps):
     }
 
     return (
-        <BarcodeConfigProvider config={config}>
-            <BarcodeGeneratorInner tabIndex={props.tabIndex} />
-        </BarcodeConfigProvider>
+        <BarcodeContextProvider config={config}>
+            <BarcodeContainer tabIndex={props.tabIndex} />
+        </BarcodeContextProvider>
     );
 }

packages/pluggableWidgets/barcode-generator-web/src/components/Barcode.tsx

@@ -0,0 +1,22 @@
+import { useRenderBarcode } from "../hooks/useRenderBarcode";
+import { useDownloadBarcode } from "../hooks/useDownloadBarcode";
+import { useBarcodeConfig } from "../config/BarcodeContext";
+
+import { Fragment } from "react";
+
+export const BarcodeRenderer = () => {
+    const ref = useRenderBarcode();
+    const { allowDownload } = useBarcodeConfig();
+    const { downloadBarcode } = useDownloadBarcode({ ref });
+
+    return (
+        <Fragment>
+            <svg ref={ref} />
+            {allowDownload && (
+                <button className="btn btn-default" onClick={downloadBarcode}>
+                    Download barcode
+                </button>
+            )}
+        </Fragment>
+    );
+};

packages/pluggableWidgets/barcode-generator-web/src/components/BarcodeGeneratorInner.tsx

@@ -0,0 +1,55 @@
+import { QRCodeSVG } from "qrcode.react";
+import { Fragment, useRef } from "react";
+import { useDownloadQrCode } from "../hooks/useDownloadQRCode";
+import { useBarcodeConfig } from "../config/BarcodeContext";
+
+export const QRCodeRenderer = () => {
+    const ref = useRef<SVGSVGElement>(null);
+    const { downloadQrCode } = useDownloadQrCode({ ref });
+
+    const {
+        value,
+        allowDownload,
+        qrSize: size,
+        qrMargin: margin,
+        qrTitle: title,
+        qrLevel: level,
+        qrImageSrc: imageSrc,
+        qrImageX: imageX,
+        qrImageY: imageY,
+        qrImageHeight: imageHeight,
+        qrImageWidth: imageWidth,
+        qrImageOpacity: imageOpacity,
+        qrImageExcavate: imageExcavate
+    } = useBarcodeConfig();
+    const imageSettings = imageSrc
+        ? {
+              src: imageSrc,
+              x: imageX,
+              y: imageY,
+              height: imageHeight,
+              width: imageWidth,
+              opacity: imageOpacity,
+              excavate: imageExcavate
+          }
+        : undefined;
+
+    return (
+        <Fragment>
+            <QRCodeSVG
+                ref={ref}
+                value={value}
+                size={size}
+                level={level.toUpperCase() as "L" | "M" | "Q" | "H"}
+                marginSize={margin}
+                title={title}
+                imageSettings={imageSettings}
+            />
+            {allowDownload && (
+                <button type="button" onClick={downloadQrCode} className="btn btn-default">
+                    Download QR Code
+                </button>
+            )}
+        </Fragment>
+    );
+};