tsf-time-range

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