130 lines
3.9 KiB
TypeScript
130 lines
3.9 KiB
TypeScript
import { Col, Form, InputNumber, QRCode, Row, Slider, Switch } from "antd";
|
|
import { useSavedState } from "../../utils/saveload";
|
|
import PrintingDialog from "./printingDialog";
|
|
import { useTranslate } from "@refinedev/core";
|
|
|
|
interface QRCodeData {
|
|
value: string;
|
|
label?: JSX.Element;
|
|
errorLevel?: "L" | "M" | "Q" | "H";
|
|
}
|
|
|
|
interface QRCodePrintingDialogProps {
|
|
visible: boolean;
|
|
items: QRCodeData[];
|
|
onCancel: () => void;
|
|
extraSettings?: JSX.Element;
|
|
}
|
|
|
|
const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({ visible, items, onCancel, extraSettings }) => {
|
|
const t = useTranslate();
|
|
|
|
const [showContent, setShowContent] = useSavedState("print-showContent", true);
|
|
const [textSize, setTextSize] = useSavedState("print-textSize", 3);
|
|
const [showSpoolmanIcon, setShowSpoolmanIcon] = useSavedState("print-showSpoolmanIcon", true);
|
|
|
|
const elements = items.map((item) => {
|
|
return (
|
|
<div className="print-qrcode-item">
|
|
<div className="print-qrcode-container">
|
|
<QRCode
|
|
className="print-qrcode"
|
|
icon={showSpoolmanIcon ? "/favicon.svg" : undefined}
|
|
value={item.value}
|
|
errorLevel={item.errorLevel}
|
|
type="svg"
|
|
color="#000"
|
|
/>
|
|
</div>
|
|
{showContent && <div className="print-qrcode-title">{item.label ?? item.value}</div>}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<PrintingDialog
|
|
visible={visible}
|
|
title={t("printing.qrcode.title")}
|
|
items={elements}
|
|
extraSettings={
|
|
<>
|
|
<Form.Item label={t("printing.qrcode.showContent")}>
|
|
<Switch checked={showContent} onChange={(checked) => setShowContent(checked)} />
|
|
</Form.Item>
|
|
<Form.Item label={t("printing.qrcode.textSize")}>
|
|
<Row>
|
|
<Col span={12}>
|
|
<Slider
|
|
disabled={!showContent}
|
|
tooltip={{ formatter: (value) => `${value} mm` }}
|
|
min={2}
|
|
max={7}
|
|
value={textSize}
|
|
step={0.1}
|
|
onChange={(value) => {
|
|
setTextSize(value);
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<InputNumber
|
|
disabled={!showContent}
|
|
min={0.01}
|
|
step={0.1}
|
|
style={{ margin: "0 16px" }}
|
|
value={textSize}
|
|
addonAfter="mm"
|
|
onChange={(value) => {
|
|
setTextSize(value ?? 5);
|
|
}}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</Form.Item>
|
|
<Form.Item label={t("printing.qrcode.showSpoolmanIcon")}>
|
|
<Switch checked={showSpoolmanIcon} onChange={(checked) => setShowSpoolmanIcon(checked)} />
|
|
</Form.Item>
|
|
{extraSettings}
|
|
</>
|
|
}
|
|
style={`
|
|
.print-page .print-qrcode-item {
|
|
display: flex;
|
|
width: 100%;
|
|
max-height: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.print-page .print-qrcode-container {
|
|
max-width: ${showContent ? "50%" : "100%"};
|
|
display: flex;
|
|
}
|
|
|
|
.print-page .print-qrcode {
|
|
width: auto !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
.print-page .print-qrcode-title {
|
|
flex: 1 1 auto;
|
|
font-size: ${textSize}mm;
|
|
color: #000;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.print-page canvas, .print-page svg {
|
|
/* display: block; */
|
|
object-fit: contain;
|
|
height: 100% !important;
|
|
width: 100% !important;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
}
|
|
`}
|
|
onCancel={onCancel}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default QRCodePrintingDialog;
|