refactor: improve architecture and rendering logic

Author: yordan-st

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

@@ -48,7 +48,7 @@
                     <caption>Flat</caption>
                     <description>Enable flat barcode, skip guard bars</description>
                 </property>
-                <property key="lastChar" type="string" required="true">
+                <property key="lastChar" type="string" required="false">
                     <caption>Last character</caption>
                     <description>Character after the barcode</description>
                 </property>
@@ -71,7 +71,7 @@
                         <enumerationValue key="EAN2">EAN-2</enumerationValue>
                     </enumerationValues>
                 </property>
-                <property key="addonValue" type="attribute" required="false">
+                <property key="addonValue" type="attribute" required="true">
                     <caption>Addon value</caption>
                     <description>Value for the addon barcode (5 digits for EAN-5, 2 digits for EAN-2)</description>
                     <attributeTypes>

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

@@ -1,17 +1,5 @@
-import JsBarcode from "jsbarcode";
-import { forwardRef, useEffect } from "react";
-
-interface BarcodeOptions {
-    format: string;
-    width: number;
-    height: number;
-    margin: number;
-    displayValue: boolean;
-    ean128?: boolean;
-    flat?: boolean;
-    lastChar?: string;
-    mod43?: boolean;
-}
+import { forwardRef } from "react";
+import { useRenderBarcode } from "../hooks/useRenderBarcode";
 
 interface BarcodeRendererProps {
     value: string;
@@ -48,70 +36,8 @@ export const BarcodeRenderer = forwardRef<SVGSVGElement, BarcodeRendererProps>(
         },
         ref
     ) => {
-        useEffect(() => {
-            if (ref && typeof ref !== "function" && ref.current && value) {
-                try {
-                    // Check if format supports addons and addon data is provided
-                    const supportsAddon =
-                        addonValue &&
-                        (format === "EAN13" || format === "EAN8") &&
-                        (addonFormat === "EAN5" || addonFormat === "EAN2");
-
-                    if (supportsAddon) {
-                        const barcodeInstance = JsBarcode(ref.current);
-
-                        // Generate main barcode
-                        if (format === "EAN13") {
-                            barcodeInstance.EAN13(value, {
-                                width,
-                                height,
-                                margin,
-                                displayValue
-                            });
-                        } else if (format === "EAN8") {
-                            barcodeInstance.EAN8(value, {
-                                width,
-                                height,
-                                margin,
-                                displayValue
-                            });
-                        }
-
-                        // Add spacing
-                        barcodeInstance.blank(addonSpacing || 20);
-
-                        // Add addon
-                        if (addonFormat === "EAN5") {
-                            barcodeInstance.EAN5(addonValue, {
-                                width: 1
-                            });
-                        } else if (addonFormat === "EAN2") {
-                            barcodeInstance.EAN2(addonValue, {
-                                width: 1
-                            });
-                        }
-                        barcodeInstance.render();
-                    } else {
-                        // Standard single barcode generation
-                        const options: BarcodeOptions = {
-                            format,
-                            width,
-                            height,
-                            margin,
-                            displayValue,
-                            ean128: enableEan128,
-                            flat: enableFlat,
-                            lastChar,
-                            mod43: enableMod43
-                        };
-
-                        JsBarcode(ref.current, value, options);
-                    }
-                } catch (error) {
-                    console.error("Error generating barcode:", error);
-                }
-            }
-        }, [
+        useRenderBarcode(
+            ref,
             value,
             width,
             height,
@@ -120,13 +46,12 @@ export const BarcodeRenderer = forwardRef<SVGSVGElement, BarcodeRendererProps>(
             displayValue,
             enableEan128,
             enableFlat,
-            enableMod43,
             lastChar,
+            enableMod43,
             addonValue,
             addonFormat,
-            addonSpacing,
-            ref
-        ]);
+            addonSpacing
+        );
 
         return <svg ref={ref} />;
     }

packages/pluggableWidgets/barcode-generator-web/src/hooks/useRenderBarcode.ts

@@ -0,0 +1,145 @@
+import JsBarcode from "jsbarcode";
+import { type ForwardedRef, useEffect } from "react";
+
+interface BarcodeMethodOptions {
+    width?: number;
+    height?: number;
+    margin?: number;
+    displayValue?: boolean;
+}
+
+interface BarcodeInstance {
+    EAN13: (value: string, options: BarcodeMethodOptions) => BarcodeInstance;
+    EAN8: (value: string, options: BarcodeMethodOptions) => BarcodeInstance;
+    EAN5: (value: string, options: BarcodeMethodOptions) => BarcodeInstance;
+    EAN2: (value: string, options: BarcodeMethodOptions) => BarcodeInstance;
+    blank: (spacing: number) => BarcodeInstance;
+    render: () => void;
+    [key: string]: any;
+}
+
+interface BarcodeOptions {
+    format: string;
+    width: number;
+    height: number;
+    margin: number;
+    displayValue: boolean;
+    ean128?: boolean;
+    flat?: boolean;
+    lastChar?: string;
+    mod43?: boolean;
+}
+
+const createBarcodeWithAddon = (
+    ref: ForwardedRef<SVGSVGElement>,
+    value: string,
+    mainFormat: string,
+    addonValue: string,
+    addonFormat: string,
+    options: BarcodeOptions,
+    addonSpacing: number
+): void => {
+    if (ref && typeof ref !== "function" && ref.current) {
+        const barcodeInstance = JsBarcode(ref.current) as BarcodeInstance;
+
+        // Generate main barcode dynamically
+        barcodeInstance[mainFormat](value, {
+            width: options.width,
+            height: options.height,
+            margin: options.margin,
+            displayValue: options.displayValue
+        });
+
+        // Add spacing
+        barcodeInstance.blank(addonSpacing);
+
+        // Add addon dynamically
+        barcodeInstance[addonFormat](addonValue, { width: 1 });
+
+        barcodeInstance.render();
+    }
+};
+
+const createStandardBarcode = (ref: ForwardedRef<SVGSVGElement>, value: string, options: BarcodeOptions): void => {
+    if (ref && typeof ref !== "function" && ref.current) {
+        JsBarcode(ref.current, value, options);
+    }
+};
+
+const renderBarcode = (
+    ref: ForwardedRef<SVGSVGElement>,
+    value: string,
+    format: string,
+    addonValue: string | undefined,
+    addonFormat: string | undefined,
+    addonSpacing: number,
+    options: BarcodeOptions
+): void => {
+    switch (addonFormat) {
+        case "EAN5":
+            createBarcodeWithAddon(ref, value, format, addonValue!, addonFormat, options, addonSpacing);
+            break;
+
+        case "EAN2":
+            createBarcodeWithAddon(ref, value, format, addonValue!, addonFormat, options, addonSpacing);
+            break;
+
+        default:
+            createStandardBarcode(ref, value, options);
+            break;
+    }
+};
+
+export const useRenderBarcode = (
+    ref: ForwardedRef<SVGSVGElement>,
+    value: string,
+    width: number,
+    height: number,
+    format: string,
+    margin: number,
+    displayValue: boolean,
+    enableEan128: boolean,
+    enableFlat: boolean,
+    lastChar: string,
+    enableMod43: boolean,
+    addonValue?: string,
+    addonFormat?: string,
+    addonSpacing?: number
+): void => {
+    useEffect(() => {
+        if (ref && typeof ref !== "function" && ref.current && value) {
+            try {
+                const options: BarcodeOptions = {
+                    format,
+                    width,
+                    height,
+                    margin,
+                    displayValue,
+                    ean128: enableEan128,
+                    flat: enableFlat,
+                    lastChar,
+                    mod43: enableMod43
+                };
+
+                renderBarcode(ref, value, format, addonValue, addonFormat, addonSpacing || 20, options);
+            } catch (error) {
+                console.error("Error generating barcode:", error);
+            }
+        }
+    }, [
+        value,
+        width,
+        height,
+        format,
+        margin,
+        displayValue,
+        enableEan128,
+        enableFlat,
+        enableMod43,
+        lastChar,
+        addonValue,
+        addonFormat,
+        addonSpacing,
+        ref
+    ]);
+};

packages/pluggableWidgets/barcode-generator-web/typings/BarcodeGeneratorProps.d.ts

@@ -29,7 +29,7 @@ export interface BarcodeGeneratorContainerProps {
     enableMod43: boolean;
     allowDownload: boolean;
     addonFormat: AddonFormatEnum;
-    addonValue?: EditableValue<string>;
+    addonValue: EditableValue<string>;
     addonSpacing: number;
     displayValue: boolean;
     codeWidth: number;