dynamic-modal 1.1.22 → 1.1.24

package/dist/src/modal.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Portal } from './components/portal/portal';
 import MakeToggle from './components/make-toggle/make-toggle';
@@ -15,8 +15,47 @@ import { ComponentStateContext } from './context/component/component-state';
 import MakeCustomUpload from './components/make-custom-upload/make-custom-upload';
 import MakeWatcher from './components/make-watcher/make-watcher';
 import MakeTable from './components/make-table/make-table';
-export const Modal = ({ open, close, config }) => {
+const getUseSubmit = (modalConfig) => {
+    return modalConfig.useSubmit !== false;
+};
+const getFieldKey = (element, index) => {
+    const fieldKey = 'name' in element && element.name
+        ? element.name
+        : 'id' in element && element.id
+            ? element.id
+            : element.elementType === 'group'
+                ? (element.title ?? `group-${index}`)
+                : element.elementType === 'text'
+                    ? (element.text ?? `text-${index}`)
+                    : `field-${index}`;
+    return `${element.elementType}-${fieldKey}`;
+};
+const renderModalField = (field, index, { fieldProps, getValues }) => {
+    const { elementType, ...element } = field;
+    const fieldKey = getFieldKey(field, index);
+    return elementType === 'input' ? (_createElement(MakeInput, { ...fieldProps, key: fieldKey, element: element })) : elementType === 'select' ? (_createElement(MakeSelect, { ...fieldProps, key: fieldKey, element: element })) : elementType === 'textarea' ? (_createElement(MakeTextarea, { ...fieldProps, key: fieldKey, element: element })) : elementType === 'toggle' ? (_createElement(MakeToggle, { ...fieldProps, key: fieldKey, element: element })) : elementType === 'text' ? (_createElement(MakeDescription, { ...fieldProps, key: fieldKey, element: element })) : elementType === 'upload' ? (_createElement(MakeUpload, { ...fieldProps, key: fieldKey, element: element })) : elementType === 'custom-upload' ? (_createElement(MakeCustomUpload, { ...fieldProps, key: fieldKey, element: element })) : elementType === 'watcher' ? (_createElement(MakeWatcher, { ...fieldProps, key: fieldKey, element: element })) : elementType === 'button' ? (_createElement(MakeButton, { ...fieldProps, key: fieldKey, element: element, getValues: getValues })) : elementType === 'table' ? (_createElement(MakeTable, { ...fieldProps, key: fieldKey, element: element })) : null;
+};
+const ModalFields = ({ modalReady, fieldProps, getValues, }) => {
+    return (_jsx("div", { className: "flex flex-col gap-4 py-4", style: {
+            overflowY: modalReady.overFlowBody ? 'auto' : undefined,
+            height: modalReady.overFlowBody,
+            minHeight: modalReady.minHeightBody,
+        }, children: modalReady.fields.map((element, index) => {
+            if (element.elementType !== 'group') {
+                return renderModalField(element, index, { fieldProps, getValues });
+            }
+            const groupElements = element.groups
+                .filter((sub) => !['group', 'watcher', 'table'].includes(sub.elementType))
+                .map((sub, subIndex) => renderModalField(sub, index + subIndex, { fieldProps, getValues }));
+            const hideDiv = groupElements.every((component) => component === null);
+            return (_jsxs("div", { className: `flex flex-col w-full gap-2 ${hideDiv && 'hidden'}`, children: [element.title && (_jsx("h3", { className: "font-bold border-b-2 pb-2 mb-2", children: element.title })), _jsx("div", { className: "flex gap-4 w-full", style: element.style, children: groupElements })] }, getFieldKey(element, index)));
+        }) }));
+};
+const ModalActions = ({ modalReady, closeHandler, manualSubmit, }) => {
     const { ModalButtonAction, ModalButtonCancel } = useContext(ComponentStateContext);
+    return (_jsxs("div", { className: "flex gap-4 items-center justify-center border-t p-2", style: modalReady.actions.containerStyle, children: [modalReady.actions.cancel && (_jsx(ModalButtonCancel, { ...modalReady.actions.cancel, onClick: closeHandler })), getUseSubmit(modalReady) ? (_jsx(ModalButtonAction, { ...modalReady.actions.action, type: "submit" })) : (_jsx(ModalButtonAction, { ...modalReady.actions.action, onClick: manualSubmit, type: "button" }))] }));
+};
+export const Modal = ({ open, close, config }) => {
     const [modalReady, setModalReady] = useState(undefined);
     const [defaultLoaded, setDefaultLoaded] = useState(false);
     const { control, handleSubmit, getValues, unregister, setValue, watch, trigger, reset, getFieldState, } = useForm();
@@ -31,7 +70,7 @@ export const Modal = ({ open, close, config }) => {
             'table',
         ].includes(element.elementType))
             return;
-        if (!element.defaultValue && element.renderIf) {
+        if (element.defaultValue === undefined && element.renderIf) {
             unregister(element.name);
             return;
         }
@@ -60,25 +99,12 @@ export const Modal = ({ open, close, config }) => {
         });
         setDefaultLoaded(true);
     };
