tsf-textarea-field

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