dynamic-modal

Version:
The dynamic-modal is a solution of creation different modals into project using a json configuration file
61 lines (60 loc) • 2.66 kB
JavaScript
'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { useContext, useEffect, useId } from 'react';
import { Controller } from 'react-hook-form';
import { ComponentStateContext } from '../../context/component/component-state';
import useEnableIf from '../../hooks/use-enable-if';
import useRenderIf from '../../hooks/use-render-if';
const MakeCustomUpload = ({ element, control, watch, unregister, }) => {
    const { CustomUpload } = useContext(ComponentStateContext);
    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, value }, fieldState: { invalid, error }, }) => (_jsx(CustomUpload, { ...inputProps, name: elementName, id: elementId, onChange: onChange, value: value ?? '', invalid: invalid, error: error, disabled: element.disabled ?? !enable })) }));
};
export default MakeCustomUpload;