rhf-time-range

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 {
8  addOneHour,
9  HOUR_OPTIONS,
10  isHourDisabled,
11  isMinuteDisabled,
12  joinTime,
13  MINUTE_OPTIONS,
14  nextSlot,
15  splitTime,
16  type TimeRangeValue,
17} from '@/lib/time';
18 
19interface TimePickerProps {
20  id?: string;
21  value: string;
22  onChange: (value: string) => void;
23  min?: string;
24  disabled?: boolean;
25  invalid?: boolean;
26}
27 
28function TimePicker({ id, value, onChange, min, disabled, invalid }: TimePickerProps) {
29  const { hour, minute } = splitTime(value);
30  const bounds = { min };
31 
32  return (
33    <div className='flex items-center gap-2'>
34      <Select value={hour} onValueChange={(h) => onChange(joinTime(h, minute))} disabled={disabled}>
35        <SelectTrigger id={id} aria-invalid={invalid} className='w-full'>
36          <SelectValue placeholder='HH' />
37        </SelectTrigger>
38        <SelectContent>
39          {HOUR_OPTIONS.map((h) => (
40            <SelectItem key={h} value={h} disabled={isHourDisabled(h, bounds)}>
41              {h}
42            </SelectItem>
43          ))}
44        </SelectContent>
45      </Select>
46      <span className='text-muted-foreground'>:</span>
47      <Select value={minute} onValueChange={(m) => onChange(joinTime(hour, m))} disabled={disabled}>
48        <SelectTrigger aria-invalid={invalid} className='w-full'>
49          <SelectValue placeholder='mm' />
50        </SelectTrigger>
51        <SelectContent>
52          {MINUTE_OPTIONS.map((m) => (
53            <SelectItem key={m} value={m} disabled={isMinuteDisabled(m, hour, bounds)}>
54              {m}
55            </SelectItem>
56          ))}
57        </SelectContent>
58      </Select>
59    </div>
60  );
61}
62 
63export interface TimeRangeFieldProps {
64  lens: Lens<TimeRangeValue>;
65  label?: string;
66  description?: string;
67  startLabel?: string;
68  endLabel?: string;
69  disabled?: boolean;
70}
71 
72export function TimeRangeField({
73  lens,
74  label,
75  description,
76  startLabel = 'Start',
77  endLabel = 'End',
78  disabled,
79}: TimeRangeFieldProps) {
80  const { field, fieldState } = useController(lens.interop());
81  const value: TimeRangeValue = field.value ?? { start: '', end: '' };
82 
83  return (
84    <Field className='gap-2' data-invalid={fieldState.invalid}>
85      {label && <FieldLabel>{label}</FieldLabel>}
86// … truncated