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

feat: change direction of radio field

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2025-08-23 04:40:58 +00:00
parent 67501b45cf
commit 592befe09a
5 changed files with 74 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
packages/ui/primitives/document-flow/field-items-advanced-settings/radio-field.tsx
View File

@ -11,6 +11,13 @@ import { Button } from '@documenso/ui/primitives/button';
import { Checkbox } from '@documenso/ui/primitives/checkbox';
import { Input } from '@documenso/ui/primitives/input';
import { Label } from '@documenso/ui/primitives/label';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@documenso/ui/primitives/select';
import { Switch } from '@documenso/ui/primitives/switch';
export type RadioFieldAdvancedSettingsProps = {
@ -35,6 +42,9 @@ export const RadioFieldAdvancedSettings = ({
);
const [readOnly, setReadOnly] = useState(fieldState.readOnly ?? false);
const [required, setRequired] = useState(fieldState.required ?? false);
const [direction, setDirection] = useState<'vertical' | 'horizontal'>(
fieldState.direction ?? 'vertical',
);
const addValue = () => {
const newId = values.length > 0 ? Math.max(...values.map((val) => val.id)) + 1 : 1;
@ -69,10 +79,19 @@ export const RadioFieldAdvancedSettings = ({
const handleToggleChange = (field: keyof RadioFieldMeta, value: string | boolean) => {
const readOnly = field === 'readOnly' ? Boolean(value) : Boolean(fieldState.readOnly);
const required = field === 'required' ? Boolean(value) : Boolean(fieldState.required);
const currentDirection =
field === 'direction' && String(value) === 'horizontal' ? 'horizontal' : 'vertical';
setReadOnly(readOnly);
setRequired(required);
setDirection(currentDirection);
const errors = validateRadioField(String(value), { readOnly, required, values, type: 'radio' });
const errors = validateRadioField(String(value), {
readOnly,
required,
values,
type: 'radio',
direction: currentDirection,
});
handleErrors(errors);
handleFieldChange(field, value);
@ -97,7 +116,13 @@ export const RadioFieldAdvancedSettings = ({
}, [fieldState.values]);
useEffect(() => {
const errors = validateRadioField(undefined, { readOnly, required, values, type: 'radio' });
const errors = validateRadioField(undefined, {
readOnly,
required,
values,
type: 'radio',
direction,
});
handleErrors(errors);
}, [values]);
@ -116,6 +141,27 @@ export const RadioFieldAdvancedSettings = ({
onChange={(e) => handleFieldChange('label', e.target.value)}
/>
</div>
<div>
<Label>
<Trans>Direction</Trans>
</Label>
<Select
value={fieldState.direction ?? 'vertical'}
onValueChange={(val) => handleToggleChange('direction', val)}
>
<SelectTrigger className="text-muted-foreground bg-background mt-2 w-full">
<SelectValue placeholder={_(msg`Select direction`)} />
</SelectTrigger>
<SelectContent position="popper">
<SelectItem value="vertical">
<Trans>Vertical</Trans>
</SelectItem>
<SelectItem value="horizontal">
<Trans>Horizontal</Trans>
</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex flex-row items-center gap-2">
<Switch
className="bg-background"