tsf-select-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';
6 
7export type SelectFieldOption = Record<string, string>;
8 
9export interface SelectFieldProps {
10  options: SelectFieldOption;
11  label?: string;
12  placeholder?: string;
13  description?: string;
14  fieldProps?: React.ComponentProps<typeof Field>;
15  props?: React.ComponentProps<typeof Select>;
16}
17 
18export function SelectField({ options, label, description, placeholder, fieldProps, props }: SelectFieldProps) {
19  const field = useFieldContext<string>();
20  const { isValid, errors } = field.state.meta;
21 
22  return (
23    <Field className='gap-2' data-invalid={!isValid} {...fieldProps}>
24      {label && <FieldLabel>{label}</FieldLabel>}
25      <Select
26        name={field.name}
27        value={field.state.value}
28        onValueChange={(value) => field.handleChange(value)}
29        {...props}
30      >
31        <SelectTrigger aria-invalid={!isValid}>
32          <SelectValue placeholder={placeholder} />
33        </SelectTrigger>
34        <SelectContent>
35          {Object.entries(options).map(([optionLabel, value]) => (
36            <SelectItem key={value} value={value}>
37              {optionLabel}
38            </SelectItem>
39          ))}
40        </SelectContent>
41      </Select>
42      {!isValid && (
43        <FieldError
44          className='text-xs text-left'
45          errors={errors.map((error) => ({ message: typeof error === 'string' ? error : error?.message }))}
46        />
47      )}
48      {description && <FieldDescription className='text-xs'>{description}</FieldDescription>}
49    </Field>
50  );
51}