rhf-number-field

1'use client';
2 
3import type { Lens } from '@hookform/lenses';
4import { InfoIcon } from 'lucide-react';
5import type * as React from 'react';
6import { useController } from 'react-hook-form';
7import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';
8import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '@/components/ui/input-group';
9import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
10 
11export interface NumberFieldProps
12  extends Omit<React.ComponentProps<typeof InputGroupInput>, 'value' | 'onChange' | 'type'> {
13  lens: Lens<number>;
14  label?: string;
15  description?: string;
16  tooltip?: React.ReactNode;
17  type?: 'number' | 'range';
18}
19 
20export function NumberField({ lens, label, description, tooltip, type = 'number', ...props }: NumberFieldProps) {
21  const { field, fieldState } = useController(lens.interop());
22  const id = props.id ?? field.name;
23 
24  const value = field.value == null || Number.isNaN(field.value) ? '' : field.value;
25 
26  return (
27    <Field className='gap-2' data-invalid={fieldState.invalid}>
28      {label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
29      <InputGroup>
30        <InputGroupInput
31          {...field}
32          {...props}
33          id={id}
34          type={type}
35          value={value}
36          onChange={(e) => field.onChange(e.target.valueAsNumber)}
37          aria-invalid={fieldState.invalid}
38        />
39        {tooltip && (
40          <InputGroupAddon align='inline-end'>
41            <Tooltip>
42              <TooltipTrigger asChild>
43                <InputGroupButton aria-label='Info' size='icon-xs'>
44                  <InfoIcon />
45                </InputGroupButton>
46              </TooltipTrigger>
47              <TooltipContent>{tooltip}</TooltipContent>
48            </Tooltip>
49          </InputGroupAddon>
50        )}
51      </InputGroup>
52      {fieldState.invalid && <FieldError className='text-xs text-left' errors={[fieldState.error]} />}
53      {description && <FieldDescription className='text-xs'>{description}</FieldDescription>}
54    </Field>
55  );
56}