Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-17 02:01:33 +10:00
Code Issues Packages Projects Releases Wiki Activity

refactor: singature pad & provider stuff

Browse Source 
Signed-off-by: Adithya Krishna <adi@documenso.com>
This commit is contained in:
Adithya Krishna
2024-01-12 17:13:00 +05:30
parent e17e4566cd
commit 0b8e84b6b7
3 changed files with 33 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
packages/ui/primitives/signature-pad/signature-pad.tsx
View File

@ -9,7 +9,6 @@ import { getStroke } from 'perfect-freehand';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { useRequiredSigningContext } from '../../../../apps/web/src/app/(signing)/sign/[token]/provider';
import { cn } from '../../lib/utils';
import { Input } from '../input';
import { getSvgPathFromStroke } from './helper';
@ -18,6 +17,8 @@ import { Point } from './point';
const DPI = 2;
export type SignaturePadProps = Omit<HTMLAttributes<HTMLCanvasElement>, 'onChange'> & {
signature: string | null;
setSignature: (_value: string | null) => void;
onChange?: (_signatureDataUrl: string | null) => void;
containerClassName?: string;
clearSignatureClassName?: string;
@ -44,6 +45,8 @@ export const SignaturePad = ({
clearSignatureClassName,
onFormSubmit,
onChange,
signature,
setSignature,
...props
}: SignaturePadProps) => {
const $el = useRef<HTMLCanvasElement>(null);
@ -51,8 +54,6 @@ export const SignaturePad = ({
const [isPressed, setIsPressed] = useState(false);
const [points, setPoints] = useState<Point[]>([]);
const { signature, setSignature } = useRequiredSigningContext();
const {
register,
handleSubmit,
@ -68,7 +69,7 @@ export const SignaturePad = ({
resolver: zodResolver(ZSigningpadSchema),
});
const signatureDataUrl = watch('signatureDataUrl');
// const signatureDataUrl = watch('signatureDataUrl');
const signatureText = watch('signatureText');
const perfectFreehandOptions = useMemo(() => {
@ -248,26 +249,18 @@ export const SignaturePad = ({
return (
<form onSubmit={handleSubmit(onFormSubmit ?? (() => undefined))}>
<div className={cn('relative block', containerClassName)}>
<canvas
ref={$el}
className={cn('relative block dark:invert', className)}
style={{ touchAction: 'none' }}
onPointerMove={(event) => onMouseMove(event)}
onPointerDown={(event) => onMouseDown(event)}
onPointerUp={(event) => onMouseUp(event)}
onPointerLeave={(event) => onMouseLeave(event)}
onPointerEnter={(event) => onMouseEnter(event)}
{...props}
/>
<div className="flex h-44 items-center justify-center pb-6">
{!signatureText && signature && (
<SignaturePad
className="h-44 w-full"
defaultValue={signature ?? undefined}
onChange={(value) => {
setSignature(value);
}}
<canvas
ref={$el}
className={cn('relative block dark:invert', className)}
style={{ touchAction: 'none' }}
onPointerMove={(event) => onMouseMove(event)}
onPointerDown={(event) => onMouseDown(event)}
onPointerUp={(event) => onMouseUp(event)}
onPointerLeave={(event) => onMouseLeave(event)}
onPointerEnter={(event) => onMouseEnter(event)}
{...props}
/>
)}