Skip to content

Commit 22683ee

Browse files
ivan-dalmetivan-dalmet
committed
feat: handle onchange and onblur on all fields
1 parent 3ed91a4 commit 22683ee

File tree

8 files changed

+96
-92
lines changed

8 files changed

+96
-92
lines changed

‎app/components/form/field-date/index.tsx‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,24 @@
11
import { ComponentProps } from 'react';
2-
import {
3-
Controller,
4-
ControllerRenderProps,
5-
FieldPath,
6-
FieldValues,
7-
} from 'react-hook-form';
2+
import { Controller, FieldPath, FieldValues } from 'react-hook-form';
83

94
import { cn } from '@/lib/tailwind/utils';
105

116
import { useFormField } from '@/components/form/form-field';
12-
import { FieldCommonProps } from '@/components/form/form-field-controller';
7+
import { FieldProps } from '@/components/form/form-field-controller';
138
import { FormFieldError } from '@/components/form/form-field-error';
149
import { DatePicker } from '@/components/ui/date-picker';
1510

1611
export type FieldDateProps<
1712
TFieldValues extends FieldValues = FieldValues,
1813
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
19-
> = FieldCommonProps<TFieldValues, TName> & {
20-
type: 'date';
21-
containerProps?: ComponentProps<'div'>;
22-
} & RemoveFromType<
23-
Omit<
24-
ComponentProps<typeof DatePicker>,
25-
'id' | 'aria-invalid' | 'aria-describedby'
26-
>,
27-
ControllerRenderProps
28-
>;
14+
> = FieldProps<
15+
TFieldValues,
16+
TName,
17+
{
18+
type: 'date';
19+
containerProps?: ComponentProps<'div'>;
20+
} & ComponentProps<typeof DatePicker>
21+
>;
2922

3023
export const FieldDate = <
3124
TFieldValues extends FieldValues = FieldValues,
@@ -71,6 +64,14 @@ export const FieldDate = <
7164
}
7265
{...rest}
7366
{...field}
67+
onChange={(e) => {
68+
field.onChange(e);
69+
rest.onChange?.(e);
70+
}}
71+
onBlur={(e) => {
72+
field.onBlur();
73+
rest.onBlur?.(e);
74+
}}
7475
/>
7576
<FormFieldError />
7677
</div>

‎app/components/form/field-number/index.tsx‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,27 @@
11
import { ComponentProps } from 'react';
2-
import {
3-
Controller,
4-
ControllerRenderProps,
5-
FieldPath,
6-
FieldValues,
7-
} from 'react-hook-form';
2+
import { Controller, FieldPath, FieldValues } from 'react-hook-form';
83
import { isNullish } from 'remeda';
94

105
import { cn } from '@/lib/tailwind/utils';
116

127
import { NumberInput } from '@/components/ui/number-input';
138

149
import { useFormField } from '../form-field';
15-
import { FieldCommonProps } from '../form-field-controller';
10+
import { FieldProps } from '../form-field-controller';
1611
import { FormFieldError } from '../form-field-error';
1712

1813
export type FieldNumberProps<
1914
TFieldValues extends FieldValues = FieldValues,
2015
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
21-
> = FieldCommonProps<TFieldValues, TName> & {
22-
type: 'number';
23-
containerProps?: ComponentProps<'div'>;
24-
inCents?: boolean;
25-
} & RemoveFromType<
26-
Omit<
27-
ComponentProps<typeof NumberInput>,
28-
'id' | 'aria-invalid' | 'aria-describedby'
29-
>,
30-
ControllerRenderProps
31-
>;
16+
> = FieldProps<
17+
TFieldValues,
18+
TName,
19+
{
20+
type: 'number';
21+
containerProps?: ComponentProps<'div'>;
22+
inCents?: boolean;
23+
} & ComponentProps<typeof NumberInput>
24+
>;
3225

3326
export const FieldNumber = <
3427
TFieldValues extends FieldValues = FieldValues,
@@ -91,6 +84,11 @@ export const FieldNumber = <
9184
value={formatValue(value, 'from-cents')}
9285
onValueChange={(value) => {
9386
onChange(formatValue(value, 'to-cents'));
87+
rest.onValueChange?.(value);
88+
}}
89+
onBlur={(e) => {
90+
field.onBlur();
91+
rest.onBlur?.(e);
9492
}}
9593
/>
9694
<FormFieldError />

