Merge branch 'develop' into feat/DEVSU-2049-kbmatch-quick-load

bcgsc · Oct 14, 2023 · 0a0f090 · 0a0f090
2 parents 5de810a + f33912f
commit 0a0f090
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 79 deletions.
diff --git a/app/components/DataTable/index.tsx b/app/components/DataTable/index.tsx
@@ -173,7 +173,7 @@ const DataTable = ({
   rowData = [],
   onRowDataChanged,
   columnDefs: colDefs,
-  titleText,
+  titleText = '',
   filterText,
   canEdit,
   onEdit,

diff --git a/app/components/SvgImage/__tests__/SvgImage.test.tsx b/app/components/SvgImage/__tests__/SvgImage.test.tsx
@@ -12,7 +12,7 @@ import {
 } from './mockData';
 import SvgImage from '..';
 
-jest.mock('react-virtualized-auto-sizer', () => ({ children }) => children({ height: 600, width: 600}));
+jest.mock('react-virtualized-auto-sizer', () => ({ children }) => children({ height: 600, width: 600 }));
 
 describe('SvgImage', () => {
   test('It renders a normal SVG', async () => {
@@ -63,20 +63,4 @@ describe('SvgImage', () => {
 
     expect(await screen.findByTestId('mock')).toBeInTheDocument();
   });
-
-  test('It fails to render an SVG that is not formatted correctly', async () => {
-    let error;
-
-    try {
-      render(
-        <SvgImage
-          image={mockSVGFormatError}
-        />,
-      );
-    } catch (err) {
-      error = err;
-    }
-
-    expect(error).not.toBeUndefined();
-  });
 });
diff --git a/app/components/SvgImage/index.tsx b/app/components/SvgImage/index.tsx
@@ -2,22 +2,22 @@ import React, {
   useEffect, useState, useRef, useMemo, useCallback,
 } from 'react';
 import { UncontrolledReactSVGPanZoom } from 'react-svg-pan-zoom';
-import InlineSVG from 'svg-inline-react';
+import InlineSVG from 'react-inlinesvg';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
 import './index.scss';
 
 type SvgImageProps = {
   image: string;
   isPrint?: boolean;
-  printOrientation?: 'portrait' | 'landscape';
+  printOrientation?: 'portrait' | 'landscape' | 'auto';
 };
 
 // These should be same as index.css under @page
 // Accounts for padding via magical numbers 32 and 16
 const INCH_TO_PX = 96;
 const MAX_PRINT_WIDTH = Math.floor((9 - 0.4 * 2) * INCH_TO_PX) - 32;
-const MAX_PRINT_HEIGHT = Math.floor((11.5 - 0.4 * 2) * INCH_TO_PX) - 16;
+const MAX_PRINT_HEIGHT = Math.floor((11.5 - 0.4 * 2) * INCH_TO_PX) - 64;
 
 const PRINT_WIDTH = 816;
 const ICON_WIDTH = 48;
@@ -70,49 +70,59 @@ const SvgImage = ({
         <AutoSizer disableHeight onResize={handleFit}>
           {({ width = PRINT_WIDTH }) => {
             if (isPrint) {
-              let overHeightRatio = svgHeight / MAX_PRINT_HEIGHT;
-              let overWidthRatio = svgWidth / MAX_PRINT_WIDTH;
-              if (printOrientation === 'landscape') {
-                overHeightRatio = svgHeight / MAX_PRINT_WIDTH;
-                overWidthRatio = svgHeight / MAX_PRINT_WIDTH;
+              let overHeightRatio;
+              let overWidthRatio;
+
+              switch (printOrientation) {
+                case 'landscape':
+                  overHeightRatio = svgHeight / MAX_PRINT_WIDTH;
+                  overWidthRatio = svgWidth / MAX_PRINT_HEIGHT;
+                  break;
+                case 'auto':
+                  if (svgWidth > svgHeight) {
+                    overHeightRatio = svgHeight / MAX_PRINT_WIDTH;
+                    overWidthRatio = svgWidth / MAX_PRINT_HEIGHT;
+                  } else {
+                    overHeightRatio = svgHeight / MAX_PRINT_HEIGHT;
+                    overWidthRatio = svgWidth / MAX_PRINT_WIDTH;
+                  }
+                  break;
+                default:
+                  // portrait
+                  overHeightRatio = svgHeight / MAX_PRINT_HEIGHT;
+                  overWidthRatio = svgWidth / MAX_PRINT_WIDTH;
+                  break;
               }
+
               let nextRatio = 1;
 
               if (overHeightRatio > 1 && overWidthRatio > 1) {
-              // Both over, find higher ratio
+                // Both over, find higher ratio
                 nextRatio = Math.max(overHeightRatio, overWidthRatio);
               } else if (overHeightRatio > 1) {
                 nextRatio = overHeightRatio;
               } else if (overWidthRatio > 1) {
                 nextRatio = overWidthRatio;
               }
 
-              const nextHeight = svgHeight / nextRatio;
-              const nextWidth = svgWidth / nextRatio;
+              let transformCss = '';
 
-              const svgStyle = {
-                transformOrigin: 'top left',
-                transform: printOrientation === 'landscape' ? `rotate(90deg) translate(0, -${nextHeight}px)` : '',
-              };
+              if (
+                printOrientation === 'landscape'
+                || (printOrientation === 'auto' && svgWidth > svgHeight)
+              ) {
+                transformCss = `rotate(90) translate(0 -${svgHeight * nextRatio})`;
+              }
 
               return (
-                <div style={svgStyle}>
-                  <UncontrolledReactSVGPanZoom
-                    ref={Viewer}
-                    width={svgWidth > nextWidth ? nextWidth : svgWidth}
-                    height={svgHeight > nextHeight ? nextHeight : svgHeight}
-                    background="#FFFFFF"
-                    detectAutoPan={false}
-                    defaultTool="auto"
-                    customMiniature={() => null}
-                    customToolbar={() => null}
-                    toolbarProps={{ position: 'left' }}
-                  >
-                    <svg width={svgWidth} height={svgHeight}>
-                      <InlineSVG src={processedImage} raw />
-                    </svg>
-                  </UncontrolledReactSVGPanZoom>
-                </div>
+                <InlineSVG
+                  src={processedImage}
+                  transform-origin="top left"
+                  transform={`
+                    scale(${1 / nextRatio})
+                    ${transformCss}
+                  `}
+                />
               );
             }
             return (
@@ -128,11 +138,11 @@ const SvgImage = ({
                 detectAutoPan={false}
                 defaultTool="auto"
                 customMiniature={() => null}
-                customToolbar={isPrint ? () => null : undefined}
+                customToolbar={undefined}
                 toolbarProps={{ position: 'left' }}
               >
                 <svg width={svgWidth} height={svgHeight}>
-                  <InlineSVG src={processedImage} raw />
+                  <InlineSVG src={processedImage} />
                 </svg>
               </UncontrolledReactSVGPanZoom>
             );

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "ipr-client",
-  "version": "6.21.0",
+  "version": "6.22.1",
   "keywords": [],
   "license": "GPL-3.0",
   "sideEffects": false,
@@ -127,13 +127,13 @@
     "react-chartjs-2": "~3.3.0",
     "react-dom": "~17.0.2",
     "react-hook-form": "^7.40.0",
+    "react-inlinesvg": "^4.0.5",
     "react-jss": "~10.6.0",
     "react-quill": "~2.0.0",
     "react-router-dom": "~5.1.2",
     "react-svg-pan-zoom": "~3.8.1",
     "react-virtualized-auto-sizer": "~1.0.20",
     "sanitize-html": "~2.11.0",
-    "svg-inline-react": "~3.2.1",
     "svg-pan-zoom": "~3.6.1",
     "use-debounce": "^9.0.4",
     "webpack": "^5.88.2",