Updated client dependencies

client/src/pages/printing/index.tsx

@@ -5,7 +5,7 @@ import { Content } from "antd/es/layout/layout";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import React from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router";
 import SpoolQRCodePrintingDialog from "./spoolQrCodePrintingDialog";
 import SpoolSelectModal from "./spoolSelectModal";
 

client/src/pages/printing/printing.tsx

@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 import { v4 as uuidv4 } from "uuid";
 import { useGetSetting, useSetSetting } from "../../utils/querySettings";
 import { ISpool } from "../spools/model";
@@ -75,7 +76,7 @@ function getTagValue(tag: string, obj: GenericObject): any {
   return value;
 }
 
-function applyNewline(text: string): JSX.Element[] {
+function applyNewline(text: string): ReactElement[] {
   return text.split("\n").map((line, idx, arr) => (
     <span key={idx}>
       {line}
@@ -84,7 +85,7 @@ function applyNewline(text: string): JSX.Element[] {
   ));
 }
 
-function applyTextFormatting(text: string): JSX.Element[] {
+function applyTextFormatting(text: string): ReactElement[] {
   const regex = /\*\*([\w\W]*?)\*\*/g;
   const parts = text.split(regex);
   // Map over the parts and wrap matched text with <b> tags
@@ -96,7 +97,7 @@ function applyTextFormatting(text: string): JSX.Element[] {
   return elements;
 }
 
-export function renderLabelContents(template: string, spool: ISpool): JSX.Element {
+export function renderLabelContents(template: string, spool: ISpool): ReactElement {
   // Find all {tags} in the template string and loop over them
   // let matches = [...template.matchAll(/(?:{(.*?))?{(.*?)}(.*?)(?:}(.*?))?/gs)];
   let matches = [...template.matchAll(/{(?:[^}{]|{[^}{]*})*}/gs)];

client/src/pages/printing/printingDialog.tsx

@@ -15,19 +15,19 @@ import {
   Space,
 } from "antd";
 import * as htmlToImage from "html-to-image";
-import React, { useRef } from "react";
-import ReactToPrint from "react-to-print";
+import React, { ReactElement, useRef } from "react";
+import { useReactToPrint } from "react-to-print";
 import { useSavedState } from "../../utils/saveload";
 import { PrintSettings } from "./printing";
 
 interface PrintingDialogProps {
-  items: JSX.Element[];
+  items: ReactElement[];
   printSettings: PrintSettings;
   setPrintSettings: (setPrintSettings: PrintSettings) => void;
   style?: string;
-  extraSettings?: JSX.Element;
-  extraSettingsStart?: JSX.Element;
-  extraButtons?: JSX.Element;
+  extraSettings?: ReactElement;
+  extraSettingsStart?: ReactElement;
+  extraButtons?: ReactElement;
 }
 
 interface PaperDimensions {
@@ -90,7 +90,8 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
   const paperWidth = paperSize === "custom" ? customPaperSize.width : paperDimensions[paperSize].width;
   const paperHeight = paperSize === "custom" ? customPaperSize.height : paperDimensions[paperSize].height;
 
-  const printRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const reactToPrintFn = useReactToPrint({ contentRef });
 
   const itemWidth = (paperWidth - margin.left - margin.right - spacing.horizontal) / paperColumns - spacing.horizontal;
   const itemHeight = (paperHeight - margin.top - margin.bottom - spacing.vertical) / paperRows - spacing.vertical;
@@ -223,7 +224,7 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
           >
             <div
               className="print-container"
-              ref={printRef}
+              ref={contentRef}
               style={{
                 transform: `scale(${previewScale})`,
                 transformOrigin: "top left",
@@ -817,15 +818,9 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
             <Button type="primary" icon={<FileImageOutlined />} size="large" onClick={saveAsImage}>
               {t("printing.generic.saveAsImage")}
             </Button>
-            <ReactToPrint
-              key="print-button"
-              trigger={() => (
-                <Button type="primary" icon={<PrinterOutlined />} size="large">
-                  {t("printing.generic.print")}
-                </Button>
-              )}
-              content={() => printRef.current}
-            />
+            <Button type="primary" icon={<PrinterOutlined />} size="large" onClick={() => reactToPrintFn()}>
+              {t("printing.generic.print")}
+            </Button>
           </Space>
         </Col>
       </Row>

client/src/pages/printing/qrCodePrintingDialog.tsx

@@ -1,6 +1,7 @@
-import { getBasePath } from "../../utils/url";
 import { useTranslate } from "@refinedev/core";
 import { Col, Form, InputNumber, QRCode, Radio, RadioChangeEvent, Row, Slider, Switch, Typography } from "antd";
+import { ReactElement } from "react";
+import { getBasePath } from "../../utils/url";
 import { QRCodePrintSettings } from "./printing";
 import PrintingDialog from "./printingDialog";
 
@@ -8,7 +9,7 @@ const { Text } = Typography;
 
 interface QRCodeData {
   value: string;
-  label?: JSX.Element;
+  label?: ReactElement;
   errorLevel?: "L" | "M" | "Q" | "H";
 }
 
@@ -16,9 +17,9 @@ interface QRCodePrintingDialogProps {
   items: QRCodeData[];
   printSettings: QRCodePrintSettings;
   setPrintSettings: (setPrintSettings: QRCodePrintSettings) => void;
-  extraSettings?: JSX.Element;
-  extraSettingsStart?: JSX.Element;
-  extraButtons?: JSX.Element;
+  extraSettings?: ReactElement;
+  extraSettingsStart?: ReactElement;
+  extraButtons?: ReactElement;
   baseUrlRoot: string;
   useHTTPUrl: boolean;
   setUseHTTPUrl: (value: boolean) => void;

client/src/pages/printing/spoolSelectModal.tsx

@@ -3,7 +3,7 @@ import { useTable } from "@refinedev/antd";
 import { Button, Checkbox, Col, message, Row, Space, Table } from "antd";
 import { t } from "i18next";
 import { useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { FilteredQueryColumn, SortedColumn, SpoolIconColumn } from "../../components/column";
 import { useSpoolmanFilamentFilter, useSpoolmanMaterials } from "../../components/otherModels";
 import { removeUndefined } from "../../utils/filtering";