799 lines
29 KiB
TypeScript
799 lines
29 KiB
TypeScript
import React, { useRef } from "react";
|
|
import {
|
|
Slider,
|
|
Button,
|
|
Select,
|
|
Row,
|
|
Col,
|
|
Form,
|
|
Divider,
|
|
RadioChangeEvent,
|
|
Radio,
|
|
InputNumber,
|
|
Collapse,
|
|
Space,
|
|
} from "antd";
|
|
import ReactToPrint from "react-to-print";
|
|
import { useSavedState } from "../../utils/saveload";
|
|
import { useTranslate } from "@refinedev/core";
|
|
import { PrintSettings } from "./printing";
|
|
import { PrinterOutlined } from "@ant-design/icons";
|
|
|
|
interface PrintingDialogProps {
|
|
items: JSX.Element[];
|
|
printSettings: PrintSettings;
|
|
setPrintSettings: (setPrintSettings: PrintSettings) => void;
|
|
style?: string;
|
|
extraSettings?: JSX.Element;
|
|
extraSettingsStart?: JSX.Element;
|
|
extraButtons?: JSX.Element;
|
|
}
|
|
|
|
interface PaperDimensions {
|
|
width: number;
|
|
height: number;
|
|
}
|
|
|
|
const paperDimensions: { [key: string]: PaperDimensions } = {
|
|
A3: {
|
|
width: 297,
|
|
height: 420,
|
|
},
|
|
A4: {
|
|
width: 210,
|
|
height: 297,
|
|
},
|
|
A5: {
|
|
width: 148,
|
|
height: 210,
|
|
},
|
|
Letter: {
|
|
width: 216,
|
|
height: 279,
|
|
},
|
|
Legal: {
|
|
width: 216,
|
|
height: 356,
|
|
},
|
|
Tabloid: {
|
|
width: 279,
|
|
height: 432,
|
|
},
|
|
};
|
|
|
|
const PrintingDialog: React.FC<PrintingDialogProps> = ({
|
|
items,
|
|
printSettings,
|
|
setPrintSettings,
|
|
style,
|
|
extraSettings,
|
|
extraSettingsStart,
|
|
extraButtons,
|
|
}) => {
|
|
const t = useTranslate();
|
|
|
|
const [collapseState, setCollapseState] = useSavedState<string[]>("print-collapseState", []);
|
|
const [previewScale, setPreviewScale] = useSavedState("print-previewScale", 0.6);
|
|
|
|
const margin = printSettings?.margin || { top: 10, bottom: 10, left: 10, right: 10 };
|
|
const printerMargin = printSettings?.printerMargin || { top: 5, bottom: 5, left: 5, right: 5 };
|
|
const spacing = printSettings?.spacing || { horizontal: 0, vertical: 0 };
|
|
const paperColumns = printSettings?.columns || 3;
|
|
const paperRows = printSettings?.rows || 8;
|
|
const skipItems = printSettings?.skipItems || 0;
|
|
const itemCopies = printSettings?.itemCopies || 1;
|
|
const paperSize = printSettings?.paperSize || "A4";
|
|
const customPaperSize = printSettings?.customPaperSize || { width: 210, height: 297 };
|
|
const borderShowMode = printSettings?.borderShowMode || "grid";
|
|
|
|
const paperWidth = paperSize === "custom" ? customPaperSize.width : paperDimensions[paperSize].width;
|
|
const paperHeight = paperSize === "custom" ? customPaperSize.height : paperDimensions[paperSize].height;
|
|
|
|
const printRef = useRef<HTMLDivElement>(null);
|
|
|
|
const itemWidth = (paperWidth - margin.left - margin.right - spacing.horizontal) / paperColumns - spacing.horizontal;
|
|
const itemHeight = (paperHeight - margin.top - margin.bottom - spacing.vertical) / paperRows - spacing.vertical;
|
|
|
|
const itemsPerRow = paperColumns;
|
|
const itemsPerPage = itemsPerRow * paperRows;
|
|
|
|
const itemsIncludingSkipped = [...Array(skipItems).fill(<></>)];
|
|
for (const item of items) {
|
|
for (let i = 0; i < itemCopies; i += 1) {
|
|
itemsIncludingSkipped.push(item);
|
|
}
|
|
}
|
|
|
|
const pageBlocks = [];
|
|
for (let page_idx = 0; page_idx < itemsIncludingSkipped.length / itemsPerPage; page_idx += 1) {
|
|
pageBlocks.push(itemsIncludingSkipped.slice(page_idx * itemsPerPage, (page_idx + 1) * itemsPerPage));
|
|
}
|
|
|
|
const pages = pageBlocks.map(function (items, pageIdx) {
|
|
const itemDivs = items.map((item, itemIdx) => {
|
|
const isFirstColumn = itemIdx % itemsPerRow === 0;
|
|
const isLastColumn = (itemIdx + 1) % itemsPerRow === 0;
|
|
const isFirstRow = itemIdx < itemsPerRow;
|
|
const isLastRow = itemsPerPage - itemIdx <= itemsPerRow;
|
|
|
|
return (
|
|
<div
|
|
key={itemIdx}
|
|
style={{
|
|
width: `${itemWidth}mm`,
|
|
height: `${itemHeight}mm`,
|
|
border: borderShowMode === "grid" ? "1px solid #000" : "none",
|
|
paddingLeft: isFirstColumn ? `${Math.max(printerMargin.left - margin.left, 0)}mm` : 0,
|
|
paddingRight: isLastColumn ? `${Math.max(printerMargin.right - margin.right, 0)}mm` : 0,
|
|
paddingTop: isFirstRow ? `${Math.max(printerMargin.top - margin.top, 0)}mm` : 0,
|
|
paddingBottom: isLastRow ? `${Math.max(printerMargin.bottom - margin.bottom, 0)}mm` : 0,
|
|
}}
|
|
>
|
|
{item}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<div
|
|
className="print-page"
|
|
key={pageIdx}
|
|
style={{
|
|
width: `${paperWidth}mm`,
|
|
height: `${paperHeight}mm`,
|
|
backgroundColor: "#FFF",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<div
|
|
className="print-page-area"
|
|
style={{
|
|
outline: borderShowMode !== "none" ? "1px solid #000" : "none",
|
|
outlineOffset: "-1px",
|
|
height: `${paperHeight - margin.top - margin.bottom}mm`,
|
|
width: `${paperWidth - margin.left - margin.right}mm`,
|
|
marginTop: `calc(${margin.top}mm - ${borderShowMode !== "none" ? "1px" : "0px"})`,
|
|
marginLeft: `calc(${margin.left}mm - ${borderShowMode !== "none" ? "1px" : "0px"})`,
|
|
marginRight: `calc(${margin.right}mm - ${borderShowMode !== "none" ? "1px" : "0px"})`,
|
|
marginBottom: `calc(${margin.bottom}mm - ${borderShowMode !== "none" ? "1px" : "0px"})`,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
rowGap: `${spacing.vertical}mm`,
|
|
columnGap: `${spacing.horizontal}mm`,
|
|
paddingTop: `${spacing.vertical}mm`,
|
|
paddingLeft: `${spacing.horizontal}mm`,
|
|
}}
|
|
>
|
|
{itemDivs}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<Row gutter={16}>
|
|
<Col span={14}>
|
|
<div
|
|
style={{
|
|
transform: "translateZ(0)",
|
|
overflow: "hidden scroll",
|
|
height: "70vh",
|
|
}}
|
|
>
|
|
<div
|
|
className="print-container"
|
|
ref={printRef}
|
|
style={{
|
|
transform: `scale(${previewScale})`,
|
|
transformOrigin: "top left",
|
|
}}
|
|
>
|
|
<style>
|
|
{`
|
|
@media print {
|
|
html, body {
|
|
height: initial !important;
|
|
overflow: initial !important;
|
|
-webkit-print-color-adjust: exact;
|
|
}
|
|
|
|
@page {
|
|
size: auto;
|
|
margin: 0;
|
|
}
|
|
.print-container {
|
|
transform: scale(1) !important;
|
|
}
|
|
.print-page {
|
|
page-break-before: auto;
|
|
}
|
|
}
|
|
|
|
@media screen {
|
|
.print-page {
|
|
margin-top: 10mm;
|
|
}
|
|
}
|
|
|
|
.print-page {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.print-page * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
${style ?? ""}
|
|
`}
|
|
</style>
|
|
{pages}
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
<Col span={10}>
|
|
<Form labelAlign="left" colon={false} labelWrap={true} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
|
|
{extraSettingsStart}
|
|
<Divider />
|
|
<Form.Item label={t("printing.generic.skipItems")}>
|
|
<Row>
|
|
<Col span={12}>
|
|
<Slider
|
|
min={0}
|
|
max={30}
|
|
value={skipItems}
|
|
onChange={(value) => {
|
|
printSettings.skipItems = value;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<InputNumber
|
|
min={0}
|
|
style={{ margin: "0 16px" }}
|
|
value={skipItems}
|
|
onChange={(value) => {
|
|
printSettings.skipItems = value ?? 1;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</Form.Item>
|
|
<Form.Item label={t("printing.generic.itemCopies")}>
|
|
<Row>
|
|
<Col span={12}>
|
|
<Slider
|
|
min={1}
|
|
max={3}
|
|
value={itemCopies}
|
|
onChange={(value) => {
|
|
printSettings.itemCopies = value;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<InputNumber
|
|
min={1}
|
|
style={{ margin: "0 16px" }}
|
|
value={itemCopies}
|
|
onChange={(value) => {
|
|
printSettings.itemCopies = value ?? 1;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</Form.Item>
|
|
<Form.Item label={t("printing.generic.showBorder")}>
|
|
<Radio.Group
|
|
options={[
|
|
{ label: t("printing.generic.borders.none"), value: "none" },
|
|
{
|
|
label: t("printing.generic.borders.border"),
|
|
value: "border",
|
|
},
|
|
{ label: t("printing.generic.borders.grid"), value: "grid" },
|
|
]}
|
|
onChange={(e: RadioChangeEvent) => {
|
|
printSettings.borderShowMode = e.target.value;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
value={borderShowMode}
|
|
optionType="button"
|
|
buttonStyle="solid"
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item label={t("printing.generic.previewScale")}>
|
|
<Row>
|
|
<Col span={12}>
|
|
<Slider
|
|
min={0.1}
|
|
max={1}
|
|
step={0.01}
|
|
value={previewScale}
|
|
onChange={(value) => {
|
|
setPreviewScale(value);
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<InputNumber
|
|
min={0.1}
|
|
max={1}
|
|
step={0.01}
|
|
style={{ margin: "0 16px" }}
|
|
value={previewScale}
|
|
onChange={(value) => {
|
|
setPreviewScale(value ?? 0.1);
|
|
}}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</Form.Item>
|
|
<Divider />
|
|
<Collapse
|
|
defaultActiveKey={collapseState}
|
|
bordered={false}
|
|
ghost
|
|
onChange={(key) => {
|
|
if (Array.isArray(key)) {
|
|
setCollapseState(key);
|
|
}
|
|
}}
|
|
>
|
|
<Collapse.Panel header={t("printing.generic.contentSettings")} key="1">
|
|
{extraSettings}
|
|
</Collapse.Panel>
|
|
<Collapse.Panel header={t("printing.generic.layoutSettings")} key="2">
|
|
{t("printing.generic.description")}
|
|
<Divider />
|
|
<Form.Item label={t("printing.generic.paperSize")}>
|
|
<Select
|
|
value={paperSize}
|
|
onChange={(value) => {
|
|
printSettings.paperSize = value;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
>
|
|
{Object.keys(paperDimensions).map((key) => (
|
|
<Select.Option key={key} value={key}>
|
|
{key}
|
|
</Select.Option>
|
|
))}
|
|
<Select.Option value="custom">{t("printing.generic.customSize")}</Select.Option>
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item label={t("printing.generic.dimensions")} hidden={paperSize !== "custom"}>
|
|
<Row align="middle">
|
|
<Col span={11}>
|
|
<InputNumber
|
|
value={customPaperSize.width}
|
|
min={0.1}
|
|
addonAfter="mm"
|
|
onChange={(value) => {
|
|
customPaperSize.width = value ?? 0;
|
|
printSettings.customPaperSize = customPaperSize;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={2} style={{ textAlign: "center" }}>
|
|
x
|
|
</Col>
|
|
<Col span={11}>
|
|
<InputNumber
|
|
value={customPaperSize.height}
|
|
min={0.1}
|
|
addonAfter="mm"
|
|
onChange={(value) => {
|
|
customPaperSize.height = value ?? 0;
|
|
printSettings.customPaperSize = customPaperSize;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</Form.Item>
|
|
<Form.Item label={t("printing.generic.columns")}>
|
|
<Row>
|
|
<Col span={12}>
|
|
<Slider
|
|
min={1}
|
|
max={5}
|
|
value={paperColumns}
|
|
onChange={(value) => {
|
|
printSettings.columns = value;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<InputNumber
|
|
min={1}
|
|
style={{ margin: "0 16px" }}
|
|
value={paperColumns}
|
|
onChange={(value) => {
|
|
printSettings.columns = value ?? 1;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</Form.Item>
|
|
<Form.Item label={t("printing.generic.rows")}>
|
|
<Row>
|
|
<Col span={12}>
|
|
<Slider
|
|
min={1}
|
|
max={15}
|
|
value={paperRows}
|
|
onChange={(value) => {
|
|
printSettings.rows = value;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<InputNumber
|
|
min={1}
|
|
style={{ margin: "0 16px" }}
|
|
value={paperRows}
|
|
onChange={(value) => {
|
|
printSettings.rows = value ?? 1;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</Form.Item>
|
|
<Divider />
|
|
<p>{t("printing.generic.helpMargin")}</p>
|
|
<Form.Item label={t("printing.generic.marginLeft")}>
|
|
<Row>
|
|
<Col span={12}>
|
|
<Slider
|
|
min={-20}
|
|
max={50}
|
|
step={0.1}
|
|
tooltip={{ formatter: (value) => `${value} mm` }}
|
|
value={margin.left}
|
|
onChange={(value) => {
|
|
margin.left = value;
|
|
printSettings.margin = margin;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<InputNumber
|
|
step={0.1}
|
|
style={{ margin: "0 16px" }}
|
|
value={margin.left}
|
|
addonAfter="mm"
|
|
onChange={(value) => {
|
|
margin.left = value ?? 0;
|
|
printSettings.margin = margin;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</Form.Item>
|
|
<Form.Item label={t("printing.generic.marginTop")}>
|
|
<Row>
|
|
<Col span={12}>
|
|
<Slider
|
|
min={-20}
|
|
max={50}
|
|
step={0.1}
|
|
tooltip={{ formatter: (value) => `${value} mm` }}
|
|
value={margin.top}
|
|
onChange={(value) => {
|
|
margin.top = value;
|
|
printSettings.margin = margin;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<InputNumber
|
|
step={0.1}
|
|
style={{ margin: "0 16px" }}
|
|
value={margin.top}
|
|
addonAfter="mm"
|
|
onChange={(value) => {
|
|
margin.top = value ?? 0;
|
|
printSettings.margin = margin;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</Form.Item>
|
|
<Form.Item label={t("printing.generic.marginRight")}>
|
|
<Row>
|
|
<Col span={12}>
|
|
<Slider
|
|
min={-20}
|
|
max={50}
|
|
step={0.1}
|
|
tooltip={{ formatter: (value) => `${value} mm` }}
|
|
value={margin.right}
|
|
onChange={(value) => {
|
|
margin.right = value;
|
|
printSettings.margin = margin;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<InputNumber
|
|
step={0.1}
|
|
style={{ margin: "0 16px" }}
|
|
value={margin.right}
|
|
addonAfter="mm"
|
|
onChange={(value) => {
|
|
margin.right = value ?? 0;
|
|
printSettings.margin = margin;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</Form.Item>
|
|
<Form.Item label={t("printing.generic.marginBottom")}>
|
|
<Row>
|
|
<Col span={12}>
|
|
<Slider
|
|
min={-20}
|
|
max={50}
|
|
step={0.1}
|
|
tooltip={{ formatter: (value) => `${value} mm` }}
|
|
value={margin.bottom}
|
|
onChange={(value) => {
|
|
margin.bottom = value;
|
|
printSettings.margin = margin;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<InputNumber
|
|
step={0.1}
|
|
style={{ margin: "0 16px" }}
|
|
value={margin.bottom}
|
|
addonAfter="mm"
|
|
onChange={(value) => {
|
|
margin.bottom = value ?? 0;
|
|
printSettings.margin = margin;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</Form.Item>
|
|
<Divider />
|
|
<p>{t("printing.generic.helpPrinterMargin")}</p>
|
|
<Form.Item label={t("printing.generic.printerMarginLeft")}>
|
|
<Row>
|
|
<Col span={12}>
|
|
<Slider
|
|
min={0}
|
|
max={50}
|
|
step={0.1}
|
|
tooltip={{ formatter: (value) => `${value} mm` }}
|
|
value={printerMargin.left}
|
|
onChange={(value) => {
|
|
printerMargin.left = value;
|
|
printSettings.printerMargin = printerMargin;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<InputNumber
|
|
step={0.1}
|
|
style={{ margin: "0 16px" }}
|
|
value={printerMargin.left}
|
|
addonAfter="mm"
|
|
onChange={(value) => {
|
|
printerMargin.left = value ?? 0;
|
|
printSettings.printerMargin = printerMargin;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</Form.Item>
|
|
<Form.Item label={t("printing.generic.printerMarginTop")}>
|
|
<Row>
|
|
<Col span={12}>
|
|
<Slider
|
|
min={0}
|
|
max={50}
|
|
step={0.1}
|
|
tooltip={{ formatter: (value) => `${value} mm` }}
|
|
value={printerMargin.top}
|
|
onChange={(value) => {
|
|
printerMargin.top = value;
|
|
printSettings.printerMargin = printerMargin;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<InputNumber
|
|
step={0.1}
|
|
style={{ margin: "0 16px" }}
|
|
value={printerMargin.top}
|
|
addonAfter="mm"
|
|
onChange={(value) => {
|
|
printerMargin.top = value ?? 0;
|
|
printSettings.printerMargin = printerMargin;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</Form.Item>
|
|
<Form.Item label={t("printing.generic.printerMarginRight")}>
|
|
<Row>
|
|
<Col span={12}>
|
|
<Slider
|
|
min={0}
|
|
max={50}
|
|
step={0.1}
|
|
tooltip={{ formatter: (value) => `${value} mm` }}
|
|
value={printerMargin.right}
|
|
onChange={(value) => {
|
|
printerMargin.right = value;
|
|
printSettings.printerMargin = printerMargin;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<InputNumber
|
|
step={0.1}
|
|
style={{ margin: "0 16px" }}
|
|
value={printerMargin.right}
|
|
addonAfter="mm"
|
|
onChange={(value) => {
|
|
printerMargin.right = value ?? 0;
|
|
printSettings.printerMargin = printerMargin;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</Form.Item>
|
|
<Form.Item label={t("printing.generic.printerMarginBottom")}>
|
|
<Row>
|
|
<Col span={12}>
|
|
<Slider
|
|
min={0}
|
|
max={50}
|
|
step={0.1}
|
|
tooltip={{ formatter: (value) => `${value} mm` }}
|
|
value={printerMargin.bottom}
|
|
onChange={(value) => {
|
|
printerMargin.bottom = value;
|
|
printSettings.printerMargin = printerMargin;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<InputNumber
|
|
step={0.1}
|
|
style={{ margin: "0 16px" }}
|
|
value={printerMargin.bottom}
|
|
addonAfter="mm"
|
|
onChange={(value) => {
|
|
printerMargin.bottom = value ?? 0;
|
|
printSettings.printerMargin = printerMargin;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</Form.Item>
|
|
<Divider />
|
|
<Form.Item label={t("printing.generic.horizontalSpacing")}>
|
|
<Row>
|
|
<Col span={12}>
|
|
<Slider
|
|
min={0}
|
|
max={20}
|
|
step={0.1}
|
|
tooltip={{ formatter: (value) => `${value} mm` }}
|
|
value={spacing.horizontal}
|
|
onChange={(value) => {
|
|
spacing.horizontal = value;
|
|
printSettings.spacing = spacing;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<InputNumber
|
|
step={0.1}
|
|
style={{ margin: "0 16px" }}
|
|
value={spacing.horizontal}
|
|
addonAfter="mm"
|
|
onChange={(value) => {
|
|
spacing.horizontal = value ?? 0;
|
|
printSettings.spacing = spacing;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</Form.Item>
|
|
<Form.Item label={t("printing.generic.verticalSpacing")}>
|
|
<Row>
|
|
<Col span={12}>
|
|
<Slider
|
|
min={0}
|
|
max={20}
|
|
step={0.1}
|
|
tooltip={{ formatter: (value) => `${value} mm` }}
|
|
value={spacing.vertical}
|
|
onChange={(value) => {
|
|
spacing.vertical = value;
|
|
printSettings.spacing = spacing;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<InputNumber
|
|
step={0.1}
|
|
style={{ margin: "0 16px" }}
|
|
value={spacing.vertical}
|
|
addonAfter="mm"
|
|
onChange={(value) => {
|
|
spacing.vertical = value ?? 0;
|
|
printSettings.spacing = spacing;
|
|
setPrintSettings(printSettings);
|
|
}}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</Form.Item>
|
|
</Collapse.Panel>
|
|
</Collapse>
|
|
</Form>
|
|
</Col>
|
|
</Row>
|
|
<Row justify={"end"}>
|
|
<Col>
|
|
<Space>
|
|
{extraButtons}
|
|
<ReactToPrint
|
|
key="print-button"
|
|
trigger={() => (
|
|
<Button type="primary" icon={<PrinterOutlined />} size="large">
|
|
{t("printing.generic.print")}
|
|
</Button>
|
|
)}
|
|
content={() => printRef.current}
|
|
/>
|
|
</Space>
|
|
</Col>
|
|
</Row>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default PrintingDialog;
|