Field Renderer

1"use client";
2 
3import React from "react";
4import { Controller, FieldPath, FieldValues, useWatch } from "react-hook-form";
5 
6import {
7  Field,
8  FieldContent,
9  FieldDescription,
10  FieldError,
11  FieldLabel,
12} from "@/components/ui/field";
13import { cn } from "@/lib/utils";
14 
15import { FormFieldType } from "./constants";
16import { FieldSkeleton } from "./FieldSkeleton";
17import { FieldControlRenderer, HEIGHT_CLASSES } from "./render-field-control";
18import { FieldRendererProps } from "./types";
19 
20function FieldRendererInner<
21  TFieldValues extends FieldValues,
22  TName extends FieldPath<TFieldValues>,
23  TRow extends Record<string, unknown> = Record<string, unknown>
24>(props: FieldRendererProps<TFieldValues, TName, TRow>) {
25  const {
26    control,
27    name,
28    label,
29    description,
30    required,
31    disabled,
32    wrapperClassName,
33    hideLabel,
34    hideDescription,
35    hideMessage,
36    labelClassName,
37    descriptionClassName,
38    messageClassName,
39    fieldType,
40    height,
41    renderSkeleton,
42  } = props;
43  const values = useWatch({ control }) as TFieldValues;
44 
45  const rendersInlineLabel =
46    fieldType === FormFieldType.CHECKBOX || fieldType === FormFieldType.SWITCH;
47 
48  if (props.show && !props.show(values)) {
49    return null;
50  }
51 
52  if (fieldType === FormFieldType.SKELETON) {
53    return renderSkeleton ? (
54      renderSkeleton({} as never)
55    ) : (
56      <FieldSkeleton className={HEIGHT_CLASSES[height ?? "md"]} />
57    );
58  }
59 
60  return (
61    <Controller
62      control={control}
63      name={name}
64      disabled={disabled}
65      render={({ field, fieldState }) => {
66        const baseId = String(name).replace(/\./g, "-");
67        const fieldId = `${baseId}-field`;
68        const descriptionId = `${fieldId}-description`;
69        const messageId = `${fieldId}-message`;
70        const invalid = fieldState.invalid;
71 
72        return (
73          <Field
74            data-invalid={invalid}
75            data-disabled={disabled || undefined}
76            className={cn("w-full", wrapperClassName)}
77            orientation={rendersInlineLabel ? "horizontal" : "vertical"}
78          >
79            {rendersInlineLabel ? (
80              <>
81                <FieldControlRenderer
82                  field={field}
83                  fieldId={fieldId}
84                  descriptionId={descriptionId}
85                  messageId={messageId}
86                  invalid={invalid}
87                  props={props}
88                />
89                <FieldContent>
90                  {!hideLabel && label && (
91// … truncated