dynamic-modal 1.0.11 → 1.0.13

package/examples/enable-if.ts

@@ -1,130 +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
-      }
-    }
-  }
-}
-
+   
+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

@@ -1,64 +1,64 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { IModalConfigLoader } from '../src/interfaces/modal'
-import { IOption } from '../src/interfaces/option'
-
-type IncomingProps = {
-  typeList: Array<IOption>
-
-  //Define function to receive selected element and formData (if you need to use) make read or select operations and build 
-  //next select array of elements
-  optionReadAction : (typeId: string, formData: any) => Promise<Array<IOption>>
-}
-
-type ResultProps = Omit<IncomingProps,'optionReadAction'|'typeList'> & Record<'typeId'|'optionId', string>
-
-export interface ILiveDataModal {
-  default: IModalConfigLoader<IncomingProps, ResultProps>
-}
-
-const liveDataModal: ILiveDataModal = {
-  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: 'Type',
-          options: props.typeList,
-          name: 'typeId', //Element to be observed
-          validation: {
-            required: true,
-            message: 'Please select a valid type'
-          }
-        },
-        {
-          elementType: 'select',
-          label: 'Options',
-          options: [],
-          name: 'optionId',
-          validation: {
-            required: true,
-            message: 'Please select a valid option'
-          },
-          liveData: {
-            action: props.optionReadAction, //Define live data action (function that receive data selected from other field for execute and build other options)
-            condition: 'typeId' //Define element into modal was to observed
-          }
-        }
-      ],
-      styles: { // Put here styles for modal like height or width
-        width: '500px'
-      },
-      title: `Title of live data 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
-      }
-    }
-  }
-}
-
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { IModalConfigLoader } from '../src/interfaces/modal'
+import { IOption } from '../src/interfaces/option'
+
+type IncomingProps = {
+  typeList: Array<IOption>
+
+  //Define function to receive selected element and formData (if you need to use) make read or select operations and build 
+  //next select array of elements
+  optionReadAction : (typeId: string, formData: any) => Promise<Array<IOption>>
+}
+
+type ResultProps = Omit<IncomingProps,'optionReadAction'|'typeList'> & Record<'typeId'|'optionId', string>
+
+export interface ILiveDataModal {
+  default: IModalConfigLoader<IncomingProps, ResultProps>
+}
+
+const liveDataModal: ILiveDataModal = {
+  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: 'Type',
+          options: props.typeList,
+          name: 'typeId', //Element to be observed
+          validation: {
+            required: true,
+            message: 'Please select a valid type'
+          }
+        },
+        {
+          elementType: 'select',
+          label: 'Options',
+          options: [],
+          name: 'optionId',
+          validation: {
+            required: true,
+            message: 'Please select a valid option'
+          },
+          liveData: {
+            action: props.optionReadAction, //Define live data action (function that receive data selected from other field for execute and build other options)
+            condition: 'typeId' //Define element into modal was to observed
+          }
+        }
+      ],
+      styles: { // Put here styles for modal like height or width
+        width: '500px'
+      },
+      title: `Title of live data 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 liveDataModal

package/examples/render-if.ts

@@ -1,131 +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
-      }
-    }
-  }
-}
-
+  
+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