pagamio-frontend-commons-lib/lib/context/MultiFormEngineDrawerProvider.js

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

import { jsx as _jsx } from "react/jsx-runtime";
import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import { setupInputRegistry } from '../form-engine/registry';
/**
 * Context for managing the new form engine drawer state
 */
const MultiFormEngineDrawerProviderContext = createContext(undefined);
/**
 * Provider component for the new form engine drawer
 * Supports multiple drawers using unique keys and form persistence
 */
export const MultiFormEngineDrawerProvider = ({ pathname, children }) => {
    const [drawerStates, setDrawerStates] = useState(new Map());
    const formDataRef = useRef(new Map());
    useEffect(() => {
        setupInputRegistry();
    }, []);
    const handleOpenDrawer = useCallback((key) => {
        setDrawerStates((prev) => new Map(prev).set(key, true));
    }, []);
    const handleCloseDrawer = useCallback((key) => {
        setDrawerStates((prev) => {
            const newStates = new Map(prev);
            newStates.delete(key);
            return newStates;
        });
    }, []);
    const isOpen = useCallback((key) => drawerStates.get(key) === true, [drawerStates]);
    const isAnyDrawerOpen = useCallback(() => drawerStates.size > 0, [drawerStates]);
    // Form persistence methods
    const getFormData = useCallback((key) => {
        return formDataRef.current.get(key) || null;
    }, []);
    const setFormData = useCallback((key, data) => {
        const existingData = formDataRef.current.get(key);
        const newData = {
            values: {},
            lastUpdated: Date.now(),
            isDirty: false,
            ...existingData,
            ...data,
        };
        formDataRef.current.set(key, newData);
    }, []);
    const clearFormData = useCallback((key) => {
        formDataRef.current.delete(key);
    }, []);
    const clearAllFormData = useCallback(() => {
        formDataRef.current.clear();
    }, []);
    const hasFormData = useCallback((key) => {
        return formDataRef.current.has(key);
    }, []);
    useEffect(() => {
        setDrawerStates(new Map());
    }, [pathname]);
    const contextValue = useMemo(() => ({
        isOpen,
        isAnyDrawerOpen,
        handleOpenDrawer,
        handleCloseDrawer,
        getFormData,
        setFormData,
        clearFormData,
        clearAllFormData,
        hasFormData,
    }), [
        isOpen,
        isAnyDrawerOpen,
        handleOpenDrawer,
        handleCloseDrawer,
        getFormData,
        setFormData,
        clearFormData,
        clearAllFormData,
        hasFormData,
    ]);
    return (_jsx(MultiFormEngineDrawerProviderContext.Provider, { value: contextValue, children: children }));
};
/**
 * Hook to access the new form engine drawer context
 */
export const useMultiFormEngineDrawer = () => {
    const context = useContext(MultiFormEngineDrawerProviderContext);
    if (!context) {
        throw new Error('useFormEngineDrawerV2 must be used within a FormEngineDrawerProviderV2');
    }
    return context;
};