tsf-time-field

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 { HOUR_OPTIONS, isHourDisabled, isMinuteDisabled, joinTime, MINUTE_OPTIONS, splitTime } from '@/lib/time';
7 
8export interface TimeFieldProps {
9  label?: string;
10  description?: string;
11  min?: string;
12  max?: string;
13  disabled?: boolean;
14  fieldProps?: React.ComponentProps<typeof Field>;
15}
16 
17export function TimeField({ label, description, min, max, disabled, fieldProps }: TimeFieldProps) {
18  const field = useFieldContext<string>();
19  const { isValid, errors } = field.state.meta;
20  const { hour, minute } = splitTime(field.state.value ?? '');
21  const bounds = { min, max };
22 
23  return (
24    <Field className='gap-2' data-invalid={!isValid} {...fieldProps}>
25      {label && <FieldLabel htmlFor={field.name}>{label}</FieldLabel>}
26      <div className='flex items-center gap-2'>
27        <Select value={hour} onValueChange={(h) => field.handleChange(joinTime(h, minute))} disabled={disabled}>
28          <SelectTrigger id={field.name} aria-invalid={!isValid} 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.handleChange(joinTime(hour, m))} disabled={disabled}>
41          <SelectTrigger aria-invalid={!isValid} 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      {!isValid && (
54        <FieldError
55          className='text-xs text-left'
56          errors={errors.map((error) => ({ message: typeof error === 'string' ? error : error?.message }))}
57        />
58      )}
59      {description && <FieldDescription className='text-xs'>{description}</FieldDescription>}
60// … truncated