pagamio-frontend-commons-lib/lib/form-engine/components/FieldWrapper.js

Pagamio library for Frontend reusable components like the form engine and table container

import { jsx as _jsx } from "react/jsx-runtime";
import { Controller } from 'react-hook-form';
import { useMemo } from 'react';
import { getInputComponent } from '../registry';
const FieldWrapper = ({ field, control, errors, layout, onFieldUpdate, setValue, clearErrors, updateFieldOptions, updataFieldLabel, setFieldHidden, addField, }) => {
    const InputComponent = getInputComponent(field.type);
    const wrapperClass = useMemo(() => {
        if (layout === 'horizontal') {
            return 'w-1/2 px-4';
        }
        return `col-span-${field?.gridSpan ?? '12'}`;
    }, [layout, field?.gridSpan]);
    if (!InputComponent) {
        console.error(`No component registered for type: ${field.type}`);
        return null;
    }
    const handleFieldChange = async (value, onChange, onChangeField) => {
        onChange(value);
        if (onChangeField) {
            onChangeField(value);
        }
        if (onFieldUpdate?.[field.name]) {
            try {
                const updates = onFieldUpdate[field.name];
                await processFieldUpdates(updates, value);
            }
            catch (error) {
                console.error(`Error updating dependent fields for ${field.name}:`, error);
            }
        }
    };
    const processFieldUpdates = async (updates, value) => {
        for (const update of updates) {
            const result = await update.action(value);
            if (result) {
                handleUpdateResult(result);
            }
        }
    };
    const handleUpdateResult = (result) => {
        // Update options if provided
        if (result.options && updateFieldOptions) {
            updateFieldOptions(result.field, result.options);
        }
        // Update value if provided
        if (result.value !== undefined && setValue) {
            setValue(result.field, result.value);
        }
        // Update lable if provided
        if (result.label !== undefined && updataFieldLabel) {
            updataFieldLabel(result.field, result.label);
        }
        // Update hidden state based on hideField value
        if (result.hideField !== undefined && setFieldHidden) {
            setFieldHidden(result.field, result.hideField);
            // Clear field value if it's being hidden
            if (result.hideField && setValue) {
                setValue(result.field, undefined);
            }
        }
        // Re-add field if provided
        if (result.fieldInnitialData && addField) {
            addField(result.fieldInnitialData);
        }
        // Clear validation errors for dependent fields
        if (clearErrors) {
            clearErrors(result.field);
        }
    };
    if (field.name === 'email') {
        field.validation = {
            ...field.validation,
            pattern: {
                value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
                message: 'Please enter a valid email address',
            },
        };
    }
    // Skip rendering if field is hidden
    if (field.isHidden) {
        return null;
    }
    return (_jsx("div", { className: `${wrapperClass} mb-2`, children: _jsx(Controller, { name: field.name, control: control, rules: field.validation, render: ({ field: inputProps }) => (_jsx("div", { className: "flex flex-col", children: _jsx(InputComponent, { ...inputProps, field: field, error: errors[field.name], onChange: (value) => handleFieldChange(value, inputProps.onChange, field?.onChange), options: field.options ?? [] }) })) }) }));
};
export default FieldWrapper;