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

feat: horizontal checkboxes (#1911)

Browse Source 
Adds the ability to have checkboxes align horizontally, wrapping when
they would go off the PDF
This commit is contained in:
Lucas Smith
2025-07-19 22:06:50 +10:00
committed by GitHub
parent c47dc8749a
commit 512e3555b4
10 changed files with 169 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/ui/components/field/field.tsx
View File

@ -3,7 +3,9 @@ import React, { useEffect, useMemo, useState } from 'react';
import { type Field, FieldType } from '@prisma/client';
import { createPortal } from 'react-dom';
import { useElementBounds } from '@documenso/lib/client-only/hooks/use-element-bounds';
import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
import type { RecipientColorStyles } from '../../lib/recipient-colors';
@ -23,6 +25,11 @@ export function FieldContainerPortal({
const alternativePortalRoot = document.getElementById('document-field-portal-root');
const coords = useFieldPageCoords(field);
const $pageBounds = useElementBounds(
`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.page}"]`,
);
const maxWidth = $pageBounds?.width ? $pageBounds.width - coords.x : undefined;
const isCheckboxOrRadioField = field.type === 'CHECKBOX' || field.type === 'RADIO';
@ -32,10 +39,14 @@ export function FieldContainerPortal({
const bounds = {
top: `${coords.y}px`,
left: `${coords.x}px`,
...(!isCheckboxOrRadioField && {
height: `${coords.height}px`,
width: `${coords.width}px`,
}),
...(!isCheckboxOrRadioField
? {
height: `${coords.height}px`,
width: `${coords.width}px`,
}
: {
maxWidth: `${maxWidth}px`,
}),
};
if (portalBounds) {
@ -44,7 +55,7 @@ export function FieldContainerPortal({
}
return bounds;
}, [coords, isCheckboxOrRadioField]);
}, [coords, maxWidth, isCheckboxOrRadioField]);
return createPortal(
<div className={cn('absolute', className)} style={style}>