Skip to content

Commit c7c502b

Browse files
yordan-styordan-st
committed
fix: improve property hiding logic
1 parent 1b48634 commit c7c502b

File tree

5 files changed

+186
-105
lines changed

5 files changed

+186
-105
lines changed

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

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,25 +35,44 @@ export function getProperties(values: BarcodeGeneratorPreviewProps, defaultPrope
3535
}
3636

3737
if (
38-
values.customCodeFormat !== "EAN13" &&
39-
values.customCodeFormat !== "EAN8" &&
40-
values.customCodeFormat !== "UPC"
38+
values.codeFormat === "QRCode" ||
39+
values.codeFormat === "CODE128" ||
40+
(values.codeFormat === "Custom" &&
41+
values.customCodeFormat !== "EAN13" &&
42+
values.customCodeFormat !== "EAN8" &&
43+
values.customCodeFormat !== "UPC")
4144
) {
4245
hidePropertyIn(defaultProperties, values, "enableFlat");
4346
}
4447

45-
if (values.customCodeFormat !== "EAN13") {
48+
if (
49+
values.codeFormat === "QRCode" ||
50+
values.codeFormat === "CODE128" ||
51+
(values.codeFormat === "Custom" && values.customCodeFormat !== "EAN13")
52+
) {
4653
hidePropertyIn(defaultProperties, values, "lastChar");
4754
}
4855

49-
if (values.customCodeFormat !== "EAN13" && values.customCodeFormat !== "EAN8") {
56+
if (
57+
values.codeFormat === "QRCode" ||
58+
values.codeFormat === "CODE128" ||
59+
(values.codeFormat === "Custom" && values.customCodeFormat !== "EAN13" && values.customCodeFormat !== "EAN8")
60+
) {
5061
hidePropertiesIn(defaultProperties, values, ["addonFormat", "addonValue", "addonSpacing"]);
5162
}
52-
if (values.addonFormat !== "EAN5" && values.addonFormat !== "EAN2") {
63+
if (
64+
values.codeFormat === "QRCode" ||
65+
values.codeFormat === "CODE128" ||
66+
(values.codeFormat === "Custom" && values.addonFormat !== "EAN5" && values.addonFormat !== "EAN2")
67+
) {
5368
hidePropertiesIn(defaultProperties, values, ["addonValue", "addonSpacing"]);
5469
}
5570

56-
if (values.customCodeFormat !== "CODE39") {
71+
if (
72+
values.codeFormat === "QRCode" ||
73+
values.codeFormat === "CODE128" ||
74+
(values.codeFormat === "Custom" && values.customCodeFormat !== "CODE39")
75+
) {
5776
hidePropertyIn(defaultProperties, values, "enableMod43");
5877
}
5978

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

Lines changed: 10 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,21 @@
1-
import { ReactElement, useRef } from "react";
1+
import { ReactElement } from "react";
22
import { BarcodeGeneratorContainerProps } from "../typings/BarcodeGeneratorProps";
3-
import { useDownload } from "./hooks/useDownload";
4-
import { CodeRenderer } from "./components/CodeRenderer";
3+
import { barcodeConfig } from "./config/Barcode.config";
4+
import { BarcodeConfigProvider } from "./config/BarcodeConfigContext";
5+
import { BarcodeGeneratorInner } from "./components/BarcodeGeneratorInner";
56

67
import "./ui/BarcodeGenerator.scss";
78

8-
export default function BarcodeGenerator({
9-
codeValue,
10-
codeWidth,
11-
codeHeight,
12-
codeFormat,
13-
customCodeFormat,
14-
codeMargin,
15-
displayValue,
16-
enableEan128,
17-
enableFlat,
18-
lastChar,
19-
enableMod43,
20-
addonValue,
21-
addonFormat,
22-
addonSpacing,
23-
qrSize,
24-
qrMargin,
25-
qrTitle,
26-
qrLevel,
27-
qrImageSrc,
28-
qrImageX,
29-
qrImageY,
30-
qrImageHeight,
31-
qrImageWidth,
32-
qrImageOpacity,
33-
qrImageExcavate,
34-
tabIndex,
35-
allowDownload
36-
}: BarcodeGeneratorContainerProps): ReactElement {
37-
const svgRef = useRef<SVGSVGElement>(null);
38-
const qrContainerRef = useRef<HTMLDivElement>(null);
9+
export default function BarcodeGenerator(props: BarcodeGeneratorContainerProps): ReactElement {
10+
const config = barcodeConfig(props);
3911

40-
const value = codeValue?.status === "available" ? codeValue.value : "";
41-
const width = codeWidth ?? 128;
42-
const height = codeHeight ?? 128;
43-
const format = codeFormat === "Custom" ? (customCodeFormat ?? "CODE128") : (codeFormat ?? "CODE128");
44-
const margin = codeMargin ?? 2;
45-
const showValue = displayValue ?? false;
46-
const download = allowDownload ?? false;
47-
const qrsize = qrSize ?? 128;
48-
const qrmargin = qrMargin ?? 2;
49-
const qrtitle = qrTitle ?? "";
50-
const qrlevel = qrLevel ?? "L";
51-
const qrimageSrc = qrImageSrc?.status === "available" && qrImageSrc.value ? qrImageSrc.value.uri : "";
52-
const qrimageX = qrImageX === 0 ? undefined : qrImageX;
53-
const qrimageY = qrImageY === 0 ? undefined : qrImageY;
54-
const qrimageHeight = qrImageHeight ?? 24;
55-
const qrimageWidth = qrImageWidth ?? 24;
56-
const qrimageOpacity = qrImageOpacity?.toNumber() ?? 1;
57-
const qrimageExcavate = qrImageExcavate ?? true;
58-
const supportsEan128 = enableEan128 ?? false;
59-
const supportsFlat = enableFlat ?? false;
60-
const lastCharacter = lastChar ?? "";
61-
const supportsMod43 = enableMod43 ?? false;
62-
const processedAddonValue = addonValue?.status === "available" ? addonValue.value : "";
63-
const processedAddonFormat = addonFormat ?? "EAN5";
64-
const processedAddonSpacing = addonSpacing ?? 20;
65-
66-
const { downloadSVG } = useDownload({ format, svgRef, qrContainerRef });
67-
68-
if (!value) {
12+
if (!config.value) {
6913
return <span>No barcode value provided</span>;
7014
}
7115

7216
return (
73-
<div className="barcode-generator" tabIndex={tabIndex}>
74-
<CodeRenderer
75-
value={value}
76-
format={format}
77-
width={width}
78-
height={height}
79-
margin={margin}
80-
displayValue={showValue}
81-
enableEan128={supportsEan128}
82-
enableFlat={supportsFlat}
83-
lastChar={lastCharacter}
84-
enableMod43={supportsMod43}
85-
addonValue={processedAddonValue}
86-
addonFormat={processedAddonFormat}
87-
addonSpacing={processedAddonSpacing}
88-
qrsize={qrsize}
89-
qrmargin={qrmargin}
90-
qrlevel={qrlevel}
91-
qrtitle={qrtitle}
92-
qrimageSrc={qrimageSrc}
93-
qrimageX={qrimageX}
94-
qrimageY={qrimageY}
95-
qrimageWidth={qrimageWidth}
96-
qrimageHeight={qrimageHeight}
97-
qrimageOpacity={qrimageOpacity}
98-
qrimageExcavate={qrimageExcavate}
99-
svgRef={svgRef}
100-
qrContainerRef={qrContainerRef}
101-
/>
102-
{download && (
103-
<button type="button" onClick={downloadSVG} className="btn btn-default">
104-
Download {format === "QRCode" ? "QR Code" : "Barcode"}
105-
</button>
106-
)}
107-
</div>
17+
<BarcodeConfigProvider config={config}>
18+
<BarcodeGeneratorInner tabIndex={props.tabIndex} />
19+
</BarcodeConfigProvider>
10820
);
10921
}

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { ReactElement, useRef } from "react";
2+
import { useDownload } from "../hooks/useDownload";
3+
import { CodeRenderer } from "./CodeRenderer";
4+
import { useBarcodeConfig } from "../config/BarcodeConfigContext";
5+
6+
interface BarcodeGeneratorInnerProps {
7+
tabIndex?: number;
8+
}
9+
10+
export function BarcodeGeneratorInner({ tabIndex }: BarcodeGeneratorInnerProps): ReactElement {
11+
const config = useBarcodeConfig();
12+
const svgRef = useRef<SVGSVGElement>(null);
13+
const qrContainerRef = useRef<HTMLDivElement>(null);
14+
15+
const { downloadSVG } = useDownload({ format: config.format, svgRef, qrContainerRef });
16+
17+
return (
18+
<div className="barcode-generator" tabIndex={tabIndex}>
19+
<CodeRenderer
20+
value={config.value}
21+
format={config.format}
22+
width={config.width}
23+
height={config.height}
24+
margin={config.margin}
25+
displayValue={config.displayValue}
26+
enableEan128={config.enableEan128}
27+
enableFlat={config.enableFlat}
28+
lastChar={config.lastChar}
29+
enableMod43={config.enableMod43}
30+
addonValue={config.addonValue}
31+
addonFormat={config.addonFormat}
32+
addonSpacing={config.addonSpacing}
33+
qrsize={config.qrSize}
34+
qrmargin={config.qrMargin}
35+
qrlevel={config.qrLevel}
36+
qrtitle={config.qrTitle}
37+
qrimageSrc={config.qrImageSrc}
38+
qrimageX={config.qrImageX}
39+
qrimageY={config.qrImageY}
40+
qrimageWidth={config.qrImageWidth}
41+
qrimageHeight={config.qrImageHeight}
42+
qrimageOpacity={config.qrImageOpacity}
43+
qrimageExcavate={config.qrImageExcavate}
44+
svgRef={svgRef}
45+
qrContainerRef={qrContainerRef}
46+
/>
47+
{config.allowDownload && (
48+
<button type="button" onClick={downloadSVG} className="btn btn-default">
49+
Download {config.format === "QRCode" ? "QR Code" : "Barcode"}
50+
</button>
51+
)}
52+
</div>
53+
);
54+
}

‎packages/pluggableWidgets/barcode-generator-web/src/config/Barcode.config.ts‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { BarcodeGeneratorContainerProps } from "../../typings/BarcodeGeneratorProps";
2+
3+
/** Configuration for static values that don't change at runtime. */
4+
export interface BarcodeConfig {
5+
// Basic barcode properties
6+
value: string;
7+
width: number;
8+
height: number;
9+
format: string;
10+
margin: number;
11+
displayValue: boolean;
12+
allowDownload: boolean;
13+
14+
// Advanced barcode options
15+
enableEan128: boolean;
16+
enableFlat: boolean;
17+
lastChar: string;
18+
enableMod43: boolean;
19+
addonValue: string;
20+
addonFormat: string;
21+
addonSpacing: number;
22+
23+
// QR Code properties
24+
qrSize: number;
25+
qrMargin: number;
26+
qrTitle: string;
27+
qrLevel: string;
28+
qrImageSrc: string;
29+
qrImageX: number | undefined;
30+
qrImageY: number | undefined;
31+
qrImageHeight: number;
32+
qrImageWidth: number;
33+
qrImageOpacity: number;
34+
qrImageExcavate: boolean;
35+
}
36+
37+
export function barcodeConfig(props: BarcodeGeneratorContainerProps): BarcodeConfig {
38+
const value = props.codeValue?.status === "available" ? (props.codeValue.value ?? "") : "";
39+
const format =
40+
props.codeFormat === "Custom" ? (props.customCodeFormat ?? "CODE128") : (props.codeFormat ?? "CODE128");
41+
42+
return Object.freeze({
43+
// Basic barcode properties
44+
value,
45+
width: props.codeWidth ?? 128,
46+
height: props.codeHeight ?? 128,
47+
format,
48+
margin: props.codeMargin ?? 2,
49+
displayValue: props.displayValue ?? false,
50+
allowDownload: props.allowDownload ?? false,
51+
52+
// Advanced barcode options
53+
enableEan128: props.enableEan128 ?? false,
54+
enableFlat: props.enableFlat ?? false,
55+
lastChar: props.lastChar ?? "",
56+
enableMod43: props.enableMod43 ?? false,
57+
addonValue: props.addonValue?.status === "available" ? (props.addonValue.value ?? "") : "",
58+
addonFormat: props.addonFormat,
59+
addonSpacing: props.addonSpacing ?? 20,
60+
61+
// QR Code properties
62+
qrSize: props.qrSize ?? 128,
63+
qrMargin: props.qrMargin ?? 2,
64+
qrTitle: props.qrTitle ?? "",
65+
qrLevel: props.qrLevel ?? "L",
66+
qrImageSrc:
67+
props.qrImageSrc?.status === "available" && props.qrImageSrc.value ? props.qrImageSrc.value.uri : "",
68+
qrImageX: props.qrImageX === 0 ? undefined : props.qrImageX,
69+
qrImageY: props.qrImageY === 0 ? undefined : props.qrImageY,
70+
qrImageHeight: props.qrImageHeight ?? 24,
71+
qrImageWidth: props.qrImageWidth ?? 24,
72+
qrImageOpacity: props.qrImageOpacity?.toNumber() ?? 1,
73+
qrImageExcavate: props.qrImageExcavate ?? true
74+
});
75+
}

‎packages/pluggableWidgets/barcode-generator-web/src/config/BarcodeConfigContext.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { createContext, ReactNode, useContext } from "react";
2+
import { BarcodeConfig } from "./Barcode.config";
3+
4+
const BarcodeConfigContext = createContext<BarcodeConfig | null>(null);
5+
6+
interface BarcodeConfigProviderProps {
7+
config: BarcodeConfig;
8+
children: ReactNode;
9+
}
10+
11+
export function BarcodeConfigProvider({ config, children }: BarcodeConfigProviderProps): ReactNode {
12+
return <BarcodeConfigContext.Provider value={config}>{children}</BarcodeConfigContext.Provider>;
13+
}
14+
15+
export function useBarcodeConfig(): BarcodeConfig {
16+
const config = useContext(BarcodeConfigContext);
17+
if (!config) {
18+
throw new Error("useBarcodeConfig must be used within a BarcodeConfigProvider");
19+
}
20+
return config;
21+
}

0 commit comments

Comments
 (0)