dynamic-modal 1.0.2 → 1.0.4

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/modal.js

@@ -50,6 +50,10 @@ const Modal = ({ open, close, config }) => {
         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 : '');
@@ -132,7 +136,7 @@ const Modal = ({ open, close, config }) => {
                         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'].includes(sub.elementType))
+                                .filter(sub => ['input', 'select', 'toggle', 'multiselect', 'upload', 'button', 'autocomplete'].includes(sub.elementType))
                                 .map((sub, subIndex) => getRender(sub, index + subIndex, isEndOfRender))));
                         }
                         else {

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.2",
+  "version": "1.0.4",
   "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/modal.tsx

@@ -30,8 +30,13 @@ 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
+    const parsedValue: boolean | string | Array<string> | undefined = defaultValue === 'true' ? true : defaultValue === 'false' ? false : defaultValue
     setValue(element.name, parsedValue ?? '')
   }
 
@@ -51,7 +56,7 @@ export const Modal = ({ open, close, config }: IModal) => {
       }
       formValueHandler(element as IFormField)
     })
-    
+
     setDefaultLoaded(true)
   }
 
@@ -102,7 +107,7 @@ export const Modal = ({ open, close, config }: IModal) => {
   }
 
   useEffect(() => {
-    if(open && !modalReady) setModalReady(config)
+    if (open && !modalReady) setModalReady(config)
   }, [config, modalReady, open])
 
   return (
@@ -121,14 +126,14 @@ export const Modal = ({ open, close, config }: IModal) => {
             >
               {
                 modalReady.fields.map((element, index) => {
-                  const isEndOfRender : boolean = index + 1 === modalReady.fields.length
+                  const isEndOfRender: boolean = index + 1 === modalReady.fields.length
 
                   if (element.elementType === 'group') {
                     return (
                       <div key={`modal-group-${index}`} className='flex gap-4 w-full' style={element.style} >
                         {
                           element.groups
-                            .filter(sub => ['input', 'select', 'toggle', 'multiselect', 'upload', 'button'].includes(sub.elementType))
+                            .filter(sub => ['input', 'select', 'toggle', 'multiselect', 'upload', 'button', 'autocomplete'].includes(sub.elementType))
                             .map((sub, subIndex) => getRender(sub, index + subIndex, isEndOfRender))
                         }
                       </div>