152 lines
4.1 KiB
TypeScript
152 lines
4.1 KiB
TypeScript
import {
|
|
Field,
|
|
FieldDescription,
|
|
FieldError,
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
} from "@repo/shadcn-ui/components";
|
|
import { cn } from "@repo/shadcn-ui/lib/utils";
|
|
import React from "react";
|
|
import { Controller, type FieldPath, type FieldValues, useFormContext } from "react-hook-form";
|
|
|
|
import { FormFieldLabel } from "./form-field-label.tsx";
|
|
|
|
interface SelectFieldItem {
|
|
value: string;
|
|
label: string;
|
|
}
|
|
|
|
type SelectFieldValue = string | null;
|
|
|
|
type SelectFieldProps<TFormValues extends FieldValues> = {
|
|
name: FieldPath<TFormValues>;
|
|
|
|
label?: string;
|
|
description?: string;
|
|
reserveDescriptionSpace?: boolean;
|
|
|
|
disabled?: boolean;
|
|
required?: boolean;
|
|
readOnly?: boolean;
|
|
|
|
placeholder?: string;
|
|
items?: SelectFieldItem[];
|
|
|
|
orientation?: "vertical" | "horizontal" | "responsive";
|
|
|
|
serialize?: (value: unknown) => string;
|
|
deserialize?: (value: SelectFieldValue) => unknown;
|
|
|
|
className?: string;
|
|
inputClassName?: string;
|
|
};
|
|
|
|
export function SelectField<TFormValues extends FieldValues>({
|
|
name,
|
|
|
|
label,
|
|
description,
|
|
reserveDescriptionSpace = false,
|
|
|
|
disabled = false,
|
|
required = false,
|
|
readOnly = false,
|
|
|
|
placeholder,
|
|
items = [],
|
|
|
|
orientation = "vertical",
|
|
|
|
serialize,
|
|
deserialize,
|
|
|
|
className,
|
|
inputClassName,
|
|
}: SelectFieldProps<TFormValues>) {
|
|
const triggerId = React.useId();
|
|
const { control, formState } = useFormContext<TFormValues>();
|
|
const isDisabled = Boolean(disabled || readOnly || formState.isSubmitting);
|
|
|
|
const serializeValue =
|
|
serialize ?? ((value: unknown): string => (typeof value === "string" ? value : ""));
|
|
|
|
const deserializeValue = deserialize ?? ((value: SelectFieldValue): string => value ?? "");
|
|
|
|
return (
|
|
<Controller
|
|
control={control}
|
|
name={name}
|
|
render={({ field, fieldState }) => {
|
|
const fieldValue = serializeValue(field.value);
|
|
|
|
const normalizedItems =
|
|
fieldValue && !items.some((item) => item.value === fieldValue)
|
|
? [{ value: fieldValue, label: fieldValue }, ...items]
|
|
: items;
|
|
|
|
const selectedItem = normalizedItems.find((item) => item.value === fieldValue);
|
|
|
|
return (
|
|
<Field
|
|
className={cn("gap-1", className)}
|
|
data-invalid={fieldState.invalid}
|
|
orientation={orientation}
|
|
>
|
|
{label ? (
|
|
<FormFieldLabel htmlFor={triggerId} required={required}>
|
|
{label}
|
|
</FormFieldLabel>
|
|
) : null}
|
|
|
|
<Select
|
|
disabled={isDisabled}
|
|
onValueChange={(value) => field.onChange(deserializeValue(value))}
|
|
value={fieldValue}
|
|
>
|
|
<SelectTrigger
|
|
aria-invalid={fieldState.invalid}
|
|
aria-required={required}
|
|
className={cn(
|
|
"bg-muted/50 font-medium",
|
|
"hover:border-ring hover:ring-ring/20 hover:ring-[3px]",
|
|
"focus-visible:border-ring focus-visible:ring-ring/60 focus-visible:ring-[3px]",
|
|
"placeholder:text-muted-foreground/50",
|
|
inputClassName
|
|
)}
|
|
id={triggerId}
|
|
>
|
|
<span
|
|
className={cn(
|
|
"truncate text-left",
|
|
selectedItem ? "" : "text-muted-foreground font-normal italic"
|
|
)}
|
|
>
|
|
{selectedItem?.label ?? placeholder}
|
|
</span>
|
|
</SelectTrigger>
|
|
|
|
<SelectContent>
|
|
{normalizedItems.map((item) => (
|
|
<SelectItem key={`key-${item.value}`} value={item.value}>
|
|
{item.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
{description ? (
|
|
<FieldDescription>{description}</FieldDescription>
|
|
) : reserveDescriptionSpace ? (
|
|
<div aria-hidden="true" className="min-h-5" />
|
|
) : null}
|
|
|
|
<FieldError errors={[fieldState.error]} />
|
|
</Field>
|
|
);
|
|
}}
|
|
/>
|
|
);
|
|
}
|