Adds support for 🔍 Zoom In & Out for 🖨️ Print Preview component

src/CAREUI/interactive/Zoom.tsx

@@ -0,0 +1,97 @@
+import { createContext, ReactNode, useContext, useState } from "react";
+import ButtonV2 from "../../Components/Common/components/ButtonV2";
+import CareIcon from "../icons/CareIcon";
+
+type ProviderValue = {
+  scale: number;
+  zoomIn: () => void;
+  zoomOut: () => void;
+};
+
+const ZoomContext = createContext<ProviderValue | null>(null);
+
+type Props = {
+  initialScale?: number;
+  scaleRatio?: number;
+  children: ReactNode;
+};
+
+export const ZoomProvider = ({
+  initialScale = 1,
+  scaleRatio = 1.25,
+  children,
+}: Props) => {
+  const [scale, setScale] = useState(initialScale);
+
+  return (
+    <ZoomContext.Provider
+      value={{
+        scale,
+        zoomIn: () => setScale((scale) => scale * scaleRatio),
+        zoomOut: () => setScale((scale) => scale / scaleRatio),
+      }}
+    >
+      {children}
+    </ZoomContext.Provider>
+  );
+};
+
+export const ZoomTransform = (props: {
+  children: ReactNode;
+  className?: string;
+}) => {
+  const ctx = useContext(ZoomContext);
+
+  if (ctx == null) {
+    throw new Error("Component must be used with ZoomProvider");
+  }
+
+  return (
+    <div
+      className={props.className}
+      style={{
+        transform: `scale(${ctx.scale})`,
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export const ZoomControls = (props: { disabled?: boolean }) => {
+  const ctx = useContext(ZoomContext);
+
+  if (ctx == null) {
+    throw new Error("Component must be used with ZoomProvider");
+  }
+
+  return (
+    <div className="absolute bottom-8 right-8 flex flex-col items-center justify-center gap-1 rounded-full border border-secondary-400 bg-white p-0.5 shadow-lg md:flex-row-reverse md:gap-2">
+      <ButtonV2
+        disabled={props.disabled}
+        circle
+        variant="secondary"
+        size="small"
+        shadow={false}
+        className="p-2.5"
+        onClick={ctx.zoomIn}
+      >
+        <CareIcon icon="l-search-plus" className="text-lg" />
+      </ButtonV2>
+      <span className="text-sm font-semibold text-secondary-800">
+        {Math.round(ctx.scale * 100)}%
+      </span>
+      <ButtonV2
+        disabled={props.disabled}
+        circle
+        variant="secondary"
+        size="small"
+        shadow={false}
+        className="p-2.5"
+        onClick={ctx.zoomOut}
+      >
+        <CareIcon icon="l-search-minus" className="text-lg" />
+      </ButtonV2>
+    </div>
+  );
+};

src/CAREUI/misc/PrintPreview.tsx

@@ -3,6 +3,9 @@ import ButtonV2 from "../../Components/Common/components/ButtonV2";
 import CareIcon from "../icons/CareIcon";
 import { classNames } from "../../Utils/utils";
 import Page from "../../Components/Common/components/Page";
+import useBreakpoints from "../../Common/hooks/useBreakpoints";
+import { useTranslation } from "react-i18next";
+import { ZoomControls, ZoomProvider, ZoomTransform } from "../interactive/Zoom";
 
 type Props = {
   children: ReactNode;
@@ -12,24 +15,31 @@ type Props = {
 };
 
 export default function PrintPreview(props: Props) {
+  const normalScale = useBreakpoints({ default: 0.44, md: 1 });
+  const { t } = useTranslation();
+
   return (
     <Page title={props.title}>
       <div className="mx-auto my-8 w-[50rem]">
-        <div className="top-0 z-20 flex justify-end gap-2 bg-secondary-100 px-2 py-4 xl:absolute xl:right-6 xl:top-8">
-          <ButtonV2 disabled={props.disabled} onClick={() => window.print()}>
+        <div className="top-0 z-20 flex gap-2 bg-secondary-100 px-2 py-4 xl:absolute xl:right-6 xl:top-8 xl:justify-end">
+          <ButtonV2 disabled={props.disabled} onClick={print}>
             <CareIcon icon="l-print" className="text-lg" />
-            Print
+            {t("print")}
           </ButtonV2>
         </div>
 
-        <div className="bg-white p-10 text-sm shadow-2xl transition-all duration-200 ease-in-out">
-          <div
-            id="section-to-print"
-            className={classNames("w-full", props.className)}
-          >
-            {props.children}
-          </div>
-        </div>
+        <ZoomProvider initialScale={normalScale}>
+          <ZoomTransform className="origin-top-left bg-white p-10 text-sm shadow-2xl transition-all duration-200 ease-in-out lg:origin-top print:transform-none">
+            <div
+              id="section-to-print"
+              className={classNames("w-full", props.className)}
+            >
+              {props.children}
+            </div>
+          </ZoomTransform>
+
+          <ZoomControls disabled={props.disabled} />
+        </ZoomProvider>
       </div>
     </Page>
   );

src/Locale/en/Common.json

@@ -66,6 +66,7 @@
   "contact_person_number": "Contact person number",
   "referral_letter": "Referral Letter",
   "close": "Close",
+  "print": "Print",
   "print_referral_letter": "Print Referral Letter",
   "date_of_positive_covid_19_swab": "Date of Positive Covid 19 Swab",
   "patient_no": "OP/IP No",
@@ -201,4 +202,4 @@
   "oxygen_information": "Oxygen Information",
   "deleted_successfully": "{{name}} deleted successfully",
   "delete_item": "Delete {{name}}"
-}
+}