Spaces:
Running
Running
File size: 2,670 Bytes
79278ec |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
import React, { useState } from "react";
import { Document, Page } from "react-pdf";
import "react-pdf/dist/Page/TextLayer.css";
import "react-pdf/dist/Page/AnnotationLayer.css";
import "./DocumentModal.scss";
import Button from "@/components/generics/button/Button";
import Input from "@/components/generics/input/Input";
import { GoChevronLeft, GoChevronRight } from "react-icons/go";
const PdfViewer: React.FC<{ file: Blob | null }> = ({ file }) => {
const [numPages, setNumPages] = useState<number | null>(null);
const [currentPage, setCurrentPage] = useState<number>(1);
const [inputValue, setInputValue] = useState<string>(currentPage.toString());
const onLoadSuccess = ({ numPages }: { numPages: number }) => {
setNumPages(numPages);
setCurrentPage(1);
setInputValue("1");
};
const goToPage = (page: number) => {
if (numPages && page >= 1 && page <= numPages) {
setCurrentPage(page);
setInputValue(page.toString());
}
};
const handleInputChange = (value: string) => {
setInputValue(value);
const newValue = Number(value);
if (!isNaN(newValue) && newValue >= 1 && newValue <= (numPages ?? 1)) {
goToPage(newValue);
}
};
const handleInputBlur = () => {
const newValue = Number(inputValue);
if (isNaN(newValue) || newValue < 1 || newValue > (numPages ?? 1)) {
setInputValue(currentPage.toString());
} else {
goToPage(newValue);
}
};
return (
<div className="pdf-viewer">
<div className="pdf-viewer__header">
<Button
onClick={() => goToPage(currentPage - 1)}
icon={<GoChevronLeft />}
buttonType="link"
disabled={currentPage === 1}
/>
Страница
{
<Input
name=""
style={{ width: "90px" }}
placeholder="Cтраница"
value={inputValue}
onSetValue={handleInputChange}
onBlur={handleInputBlur}
/>
}
из {numPages}
<Button
onClick={() => goToPage(currentPage + 1)}
icon={<GoChevronRight />}
buttonType="link"
disabled={currentPage === numPages}
/>
</div>
<div className="pdf-viewer__container">
<Document file={file} onLoadSuccess={onLoadSuccess} loading={<p>Загрузка документа...</p>}>
<Page
loading={null}
key={`page_${currentPage}`}
pageNumber={currentPage}
data-page-number={currentPage}
scale={1.3}
/>
</Document>
</div>
</div>
);
};
export default PdfViewer;
|