revert to react-to-print 2.*

openmrs · Aug 27, 2024 · 550fd54 · 550fd54
1 parent 168b662
commit 550fd54
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 59 deletions.
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "@hookform/resolvers": "^3.3.1",
     "classnames": "^2.3.2",
     "react-hook-form": "^7.46.2",
-    "react-to-print": "^3.0.0-beta-1",
+    "react-to-print": "^2.14.13",
     "zod": "^3.22.2"
   },
   "devDependencies": {

diff --git a/...ges/esm-patient-banner-app/src/banner-tags/print-identifier-sticker-content.component.tsx b/...ges/esm-patient-banner-app/src/banner-tags/print-identifier-sticker-content.component.tsx
@@ -12,29 +12,9 @@ interface PrintIdentifierStickerContentProps {
 }
 
 const PrintIdentifierStickerContent = forwardRef<HTMLDivElement, PrintIdentifierStickerContentProps>(
-  ({ labels, numberOfLabelColumns, numberOfLabelRowsPerPage, patient }, ref) => {
+  ({ labels, numberOfLabelColumns, numberOfLabelRowsPerPage, patient }) => {
     const { printIdentifierStickerWidth, printIdentifierStickerHeight, printIdentifierStickerPaperSize } =
       useConfig<ConfigObject>();
-    const divRef = useRef<HTMLDivElement>();
-
-    useImperativeHandle(ref, () => divRef.current, []);
-
-    useEffect(() => {
-      if (divRef.current) {
-        const style = divRef.current.style;
-        style.setProperty('--omrs-print-label-paper-size', printIdentifierStickerPaperSize);
-        style.setProperty('--omrs-print-label-colums', numberOfLabelColumns.toString());
-        style.setProperty('--omrs-print-label-rows', numberOfLabelRowsPerPage.toString());
-        style.setProperty('--omrs-print-label-sticker-height', printIdentifierStickerHeight);
-        style.setProperty('--omrs-print-label-sticker-width', printIdentifierStickerWidth);
-      }
-    }, [
-      numberOfLabelColumns,
-      numberOfLabelRowsPerPage,
-      printIdentifierStickerHeight,
-      printIdentifierStickerPaperSize,
-      printIdentifierStickerWidth,
-    ]);
 
     const maxLabelsPerPage = numberOfLabelRowsPerPage * numberOfLabelColumns;
     const pages: Array<typeof labels> = [];
@@ -48,12 +28,30 @@ const PrintIdentifierStickerContent = forwardRef<HTMLDivElement, PrintIdentifier
     }
 
     return (
-      <div ref={divRef} className={styles.printRoot}>
+      <div>
+        <style type="text/css" media="print">
+          {`
+            @page {
+              size: ${printIdentifierStickerPaperSize};
+            }
+            @media print { html, body { height: initial !important; overflow: initial !important; background-color: white; }}
+          `}
+        </style>
         {pages.map((pageLabels, pageIndex) => (
           <div key={pageIndex} className={pageIndex < pages.length - 1 ? styles.pageBreak : ''}>
-            <div className={styles.labelsContainer}>
-              {pageLabels.map((label, index) => (
-                <div key={index} className={styles.printContainer}>
+            <div
+              className={styles.labelsContainer}
+              style={{
+                gridTemplateColumns: `repeat(${numberOfLabelColumns}, 1fr)`,
+                gridTemplateRows: `repeat(${numberOfLabelRowsPerPage}, auto)`,
+              }}
+            >
+              {pageLabels.map((_, index) => (
+                <div
+                  key={index}
+                  className={styles.printContainer}
+                  style={{ height: printIdentifierStickerHeight, width: printIdentifierStickerWidth }}
+                >
                   <IdentifierSticker patient={patient} />
                 </div>
               ))}

diff --git a/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker-content.scss b/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker-content.scss
@@ -2,26 +2,6 @@
 @use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
-.printRoot {
-  @media print {
-    @page {
-      size: var(--omrs-print-label-paper-size, auto);
-    }
-
-    html,
-    body {
-      height: initial !important;
-      overflow: initial !important;
-      background-color: white;
-    }
-  }
-
-  .labelsContainer {
-    grid-template-columns: repeat(var(--omrs-print-label-colums, 1), 1fr);
-    grid-template-rows: repeat(var(--omrs-print-label-rows, 1), auto);
-  }
-}
-
 .printContainer {
   height: var(--omrs-print-label-sticker-height, 11rem);
   width: var(--omrs-print-label-sticker-width, 13rem);

diff --git a/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker.modal.tsx b/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker.modal.tsx
@@ -1,7 +1,7 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { useReactToPrint, type UseReactToPrintOptions } from 'react-to-print';
+import { useReactToPrint } from 'react-to-print';
 import { Button, InlineLoading, ModalBody, ModalFooter, ModalHeader, NumberInput, Stack } from '@carbon/react';
 import { getPatientName, showSnackbar, useConfig, getCoreTranslation } from '@openmrs/esm-framework';
 import { type ConfigObject } from '../config-schema';
@@ -18,6 +18,7 @@ const PrintIdentifierStickerModal: React.FC<PrintIdentifierStickerModalProps> =
   const { t } = useTranslation();
   const { numberOfPatientIdStickers, numberOfPatientIdStickerRowsPerPage, numberOfPatientIdStickerColumns } =
     useConfig<ConfigObject>();
+  const onBeforeGetContentResolve = useRef<() => void | null>(null);
   const contentToPrintRef = useRef<HTMLDivElement | null>(null);
   const [numberOfLabelColumns, setNumberOfLabelColumns] = useState<number>(numberOfPatientIdStickerColumns);
   const [numberOfLabelRowsPerPage, setNumberOfLabelRowsPerPage] = useState<number>(numberOfPatientIdStickerRowsPerPage);
@@ -26,32 +27,51 @@ const PrintIdentifierStickerModal: React.FC<PrintIdentifierStickerModalProps> =
   const headerTitle = t('patientIdentifierSticker', 'Patient identifier sticker');
   const [isPreviewVisible, setIsPreviewVisible] = useState(false);
 
+  useEffect(() => {
+    if (isPrinting && onBeforeGetContentResolve.current) {
+      onBeforeGetContentResolve.current();
+    }
+  }, [isPrinting]);
+
   const labels = Array.from({ length: numberOfLabels });
 
-  const handleBeforePrint = useCallback(() => setIsPrinting(true), []);
+  const handleBeforeGetContent = useCallback(
+    () =>
+      new Promise<void>((resolve) => {
+        if (patient && headerTitle) {
+          onBeforeGetContentResolve.current = resolve;
+          setIsPrinting(true);
+        }
+      }),
+    [headerTitle, patient],
+  );
 
   const handleAfterPrint = useCallback(() => {
+    onBeforeGetContentResolve.current = null;
     setIsPrinting(false);
     closeModal();
   }, [closeModal]);
 
-  const handlePrintError = useCallback<UseReactToPrintOptions['onPrintError']>((errorLocation, error) => {
+  const handlePrintError = useCallback((errorLocation, error) => {
+    onBeforeGetContentResolve.current = null;
+
     showSnackbar({
       isLowContrast: false,
       kind: 'error',
       title: getCoreTranslation('printError', 'Print error'),
       subtitle:
-        getCoreTranslation('printErrorExplainer', 'An error occurred during "{{errorLocation}}": ', { errorLocation }) +
+        getCoreTranslation('printErrorExplainer', 'An error occurred in "{{errorLocation}}": ', { errorLocation }) +
         error,
     });
 
     setIsPrinting(false);
   }, []);
 
   const handlePrint = useReactToPrint({
-    contentRef: contentToPrintRef,
+    content: () => contentToPrintRef.current,
     documentTitle: `${patient ? getPatientName(patient) : ''} - ${headerTitle}`,
     onAfterPrint: handleAfterPrint,
+    onBeforeGetContent: handleBeforeGetContent,
     onPrintError: handlePrintError,
   });
 
@@ -112,7 +132,6 @@ const PrintIdentifierStickerModal: React.FC<PrintIdentifierStickerModalProps> =
                 numberOfLabelColumns={numberOfLabelColumns}
                 numberOfLabelRowsPerPage={numberOfLabelRowsPerPage}
                 patient={patient}
-                ref={contentToPrintRef}
               />
             </div>
           </div>

diff --git a/yarn.lock b/yarn.lock
@@ -4556,7 +4556,7 @@ __metadata:
     react-hook-form: "npm:^7.46.2"
     react-i18next: "npm:^11.18.6"
     react-router-dom: "npm:^6.16.0"
-    react-to-print: "npm:^3.0.0-beta-1"
+    react-to-print: "npm:^2.14.13"
     rxjs: "npm:^7.8.0"
     sass: "npm:^1.54.3"
     swc-loader: "npm:^0.2.3"
@@ -19935,12 +19935,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-to-print@npm:^3.0.0-beta-1":
-  version: 3.0.0-beta-1
-  resolution: "react-to-print@npm:3.0.0-beta-1"
+"react-to-print@npm:^2.14.13":
+  version: 2.14.13
+  resolution: "react-to-print@npm:2.14.13"
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ~19
-  checksum: 10/74211e0887e257b700d1237b6285e69dc9bfd6e0afec3c0c7c0b13e2791948c63e42ccb9da5767a168de82962231f705b458c702fbe881c5b215e86ae4974b32
+    react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+  checksum: 10/cc4e438b5b7e5c67a73ca3d87ff0f1b5a550a7e6c1a1911cded14c9591b286efd82029bd0447e016b0b404f274d546a108e760fd7867e6b73342dba450282a29
   languageName: node
   linkType: hard