‎app/components/form/field-otp/index.tsx‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
import { ComponentProps, ComponentRef, useRef } from 'react';
2-
import {
3-
Controller,
4-
ControllerRenderProps,
5-
FieldPath,
6-
FieldValues,
7-
} from 'react-hook-form';
2+
import { Controller, FieldPath, FieldValues } from 'react-hook-form';
83

94
import { cn } from '@/lib/tailwind/utils';
105

@@ -15,23 +10,21 @@ import {
1510
} from '@/components/ui/input-otp';
1611

1712
import { useFormField } from '../form-field';
18-
import { FieldCommonProps } from '../form-field-controller';
13+
import { FieldProps } from '../form-field-controller';
1914
import { FormFieldError } from '../form-field-error';
2015

2116
export type FieldOtpProps<
2217
TFieldValues extends FieldValues = FieldValues,
2318
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
24-
> = FieldCommonProps<TFieldValues, TName> & {
25-
type: 'otp';
26-
autoSubmit?: boolean;
27-
containerProps?: ComponentProps<'div'>;
28-
} & RemoveFromType<
29-
Omit<
30-
ComponentProps<typeof InputOTP>,
31-
'id' | 'aria-invalid' | 'aria-describedby' | 'children'
32-
>,
33-
ControllerRenderProps
34-
>;
19+
> = FieldProps<
20+
TFieldValues,
21+
TName,
22+
{
23+
type: 'otp';
24+
autoSubmit?: boolean;
25+
containerProps?: ComponentProps<'div'>;
26+
} & Omit<ComponentProps<typeof InputOTP>, 'children'>
27+
>;
3528