-    const getUseSubmit = (modalConfig) => {
-        const useSubmit = modalConfig.useSubmit === undefined
-            ? true
-            : modalConfig.useSubmit === false
-                ? false
-                : true;
-        return useSubmit;
-    };
-    const getRender = ({ elementType, ...element }, index, isEndOfRender = false) => {
-        if (isEndOfRender && modalReady)
-            setTimeout(() => autoLoadField(modalReady.fields), 200);
-        const props = {
-            control,
-            watch,
-            setValue,
-            unregister,
-        };
-        return elementType === 'input' ? (_createElement(MakeInput, { ...props, key: `modal-input-${index}`, element: element })) : elementType === 'select' ? (_createElement(MakeSelect, { ...props, key: `modal-select-${index}`, element: element })) : elementType === 'textarea' ? (_createElement(MakeTextarea, { ...props, key: `modal-textarea-${index}`, element: element })) : elementType === 'toggle' ? (_createElement(MakeToggle, { ...props, key: `modal-toggle-${index}`, element: element })) : elementType === 'text' ? (_createElement(MakeDescription, { ...props, key: `modal-text-${index}`, element: element })) : elementType === 'upload' ? (_createElement(MakeUpload, { ...props, key: `modal-upload-${index}`, element: element })) : elementType === 'custom-upload' ? (_createElement(MakeCustomUpload, { ...props, key: `modal-custom-upload-${index}`, element: element })) : elementType === 'watcher' ? (_createElement(MakeWatcher, { ...props, key: `modal-watcher-${index}`, element: element })) : elementType === 'button' ? (_createElement(MakeButton, { ...props, key: `modal-button-${index}`, element: element, getValues: getValues })) : elementType === 'table' ? (_createElement(MakeTable, { ...props, key: `modal-table-${index}`, element: element })) : null;
-    };
+    const fieldProps = useMemo(() => ({
+        control,
+        watch,
+        setValue,
+        unregister,
+    }), [control, setValue, unregister, watch]);
     const closeHandler = () => {
         if (modalReady?.onClose)
             modalReady.onClose();
@@ -112,24 +138,16 @@ export const Modal = ({ open, close, config }) => {
         if (open && !modalReady)
             setModalReady(config);
     }, [config, modalReady, open]);
+    useEffect(() => {
+        if (!modalReady || defaultLoaded)
+            return;
+        const timeout = window.setTimeout(() => {
+            autoLoadField(modalReady.fields);
+        }, 0);
+        return () => window.clearTimeout(timeout);
+    }, [defaultLoaded, modalReady]);
     if (!modalReady)
         return null;
