110 lines
2.7 KiB
TypeScript
110 lines
2.7 KiB
TypeScript
import {
|
|
Field,
|
|
FieldDescription,
|
|
FieldError,
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupInput,
|
|
} from "@repo/shadcn-ui/components";
|
|
import { cn } from "@repo/shadcn-ui/lib/utils";
|
|
import * as React from "react";
|
|
import { type FieldPath, type FieldValues, useFormContext } from "react-hook-form";
|
|
|
|
import { FormFieldLabel } from "./form-field-label.tsx";
|
|
import { type TextFieldTypePreset, getInputPresetProps } from "./text-field-presets.tsx";
|
|
import type { NativeInputProps } from "./types.ts";
|
|
|
|
type TextFieldProps<TFormValues extends FieldValues> = NativeInputProps & {
|
|
name: FieldPath<TFormValues>;
|
|
|
|
label?: string;
|
|
description?: string;
|
|
|
|
orientation?: "vertical" | "horizontal" | "responsive";
|
|
|
|
inputClassName?: string;
|
|
|
|
leftIcon?: React.ReactNode;
|
|
rightIcon?: React.ReactNode;
|
|
|
|
typePreset?: TextFieldTypePreset;
|
|
};
|
|
|
|
export const TextField = <TFormValues extends FieldValues>({
|
|
name,
|
|
|
|
label,
|
|
description,
|
|
|
|
required = false,
|
|
readOnly = false,
|
|
|
|
orientation = "vertical",
|
|
|
|
className,
|
|
inputClassName,
|
|
|
|
leftIcon,
|
|
rightIcon,
|
|
|
|
typePreset,
|
|
|
|
...inputRest
|
|
}: TextFieldProps<TFormValues>) => {
|
|
const { register, formState, getFieldState } = useFormContext<TFormValues>();
|
|
|
|
const inputId = React.useId();
|
|
const disabled = formState.isSubmitting || inputRest.disabled;
|
|
|
|
const presetProps = getInputPresetProps(typePreset);
|
|
|
|
// Obtener error del campo (tipado seguro)
|
|
const fieldError = getFieldState(name, formState).error;
|
|
|
|
return (
|
|
<Field className={cn("gap-1", className)} data-invalid={!!fieldError} orientation={orientation}>
|
|
{label ? (
|
|
<FormFieldLabel htmlFor={inputId} required={required}>
|
|
{label}
|
|
</FormFieldLabel>
|
|
) : null}
|
|
|
|
<InputGroup
|
|
className={cn(
|
|
"bg-muted/50 font-medium",
|
|
"hover:border-ring/60",
|
|
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
inputClassName
|
|
)}
|
|
>
|
|
{leftIcon && (
|
|
<InputGroupAddon aria-hidden="true" className={cn("bg-muted/50 font-medium")}>
|
|
{leftIcon}
|
|
</InputGroupAddon>
|
|
)}
|
|
|
|
<InputGroupInput
|
|
{...presetProps}
|
|
{...inputRest}
|
|
{...register(name)}
|
|
aria-invalid={!!fieldError}
|
|
disabled={disabled}
|
|
id={inputId}
|
|
readOnly={readOnly}
|
|
required={required}
|
|
/>
|
|
|
|
{rightIcon && <InputGroupAddon aria-hidden="true">{rightIcon}</InputGroupAddon>}
|
|
</InputGroup>
|
|
|
|
{description ? (
|
|
<FieldDescription>{description}</FieldDescription>
|
|
) : (
|
|
<div aria-hidden="true" className="min-h-5" />
|
|
)}
|
|
|
|
<FieldError errors={[fieldError]} />
|
|
</Field>
|
|
);
|
|
};
|