feat: Initial clean release of CHM

packages/pdf-viewer/FullViewer.tsx

@@ -0,0 +1,127 @@
+import { useRef, useState, useCallback } from 'react';
+import * as React from 'react';
+import usePdfDocument from './hooks/usePdfDocument';
+import VerticalPages from './VerticalPages';
+import MessageService from './messageService';
+import { DownloadButton, PrintButton, OpenLinkButton, CloseButton } from './ui/IconButtons';
+import ZoomControls from './ui/ZoomControls';
+import styled from 'styled-components';
+import GotoInput from './ui/GotoPage';
+
+require('./fullScreen.css');
+
+const TitleWrapper = styled.div`
+	font-size: 0.7rem;
+	font-weight: 400;
+	display: flex;
+	align-items: start;
+	flex-direction: column;
+	min-width: 10rem;
+	max-width: 18rem;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	color: var(--secondary);
+	padding: 0.2rem 0.6rem;
+	height: 100%;
+	width: 100%;
+	justify-content: center;
+`;
+
+const Title = styled.div`
+	font-size: 0.9rem;
+	font-weight: bold;
+	margin-bottom: 0.2rem;
+	color: var(--primary);
+	overflow: hidden;
+`;
+
+
+export interface FullViewerProps {
+	pdfPath: string;
+	isDarkTheme: boolean;
+	messageService: MessageService;
+	startPage: number;
+	title: string;
+}
+
+export default function FullViewer(props: FullViewerProps) {
+	const pdfDocument = usePdfDocument(props.pdfPath);
+	const [zoom, setZoom] = useState<number>(1);
+	const [startPage, setStartPage] = useState<number>(props.startPage || 1);
+	const [selectedPage, setSelectedPage] = useState<number>(startPage);
+	const mainViewerRef = useRef<HTMLDivElement>(null);
+	const thumbnailRef = useRef<HTMLDivElement>(null);
+
+	const onActivePageChange = useCallback((pageNo: number) => {
+		setSelectedPage(pageNo);
+	}, []);
+
+	const goToPage = useCallback((pageNo: number) => {
+		if (pageNo < 1 || pageNo > pdfDocument.pageCount || pageNo === selectedPage) return;
+		setSelectedPage(pageNo);
+		setStartPage(pageNo);
+	}, [pdfDocument, selectedPage]);
+
+	if (!pdfDocument) {
+		return (
+			<div className="full-app loading">
+				<div></div>
+			</div>);
+	}
+
+	return (
+		<div className="full-app">
+			<div className="top-bar">
+				<div>
+					<TitleWrapper>
+						<Title title={props.title}>{props.title}</Title>
+						<div>{selectedPage} of {pdfDocument.pageCount} pages</div>
+					</TitleWrapper>
+				</div>
+				<div>
+					<ZoomControls onChange={setZoom} zoom={zoom} size={1} />
+					<OpenLinkButton onClick={props.messageService.openExternalViewer} size={1.3} />
+					<PrintButton onClick={pdfDocument?.printPdf} size={1.3}/>
+					<DownloadButton onClick={pdfDocument?.downloadPdf} size={1.3}/>
+					<GotoInput onChange={goToPage} size={1.3} pageCount={pdfDocument.pageCount} currentPage={selectedPage} />
+				</div>
+				<div>
+					<CloseButton onClick={props.messageService.close} size={1.3} />
+				</div>
+			</div>
+			<div className="viewers dark-bg">
+				<div className="pane thumbnail-pane" ref={thumbnailRef}>
+					<VerticalPages
+						pdfDocument={pdfDocument}
+						isDarkTheme={true}
+						rememberScroll={false}
+						container={thumbnailRef}
+						pageGap={16}
+						widthPercent={86}
+						showPageNumbers={true}
+						selectedPage={selectedPage}
+						onPageClick={goToPage}
+						textSelectable={false}
+						zoom={1}
+					/>
+				</div>
+				<div className="pane main-pane" ref={mainViewerRef}>
+					<VerticalPages
+						pdfDocument={pdfDocument}
+						isDarkTheme={true}
+						rememberScroll={false}
+						container={mainViewerRef}
+						zoom={zoom}
+						pageGap={5}
+						anchorPage={startPage}
+						onActivePageChange={onActivePageChange}
+						textSelectable={true}
+						onTextSelect={props.messageService.textSelected}
+						showPageNumbers={false}
+					/>
+				</div>
+			</div>
+		</div>
+	);
+}