tsf-date-range-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 { DateRange } 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 DateRangeFieldProps {
16  label?: string;
17  description?: string;
18  placeholder?: string;
19  minDate?: Date;
20  maxDate?: Date;
21  locale?: Locale;
22  fieldProps?: React.ComponentProps<typeof Field>;
23  triggerProps?: React.ComponentProps<typeof Button>;
24}
25 
26function formatRange(value: DateRange | undefined, locale: Locale | undefined): string | null {
27  if (!value?.from) return null;
28  const fromLabel = format(value.from, 'PPP', { locale });
29  if (!value.to) return fromLabel;
30  return `${fromLabel} – ${format(value.to, 'PPP', { locale })}`;
31}
32 
33export function DateRangeField({
34  label,
35  description,
36  placeholder = 'Pick a date range',
37  minDate,
38  maxDate,
39  locale,
40  fieldProps,
41  triggerProps,
42}: DateRangeFieldProps) {
43  const field = useFieldContext<DateRange | undefined>();
44  const { isValid, errors } = field.state.meta;
45  const value = field.state.value;
46  const [open, setOpen] = React.useState(false);
47 
48  const disabledMatcher = React.useMemo(() => {
49    if (!minDate && !maxDate) return undefined;
50    return { ...(minDate ? { before: minDate } : {}), ...(maxDate ? { after: maxDate } : {}) };
51  }, [minDate, maxDate]);
52 
53  const triggerLabel = formatRange(value, locale);
54 
55  return (
56    <Field className='gap-2' data-invalid={!isValid} {...fieldProps}>
57      {label && <FieldLabel htmlFor={field.name}>{label}</FieldLabel>}
58      <Popover open={open} onOpenChange={setOpen}>
59        <PopoverTrigger asChild>
60          <Button
61            id={field.name}
62            type='button'
63            variant='outline'
64            onBlur={field.handleBlur}
65            aria-invalid={!isValid}
66            {...triggerProps}
67            className={cn(
68              'w-full justify-between font-normal',
69              !triggerLabel && 'text-muted-foreground',
70              triggerProps?.className,
71            )}
72          >
73// … truncated