36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
import { FormUi } from "@common/business_components/ui";
|
|
import type { ControllerRenderProps, FieldError, FieldValues, Path } from "react-hook-form";
|
|
import { cloneElement, isValidElement } from "react";
|
|
interface AccessibleFormFieldProps<T extends FieldValues> {
|
|
field: ControllerRenderProps<T, Path<T>>;
|
|
label: string;
|
|
required?: boolean;
|
|
error?: FieldError;
|
|
isDisabled?: boolean;
|
|
inputComponent: React.ReactElement<{ disabled?: boolean }>;
|
|
}
|
|
|
|
export function AccessibleFormField<T extends FieldValues>({
|
|
label,
|
|
required = false,
|
|
inputComponent,
|
|
isDisabled = false,
|
|
}: AccessibleFormFieldProps<T>) {
|
|
const labelText = required ? `${label} *` : label;
|
|
|
|
return (
|
|
<FormUi label={labelText} isDisabled={isDisabled}>
|
|
<div>
|
|
{isValidElement(inputComponent)
|
|
? cloneElement(inputComponent, { disabled: isDisabled } as Partial<typeof inputComponent.props>)
|
|
: inputComponent}
|
|
{/* {error?.message && Array.from(new Set(error.message.split('\n'))).map((msg, idx) => (
|
|
<p key={idx} className="text-red-500 text-sm mt-1" role="alert">
|
|
{msg}
|
|
</p>
|
|
))} */}
|
|
</div>
|
|
</FormUi>
|
|
);
|
|
}
|