refactor: remove ROTATION constants and simplify rotation handling in PDFPreviewer

Author: pasyukevich

src/PDFPreviewer.tsx

@@ -1,5 +1,5 @@
 import pdfWorkerSource from 'pdfjs-dist/build/pdf.worker.min.mjs';
-import React, {useCallback, useLayoutEffect, useRef, useState} from 'react';
+import React, {useCallback, useLayoutEffect, useRef, useState, memo} from 'react';
 import type {CSSProperties, ReactNode, JSX} from 'react';
 import {times} from 'lodash';
 import {VariableSizeList as List} from 'react-window';
@@ -11,7 +11,7 @@ import type {PDFDocument, PageViewport, RotationDegrees} from './types.js';
 import {pdfPreviewerStyles as styles} from './styles.js';
 import PDFPasswordForm, {type PDFPasswordFormProps} from './PDFPasswordForm.js';
 import PageRenderer from './PageRenderer.js';
-import {PAGE_BORDER, LARGE_SCREEN_SIDE_SPACING, DEFAULT_DOCUMENT_OPTIONS, DEFAULT_EXTERNAL_LINK_TARGET, PDF_PASSWORD_FORM_RESPONSES, ROTATION} from './constants.js';
+import {PAGE_BORDER, LARGE_SCREEN_SIDE_SPACING, DEFAULT_DOCUMENT_OPTIONS, DEFAULT_EXTERNAL_LINK_TARGET, PDF_PASSWORD_FORM_RESPONSES} from './constants.js';
 import {setListAttributes} from './helpers.js';
 
 type Props = {
@@ -53,7 +53,7 @@ function PDFPreviewer({
     contentContainerStyle,
     shouldShowErrorComponent = true,
     onLoadError,
-    rotation = ROTATION.DEG_0,
+    rotation = 0,
 }: Props): JSX.Element {
     const [pageViewports, setPageViewports] = useState<PageViewport[]>([]);
     const [numPages, setNumPages] = useState(0);
@@ -119,7 +119,7 @@ function PDFPreviewer({
             const {width: originalWidth, height: originalHeight} = pageViewports[pageIndex];
 
             // Swap dimensions when rotated 90 or 270 degrees
-            const isRotated90or270 = rotation === ROTATION.DEG_90 || rotation === ROTATION.DEG_270;
+            const isRotated90or270 = rotation === 90 || rotation === 270;
             const pageViewportWidth = isRotated90or270 ? originalHeight : originalWidth;
             const pageViewportHeight = isRotated90or270 ? originalWidth : originalHeight;
 
@@ -289,4 +289,4 @@ function PDFPreviewer({
 
 PDFPreviewer.displayName = 'PDFPreviewer';
 
-export default PDFPreviewer;
+export default memo(PDFPreviewer);

src/constants.ts

@@ -33,16 +33,4 @@ const PDF_PASSWORD_FORM_RESPONSES = {
     INCORRECT_PASSWORD: 2,
 };
 
-/**
- * Valid rotation angles for PDF pages, in degrees clockwise.
- */
-const ROTATION = {
-    DEG_0: 0,
-    DEG_90: 90,
-    DEG_180: 180,
-    DEG_270: 270,
-} as const;
-
-const ROTATION_DEGREES_STEPS = [ROTATION.DEG_0, ROTATION.DEG_90, ROTATION.DEG_180, ROTATION.DEG_270] as const;
-
-export {PAGE_BORDER, LARGE_SCREEN_SIDE_SPACING, DEFAULT_DOCUMENT_OPTIONS, DEFAULT_EXTERNAL_LINK_TARGET, PDF_PASSWORD_FORM_RESPONSES, ROTATION, ROTATION_DEGREES_STEPS};
+export {PAGE_BORDER, LARGE_SCREEN_SIDE_SPACING, DEFAULT_DOCUMENT_OPTIONS, DEFAULT_EXTERNAL_LINK_TARGET, PDF_PASSWORD_FORM_RESPONSES};

src/index.ts

@@ -1,10 +1,9 @@
 import PDFPreviewer from './PDFPreviewer.js';
-import {ROTATION, ROTATION_DEGREES_STEPS} from './constants.js';
 import type {RotationDegrees} from './types.js';
 
 const PACKAGE_NAME = 'react-fast-pdf';
 
-export {PDFPreviewer, ROTATION, ROTATION_DEGREES_STEPS};
+export {PDFPreviewer};
 export type {RotationDegrees};
 
 export default {

src/types.ts

@@ -1,5 +1,4 @@
 import {CSSProperties} from 'react';
-import {ROTATION} from './constants.js';
 
 type Page = {
     getViewport: ({scale}: {scale: number}) => PageViewport;
@@ -22,6 +21,6 @@ type ComponentStyles = {
 /**
  * Valid rotation angles for PDF pages (in degrees clockwise)
  */
-type RotationDegrees = typeof ROTATION.DEG_0 | typeof ROTATION.DEG_90 | typeof ROTATION.DEG_180 | typeof ROTATION.DEG_270;
+type RotationDegrees = 0 | 90 | 180 | 270;
 
 export type {PDFDocument, PageViewport, ComponentStyles, RotationDegrees};