pdf-e-signature/dist/components/PDFViewer.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");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const PDFViewer = _ref => {
  let {
    pdfUrl,
    currentPage,
    numPages,
    setNumPages,
    scale,
    signaturePositions,
    isSelectingPosition,
    onPageChange,
    onScaleChange,
    onPdfClick,
    containerRef,
    viewMode,
    handleMouseMove,
    cursorPosition,
    handleRemoveSign
  } = _ref;
  const onDocumentLoadSuccess = _ref2 => {
    let {
      numPages
    } = _ref2;
    setNumPages(numPages);
    onPageChange(1);
  };
  if (viewMode === 'view') {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: "border border-gray-300 rounded overflow-hidden"
    }, /*#__PURE__*/_react.default.createElement("iframe", {
      src: pdfUrl,
      width: "100%",
      height: "600px",
      title: "PDF Preview"
    }));
  }
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "flex justify-between mb-2"
  }, numPages && /*#__PURE__*/_react.default.createElement("div", {
    className: "flex space-x-2 items-center"
  }, /*#__PURE__*/_react.default.createElement("button", {
    onClick: () => onPageChange(currentPage - 1),
    disabled: currentPage <= 1,
    className: "px-2 py-1 bg-gray-200 rounded disabled:bg-gray-100"
  }, "Previous"), /*#__PURE__*/_react.default.createElement("span", null, "Page ", currentPage, " of ", numPages), /*#__PURE__*/_react.default.createElement("button", {
    onClick: () => onPageChange(currentPage + 1),
    disabled: currentPage >= numPages,
    className: "px-2 py-1 bg-gray-200 rounded disabled:bg-gray-100"
  }, "Next")), pdfUrl && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
    onClick: () => onScaleChange(scale - 0.2),
    className: "px-2 py-1 bg-gray-200 rounded mr-1 disabled:bg-gray-100"
  }, "-"), /*#__PURE__*/_react.default.createElement("span", {
    className: "mx-1"
  }, Math.round(scale * 100), "%"), /*#__PURE__*/_react.default.createElement("button", {
    onClick: () => onScaleChange(scale + 0.2),
    className: "px-2 py-1 bg-gray-200 rounded ml-1 disabled:bg-gray-100"
  }, "+"))), /*#__PURE__*/_react.default.createElement("div", {
    ref: containerRef,
    className: "border border-gray-300 rounded overflow-auto relative",
    onClick: onPdfClick,
    style: {
      cursor: isSelectingPosition ? 'none' : 'default'
    },
    onMouseMove: handleMouseMove
  }, /*#__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("div", null, /*#__PURE__*/_react.default.createElement("div", {
    key: index,
    style: {
      position: 'absolute',
      left: `${pos.normalizedX * 100}%`,
      top: `${pos.normalizedY * 100}%`,
      transform: 'translate(-50%, -50%)',
      width: `${150}px`,
      height: `${50}px`,
      border: '2px dashed #3B82F6',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: 1000
    }
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "text-sm text-blue-500"
  }, "Signature ", index + 1), /*#__PURE__*/_react.default.createElement("button", {
    className: "absolute -top-1 right-2 text-lg text-red-600 cursor-pointer",
    style: {
      top: -7,
      right: 5,
      color: 'red',
      fontSize: '22px'
    },
    onClick: () => handleRemoveSign(index)
  }, "x")))), isSelectingPosition && /*#__PURE__*/_react.default.createElement("div", {
    className: "custom-cursor absolute pointer-events-none",
    style: {
      left: `${cursorPosition.x * 100}%`,
      top: `${cursorPosition.y * 100}%`,
      transform: 'translate(-50%, -50%)',
      width: '150px',
      height: '50px',
      border: '2px dashed #666',
      // borderRadius: '50%',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'rgba(255, 255, 255, 0.3)'
    }
  }, /*#__PURE__*/_react.default.createElement("span", {
    style: {
      fontSize: '20px',
      lineHeight: 1
    }
  }, "+")))));
};
var _default = exports.default = PDFViewer;