72 lines
2.7 KiB
TypeScript
72 lines
2.7 KiB
TypeScript
import {BarcodeAttributeSchema} from "../../client";
|
|
import {forwardRef} from "react";
|
|
import styles from "./PrintBarcodeModal.module.css";
|
|
import {Flex, Text} from "@mantine/core";
|
|
import Barcode from "react-barcode";
|
|
|
|
type Props = {
|
|
attributes: BarcodeAttributeSchema[]
|
|
barcode?: string;
|
|
quantity: number;
|
|
additionalField?: string | null;
|
|
}
|
|
type Ref = HTMLDivElement;
|
|
const PrintBarcodeContainer = forwardRef<Ref, Props>(function PrintBarcodeContainer(props: Props, ref) {
|
|
const {attributes, barcode, quantity, additionalField} = props;
|
|
|
|
const MAX_ATTRIBUTES = additionalField ? 5 : 6;
|
|
const MIN_BARCODE_SIZE = 30;
|
|
const MAX_BARCODE_SIZE = 100;
|
|
const STEP = (MAX_BARCODE_SIZE - MIN_BARCODE_SIZE) / MAX_ATTRIBUTES;
|
|
const MAX_ATTRIBUTE_LENGTH = 35;
|
|
|
|
const getBarcodeHeight = () => {
|
|
return MIN_BARCODE_SIZE + (MAX_ATTRIBUTES - attributes.length) * STEP;
|
|
}
|
|
const getAttributeText = (attribute: BarcodeAttributeSchema) => {
|
|
let result = `${attribute.name}: ${attribute.value}`;
|
|
if (result.length > MAX_ATTRIBUTE_LENGTH) {
|
|
result = result.slice(0, MAX_ATTRIBUTE_LENGTH - 1) + ".";
|
|
}
|
|
return result;
|
|
}
|
|
|
|
return (
|
|
<div className={styles['print-only']} ref={ref}>
|
|
{barcode && Array.from({length: quantity}).map((_, index) => (
|
|
<>
|
|
<Flex
|
|
className={styles['barcode-container']}
|
|
key={index}
|
|
justify={"center"}
|
|
direction={"column"}
|
|
>
|
|
<Flex align={"center"} justify={"center"}>
|
|
<Barcode margin={0} height={getBarcodeHeight()} value={barcode}/>
|
|
</Flex>
|
|
{attributes.slice(0, MAX_ATTRIBUTES).map((attr) => (
|
|
<Text
|
|
key={attr.name}
|
|
className={styles['barcode-attribute-text']}
|
|
size={"xs"}
|
|
>
|
|
{getAttributeText(attr)}
|
|
</Text>
|
|
))}
|
|
{props.additionalField && (
|
|
<Text
|
|
className={styles['barcode-attribute-text']}
|
|
size={"xs"}
|
|
>
|
|
{props.additionalField}
|
|
</Text>
|
|
)}
|
|
</Flex>
|
|
</>
|
|
))}
|
|
</div>
|
|
|
|
)
|
|
});
|
|
|
|
export default PrintBarcodeContainer; |