pagamio-frontend-commons-lib/lib/pagamio-drawer/index.js

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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Drawer } from 'flowbite-react';
import { useEffect, useState } from 'react';
import DrawerContent from './components/DrawerContent';
const FormEngineDrawer = ({ title, cancelButtonText = 'Cancel', submitButtonText = 'Submit', isOpen, fields: initialFields, initialValues, marginTop = '0px', onClose, onSubmit, onFieldUpdate, }) => {
    const [fields, setFields] = useState(initialFields);
    // Update fields when initialFields changes while preserving values
    useEffect(() => {
        setFields((prevFields) => {
            // Create a map of existing fields for quick lookup
            const existingFieldsMap = new Map(prevFields.map((field) => [field.name, field]));
            // Map through new fields, preserving existing field properties where applicable
            return initialFields.map((newField) => {
                const existingField = existingFieldsMap.get(newField.name);
                if (existingField) {
                    // Preserve the existing field's properties but update with new field's properties
                    return {
                        ...existingField,
                        ...newField,
                        // Preserve options if they exist in the existing field
                        options: existingField.options || newField.options,
                        // Preserve label if it was dynamically changed
                        label: existingField.label || newField.label,
                    };
                }
                return newField;
            });
        });
    }, [initialFields]);
    useEffect(() => {
        if (isOpen) {
            document.body.classList.add('overflow-hidden');
        }
        else {
            document.body.classList.remove('overflow-hidden');
        }
        return () => {
            document.body.classList.remove('overflow-hidden');
        };
    }, [isOpen]);
    const setFieldHidden = (fieldName, hidden) => {
        setFields((currentFields) => currentFields.map((field) => (field.name === fieldName ? { ...field, isHidden: hidden } : field)));
    };
    const updataFieldLabel = (fieldName, newLabelName) => {
        setFields((currentFields) => currentFields.map((field) => (field.name === fieldName ? { ...field, label: newLabelName } : field)));
    };
    const updateFieldOptions = (fieldName, newOptions) => {
        setFields((currentFields) => currentFields.map((field) => (field.name === fieldName ? { ...field, options: newOptions } : field)));
    };
    const updateFieldValidation = (fieldName, newValidation) => {
        setFields((currentFields) => currentFields.map((field) => field.name === fieldName
            ? {
                ...field,
                validation: {
                    ...(field.validation ?? {}),
                    ...newValidation,
                },
            }
            : field));
    };
    const addField = (field) => {
        const isFieldAlreadyAdded = fields.some((f) => f.name === field.name);
        if (isFieldAlreadyAdded) {
            updataFieldLabel(field.name, field.label);
            if (field.options) {
                updateFieldOptions(field.name, field.options);
            }
        }
        else {
            setFields((currentFields) => [...currentFields, field]);
        }
    };
    return (_jsxs(Drawer, { open: isOpen, onClose: onClose, backdrop: false, position: "right", className: "flex flex-col px-0 bg-customGray-5 border-l-2 border-gray-100", style: {
            marginTop,
            width: '420px',
            height: `calc(100vh - ${marginTop})`,
            paddingTop: '0px',
        }, children: [_jsxs("div", { className: "sticky top-0 flex items-center h-12 border-b", style: { zIndex: 100 }, children: [_jsx("div", { className: "flex items-center justify-start pl-6 h-full bg-customGray-25 py-5", style: { width: '88%' }, children: _jsx("h2", { className: "text-lg font-semibold text-black truncate", children: title }) }), _jsx("button", { type: "button", className: "hover:text-gray-500 hover:bg-customGray-15", onClick: onClose, style: { width: '12%', backgroundColor: 'white', height: '3rem' }, children: "x" })] }), _jsx(DrawerContent, { isOpen: isOpen, fields: fields, onSubmit: onSubmit, handleCloseDrawer: onClose, initialValues: initialValues, cancelButtonText: cancelButtonText, submitButtonText: submitButtonText, onFieldUpdate: onFieldUpdate, updateFieldOptions: updateFieldOptions, updataFieldLabel: updataFieldLabel, setFieldHidden: setFieldHidden, addField: addField, updateFieldValidation: updateFieldValidation })] }));
};
export default FormEngineDrawer;