dynamic-modal/dist/src/components/make-upload/make-upload.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 { useEffect, useId } from 'react';
import { Controller } from 'react-hook-form';
import InputUpload from '../input-upload/input-upload';
import useEnableIf from '../../hooks/use-enable-if';
import useRenderIf from '../../hooks/use-render-if';
const MakeUpload = ({ element, control, watch, unregister, }) => {
    const { name: elementName, validation: { required, message, regex, ...otherValidation }, enableIf, renderIf, ...inputProps } = element;
    const { checkEnable, enable, setEnable } = useEnableIf({
        elementEnableIf: enableIf,
    });
    const { checkRender, render, setRender } = useRenderIf({
        elementRenderIf: renderIf,
    });
    const elementId = useId();
    useEffect(() => {
        const { unsubscribe } = watch((formData, { name, type }) => {
            if (!name)
                return;
            if (enableIf) {
                checkEnable(formData, { name, type }).then((enableStatus) => {
                    if (enableStatus === undefined || enableStatus === null)
                        return;
                    if (enable !== enableStatus)
                        setEnable(enableStatus);
                });
            }
            if (renderIf) {
                checkRender(formData, { name, type }).then((renderStatus) => {
                    if (renderStatus === undefined || renderStatus === null)
                        return;
                    if (render !== renderStatus) {
                        if (render && !renderStatus)
                            unregister(elementName);
                        setRender(!!renderStatus);
                    }
                });
            }
        });
        return () => unsubscribe();
    }, [watch, render, enable]);
    if (!render)
        return null;
    return (_jsx(Controller, { control: control, name: elementName, rules: {
            required: {
                value: required,
                message: message ?? '',
            },
            pattern: regex
                ? {
                    value: regex,
                    message: message ?? '',
                }
                : undefined,
            ...otherValidation,
        }, render: ({ field: { onChange } }) => (_jsx(InputUpload, { ...inputProps, id: elementId, name: elementName, onChange: onChange, disabled: element.disabled ?? !enable })) }));
};
export default MakeUpload;