tsf-month-field

1'use client';
2 
3import type { Locale } from 'date-fns';
4import { format } from 'date-fns';
5import { CalendarIcon } from 'lucide-react';
6import * as React from 'react';
7import type { Matcher } from 'react-day-picker';
8import { Button } from '@/components/ui/button';
9import { Calendar } from '@/components/ui/calendar';
10import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';
11import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
12import { useFieldContext } from '@/components/ui/shuip/tanstack-form/form-context';
13import { cn } from '@/lib/utils';
14 
15export interface MonthFieldProps {
16  label?: string;
17  description?: string;
18  placeholder?: string;
19  minDate?: Date;
20  maxDate?: Date;
21  locale?: Locale;
22  disabled?: boolean;
23  fieldProps?: React.ComponentProps<typeof Field>;
24  className?: string;
25}
26 
27const toFirstOfMonth = (date: Date): Date => new Date(date.getFullYear(), date.getMonth(), 1);
28const toLastOfMonth = (date: Date): Date => new Date(date.getFullYear(), date.getMonth() + 1, 0);
29 
30export function MonthField({
31  label,
32  description,
33  placeholder = 'Pick a month',
34  minDate,
35  maxDate,
36  locale,
37  disabled,
38  fieldProps,
39  className,
40}: MonthFieldProps) {
41  const field = useFieldContext<Date | undefined>();
42  const { isValid, errors } = field.state.meta;
43  const [open, setOpen] = React.useState(false);
44 
45  const value = field.state.value;
46 
47  const handleSelect = (date: Date | undefined) => {
48    if (!date) {
49      field.handleChange(undefined);
50      return;
51    }
52    field.handleChange(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={!isValid} {...fieldProps}>
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.handleBlur}
74            aria-invalid={!isValid}
75            className={cn('w-full justify-between font-normal', !value && 'text-muted-foreground', className)}
76          >
77// … truncated