rhf-time-field

1'use client';
2 
3import type { Lens } from '@hookform/lenses';
4import { useController } from 'react-hook-form';
5import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';
6import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
7import { HOUR_OPTIONS, isHourDisabled, isMinuteDisabled, joinTime, MINUTE_OPTIONS, splitTime } from '@/lib/time';
8 
9export interface TimeFieldProps {
10  lens: Lens<string>;
11  label?: string;
12  description?: string;
13  min?: string;
14  max?: string;
15  disabled?: boolean;
16}
17 
18export function TimeField({ lens, label, description, min, max, disabled }: TimeFieldProps) {
19  const { field, fieldState } = useController(lens.interop());
20  const { hour, minute } = splitTime(field.value ?? '');
21  const bounds = { min, max };
22 
23  return (
24    <Field className='gap-2' data-invalid={fieldState.invalid}>
25      {label && <FieldLabel htmlFor={field.name}>{label}</FieldLabel>}
26      <div className='flex items-center gap-2'>
27        <Select value={hour} onValueChange={(h) => field.onChange(joinTime(h, minute))} disabled={disabled}>
28          <SelectTrigger id={field.name} aria-invalid={fieldState.invalid} className='w-full'>
29            <SelectValue placeholder='HH' />
30          </SelectTrigger>
31          <SelectContent>
32            {HOUR_OPTIONS.map((h) => (
33              <SelectItem key={h} value={h} disabled={isHourDisabled(h, bounds)}>
34                {h}
35              </SelectItem>
36            ))}
37          </SelectContent>
38        </Select>
39        <span className='text-muted-foreground'>:</span>
40        <Select value={minute} onValueChange={(m) => field.onChange(joinTime(hour, m))} disabled={disabled}>
41          <SelectTrigger aria-invalid={fieldState.invalid} className='w-full'>
42            <SelectValue placeholder='mm' />
43          </SelectTrigger>
44          <SelectContent>
45            {MINUTE_OPTIONS.map((m) => (
46              <SelectItem key={m} value={m} disabled={isMinuteDisabled(m, hour, bounds)}>
47                {m}
48              </SelectItem>
49            ))}
50          </SelectContent>
51        </Select>
52      </div>
53      {fieldState.invalid && <FieldError className='text-xs text-left' errors={[fieldState.error]} />}
54      {description && <FieldDescription className='text-xs'>{description}</FieldDescription>}
55    </Field>
56  );
57}