dynamic-modal/dist/src/components/make-watcher/make-watcher.js

The dynamic-modal is a solution of creation different modals into project using a json configuration file

'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { useContext, useEffect, useId, useState } from 'react';
import { ComponentStateContext } from '../../context/component/component-state';
const MakeWatcher = ({ element, watch }) => {
    const [value, setValue] = useState('');
    const { Input } = useContext(ComponentStateContext);
    const { watchList, style, ...watcherProps } = element;
    const elementId = useId();
    useEffect(() => {
        const { unsubscribe } = watch((formData, { name }) => {
            if (!name)
                return;
            if (watchList.includes(name)) {
                const watchValue = [];
                watchList.forEach((watchName) => {
                    const fragment = formData[watchName];
                    if (fragment)
                        watchValue.push(fragment);
                });
                setValue(watchValue.join(' '));
            }
        });
        return () => unsubscribe();
    }, [watch]);
    return (_jsx(Input, { ...watcherProps, name: `watcher-${elementId}`, id: elementId, value: value ?? '', onChange: () => { }, invalid: false, disabled: true, style: style }));
};
export default MakeWatcher;