rhf-month-field

1'use client';
2 
3import type { Lens } from '@hookform/lenses';
4import type { Locale } from 'date-fns';
5import { format } from 'date-fns';
6import { CalendarIcon } from 'lucide-react';
7import * as React from 'react';
8import type { Matcher } from 'react-day-picker';
9import { useController } from 'react-hook-form';
10import { Button } from '@/components/ui/button';
11import { Calendar } from '@/components/ui/calendar';
12import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';
13import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
14import { cn } from '@/lib/utils';
15 
16export interface MonthFieldProps {
17  lens: Lens<Date | undefined>;
18  label?: string;
19  description?: string;
20  placeholder?: string;
21  minDate?: Date;
22  maxDate?: Date;
23  locale?: Locale;
24  disabled?: boolean;
25  className?: string;
26}
27 
28const toFirstOfMonth = (date: Date): Date => new Date(date.getFullYear(), date.getMonth(), 1);
29const toLastOfMonth = (date: Date): Date => new Date(date.getFullYear(), date.getMonth() + 1, 0);
30 
31export function MonthField({
32  lens,
33  label,
34  description,
35  placeholder = 'Pick a month',
36  minDate,
37  maxDate,
38  locale,
39  disabled,
40  className,
41}: MonthFieldProps) {
42  const { field, fieldState } = useController(lens.interop());
43  const [open, setOpen] = React.useState(false);
44 
45  const value: Date | undefined = field.value;
46 
47  const handleSelect = (date: Date | undefined) => {
48    if (!date) {
49      field.onChange(undefined);
50      return;
51    }
52    field.onChange(toFirstOfMonth(date));
53    setOpen(false);
54  };
55 
56  const minMonth = minDate ? toFirstOfMonth(minDate) : undefined;
57  const maxMonth = maxDate ? toLastOfMonth(maxDate) : undefined;
58 
59  const disabledMatchers: Matcher[] = [];
60  if (minMonth) disabledMatchers.push({ before: minMonth });
61  if (maxMonth) disabledMatchers.push({ after: maxMonth });
62 
63  return (
64    <Field className='gap-2' data-invalid={fieldState.invalid}>
65      {label && <FieldLabel htmlFor={field.name}>{label}</FieldLabel>}
66      <Popover open={open} onOpenChange={setOpen}>
67        <PopoverTrigger asChild>
68          <Button
69            id={field.name}
70            type='button'
71            variant='outline'
72            disabled={disabled}
73            onBlur={field.onBlur}
74            aria-invalid={fieldState.invalid}
75            className={cn('w-full justify-between font-normal', !value && 'text-muted-foreground', className)}
76          >
77// … truncated