feat: add new field overflow methods (#2715)

This commit is contained in:
David Nguyen
2026-05-08 15:14:27 +10:00
committed by GitHub
parent 4877d1964a
commit 207135d6f3
28 changed files with 2437 additions and 65 deletions
@@ -10,6 +10,8 @@ import { useAutoSave } from '@documenso/lib/client-only/hooks/use-autosave';
import {
type TBaseFieldMeta as BaseFieldMeta,
type TCheckboxFieldMeta as CheckboxFieldMeta,
DEFAULT_DATE_OVERFLOW_MODE,
DEFAULT_EMAIL_OVERFLOW_MODE,
type TDateFieldMeta as DateFieldMeta,
type TDropdownFieldMeta as DropdownFieldMeta,
type TEmailFieldMeta as EmailFieldMeta,
@@ -83,12 +85,14 @@ const getDefaultState = (fieldType: FieldType): FieldMeta => {
type: 'email',
fontSize: 14,
textAlign: 'left',
overflow: DEFAULT_EMAIL_OVERFLOW_MODE,
};
case FieldType.DATE:
return {
type: 'date',
fontSize: 14,
textAlign: 'left',
overflow: DEFAULT_DATE_OVERFLOW_MODE,
};
case FieldType.TEXT:
return {
@@ -186,7 +190,6 @@ export const FieldAdvancedSettings = forwardRef<HTMLDivElement, FieldAdvancedSet
...parsedFieldMeta,
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [fieldMeta]);
const { scheduleSave } = useAutoSave(onAutoSave || (async () => {}));
@@ -1,7 +1,10 @@
import { Trans, useLingui } from '@lingui/react/macro';
import { validateFields as validateDateFields } from '@documenso/lib/advanced-fields-validation/validate-fields';
import { type TDateFieldMeta as DateFieldMeta } from '@documenso/lib/types/field-meta';
import {
DEFAULT_DATE_OVERFLOW_MODE,
type TDateFieldMeta as DateFieldMeta,
} from '@documenso/lib/types/field-meta';
import { Input } from '@documenso/ui/primitives/input';
import { Label } from '@documenso/ui/primitives/label';
import {
@@ -48,6 +51,7 @@ export const DateFieldAdvancedSettings = ({
const errors = validateDateFields({
fontSize,
overflow: fieldState.overflow ?? DEFAULT_DATE_OVERFLOW_MODE,
type: 'date',
});
@@ -64,7 +68,7 @@ export const DateFieldAdvancedSettings = ({
<Input
id="fontSize"
type="number"
className="bg-background mt-2"
className="mt-2 bg-background"
placeholder={t`Field font size`}
value={fieldState.fontSize}
onChange={(e) => handleInput('fontSize', e.target.value)}
@@ -82,7 +86,7 @@ export const DateFieldAdvancedSettings = ({
value={fieldState.textAlign}
onValueChange={(value) => handleInput('textAlign', value)}
>
<SelectTrigger className="bg-background mt-2">
<SelectTrigger className="mt-2 bg-background">
<SelectValue placeholder={t`Select text align`} />
</SelectTrigger>
@@ -1,7 +1,10 @@
import { Trans, useLingui } from '@lingui/react/macro';
import { validateFields as validateEmailFields } from '@documenso/lib/advanced-fields-validation/validate-fields';
import { type TEmailFieldMeta as EmailFieldMeta } from '@documenso/lib/types/field-meta';
import {
DEFAULT_EMAIL_OVERFLOW_MODE,
type TEmailFieldMeta as EmailFieldMeta,
} from '@documenso/lib/types/field-meta';
import { Input } from '@documenso/ui/primitives/input';
import { Label } from '@documenso/ui/primitives/label';
import {
@@ -30,6 +33,7 @@ export const EmailFieldAdvancedSettings = ({
const errors = validateEmailFields({
fontSize,
overflow: fieldState.overflow ?? DEFAULT_EMAIL_OVERFLOW_MODE,
type: 'email',
});
@@ -46,7 +50,7 @@ export const EmailFieldAdvancedSettings = ({
<Input
id="fontSize"
type="number"
className="bg-background mt-2"
className="mt-2 bg-background"
placeholder={t`Field font size`}
value={fieldState.fontSize}
onChange={(e) => handleInput('fontSize', e.target.value)}
@@ -64,7 +68,7 @@ export const EmailFieldAdvancedSettings = ({
value={fieldState.textAlign}
onValueChange={(value) => handleInput('textAlign', value)}
>
<SelectTrigger className="bg-background mt-2">
<SelectTrigger className="mt-2 bg-background">
<SelectValue placeholder={t`Select text align`} />
</SelectTrigger>