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 | 72x | import { Control, FieldValues } from "react-hook-form";
import * as TRhf from "shared-types";
import { FormLabel, FormField } from "../Inputs";
import { DependencyWrapper } from "./dependencyWrapper";
import { RHFSlot } from "./Slot";
import { ruleGenerator } from "./utils";
import { cn } from "@/utils";
export const RHFFormGroup = <TFieldValues extends FieldValues>(props: {
form: TRhf.FormGroup;
control: Control<TFieldValues>;
parentId?: string;
className?: string;
}) => {
return (
<DependencyWrapper {...props.form}>
<div className={props.className}>
{props.form.description && (
<div className="mb-4">
<FormLabel className={props.form.descriptionClassName || "font-bold"}>
{props.form.description}
</FormLabel>
</div>
)}
<div className={cn(props.form.wrapperClassName, "space-y-6")}>
{props.form.slots.map((SLOT) => (
<DependencyWrapper key={props.parentId + SLOT.name} {...SLOT}>
<FormField
// @ts-expect-error
control={props.control}
name={(props.parentId + SLOT.name) as never}
// @ts-expect-error
rules={ruleGenerator(SLOT.rules, SLOT.addtnlRules)}
render={RHFSlot({
...SLOT,
control: props.control as Control,
name: props.parentId + SLOT.name,
parentId: props.parentId,
})}
/>
</DependencyWrapper>
))}
</div>
</div>
</DependencyWrapper>
);
};
|