dynamic-modal/dist/src/components/make-select/make-select.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, useId, useState } 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';
import useLiveData from '../../hooks/use-live-data';
import useConditionalField from '../../hooks/use-conditional-field';
const MakeSelect = ({ element, control, watch, setValue, unregister, }) => {
    const { Select } = useContext(ComponentStateContext);
    const { name: elementName, validation: { required, message, regex, ...otherValidation }, enableIf, renderIf, liveData: elementLiveData, ...inputProps } = element;
    const [liveSearching, setLiveSearching] = useState(false);
    const { checkLiveData, liveData, setLiveData } = useLiveData({
        elementLiveData,
    });
    const { checkEnable, enable, setEnable } = useEnableIf({
        elementEnableIf: enableIf,
    });
    const { checkRender, render, setRender } = useRenderIf({
        elementRenderIf: renderIf,
    });
    const elementId = useId();
    useConditionalField({
        watch,
        elementName,
        renderIf,
        enableIf,
        liveDataConfig: elementLiveData,
        render,
        enable,
        checkRender,
        checkEnable,
        checkLiveData,
        setRender,
        setEnable,
        setLiveData,
        setLiveSearching,
        unregister,
        setValue,
        liveDataResetValue: inputProps.isMulti
            ? (inputProps.defaultValue ?? [])
            : (inputProps.defaultValue ?? ''),
    });
    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(Select, { ...inputProps, id: elementId, name: elementName, onChange: onChange, value: value, invalid: invalid, error: error, disabled: element.disabled ?? !enable, liveSearching: liveSearching, options: liveData || (element.options ?? []) })) }));
};
export default MakeSelect;