pdf-e-signature
Version:
A React component that allows users to select positions for e-signatures on PDFs
71 lines (70 loc) • 2.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactSignatureCanvas = _interopRequireDefault(require("react-signature-canvas"));
var _Loader = _interopRequireDefault(require("./Loader"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const SignatureModal = _ref => {
let {
isOpen,
onClose,
isSavingSignature,
signatureRef,
clearSignature,
onSave,
onUpload
} = _ref;
if (!isOpen) return null;
return /*#__PURE__*/_react.default.createElement("div", {
className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "bg-white p-4 rounded shadow-lg max-w-md w-full"
}, /*#__PURE__*/_react.default.createElement("h3", {
className: "text-lg font-semibold mb-4"
}, "Add Your Signature"), isSavingSignature ? /*#__PURE__*/_react.default.createElement("div", {
className: "py-8"
}, /*#__PURE__*/_react.default.createElement(_Loader.default, {
size: "medium",
text: "Saving signature..."
})) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
className: "mb-4"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "border border-gray-300 rounded mb-2"
}, /*#__PURE__*/_react.default.createElement(_reactSignatureCanvas.default, {
ref: signatureRef,
canvasProps: {
className: 'signature-canvas w-full',
width: 500,
height: 200,
style: {
backgroundColor: 'transparent'
}
},
backgroundColor: "transparent"
})), /*#__PURE__*/_react.default.createElement("button", {
onClick: clearSignature,
className: "px-2 py-1 bg-gray-200 rounded text-sm"
}, "Clear")), /*#__PURE__*/_react.default.createElement("div", {
className: "mb-4"
}, /*#__PURE__*/_react.default.createElement("p", {
className: "text-sm mb-2"
}, "Or upload signature image:"), /*#__PURE__*/_react.default.createElement("input", {
type: "file",
accept: "image/*",
onChange: onUpload,
className: "w-full p-2 border rounded text-sm"
})), /*#__PURE__*/_react.default.createElement("div", {
className: "flex justify-end space-x-2"
}, /*#__PURE__*/_react.default.createElement("button", {
onClick: onClose,
className: "px-4 py-2 bg-gray-200 rounded"
}, "Cancel"), /*#__PURE__*/_react.default.createElement("button", {
onClick: onSave,
disabled: isSavingSignature,
className: "px-4 py-2 bg-blue-500 text-white rounded disabled:bg-gray-300"
}, "Save Signature")))));
};
var _default = exports.default = SignatureModal;