@kadconsulting/dry/dist/src/components/FormBuilder/FormBuilder.js

KAD Reusable Component Library

import { jsx as _jsx } from "react/jsx-runtime";
// // CLI Version 1.0.1
// Component Version 1.0.0
import { forwardRef, useMemo } from 'react';
import classnames from 'classnames';
import { useForm, Controller } from 'react-hook-form';
import Document from '../Document/Document';
import './FormBuilder.scss';
const FormBuilder = forwardRef(({ id, className, fields, onSubmit, formMethods, submitButton, ...props }, ref) => {
    const methods = formMethods || useForm();
    const { handleSubmit, control } = methods;
    const formContent = useMemo(() => {
        const content = fields.map((field) => {
            const baseProps = {
                name: field.name,
                label: field.label,
                validation: field.validation,
                placeholder: field.placeholder,
                defaultValue: field.defaultValue,
            };
            switch (field.type) {
                case 'text':
                case 'number':
                case 'email':
                case 'password':
                    return {
                        contentType: 'textInput',
                        ...baseProps,
                        type: field.type,
                    };
                case 'checkbox':
                    return {
                        contentType: 'checkbox',
                        ...baseProps,
                    };
                case 'radio':
                    return {
                        contentType: 'radioButtonGroup',
                        ...baseProps,
                        options: field.options,
                    };
                case 'select':
                    return {
                        contentType: 'dropdownSelect',
                        ...baseProps,
                        options: field.options,
                    };
                case 'textarea':
                    return {
                        contentType: 'textarea',
                        ...baseProps,
                    };
                case 'date':
                    return {
                        contentType: 'datePicker',
                        ...baseProps,
                    };
                default:
                    return null;
            }
        }).filter((item) => item !== null);
        content.push({
            contentType: 'button',
            type: 'submit',
            text: submitButton?.text || 'Submit',
            variant: submitButton?.variant,
            size: submitButton?.size,
        });
        return content;
    }, [fields, submitButton]);
    return (_jsx("form", { id: id, ref: ref, className: classnames(className, 'dry-formbuilder'), onSubmit: handleSubmit(onSubmit), ...props, children: _jsx(Controller, { control: control, name: "formFields", render: () => (_jsx(Document, { content: formContent, iconsDirectory: "", imagesDirectory: "" })) }) }));
});
export default FormBuilder;
//# sourceMappingURL=FormBuilder.js.map