-    return (_jsx(Portal, { closeTime: 200, portalOpen: open, portalTag: '#modal-portal', useBlur: modalReady.useBlur, children: _jsx("div", { className: `rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px] ${modalReady.useBlur && 'shadow-md border border-gray-200'}`, style: modalReady.style, children: _jsxs("form", { className: "flex flex-col p-4 gap-4", autoComplete: "off", onSubmit: handleSubmit(actionHandler), children: [_jsx("h2", { className: "text-bold text-center border-b pb-4 font-semibold", children: modalReady.title }), _jsx("div", { className: "flex flex-col gap-4 py-4", style: {
-                            overflowY: modalReady.overFlowBody ? 'auto' : undefined,
-                            height: modalReady.overFlowBody,
-                            minHeight: modalReady.minHeightBody,
-                        }, children: modalReady.fields.map((element, index) => {
-                            const isEndOfRender = index + 1 === modalReady.fields.length;
-                            if (element.elementType === 'group') {
-                                const groupElements = element.groups
-                                    .filter((sub) => !['group', 'watcher', 'table'].includes(sub.elementType))
-                                    .map((sub, subIndex) => getRender(sub, index + subIndex, isEndOfRender));
-                                const hideDiv = groupElements.filter((render) => render).length === 0;
-                                return (_jsxs("div", { className: `flex flex-col w-full gap-2 ${hideDiv && 'hidden'}`, children: [element.title && (_jsx("h3", { className: "font-bold border-b-2 pb-2 mb-2", children: element.title })), _jsx("div", { className: "flex gap-4 w-full", style: element.style, children: groupElements.map((component) => component) })] }, `modal-group-${index}`));
-                            }
-                            else {
-                                return getRender(element, index, isEndOfRender);
-                            }
-                        }) }), _jsxs("div", { className: "flex gap-4 items-center justify-center border-t p-2", style: modalReady?.actions.containerStyle, children: [modalReady.actions.cancel && (_jsx(ModalButtonCancel, { ...modalReady.actions.cancel, onClick: closeHandler })), getUseSubmit(modalReady) ? (_jsx(ModalButtonAction, { ...modalReady.actions.action, type: "submit" })) : (_jsx(ModalButtonAction, { ...modalReady.actions.action, onClick: manualSubmit, type: "button" }))] })] }) }) }));
+    return (_jsx(Portal, { closeTime: 200, portalOpen: open, portalTag: '#modal-portal', useBlur: modalReady.useBlur, children: _jsx("div", { className: `rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px] ${modalReady.useBlur && 'shadow-md border border-gray-200'}`, style: modalReady.style, children: _jsxs("form", { className: "flex flex-col p-4 gap-4", autoComplete: "off", onSubmit: handleSubmit(actionHandler), children: [_jsx("h2", { className: "text-bold text-center border-b pb-4 font-semibold", children: modalReady.title }), _jsx(ModalFields, { modalReady: modalReady, fieldProps: fieldProps, getValues: getValues }), _jsx(ModalActions, { modalReady: modalReady, closeHandler: closeHandler, manualSubmit: manualSubmit })] }) }) }));
 };
 export default Modal;

package/dist/src/util/general/general.util.js

@@ -1,14 +1,18 @@
 'use client';
 export const liveDataAction = async (fieldData, formData, action) => {
-    if (typeof fieldData === 'string') {
-        const options = await action(fieldData, formData);
+    if (typeof fieldData === 'string' ||
+        typeof fieldData === 'number' ||
+        typeof fieldData === 'boolean') {
+        const options = await action(String(fieldData), formData);
         return options ?? [];
     }
     return [];
 };
 export const liveDataHandler = async (fieldData, formData, action) => {
-    if (typeof fieldData === 'string') {
-        const result = await action(fieldData, formData);
+    if (typeof fieldData === 'string' ||
+        typeof fieldData === 'number' ||
+        typeof fieldData === 'boolean') {
+        const result = await action(String(fieldData), formData);
         return result ?? false;
     }
     return false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dynamic-modal",
-  "version": "1.1.22",
+  "version": "1.1.24",
   "description": "The dynamic-modal is a solution of creation different modals into project using a json configuration file",
   "type": "module",
   "main": "./dist/index.js",