tsf-input-field

1'use client';
2 
3import { InfoIcon } from 'lucide-react';
4import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';
5import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '@/components/ui/input-group';
6import { useFieldContext } from '@/components/ui/shuip/tanstack-form/form-context';
7import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
8 
9export interface InputFieldProps {
10  label?: string;
11  description?: string;
12  fieldProps?: React.ComponentProps<typeof Field>;
13  props?: React.ComponentProps<'input'>;
14  tooltip?: React.ReactNode;
15}
16 
17export function InputField({ label, description, fieldProps, props, tooltip }: InputFieldProps) {
18  const field = useFieldContext<string | number>();
19  const { isValid, errors } = field.state.meta;
20  const isNumeric = props?.type === 'number' || props?.type === 'range' || typeof field.state.value === 'number';
21 
22  return (
23    <Field className='gap-2' data-invalid={!isValid} {...fieldProps}>
24      {label && <FieldLabel htmlFor={field.name}>{label}</FieldLabel>}
25      <InputGroup>
26        <InputGroupInput
27          id={field.name}
28          type={isNumeric ? 'number' : 'text'}
29          name={field.name}
30          value={typeof field.state.value === 'number' && Number.isNaN(field.state.value) ? '' : field.state.value}
31          onChange={(e) => field.handleChange(isNumeric ? e.target.valueAsNumber : e.target.value)}
32          onBlur={field.handleBlur}
33          aria-invalid={!isValid}
34          {...props}
35        />
36        {tooltip && (
37          <InputGroupAddon align='inline-end'>
38            <Tooltip>
39              <TooltipTrigger asChild>
40                <InputGroupButton aria-label='Info' size='icon-xs'>
41                  <InfoIcon />
42                </InputGroupButton>
43              </TooltipTrigger>
44              <TooltipContent>{tooltip}</TooltipContent>
45            </Tooltip>
46          </InputGroupAddon>
47        )}
48      </InputGroup>
49      {!isValid && (
50        <FieldError
51          className='text-xs text-left'
52          errors={errors.map((error) => ({ message: typeof error === 'string' ? error : error?.message }))}
53        />
54      )}
55      {description && <FieldDescription className='text-xs'>{description}</FieldDescription>}
56    </Field>
57  );
58}