dynamic-modal 1.0.3 → 1.0.5

package/README-ES.md

@@ -87,6 +87,8 @@ Para controlar la apertura y cierre del modal, obtén el custom hook `useModalHa
 ```jsx
 import { useModalHandler, DynamicModal } from 'dynamic-modal';
 import { Button } from '@nextui-org/react';
+//Crea el modal, importa y usa
+import testModal from '@modal-config/test';
 
 function ExampleComponent() {
   const { openModal, modalProps } = useModalHandler();

package/README.md

@@ -87,6 +87,8 @@ To control the modal’s open and close states, use the `useModalHandler` custom
 ```jsx
 import { useModalHandler, DynamicModal } from 'dynamic-modal';
 import { Button } from '@nextui-org/react';
+//Create your modal, import and use
+import testModal from '@modal-config/test';
 
 function ExampleComponent() {
   const { openModal, modalProps } = useModalHandler();

package/dist/interfaces/make-autocomplete.d.ts

@@ -4,8 +4,6 @@ import { IOption } from './option';
 export interface IMakeAutoComplete extends IField {
     elementType: 'autocomplete';
     options: Array<IOption>;
-    defaultOption?: boolean;
-    defaultOptionName?: string;
     liveData?: IModalLiveDataCondition;
 }
 export interface IMakeAutoCompleteProps extends IFieldProps {

package/dist/interfaces/make-select.d.ts

@@ -3,8 +3,6 @@ import { IModalLiveDataCondition } from './modal';
 export interface IMakeSelect extends IField {
     elementType: 'select';
     options: Array<Record<'id' | 'name', string>>;
-    defaultOption?: boolean;
-    defaultOptionName?: string;
     liveData?: IModalLiveDataCondition;
 }
 export interface IMakeSelectProps extends IFieldProps {

package/dist/interfaces/modal.d.ts

@@ -30,7 +30,7 @@ export interface IModalConfigProps {
         action?: () => void;
         hide?: boolean;
     };
-    reservedData?: Record<string, string | number>;
+    reservedData?: Record<string, any>;
     styles?: CSSProperties;
     overFlowBody?: string | number;
     minHeightBody?: string | number;

package/dist/modal.js

@@ -1,150 +1,154 @@
-"use strict";
-'use client';
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = void 0;
-const react_1 = __importStar(require("react"));
-const react_hook_form_1 = require("react-hook-form");
-const react_2 = require("@nextui-org/react");
-const portal_1 = require("./components/portal/portal");
-const make_toggle_1 = __importDefault(require("./components/make-toggle/make-toggle"));
-const make_input_1 = __importDefault(require("./components/make-input/make-input"));
-const make_select_1 = __importDefault(require("./components/make-select/make-select"));
-const make_textarea_1 = __importDefault(require("./components/make-textarea/make-textarea"));
-const make_multi_select_1 = __importDefault(require("./components/make-multi-select/make-multi-select"));
-const make_text_1 = __importDefault(require("./components/make-text/make-text"));
-const make_upload_1 = __importDefault(require("./components/make-upload/make-upload"));
-const make_button_1 = __importDefault(require("./components/make-button/make-button"));
-const make_autocomplete_1 = __importDefault(require("./components/make-autocomplete/make-autocomplete"));
-const Modal = ({ open, close, config }) => {
-    var _a, _b;
-    const [modalReady, setModalReady] = (0, react_1.useState)(undefined);
-    const [defaultLoaded, setDefaultLoaded] = (0, react_1.useState)(false);
-    const { control, handleSubmit, getValues, unregister, setValue, watch } = (0, react_hook_form_1.useForm)();
-    const formValueHandler = (element) => {
-        var _a;
-        if (['group', 'upload', 'text'].includes(element.elementType))
-            return;
-        const defaultValue = (_a = element.defaultValue) !== null && _a !== void 0 ? _a : '';
-        const parsedValue = defaultValue === 'true' ? true : defaultValue === 'false' ? false : defaultValue;
-        setValue(element.name, parsedValue !== null && parsedValue !== void 0 ? parsedValue : '');
-    };
-    const autoLoadGroup = (groupFields) => {
-        groupFields.forEach(element => {
-            formValueHandler(element);
-        });
-    };
-    const autoLoadField = (modalFields) => {
-        if (defaultLoaded)
-            return;
-        modalFields.forEach(element => {
-            if (element.elementType === 'group') {
-                autoLoadGroup(element.groups);
-                return;
-            }
-            formValueHandler(element);
-        });
-        setDefaultLoaded(true);
-    };
-    const getRender = (element, index, isEndOfRender = false) => {
-        if (isEndOfRender && modalReady)
-            setTimeout(() => autoLoadField(modalReady.fields), 200);
-        const props = {
-            control,
-            watch,
-            setValue
-        };
-        return element.elementType === 'input'
-            ? react_1.default.createElement(make_input_1.default, Object.assign({}, props, { key: `modal-input-${index}`, element: element }))
-            : element.elementType === 'select'
-                ? react_1.default.createElement(make_select_1.default, Object.assign({}, props, { key: `modal-select-${index}`, element: element }))
-                : element.elementType === 'textarea'
-                    ? react_1.default.createElement(make_textarea_1.default, Object.assign({}, props, { key: `modal-textarea-${index}`, element: element }))
-                    : element.elementType === 'toggle'
-                        ? react_1.default.createElement(make_toggle_1.default, Object.assign({}, props, { key: `modal-toggle-${index}`, element: element }))
-                        : element.elementType === 'multiselect'
-                            ? react_1.default.createElement(make_multi_select_1.default, Object.assign({}, props, { key: `modal-multiselect-${index}`, element: element }))
-                            : element.elementType === 'text'
-                                ? react_1.default.createElement(make_text_1.default, Object.assign({}, props, { key: `modal-text-${index}`, element: element }))
-                                : element.elementType === 'upload'
-                                    ? react_1.default.createElement(make_upload_1.default, Object.assign({}, props, { key: `modal-upload-${index}`, element: element }))
-                                    : element.elementType === 'button'
-                                        ? react_1.default.createElement(make_button_1.default, Object.assign({}, props, { key: `modal-button-${index}`, element: element }))
-                                        : element.elementType === 'autocomplete'
-                                            ? react_1.default.createElement(make_autocomplete_1.default, Object.assign({}, props, { key: `modal-autocomplete-${index}`, element: element }))
-                                            : null;
-    };
-    const closeHandler = () => {
-        if ((modalReady === null || modalReady === void 0 ? void 0 : modalReady.cancel) && modalReady.cancel.action)
-            modalReady.cancel.action();
-        setTimeout(() => {
-            const form = getValues();
-            unregister(Object.keys(form));
-            setModalReady(undefined);
-            setDefaultLoaded(false);
-            close();
-        }, 200);
-    };
-    const actionHandler = (data) => {
-        if ((modalReady === null || modalReady === void 0 ? void 0 : modalReady.action) && modalReady.action.action)
-            modalReady.action.action(Object.assign(Object.assign({}, modalReady === null || modalReady === void 0 ? void 0 : modalReady.reservedData), data));
-        closeHandler();
-    };
-    (0, react_1.useEffect)(() => {
-        if (open && !modalReady)
-            setModalReady(config);
-    }, [config, modalReady, open]);
-    return (modalReady
-        ? react_1.default.createElement(portal_1.Portal, { closeTime: 200, portalOpen: open, portalTag: '#modal-portal' },
-            react_1.default.createElement("div", { className: 'rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px]', style: Object.assign({}, modalReady.styles) },
-                react_1.default.createElement("form", { className: 'flex flex-col p-4 gap-4', autoComplete: 'off', onSubmit: handleSubmit(actionHandler) },
-                    react_1.default.createElement("h2", { className: 'text-bold text-center border-b pb-4' }, modalReady.title),
-                    react_1.default.createElement("div", { className: 'flex flex-col items-center gap-4 py-4', style: {
-                            overflowY: modalReady.overFlowBody ? 'auto' : undefined,
-                            height: modalReady.overFlowBody,
-                            minHeight: modalReady.minHeightBody
-                        } }, modalReady.fields.map((element, index) => {
-                        const isEndOfRender = index + 1 === modalReady.fields.length;
-                        if (element.elementType === 'group') {
-                            return (react_1.default.createElement("div", { key: `modal-group-${index}`, className: 'flex gap-4 w-full', style: element.style }, element.groups
-                                .filter(sub => ['input', 'select', 'toggle', 'multiselect', 'upload', 'button', 'autocomplete'].includes(sub.elementType))
-                                .map((sub, subIndex) => getRender(sub, index + subIndex, isEndOfRender))));
-                        }
-                        else {
-                            return getRender(element, index, isEndOfRender);
-                        }
-                    })),
-                    react_1.default.createElement("div", { className: 'flex items-center justify-around gap-4 py-2 border-t' },
-                        modalReady.cancel &&
-                            react_1.default.createElement(react_2.Button, { variant: 'bordered', onClick: closeHandler, type: 'reset', className: 'w-[140px]' }, (_a = modalReady.cancel.name) !== null && _a !== void 0 ? _a : 'Close'),
-                        modalReady.action &&
-                            react_1.default.createElement(react_2.Button, { color: 'primary', type: 'submit', className: 'w-[140px]' }, (_b = modalReady.action.name) !== null && _b !== void 0 ? _b : 'Ok')))))
-        : null);
-};
-exports.Modal = Modal;
-exports.default = exports.Modal;
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = void 0;
+const react_1 = __importStar(require("react"));
+const react_hook_form_1 = require("react-hook-form");
+const react_2 = require("@nextui-org/react");
+const portal_1 = require("./components/portal/portal");
+const make_toggle_1 = __importDefault(require("./components/make-toggle/make-toggle"));
+const make_input_1 = __importDefault(require("./components/make-input/make-input"));
+const make_select_1 = __importDefault(require("./components/make-select/make-select"));
+const make_textarea_1 = __importDefault(require("./components/make-textarea/make-textarea"));
+const make_multi_select_1 = __importDefault(require("./components/make-multi-select/make-multi-select"));
+const make_text_1 = __importDefault(require("./components/make-text/make-text"));
+const make_upload_1 = __importDefault(require("./components/make-upload/make-upload"));
+const make_button_1 = __importDefault(require("./components/make-button/make-button"));
+const make_autocomplete_1 = __importDefault(require("./components/make-autocomplete/make-autocomplete"));
+const Modal = ({ open, close, config }) => {
+    var _a, _b;
+    const [modalReady, setModalReady] = (0, react_1.useState)(undefined);
+    const [defaultLoaded, setDefaultLoaded] = (0, react_1.useState)(false);
+    const { control, handleSubmit, getValues, unregister, setValue, watch } = (0, react_hook_form_1.useForm)();
+    const formValueHandler = (element) => {
+        var _a;
+        if (['group', 'upload', 'text'].includes(element.elementType))
+            return;
+        if (!element.defaultValue && element.renderIf) {
+            unregister(element.name);
+            return;
+        }
+        const defaultValue = (_a = element.defaultValue) !== null && _a !== void 0 ? _a : '';
+        const parsedValue = defaultValue === 'true' ? true : defaultValue === 'false' ? false : defaultValue;
+        setValue(element.name, parsedValue !== null && parsedValue !== void 0 ? parsedValue : '');
+    };
+    const autoLoadGroup = (groupFields) => {
+        groupFields.forEach(element => {
+            formValueHandler(element);
+        });
+    };
+    const autoLoadField = (modalFields) => {
+        if (defaultLoaded)
+            return;
+        modalFields.forEach(element => {
+            if (element.elementType === 'group') {
+                autoLoadGroup(element.groups);
+                return;
+            }
+            formValueHandler(element);
+        });
+        setDefaultLoaded(true);
+    };
+    const getRender = (element, index, isEndOfRender = false) => {
+        if (isEndOfRender && modalReady)
+            setTimeout(() => autoLoadField(modalReady.fields), 200);
+        const props = {
+            control,
+            watch,
+            setValue
+        };
+        return element.elementType === 'input'
+            ? react_1.default.createElement(make_input_1.default, Object.assign({}, props, { key: `modal-input-${index}`, element: element }))
+            : element.elementType === 'select'
+                ? react_1.default.createElement(make_select_1.default, Object.assign({}, props, { key: `modal-select-${index}`, element: element }))
+                : element.elementType === 'textarea'
+                    ? react_1.default.createElement(make_textarea_1.default, Object.assign({}, props, { key: `modal-textarea-${index}`, element: element }))
+                    : element.elementType === 'toggle'
+                        ? react_1.default.createElement(make_toggle_1.default, Object.assign({}, props, { key: `modal-toggle-${index}`, element: element }))
+                        : element.elementType === 'multiselect'
+                            ? react_1.default.createElement(make_multi_select_1.default, Object.assign({}, props, { key: `modal-multiselect-${index}`, element: element }))
+                            : element.elementType === 'text'
+                                ? react_1.default.createElement(make_text_1.default, Object.assign({}, props, { key: `modal-text-${index}`, element: element }))
+                                : element.elementType === 'upload'
+                                    ? react_1.default.createElement(make_upload_1.default, Object.assign({}, props, { key: `modal-upload-${index}`, element: element }))
+                                    : element.elementType === 'button'
+                                        ? react_1.default.createElement(make_button_1.default, Object.assign({}, props, { key: `modal-button-${index}`, element: element }))
+                                        : element.elementType === 'autocomplete'
+                                            ? react_1.default.createElement(make_autocomplete_1.default, Object.assign({}, props, { key: `modal-autocomplete-${index}`, element: element }))
+                                            : null;
+    };
+    const closeHandler = () => {
+        if ((modalReady === null || modalReady === void 0 ? void 0 : modalReady.cancel) && modalReady.cancel.action)
+            modalReady.cancel.action();
+        setTimeout(() => {
+            const form = getValues();
+            unregister(Object.keys(form));
+            setModalReady(undefined);
+            setDefaultLoaded(false);
+            close();
+        }, 200);
+    };
+    const actionHandler = (data) => {
+        if ((modalReady === null || modalReady === void 0 ? void 0 : modalReady.action) && modalReady.action.action)
+            modalReady.action.action(Object.assign(Object.assign({}, modalReady === null || modalReady === void 0 ? void 0 : modalReady.reservedData), data));
+        closeHandler();
+    };
+    (0, react_1.useEffect)(() => {
+        if (open && !modalReady)
+            setModalReady(config);
+    }, [config, modalReady, open]);
+    return (modalReady
+        ? react_1.default.createElement(portal_1.Portal, { closeTime: 200, portalOpen: open, portalTag: '#modal-portal' },
+            react_1.default.createElement("div", { className: 'rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px]', style: Object.assign({}, modalReady.styles) },
+                react_1.default.createElement("form", { className: 'flex flex-col p-4 gap-4', autoComplete: 'off', onSubmit: handleSubmit(actionHandler) },
+                    react_1.default.createElement("h2", { className: 'text-bold text-center border-b pb-4' }, modalReady.title),
+                    react_1.default.createElement("div", { className: 'flex flex-col items-center gap-4 py-4', style: {
+                            overflowY: modalReady.overFlowBody ? 'auto' : undefined,
+                            height: modalReady.overFlowBody,
+                            minHeight: modalReady.minHeightBody
+                        } }, modalReady.fields.map((element, index) => {
+                        const isEndOfRender = index + 1 === modalReady.fields.length;
+                        if (element.elementType === 'group') {
+                            return (react_1.default.createElement("div", { key: `modal-group-${index}`, className: 'flex gap-4 w-full', style: element.style }, element.groups
+                                .filter(sub => ['input', 'select', 'toggle', 'multiselect', 'upload', 'button', 'autocomplete'].includes(sub.elementType))
+                                .map((sub, subIndex) => getRender(sub, index + subIndex, isEndOfRender))));
+                        }
+                        else {
+                            return getRender(element, index, isEndOfRender);
+                        }
+                    })),
+                    react_1.default.createElement("div", { className: 'flex items-center justify-around gap-4 py-2 border-t' },
+                        modalReady.cancel &&
+                            react_1.default.createElement(react_2.Button, { variant: 'bordered', onClick: closeHandler, type: 'reset', className: 'w-[140px]' }, (_a = modalReady.cancel.name) !== null && _a !== void 0 ? _a : 'Close'),
+                        modalReady.action &&
+                            react_1.default.createElement(react_2.Button, { color: 'primary', type: 'submit', className: 'w-[140px]' }, (_b = modalReady.action.name) !== null && _b !== void 0 ? _b : 'Ok')))))
+        : null);
+};
+exports.Modal = Modal;
+exports.default = exports.Modal;

package/examples/enable-if.ts

@@ -1 +1,130 @@
- 
+   
+import { IModalConfigLoader } from '../src/interfaces/modal'
+
+export type IncomingProps = object
+
+type ResultProps = Record<'optionId', string> & Partial<Record<'input1ReadOnly' | 'input1WriteValue' | 'input2ReadOnly' | 'input2WriteValue', string>>
+
+export interface IEnableIfModal {
+  default: IModalConfigLoader<IncomingProps, ResultProps>
+}
+
+const enableIfModal: IEnableIfModal = {
+  default: (props, action) => {
+    return {
+      reservedData: {}, //Put here any data that you want store and receive into modal output
+      fields: [ //Put here any elements for render into modal
+        {
+          elementType: 'select',
+          label: 'option',
+          defaultValue: '0',
+          options: [
+            {
+              id: '0',
+              name:'Select...'
+            },
+            {
+              id: '1',
+              name:'Option 1'
+            },
+            {
+              id: '2',
+              name:'Option 2'
+            }
+          ],
+          name: 'optionId', //Element to be observed
+          validation: {
+            required: true,
+            message: 'Please select a valid option'
+          }
+        },
+        {
+          elementType: 'group', //Put here groups of element into same line and customize using styles
+          groups: [
+            {
+              elementType: 'input',
+              label: 'Input 1 (Read)',
+              name: 'input1ReadOnly',
+              styles: {
+                width: '50%'
+              },
+              validation: {
+                required: false
+              },
+              //Define enable condition (element will be enabled when value of element observed match with array condition)
+              enableIf: {
+                optionId: ['1']
+              }
+            },
+            {
+              elementType: 'input',
+              label: 'Input 1',
+              name: 'input1WriteValue',
+              styles: {
+                width: '50%'
+              },
+              validation: {
+                required: true,
+                message: `Write a valid input value`
+              },
+              //Define enable condition (element will be enabled when value of element observed match with array condition)
+              enableIf: {
+                optionId: ['1']
+              }
+            },
+          ]
+        },
+        {
+          elementType: 'group', //Put here groups of element into same line and customize using styles
+          groups: [
+            {
+              elementType: 'input',
+              label: 'Input 2 (Read)',
+              name: 'input2ReadOnly',
+              disabled: true,
+              styles: {
+                width: '50%'
+              },
+              validation: {
+                required: false
+              },
+              //Define enable condition (element will be enabled when value of element observed match with array condition)
+              enableIf: {
+                optionId: ['2']
+              }
+            },
+            {
+              elementType: 'input',
+              label: 'Input 2',
+              name: 'input2WriteValue',
+              styles: {
+                width: '50%'
+              },
+              validation: {
+                required: true,
+                message: `Write a valid input value`
+              },
+              //Define enable condition (element will be enabled when value of element observed match with array condition)
+              enableIf: {
+                optionId: ['2']
+              }
+            },
+          ]
+        },
+      ],
+      styles: { // Put here styles for modal like height or width
+        width: '500px'
+      },
+      title: `Title of enable if modal`, //Title of modal
+      action: {
+        name: 'Save', //Name of action button 
+        action //Function to receive data from modal
+      },
+      cancel: {
+        name: 'Cancel' //Name of cancel button
+      }
+    }
+  }
+}
+
+export default enableIfModal

package/examples/live-data.ts

@@ -25,7 +25,7 @@ const liveDataModal: ILiveDataModal = {
           elementType: 'select',
           label: 'Type',
           options: props.typeList,
-          name: 'typeId', //Element observed
+          name: 'typeId', //Element to be observed
           validation: {
             required: true,
             message: 'Please select a valid type'

package/examples/render-if.ts

@@ -1 +1,131 @@
- 
+  
+import { IModalConfigLoader } from '../src/interfaces/modal'
+
+export type IncomingProps = object
+
+type ResultProps = Record<'optionId', string> & Partial<Record<'input1ReadOnly' | 'input1WriteValue' | 'input2ReadOnly' | 'input2WriteValue', string>>
+
+export interface IRenderIfModal {
+  default: IModalConfigLoader<IncomingProps, ResultProps>
+}
+
+const renderIfModal: IRenderIfModal = {
+  default: (props, action) => {
+    return {
+      reservedData: {}, //Put here any data that you want store and receive into modal output
+      fields: [ //Put here any elements for render into modal
+        {
+          elementType: 'select',
+          label: 'option',
+          defaultValue: '0',
+          options: [
+            {
+              id: '0',
+              name:'Select...'
+            },
+            {
+              id: '1',
+              name:'Option 1'
+            },
+            {
+              id: '2',
+              name:'Option 2'
+            }
+          ],
+          name: 'optionId', //Element to be observed
+          validation: {
+            required: true,
+            message: 'Please select a valid option'
+          }
+        },
+        {
+          elementType: 'group', //Put here groups of element into same line and customize using styles
+          groups: [
+            {
+              elementType: 'input',
+              label: 'Input 1 (Read)',
+              name: 'input1ReadOnly',
+              disabled: true,
+              styles: {
+                width: '50%'
+              },
+              validation: {
+                required: false
+              },
+              //Define render condition (element will be show when value of element observed match with array condition)
+              renderIf: {
+                optionId: ['1']
+              }
+            },
+            {
+              elementType: 'input',
+              label: 'Input 1',
+              name: 'input1WriteValue',
+              styles: {
+                width: '50%'
+              },
+              validation: {
+                required: true,
+                message: `Write a valid input value`
+              },
+              //Define render condition (element will be show when value of element observed match with array condition)
+              renderIf: {
+                optionId: ['1']
+              }
+            },
+          ]
+        },
+        {
+          elementType: 'group', //Put here groups of element into same line and customize using styles
+          groups: [
+            {
+              elementType: 'input',
+              label: 'Input 2 (Read)',
+              name: 'input2ReadOnly',
+              disabled: true,
+              styles: {
+                width: '50%'
+              },
+              validation: {
+                required: false
+              },
+              //Define render condition (element will be show when value of element observed match with array condition)
+              renderIf: {
+                optionId: ['2']
+              }
+            },
+            {
+              elementType: 'input',
+              label: 'Input 2',
+              name: 'input2WriteValue',
+              styles: {
+                width: '50%'
+              },
+              validation: {
+                required: true,
+                message: `Write a valid input value`
+              },
+              //Define render condition (element will be show when value of element observed match with array condition)
+              renderIf: {
+                optionId: ['2']
+              }
+            },
+          ]
+        },
+      ],
+      styles: { // Put here styles for modal like height or width
+        width: '500px'
+      },
+      title: `Title of render if modal`, //Title of modal
+      action: {
+        name: 'Save', //Name of action button 
+        action //Function to receive data from modal
+      },
+      cancel: {
+        name: 'Cancel' //Name of cancel button
+      }
+    }
+  }
+}
+
+export default renderIfModal

package/examples/simple.ts

@@ -1,6 +1,7 @@
 import { IModalConfigLoader } from '../src/interfaces/modal'
 
 type IncomingProps = {
+  reserved: string
   input1: string
   store?: boolean
   clear?: boolean
@@ -15,7 +16,7 @@ export interface ISimpleModal {
 const simpleModal: ISimpleModal = {
   default: (props, action) => {
     return {
-      reservedData: {}, //Put here any data that you want store and receive into modal output
+      reservedData: { reserved: props.reserved }, //Put here any data that you want store and receive into modal output
       fields: [ //Put here any elements for render into modal
         {
           elementType: 'input',
@@ -67,7 +68,7 @@ const simpleModal: ISimpleModal = {
         action //Function to receive data from modal
       },
       cancel: {
-        name: 'Cancel' //Name of cancel button
+        name: 'Cancel', //Name of cancel button
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dynamic-modal",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "The dynamic-modal is a solution of creation differents modals into project using a json configuration file",
   "main": "index.js",
   "scripts": {

package/src/hooks/field-render.ts

@@ -51,11 +51,11 @@ export const useFieldRender = (props: IFieldRenderProps): IFieldRender => {
     }, [props.element.liveData]
   )
 
-  const renderConditionList: string[] = useMemo(() => {
+  const renderConditionList: Array<string> = useMemo(() => {
     return renderCondition ? Object.keys(props.element.renderIf as IModalRenderCondition) : []
   }, [props.element.renderIf, renderCondition])
 
-  const enableConditionList: string[] = useMemo(() => {
+  const enableConditionList: Array<string> = useMemo(() => {
     return enableCondition ? Object.keys(props.element.enableIf as IModalRenderCondition) : []
   }, [enableCondition, props.element.enableIf])
 

package/src/interfaces/make-autocomplete.ts

@@ -5,8 +5,6 @@ import { IOption } from './option'
 export interface IMakeAutoComplete extends IField {
   elementType: 'autocomplete'
   options: Array<IOption>
-  defaultOption?: boolean
-  defaultOptionName?: string
   liveData?: IModalLiveDataCondition
 }
 

package/src/interfaces/make-select.ts

@@ -4,8 +4,6 @@ import { IModalLiveDataCondition } from './modal'
 export interface IMakeSelect extends IField {
   elementType: 'select'
   options: Array<Record<'id'|'name', string>>
-  defaultOption?: boolean
-  defaultOptionName?: string
   liveData?: IModalLiveDataCondition
 }
 

package/src/interfaces/modal.ts

@@ -36,7 +36,7 @@ export interface IModalConfigProps {
     action?: () => void
     hide?: boolean;
   }
-  reservedData?: Record<string, string | number>
+  reservedData?: Record<string, any>
   styles?: CSSProperties;
   overFlowBody?: string | number
   minHeightBody?: string | number

package/src/modal.tsx

@@ -30,6 +30,11 @@ export const Modal = ({ open, close, config }: IModal) => {
 
   const formValueHandler = (element: IFormField) => {
     if (['group', 'upload', 'text'].includes(element.elementType)) return
+    if(!element.defaultValue && element.renderIf) {
+      unregister(element.name)
+      return
+    }
+    
     const defaultValue = element.defaultValue ?? ''
     const parsedValue: boolean | string | Array<string> | undefined = defaultValue === 'true' ? true : defaultValue === 'false' ? false : defaultValue
     setValue(element.name, parsedValue ?? '')