@lstz/reusable-form/dist/components/ReusableForm/ReusableForm.js

A reusable React component for creating simple, flexible forms.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useForm } from "react-hook-form";
import { useEffect, useState } from "react";
import { zodResolver } from "@hookform/resolvers/zod";
import FormContainer from "./SubComponents/FormContainer";
import FormTitle from "./SubComponents/FormTitle";
import FormBase from "./SubComponents/FormBase";
import FormInputs from "./SubComponents/FormInputs";
import FormSubmitButton from "./SubComponents/FormSubmitButton";
import FormFooter from "./SubComponents/FormFooter";
import { formatTitle } from "../../utils/formatTitle";
function ReusableForm({ isLoading, formConfig, formSchema, footerMessage, action, }) {
    const { register, watch, setValue, handleSubmit, formState: { errors }, } = useForm({
        resolver: zodResolver(formSchema),
    });
    const title = formConfig.title;
    const formattedTitle = formatTitle(title);
    const onSubmit = (data) => {
        action(data);
    };
    const [animationKey, setAnimationKey] = useState(0);
    useEffect(() => {
        // Change la clé à chaque changement de message, pour forcer le re-rendu
        setAnimationKey((prev) => prev + 1);
    }, [footerMessage]);
    return (_jsxs(FormContainer, { formattedTitle: formattedTitle, children: [_jsx(FormTitle, { formattedTitle: formattedTitle, title: title }), _jsxs(FormBase, { formattedTitle: formattedTitle, onSubmit: handleSubmit(onSubmit), children: [_jsx(FormInputs, { formattedTitle: formattedTitle, fields: formConfig.fields, options: formConfig.options, errors: errors, register: register, watch: watch, setValue: setValue }), _jsx(FormSubmitButton, { formattedTitle: formattedTitle, isLoading: isLoading, buttonContent: formConfig.submitButton })] }), _jsx(FormFooter, { formattedTitle: formattedTitle, footerMessage: footerMessage ??
                    formConfig.footerMessage ?? {
                    type: "none",
                    text: undefined,
                    linkText: undefined,
                    linkTo: undefined,
                } }, animationKey)] }));
}
export default ReusableForm;