dynamic-modal
Version:
The dynamic-modal is a solution of creation different modals into project using a json configuration file
50 lines (49 loc) • 1.92 kB
JavaScript
'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { useContext, 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';
import useConditionalField from '../../hooks/use-conditional-field';
const MakeToggle = ({ element, control, watch, unregister, }) => {
const { Toggle } = 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();
useConditionalField({
watch,
elementName,
renderIf,
enableIf,
render,
enable,
checkRender,
checkEnable,
checkLiveData: async () => null,
setRender,
setEnable,
unregister,
});
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(Toggle, { ...inputProps, id: elementId, name: elementName, onChange: onChange, value: value ?? '', invalid: invalid, error: error, disabled: element.disabled ?? !enable })) }));
};
export default MakeToggle;