pdf-e-signature/dist/components/DocumentViewer.js

A React component that allows users to select positions for e-signatures on PDFs

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactPdf = require("react-pdf");
var _PDFControls = _interopRequireDefault(require("./PDFControls"));
var _SignaturePosition = _interopRequireDefault(require("./SignaturePosition"));
var _Loader = _interopRequireDefault(require("./Loader"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const DocumentViewer = _ref => {
  let {
    pdfUrl,
    signaturePositions,
    onSignatureClick,
    onDocumentLoadSuccess,
    currentPage,
    scale,
    setCurrentPage,
    setScale,
    onGenerateSignedPdf,
    isGeneratingPdf,
    signedPdfUrl,
    onReset,
    containerRef,
    numPages,
    onRemoveSign,
    setSignedPdfUrl
  } = _ref;
  if (isGeneratingPdf) {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: "w-full max-w-4xl flex flex-col items-center justify-center py-12"
    }, /*#__PURE__*/_react.default.createElement(_Loader.default, {
      size: "large",
      text: "Generating signed PDF..."
    }));
  }
  if (signedPdfUrl) {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: "w-full max-w-4xl mb-4"
    }, /*#__PURE__*/_react.default.createElement("h2", {
      className: "text-lg font-semibold mb-2"
    }, "Signed Document"), /*#__PURE__*/_react.default.createElement("div", {
      className: "flex gap-3 mb-2"
    }, /*#__PURE__*/_react.default.createElement("a", {
      href: signedPdfUrl,
      download: "signed_document.pdf",
      className: "px-4 py-2 bg-green-500 text-white rounded"
    }, "Download Signed PDF"), /*#__PURE__*/_react.default.createElement("button", {
      onClick: () => setSignedPdfUrl(null),
      className: "px-4 py-2 bg-blue-500 text-white rounded disabled:bg-gray-300"
    }, " Back to Documents")), /*#__PURE__*/_react.default.createElement("div", {
      className: "border border-gray-300 rounded"
    }, /*#__PURE__*/_react.default.createElement("iframe", {
      src: signedPdfUrl,
      width: "100%",
      height: "600px",
      title: "Signed PDF"
    })));
  }
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "w-full max-w-4xl"
  }, /*#__PURE__*/_react.default.createElement("h2", {
    className: "text-lg font-semibold mb-2"
  }, "Document Preview"), /*#__PURE__*/_react.default.createElement(_PDFControls.default, {
    numPages: numPages,
    currentPage: currentPage,
    setCurrentPage: setCurrentPage,
    scale: scale,
    setScale: setScale,
    onGenerateSignedPdf: onGenerateSignedPdf,
    isGeneratingPdf: isGeneratingPdf,
    hasSignatures: signaturePositions?.some(pos => pos.signature),
    onReset: onReset
  }), /*#__PURE__*/_react.default.createElement("div", {
    ref: containerRef,
    className: "border border-gray-300 rounded overflow-auto relative"
  }, /*#__PURE__*/_react.default.createElement(_reactPdf.Document, {
    file: pdfUrl,
    onLoadSuccess: onDocumentLoadSuccess
  }, /*#__PURE__*/_react.default.createElement(_reactPdf.Page, {
    pageNumber: currentPage,
    scale: scale,
    renderTextLayer: false,
    renderAnnotationLayer: false
  }), signaturePositions.map((pos, index) => pos.page === currentPage && /*#__PURE__*/_react.default.createElement(_SignaturePosition.default, {
    key: index,
    position: pos,
    onSignatureClick: onSignatureClick,
    onRemoveSign: () => onRemoveSign(index)
  })))));
};
var _default = exports.default = DocumentViewer;