Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | 72x 157x 134x 41x 41x | import { useEffect } from "react";
import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
import type { RHFSlotProps, RHFTextField } from "shared-types";
import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "../Inputs";
import { RHFTextDisplay } from ".";
import { SlotField } from "./SlotField";
import { cn } from "@/utils";
export const RHFSlot = <
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>({
control,
label,
styledLabel,
description,
descriptionAbove,
descriptionClassName,
labelClassName,
formItemClassName,
horizontalLayout,
...rest
}: RHFSlotProps & { control: any; parentId?: string }): ControllerProps<
TFieldValues,
TName
>["render"] =>
function SlotFormWrapper({ field }) {
// added to unregister/reset inputs when removed from dom
useEffect(() => {
return () => {
control.unregister(field.name);
};
}, []);
return (
<FormItem
className={cn(`flex ${formItemClassName ? ` ${formItemClassName}` : ""}
${horizontalLayout ? "" : " flex-col gap-4"}
`)}
data-testid={rest.name + "Wrapper"}
>
{(label || styledLabel) && (
<FormLabel className={labelClassName}>
<RHFTextDisplay text={(styledLabel || label) as RHFTextField} />
</FormLabel>
)}
{descriptionAbove && description && (
<FormDescription className={descriptionClassName}>
<RHFTextDisplay text={description} />
</FormDescription>
)}
<FormControl>
<SlotField
{...rest}
horizontalLayout={horizontalLayout}
control={control}
field={field}
/>
</FormControl>
{description && !descriptionAbove && (
<FormDescription className={descriptionClassName}>
<RHFTextDisplay text={description} />
</FormDescription>
)}
<FormMessage className="slot-form-message" />
</FormItem>
);
};
|