mirror of
https://github.com/documenso/documenso.git
synced 2025-11-14 08:42:12 +10:00
Apply prettier config to all files
This commit is contained in:
Ephraim Atta-Duncan
@ -1,8 +1,9 @@
|
||||
import React, { useState } from "react";
|
||||
import Draggable from "react-draggable";
|
||||
import Logo from "../logo";
|
||||
import { IconButton } from "@documenso/ui";
|
||||
import Logo from "../logo";
|
||||
import { XCircleIcon } from "@heroicons/react/20/solid";
|
||||
import Draggable from "react-draggable";
|
||||
|
||||
const stc = require("string-to-color");
|
||||
|
||||
type FieldPropsType = {
|
||||
@ -51,21 +52,19 @@ export default function EditableField(props: FieldPropsType) {
|
||||
onMouseDown={(e: any) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
{/* width: 192 height 96 */}
|
||||
<div
|
||||
hidden={props.hidden}
|
||||
ref={nodeRef}
|
||||
className="cursor-move opacity-80 p-2 m-auto w-48 h-16 flex-row-reverse text-lg font-bold text-center absolute top-0 left-0 select-none"
|
||||
className="absolute top-0 left-0 m-auto h-16 w-48 cursor-move select-none flex-row-reverse p-2 text-center text-lg font-bold opacity-80"
|
||||
style={{
|
||||
background: stc(props.field.Recipient.email),
|
||||
}}
|
||||
>
|
||||
<div className="m-auto overflow-hidden flex-row-reverse text-lg font-bold text-center">
|
||||
}}>
|
||||
<div className="m-auto flex-row-reverse overflow-hidden text-center text-lg font-bold">
|
||||
{field.type}
|
||||
{field.type === "SIGNATURE" ? (
|
||||
<div className="text-xs text-center">
|
||||
<div className="text-center text-xs">
|
||||
{`${props.field.Recipient?.name} <${props.field.Recipient?.email}>`}
|
||||
</div>
|
||||
) : (
|
||||
@ -79,8 +78,7 @@ export default function EditableField(props: FieldPropsType) {
|
||||
icon={XCircleIcon}
|
||||
onClick={(event: any) => {
|
||||
props.onDelete(props.field.id);
|
||||
}}
|
||||
></IconButton>
|
||||
}}></IconButton>
|
||||
</strong>
|
||||
</div>
|
||||
</Draggable>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { RadioGroup } from "@headlessui/react";
|
||||
import { classNames } from "@documenso/lib";
|
||||
import { RadioGroup } from "@headlessui/react";
|
||||
import { FieldType } from "@prisma/client";
|
||||
|
||||
const stc = require("string-to-color");
|
||||
|
||||
export default function FieldTypeSelector(props: any) {
|
||||
@ -24,8 +25,7 @@ export default function FieldTypeSelector(props: any) {
|
||||
value={selectedFieldType}
|
||||
onChange={(e: any) => {
|
||||
setSelectedFieldType(e);
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<div className="space-y-4">
|
||||
{fieldTypes.map((fieldType) => (
|
||||
<RadioGroup.Option
|
||||
@ -37,30 +37,23 @@ export default function FieldTypeSelector(props: any) {
|
||||
className={({ checked, active }) =>
|
||||
classNames(
|
||||
checked ? "border-neon border-2" : "border-transparent",
|
||||
"hover:bg-slate-100 select-none relative block cursor-pointer rounded-lg border bg-white px-3 py-2 focus:outline-none sm:flex sm:justify-between"
|
||||
"relative block cursor-pointer select-none rounded-lg border bg-white px-3 py-2 hover:bg-slate-100 focus:outline-none sm:flex sm:justify-between"
|
||||
)
|
||||
}
|
||||
>
|
||||
}>
|
||||
{({ active, checked }) => (
|
||||
<>
|
||||
<span className="flex items-center">
|
||||
<span className="flex flex-col text-sm">
|
||||
<RadioGroup.Label
|
||||
as="span"
|
||||
className="font-medium text-gray-900"
|
||||
>
|
||||
<RadioGroup.Label as="span" className="font-medium text-gray-900">
|
||||
<span
|
||||
className="inline-block h-4 w-4 flex-shrink-0 rounded-full mr-3 align-middle"
|
||||
className="mr-3 inline-block h-4 w-4 flex-shrink-0 rounded-full align-middle"
|
||||
style={{
|
||||
background: stc(props.selectedRecipient?.email),
|
||||
}}
|
||||
/>
|
||||
<span className="align-middle">
|
||||
{" "}
|
||||
{
|
||||
fieldTypes.filter((e) => e.id === fieldType.id)[0]
|
||||
.name
|
||||
}
|
||||
{fieldTypes.filter((e) => e.id === fieldType.id)[0].name}
|
||||
</span>
|
||||
</RadioGroup.Label>
|
||||
</span>
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
|
||||
import { useRouter } from "next/router";
|
||||
import dynamic from "next/dynamic";
|
||||
import { useState } from "react";
|
||||
import { createOrUpdateField, deleteField } from "@documenso/lib/api";
|
||||
import { createField } from "@documenso/features/editor";
|
||||
import RecipientSelector from "./recipient-selector";
|
||||
import FieldTypeSelector from "./field-type-selector";
|
||||
import { InformationCircleIcon } from "@heroicons/react/24/outline";
|
||||
import dynamic from "next/dynamic";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { createField } from "@documenso/features/editor";
|
||||
import { createOrUpdateField, deleteField } from "@documenso/lib/api";
|
||||
import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
|
||||
import FieldTypeSelector from "./field-type-selector";
|
||||
import RecipientSelector from "./recipient-selector";
|
||||
import { InformationCircleIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
const stc = require("string-to-color");
|
||||
|
||||
const PDFViewer = dynamic(() => import("./pdf-viewer"), {
|
||||
@ -20,8 +21,7 @@ export default function PDFEditor(props: any) {
|
||||
const [selectedRecipient, setSelectedRecipient]: any = useState();
|
||||
const [selectedFieldType, setSelectedFieldType] = useState();
|
||||
const noRecipients =
|
||||
props?.document.Recipient.length === 0 ||
|
||||
props?.document.Recipient.every((e: any) => !e.email);
|
||||
props?.document.Recipient.length === 0 || props?.document.Recipient.every((e: any) => !e.email);
|
||||
|
||||
function onPositionChangedHandler(position: any, id: any) {
|
||||
if (!position) return;
|
||||
@ -53,26 +53,16 @@ export default function PDFEditor(props: any) {
|
||||
<div hidden={!noRecipients} className="rounded-md bg-yellow-50 p-4">
|
||||
<div className="flex">
|
||||
<div className="flex-shrink-0">
|
||||
<InformationCircleIcon
|
||||
className="h-5 w-5 text-yellow-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<InformationCircleIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
|
||||
</div>
|
||||
<div className="ml-3 flex-1 md:flex md:justify-between">
|
||||
<p className="text-sm text-yellow-700">
|
||||
This document does not have any recipients. Add recipients to
|
||||
create fields.
|
||||
This document does not have any recipients. Add recipients to create fields.
|
||||
</p>
|
||||
<p className="mt-3 text-sm md:mt-0 md:ml-6">
|
||||
<Link
|
||||
href={
|
||||
NEXT_PUBLIC_WEBAPP_URL +
|
||||
"/documents/" +
|
||||
props.document.id +
|
||||
"/recipients"
|
||||
}
|
||||
className="whitespace-nowrap font-medium text-yellow-700 hover:text-yellow-600"
|
||||
>
|
||||
href={NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id + "/recipients"}
|
||||
className="whitespace-nowrap font-medium text-yellow-700 hover:text-yellow-600">
|
||||
Add Recipients
|
||||
<span aria-hidden="true"> →</span>
|
||||
</Link>
|
||||
@ -98,21 +88,13 @@ export default function PDFEditor(props: any) {
|
||||
}}
|
||||
onMouseDown={(e: any, page: number) => {
|
||||
if (e.button === 0) addField(e, page);
|
||||
}}
|
||||
></PDFViewer>
|
||||
}}></PDFViewer>
|
||||
<div
|
||||
hidden={noRecipients}
|
||||
className="fixed left-0 top-1/3 max-w-xs border border-slate-300 bg-white py-4 pr-5 rounded-md"
|
||||
>
|
||||
<RecipientSelector
|
||||
recipients={props?.document?.Recipient}
|
||||
onChange={setSelectedRecipient}
|
||||
/>
|
||||
className="fixed left-0 top-1/3 max-w-xs rounded-md border border-slate-300 bg-white py-4 pr-5">
|
||||
<RecipientSelector recipients={props?.document?.Recipient} onChange={setSelectedRecipient} />
|
||||
<hr className="m-3 border-slate-300"></hr>
|
||||
<FieldTypeSelector
|
||||
selectedRecipient={selectedRecipient}
|
||||
onChange={setSelectedFieldType}
|
||||
/>
|
||||
<FieldTypeSelector selectedRecipient={selectedRecipient} onChange={setSelectedFieldType} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
@ -123,12 +105,7 @@ export default function PDFEditor(props: any) {
|
||||
if (!selectedFieldType) return;
|
||||
if (noRecipients) return;
|
||||
|
||||
const signatureField = createField(
|
||||
e,
|
||||
page,
|
||||
selectedRecipient,
|
||||
selectedFieldType
|
||||
);
|
||||
const signatureField = createField(e, page, selectedRecipient, selectedFieldType);
|
||||
|
||||
createOrUpdateField(props?.document, signatureField).then((res) => {
|
||||
setFields((prevState) => [...prevState, res]);
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
import Logo from "../logo";
|
||||
import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
|
||||
import { useRouter } from "next/router";
|
||||
import dynamic from "next/dynamic";
|
||||
import SignatureDialog from "./signature-dialog";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button } from "@documenso/ui";
|
||||
import {
|
||||
CheckBadgeIcon,
|
||||
InformationCircleIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import { FieldType } from "@prisma/client";
|
||||
import {
|
||||
createOrUpdateField,
|
||||
deleteField,
|
||||
signDocument,
|
||||
} from "@documenso/lib/api";
|
||||
import dynamic from "next/dynamic";
|
||||
import { useRouter } from "next/router";
|
||||
import { createField } from "@documenso/features/editor";
|
||||
import { createOrUpdateField, deleteField, signDocument } from "@documenso/lib/api";
|
||||
import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
|
||||
import { Button } from "@documenso/ui";
|
||||
import Logo from "../logo";
|
||||
import SignatureDialog from "./signature-dialog";
|
||||
import { CheckBadgeIcon, InformationCircleIcon } from "@heroicons/react/24/outline";
|
||||
import { FieldType } from "@prisma/client";
|
||||
|
||||
const PDFViewer = dynamic(() => import("./pdf-viewer"), {
|
||||
ssr: false,
|
||||
@ -27,9 +20,7 @@ export default function PDFSigner(props: any) {
|
||||
const [signingDone, setSigningDone] = useState(false);
|
||||
const [localSignatures, setLocalSignatures] = useState<any[]>([]);
|
||||
const [fields, setFields] = useState<any[]>(props.fields);
|
||||
const signatureFields = fields.filter(
|
||||
(field) => field.type === FieldType.SIGNATURE
|
||||
);
|
||||
const signatureFields = fields.filter((field) => field.type === FieldType.SIGNATURE);
|
||||
const [dialogField, setDialogField] = useState<any>();
|
||||
|
||||
useEffect(() => {
|
||||
@ -80,9 +71,9 @@ export default function PDFSigner(props: any) {
|
||||
<div className="bg-neon p-4">
|
||||
<div className="flex">
|
||||
<div className="flex-shrink-0">
|
||||
<Logo className="h-12 w-12 -mt-2.5"></Logo>
|
||||
<Logo className="-mt-2.5 h-12 w-12"></Logo>
|
||||
</div>
|
||||
<div className="ml-3 flex-1 md:flex md:justify-between text-center justify-start items-center">
|
||||
<div className="ml-3 flex-1 items-center justify-start text-center md:flex md:justify-between">
|
||||
<p className="text-lg text-slate-700">
|
||||
{props.document.User.name
|
||||
? `${props.document.User.name} (${props.document.User.email})`
|
||||
@ -96,17 +87,10 @@ export default function PDFSigner(props: any) {
|
||||
icon={CheckBadgeIcon}
|
||||
className="float-right"
|
||||
onClick={() => {
|
||||
signDocument(
|
||||
props.document,
|
||||
localSignatures,
|
||||
`${router.query.token}`
|
||||
).then(() => {
|
||||
router.push(
|
||||
`/documents/${props.document.id}/signed?token=${router.query.token}`
|
||||
);
|
||||
signDocument(props.document, localSignatures, `${router.query.token}`).then(() => {
|
||||
router.push(`/documents/${props.document.id}/signed?token=${router.query.token}`);
|
||||
});
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
Done
|
||||
</Button>
|
||||
</p>
|
||||
@ -117,15 +101,11 @@ export default function PDFSigner(props: any) {
|
||||
<div className="bg-yellow-50 p-4">
|
||||
<div className="flex">
|
||||
<div className="flex-shrink-0">
|
||||
<InformationCircleIcon
|
||||
className="h-5 w-5 text-yellow-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<InformationCircleIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
|
||||
</div>
|
||||
<div className="ml-3 flex-1 md:flex md:justify-between">
|
||||
<p className="text-sm text-yellow-700">
|
||||
You can sign this document anywhere you like, but maybe look for
|
||||
a signature line.
|
||||
You can sign this document anywhere you like, but maybe look for a signature line.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -144,12 +124,10 @@ export default function PDFSigner(props: any) {
|
||||
pdfUrl={`${NEXT_PUBLIC_WEBAPP_URL}/api/documents/${router.query.id}?token=${router.query.token}`}
|
||||
onClick={onClick}
|
||||
onMouseDown={function onMouseDown(e: any, page: number) {
|
||||
if (signatureFields.length === 0)
|
||||
addFreeSignature(e, page, props.recipient);
|
||||
if (signatureFields.length === 0) addFreeSignature(e, page, props.recipient);
|
||||
}}
|
||||
onMouseUp={() => {}}
|
||||
onDelete={onDeleteHandler}
|
||||
></PDFViewer>
|
||||
onDelete={onDeleteHandler}></PDFViewer>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -157,27 +135,16 @@ export default function PDFSigner(props: any) {
|
||||
// Check if all fields are signed..
|
||||
if (signatureFields.length > 0) {
|
||||
// If there are no fields to sign at least one signature is enough
|
||||
return fields
|
||||
.filter((field) => field.type === FieldType.SIGNATURE)
|
||||
.every((field) => field.signature);
|
||||
return fields.filter((field) => field.type === FieldType.SIGNATURE).every((field) => field.signature);
|
||||
} else {
|
||||
return localSignatures.length > 0;
|
||||
}
|
||||
}
|
||||
|
||||
function addFreeSignature(e: any, page: number, recipient: any): any {
|
||||
const freeSignatureField = createField(
|
||||
e,
|
||||
page,
|
||||
recipient,
|
||||
FieldType.FREE_SIGNATURE
|
||||
);
|
||||
const freeSignatureField = createField(e, page, recipient, FieldType.FREE_SIGNATURE);
|
||||
|
||||
createOrUpdateField(
|
||||
props.document,
|
||||
freeSignatureField,
|
||||
recipient.token
|
||||
).then((res) => {
|
||||
createOrUpdateField(props.document, freeSignatureField, recipient.token).then((res) => {
|
||||
setFields((prevState) => [...prevState, res]);
|
||||
setDialogField(res);
|
||||
setOpen(true);
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { Fragment, useState } from "react";
|
||||
import { Document, Page } from "react-pdf/dist/esm/entry.webpack5";
|
||||
import EditableField from "./editable-field";
|
||||
import SignableField from "./signable-field";
|
||||
import short from "short-uuid";
|
||||
import { FieldType } from "@prisma/client";
|
||||
import { Document, Page } from "react-pdf/dist/esm/entry.webpack5";
|
||||
import short from "short-uuid";
|
||||
|
||||
export default function PDFViewer(props) {
|
||||
const [numPages, setNumPages] = useState(null);
|
||||
@ -30,19 +30,14 @@ export default function PDFViewer(props) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
hidden={loading}
|
||||
onMouseUp={props.onMouseUp}
|
||||
style={{ height: numPages * pageHeight + 1000 }}
|
||||
>
|
||||
<div className="max-w-xs mt-6"></div>
|
||||
<div hidden={loading} onMouseUp={props.onMouseUp} style={{ height: numPages * pageHeight + 1000 }}>
|
||||
<div className="mt-6 max-w-xs"></div>
|
||||
<Document
|
||||
file={props.pdfUrl}
|
||||
onLoadSuccess={onDocumentLoadSuccess}
|
||||
options={options}
|
||||
renderMode="canvas"
|
||||
className="absolute w-auto mx-auto left-0 right-0"
|
||||
>
|
||||
className="absolute left-0 right-0 mx-auto w-auto">
|
||||
{Array.from({ length: numPages }, (_, index) => (
|
||||
<Fragment key={short.generate().toString()}>
|
||||
<div
|
||||
@ -57,8 +52,7 @@ export default function PDFViewer(props) {
|
||||
position: "relative",
|
||||
...props.style,
|
||||
}}
|
||||
className="mx-auto w-fit"
|
||||
>
|
||||
className="mx-auto w-fit">
|
||||
<Page
|
||||
className="mt-5"
|
||||
key={`page_${index + 1}`}
|
||||
@ -69,8 +63,7 @@ export default function PDFViewer(props) {
|
||||
if (e.height) setPageHeight(e.height);
|
||||
setLoading(false);
|
||||
}}
|
||||
onRenderError={() => setLoading(false)}
|
||||
></Page>
|
||||
onRenderError={() => setLoading(false)}></Page>
|
||||
{props?.fields
|
||||
.filter((field) => field.page === index)
|
||||
.map((field) =>
|
||||
@ -80,21 +73,15 @@ export default function PDFViewer(props) {
|
||||
key={field.id}
|
||||
field={field}
|
||||
className="absolute"
|
||||
onDelete={onDeleteHandler}
|
||||
></SignableField>
|
||||
onDelete={onDeleteHandler}></SignableField>
|
||||
) : (
|
||||
<EditableField
|
||||
hidden={
|
||||
field.Signature ||
|
||||
field.inserted ||
|
||||
field.type === FieldType.FREE_SIGNATURE
|
||||
}
|
||||
hidden={field.Signature || field.inserted || field.type === FieldType.FREE_SIGNATURE}
|
||||
key={field.id}
|
||||
field={field}
|
||||
className="absolute"
|
||||
onPositionChanged={onPositionChangedHandler}
|
||||
onDelete={onDeleteHandler}
|
||||
></EditableField>
|
||||
onDelete={onDeleteHandler}></EditableField>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
import { Fragment, useEffect, useState } from "react";
|
||||
import { classNames } from "@documenso/lib";
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline";
|
||||
import { classNames } from "@documenso/lib";
|
||||
|
||||
const stc = require("string-to-color");
|
||||
|
||||
export default function RecipientSelector(props: any) {
|
||||
const [selectedRecipient, setSelectedRecipient]: any = useState(
|
||||
props?.recipients[0]
|
||||
);
|
||||
const [selectedRecipient, setSelectedRecipient]: any = useState(props?.recipients[0]);
|
||||
|
||||
useEffect(() => {
|
||||
props.onChange(selectedRecipient);
|
||||
@ -18,11 +17,10 @@ export default function RecipientSelector(props: any) {
|
||||
value={selectedRecipient}
|
||||
onChange={(e: any) => {
|
||||
setSelectedRecipient(e);
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
{({ open }) => (
|
||||
<div className="relative mt-1 mb-2">
|
||||
<Listbox.Button className="select-none relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left focus:border-neon focus:outline-none focus:ring-1 focus:ring-neon sm:text-sm">
|
||||
<Listbox.Button className="focus:border-neon focus:ring-neon relative w-full cursor-default select-none rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-1 sm:text-sm">
|
||||
<span className="flex items-center">
|
||||
<span
|
||||
className="inline-block h-4 w-4 flex-shrink-0 rounded-full"
|
||||
@ -33,10 +31,7 @@ export default function RecipientSelector(props: any) {
|
||||
</span>
|
||||
</span>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<ChevronUpDownIcon
|
||||
className="h-5 w-5 text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
|
||||
@ -45,20 +40,18 @@ export default function RecipientSelector(props: any) {
|
||||
as={Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
leaveTo="opacity-0">
|
||||
<Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
|
||||
{props?.recipients.map((recipient: any) => (
|
||||
<Listbox.Option
|
||||
key={recipient?.id}
|
||||
className={({ active }) =>
|
||||
classNames(
|
||||
active ? "text-white bg-neon-dark" : "text-gray-900",
|
||||
active ? "bg-neon-dark text-white" : "text-gray-900",
|
||||
"relative cursor-default select-none py-2 pl-3 pr-9"
|
||||
)
|
||||
}
|
||||
value={recipient}
|
||||
>
|
||||
value={recipient}>
|
||||
{({ selected, active }) => (
|
||||
<>
|
||||
<div className="flex items-center">
|
||||
@ -72,8 +65,7 @@ export default function RecipientSelector(props: any) {
|
||||
className={classNames(
|
||||
selected ? "font-semibold" : "font-normal",
|
||||
"ml-3 block truncate"
|
||||
)}
|
||||
>
|
||||
)}>
|
||||
{`${selectedRecipient?.name} <${selectedRecipient?.email}>`}
|
||||
</span>
|
||||
</div>
|
||||
@ -83,8 +75,7 @@ export default function RecipientSelector(props: any) {
|
||||
className={classNames(
|
||||
active ? "text-white" : "text-neon-dark",
|
||||
"absolute inset-y-0 right-0 flex items-center pr-4"
|
||||
)}
|
||||
>
|
||||
)}>
|
||||
<CheckIcon className="h-5 w-5" aria-hidden="true" />
|
||||
</span>
|
||||
) : null}
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import React, { useState } from "react";
|
||||
import Draggable from "react-draggable";
|
||||
import { classNames } from "@documenso/lib";
|
||||
import { IconButton } from "@documenso/ui";
|
||||
import { XCircleIcon } from "@heroicons/react/20/solid";
|
||||
import { classNames } from "@documenso/lib";
|
||||
import Draggable from "react-draggable";
|
||||
|
||||
const stc = require("string-to-color");
|
||||
|
||||
type FieldPropsType = {
|
||||
@ -37,31 +38,26 @@ export default function SignableField(props: FieldPropsType) {
|
||||
onMouseDown={(e: any) => {
|
||||
// e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<div
|
||||
onClick={(e: any) => {
|
||||
if (!field?.signature) props.onClick(props.field);
|
||||
}}
|
||||
ref={nodeRef}
|
||||
className={classNames(
|
||||
"opacity-80 m-auto w-48 h-16 flex-row-reverse text-lg font-bold text-center absolute top-0 left-0 select-none",
|
||||
field.type === "SIGNATURE"
|
||||
? "cursor-pointer hover:brightness-50"
|
||||
: "cursor-not-allowed"
|
||||
"absolute top-0 left-0 m-auto h-16 w-48 select-none flex-row-reverse text-center text-lg font-bold opacity-80",
|
||||
field.type === "SIGNATURE" ? "cursor-pointer hover:brightness-50" : "cursor-not-allowed"
|
||||
)}
|
||||
style={{
|
||||
background: stc(props.field.Recipient.email),
|
||||
}}
|
||||
>
|
||||
<div hidden={field?.signature} className="font-medium my-4">
|
||||
}}>
|
||||
<div hidden={field?.signature} className="my-4 font-medium">
|
||||
{field.type === "SIGNATURE" ? "SIGN HERE" : ""}
|
||||
{field.type === "DATE" ? <small>Date (filled on sign)</small> : ""}
|
||||
</div>
|
||||
<div
|
||||
hidden={!field?.signature}
|
||||
className="font-qwigley text-5xl m-auto w-auto flex-row-reverse font-medium text-center"
|
||||
>
|
||||
className="font-qwigley m-auto w-auto flex-row-reverse text-center text-5xl font-medium">
|
||||
{field?.signature?.type === "type" ? (
|
||||
<div className="my-4">{field?.signature.typedSignature}</div>
|
||||
) : (
|
||||
@ -69,7 +65,7 @@ export default function SignableField(props: FieldPropsType) {
|
||||
)}
|
||||
|
||||
{field?.signature?.type === "draw" ? (
|
||||
<img className="w-48 h-16" src={field?.signature?.signatureImage} />
|
||||
<img className="h-16 w-48" src={field?.signature?.signatureImage} />
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
@ -1,14 +1,10 @@
|
||||
import { Fragment, useEffect, useState } from "react";
|
||||
import { classNames } from "@documenso/lib";
|
||||
import { localStorage } from "@documenso/lib";
|
||||
import { Button, IconButton } from "@documenso/ui";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
import {
|
||||
LanguageIcon,
|
||||
PencilIcon,
|
||||
TrashIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import { Fragment, useEffect, useState } from "react";
|
||||
import { LanguageIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
|
||||
import SignatureCanvas from "react-signature-canvas";
|
||||
import { localStorage } from "@documenso/lib";
|
||||
|
||||
const tabs = [
|
||||
{ name: "Type", icon: LanguageIcon, current: true },
|
||||
@ -34,8 +30,7 @@ export default function SignatureDialog(props: any) {
|
||||
onClose={() => {
|
||||
props.setOpen(false);
|
||||
setCurrent(tabs[0]);
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
@ -43,8 +38,7 @@ export default function SignatureDialog(props: any) {
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
leaveTo="opacity-0">
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
@ -57,11 +51,10 @@ export default function SignatureDialog(props: any) {
|
||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="min-h-[350px] relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
|
||||
<Dialog.Panel className="relative min-h-[350px] transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
|
||||
<div className="">
|
||||
<div className="border-b border-gray-200 mb-3">
|
||||
<div className="mb-3 border-b border-gray-200">
|
||||
<nav className="-mb-px flex space-x-8" aria-label="Tabs">
|
||||
{tabs.map((tab) => (
|
||||
<a
|
||||
@ -72,16 +65,13 @@ export default function SignatureDialog(props: any) {
|
||||
className={classNames(
|
||||
tab.current
|
||||
? "border-neon text-neon"
|
||||
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
|
||||
"group inline-flex items-center py-4 px-1 border-b-2 font-medium text-sm cursor-pointer"
|
||||
: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
|
||||
"group inline-flex cursor-pointer items-center border-b-2 py-4 px-1 text-sm font-medium"
|
||||
)}
|
||||
aria-current={tab.current ? "page" : undefined}
|
||||
>
|
||||
aria-current={tab.current ? "page" : undefined}>
|
||||
<tab.icon
|
||||
className={classNames(
|
||||
tab.current
|
||||
? "text-neon"
|
||||
: "text-gray-400 group-hover:text-gray-500",
|
||||
tab.current ? "text-neon" : "text-gray-400 group-hover:text-gray-500",
|
||||
"-ml-0.5 mr-2 h-5 w-5"
|
||||
)}
|
||||
aria-hidden="true"
|
||||
@ -93,7 +83,7 @@ export default function SignatureDialog(props: any) {
|
||||
</div>
|
||||
{isCurrentTab("Type") ? (
|
||||
<div>
|
||||
<div className="my-8 border-b border-gray-300 mb-3">
|
||||
<div className="my-8 mb-3 border-b border-gray-300">
|
||||
<input
|
||||
value={typedSignature}
|
||||
onChange={(e) => {
|
||||
@ -101,7 +91,7 @@ export default function SignatureDialog(props: any) {
|
||||
}}
|
||||
className={classNames(
|
||||
typedSignature ? "font-qwigley text-4xl" : "",
|
||||
"leading-none h-10 align-bottom mt-14 text-center block w-full focus:border-neon focus:ring-neon text-2xl"
|
||||
"focus:border-neon focus:ring-neon mt-14 block h-10 w-full text-center align-bottom text-2xl leading-none"
|
||||
)}
|
||||
placeholder="Kindly type your name"
|
||||
/>
|
||||
@ -113,24 +103,19 @@ export default function SignatureDialog(props: any) {
|
||||
props.onClose();
|
||||
props.setOpen(false);
|
||||
setCurrent(tabs[0]);
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
className="ml-3"
|
||||
disabled={!typedSignature}
|
||||
onClick={() => {
|
||||
localStorage.setItem(
|
||||
"typedSignature",
|
||||
typedSignature
|
||||
);
|
||||
localStorage.setItem("typedSignature", typedSignature);
|
||||
props.onClose({
|
||||
type: "type",
|
||||
typedSignature: typedSignature,
|
||||
});
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
Sign
|
||||
</Button>
|
||||
</div>
|
||||
@ -145,8 +130,7 @@ export default function SignatureDialog(props: any) {
|
||||
signCanvasRef = ref;
|
||||
}}
|
||||
canvasProps={{
|
||||
className:
|
||||
"sigCanvas border-b b-2 border-slate w-full h-full mb-3",
|
||||
className: "sigCanvas border-b b-2 border-slate w-full h-full mb-3",
|
||||
}}
|
||||
clearOnResize={true}
|
||||
onEnd={() => {
|
||||
@ -154,22 +138,20 @@ export default function SignatureDialog(props: any) {
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
className="block float-left"
|
||||
className="float-left block"
|
||||
icon={TrashIcon}
|
||||
onClick={() => {
|
||||
signCanvasRef?.clear();
|
||||
setSignatureEmpty(signCanvasRef?.isEmpty());
|
||||
}}
|
||||
></IconButton>
|
||||
<div className="mt-10 float-right">
|
||||
}}></IconButton>
|
||||
<div className="float-right mt-10">
|
||||
<Button
|
||||
color="secondary"
|
||||
onClick={() => {
|
||||
props.onClose();
|
||||
props.setOpen(false);
|
||||
setCurrent(tabs[0]);
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
@ -177,12 +159,10 @@ export default function SignatureDialog(props: any) {
|
||||
onClick={() => {
|
||||
props.onClose({
|
||||
type: "draw",
|
||||
signatureImage:
|
||||
signCanvasRef.toDataURL("image/png"),
|
||||
signatureImage: signCanvasRef.toDataURL("image/png"),
|
||||
});
|
||||
}}
|
||||
disabled={signatureEmpty}
|
||||
>
|
||||
disabled={signatureEmpty}>
|
||||
Sign
|
||||
</Button>
|
||||
</div>
|
||||
@ -200,11 +180,11 @@ export default function SignatureDialog(props: any) {
|
||||
</>
|
||||
);
|
||||
|
||||
function isCurrentTab(tabName: string): boolean {
|
||||
function isCurrentTab(tabName: string): boolean {
|
||||
return currentTab.name === tabName;
|
||||
}
|
||||
|
||||
function setCurrent(t: any) {
|
||||
function setCurrent(t: any) {
|
||||
tabs.forEach((tab) => {
|
||||
tab.current = tab.name === t.name;
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user