3629
export const FieldOtp = <
3730
TFieldValues extends FieldValues = FieldValues,
@@ -91,6 +84,14 @@ export const FieldOtp = <
9184
}}
9285
{...rest}
9386
{...field}
87+
onChange={(e) => {
88+
field.onChange(e);
89+
rest.onChange?.(e);
90+
}}
91+
onBlur={(e) => {
92+
field.onBlur();
93+
rest.onBlur?.(e);
94+
}}
9495
>
9596
<InputOTPGroup>
9697
{Array.from({ length: rest.maxLength }).map((_, index) => (

‎app/components/form/field-select/index.tsx‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,24 @@
11
import { ComponentProps } from 'react';
2-
import {
3-
Controller,
4-
ControllerRenderProps,
5-
FieldPath,
6-
FieldValues,
7-
} from 'react-hook-form';
2+
import { Controller, FieldPath, FieldValues } from 'react-hook-form';
83

94
import { cn } from '@/lib/tailwind/utils';
105

116
import { FormFieldError } from '@/components/form';
127
import { useFormField } from '@/components/form/form-field';
13-
import { FieldCommonProps } from '@/components/form/form-field-controller';
8+
import { FieldProps } from '@/components/form/form-field-controller';
149
import { Select } from '@/components/ui/select';
1510

1611
export type FieldSelectProps<
1712
TFieldValues extends FieldValues = FieldValues,
1813
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
19-
> = FieldCommonProps<TFieldValues, TName> & {
20-
type: 'select';
21-
containerProps?: ComponentProps<'div'>;
22-
} & RemoveFromType<
23-
Omit<
24-
ComponentProps<typeof Select>,
25-
'id' | 'aria-invalid' | 'aria-describedby'
26-
>,
27-
ControllerRenderProps
28-
>;
14+
> = FieldProps<
15+
TFieldValues,
16+
TName,
17+
{
18+
type: 'select';
19+
containerProps?: ComponentProps<'div'>;
20+
} & ComponentProps<typeof Select>
21+
>;
2922

3023
export const FieldSelect = <
3124
TFieldValues extends FieldValues = FieldValues,
@@ -72,6 +65,14 @@ export const FieldSelect = <
7265
}
7366
{...rest}
7467
{...field}
68+
onChange={(e) => {
69+
field.onChange(e);
70+
rest.onChange?.(e);
71+
}}
72+
onBlur={(e) => {
73+
field.onBlur();
74+
rest.onBlur?.(e);
75+
}}
7576
/>
7677
<FormFieldError />
7778
</div>

‎app/components/form/field-text/index.tsx‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,25 @@
11
import { ComponentProps } from 'react';
2-
import {
3-
Controller,
4-
ControllerRenderProps,
5-
FieldPath,
6-
FieldValues,
7-
} from 'react-hook-form';
2+
import { Controller, FieldPath, FieldValues } from 'react-hook-form';
83

94
import { cn } from '@/lib/tailwind/utils';
105

116
import { Input } from '@/components/ui/input';
127

138
import { useFormField } from '../form-field';
14-
import { FieldCommonProps } from '../form-field-controller';
9+
import { FieldProps } from '../form-field-controller';
1510
import { FormFieldError } from '../form-field-error';
1611

1712
export type FieldTextProps<
1813
TFieldValues extends FieldValues = FieldValues,
1914
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
20-
> = FieldCommonProps<TFieldValues, TName> & {
21-
type: 'text' | 'email' | 'tel';
22-
containerProps?: ComponentProps<'div'>;
23-
} & RemoveFromType<
24-
Omit<
25-
ComponentProps<typeof Input>,
26-
'id' | 'aria-invalid' | 'aria-describedby'
27-
>,
28-
ControllerRenderProps
29-
>;
15+
> = FieldProps<
16+
TFieldValues,
17+
TName,
18+
{
19+
type: 'text' | 'email' | 'tel';
20+
containerProps?: ComponentProps<'div'>;
21+
} & ComponentProps<typeof Input>
22+
>;
3023

3124
export const FieldText = <
3225
TFieldValues extends FieldValues = FieldValues,
@@ -72,6 +65,14 @@ export const FieldText = <
7265
}
7366
{...rest}
7467
{...field}
68+
onChange={(e) => {
69+
field.onChange(e);
70+
rest.onChange?.(e);
71+
}}
72+
onBlur={(e) => {
73+
field.onBlur();
74+
rest.onBlur?.(e);
75+
}}
7576
/>
7677
<FormFieldError />
7778
</div>

‎app/components/form/form-field-controller.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,15 @@ type FieldCustomProps<
2727
> &
2828
Required<Pick<ControllerProps<TFieldValues, TName>, 'control'>>;
2929

30-
export type FieldCommonProps<
30+
type CustomProps = object;
31+
export type FieldProps<
3132
TFieldValues extends FieldValues = FieldValues,
3233
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
34+
TProps extends CustomProps = CustomProps,
3335
> = Omit<FieldCustomProps<TFieldValues, TName>, 'render' | 'type'> & {
3436
size?: FormFieldSize;
3537
displayError?: boolean;
36-
};
38+
} & Omit<TProps, 'value' | 'ref' | 'id' | 'aria-invalid' | 'aria-describedby'>;
3739

3840
export type FormFieldControllerProps<
3941
TFieldValues extends FieldValues = FieldValues,

‎app/components/ui/date-input.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,13 +90,13 @@ export const DateInput = ({
9090
format = 'DD/MM/YYYY',
9191
...props
9292
}: Omit<ComponentProps<typeof Input>, 'onChange' | 'value'> & {
93-
onChange: (date: Date | null) => void;
93+
onChange?: (date: Date | null) => void;
9494
format?: string;
9595
value?: Date | null;
9696
}) => {
9797
const datePickerInputManagement = useDatePickerInputManagement({
9898
dateFormat: format,
99-
onChange,
99+
onChange: onChange ?? (() => undefined),
100100
dateValue: value,
101101
});
102102

‎app/components/ui/date-picker.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const DatePicker = ({
4545
mode="single"
4646
selected={props.value ?? undefined}
4747
onSelect={(date) => {
48-
props.onChange(date ?? null);
48+
props.onChange?.(date ?? null);
4949
datePicker.close();
5050
}}
5151
defaultMonth={props.value ?? undefined}

0 commit comments

Comments
 (0)