dynamic-modal 1.1.4 → 1.1.8

package/dist/context/component/component-state.js

@@ -16,23 +16,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentState = exports.ComponentStateContext = void 0;
 const react_1 = __importStar(require("react"));

package/dist/hooks/field-render.d.ts

@@ -16,4 +16,5 @@ export interface IFieldRender {
 export interface IFieldRenderProps extends Pick<IFieldProps, 'setValue' | 'unregister'> {
     element: Partial<Pick<IField, 'enableIf' | 'renderIf' | 'name'>> & Partial<Record<'liveData', IModalLiveDataCondition>>;
 }
+export type ILiveHandlerProps = Pick<IField, 'enableIf' | 'renderIf'>;
 export declare const useFieldRender: ({ element, setValue, unregister }: IFieldRenderProps) => IFieldRender;

package/dist/hooks/field-render.js

@@ -46,34 +46,41 @@ const useFieldRender = ({ element, setValue, unregister }) => {
         }
         return [];
     }), [element.liveData]);
+    const liveDataHandler = (0, react_1.useCallback)((targetHandler, field, formData) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        if (typeof field === 'string' && ((_a = element[targetHandler]) === null || _a === void 0 ? void 0 : _a.action)) {
+            const result = element[targetHandler].action(field, formData);
+            return result !== null && result !== void 0 ? result : false;
+        }
+        return false;
+    }), [element.liveData]);
     const checkField = (0, react_1.useCallback)((formData_1, _a) => __awaiter(void 0, [formData_1, _a], void 0, function* (formData, { name }) {
-        var _b;
+        var _b, _c, _d;
         const key = name !== null && name !== void 0 ? name : '';
         const targetField = formData[key];
-        const fieldValidValue = targetField !== undefined && targetField !== null && targetField !== '';
-        if (renderCondition && renderConditionList.includes(key) && fieldValidValue) {
-            const renderStatus = element.renderIf[key].includes(targetField) || element.renderIf[key].includes('*');
+        if (!targetField)
+            return;
+        if (renderCondition && ((_b = element.renderIf) === null || _b === void 0 ? void 0 : _b.condition.includes(key))) {
+            const renderStatus = yield liveDataHandler('renderIf', targetField, formData);
             if (render !== renderStatus) {
                 setRender(renderStatus);
                 if (!renderStatus)
                     unregister(element.name);
             }
         }
-        else if (enableCondition && enableConditionList.includes(key) && fieldValidValue) {
-            const enableStatus = element.enableIf[key].includes(targetField) || element.enableIf[key].includes('*');
+        else if (enableCondition && ((_c = element.enableIf) === null || _c === void 0 ? void 0 : _c.condition.includes(key))) {
+            const enableStatus = yield liveDataHandler('enableIf', targetField, formData);
             if (enable !== enableStatus)
                 setEnable(enableStatus);
         }
-        if (liveDataCondition && ((_b = element.liveData) === null || _b === void 0 ? void 0 : _b.condition.includes(key))) {
-            if (targetField) {
-                setLiveSearching(true);
-                const options = yield liveDataAction(targetField, formData);
-                if (liveData && JSON.stringify(liveData) !== JSON.stringify(options)) {
-                    setValue(element.name, options);
-                }
-                setLiveData(options);
-                setLiveSearching(false);
+        if (liveDataCondition && ((_d = element.liveData) === null || _d === void 0 ? void 0 : _d.condition.includes(key))) {
+            setLiveSearching(true);
+            const options = yield liveDataAction(targetField, formData);
+            if (liveData && JSON.stringify(liveData) !== JSON.stringify(options)) {
+                setValue(element.name, options);
             }
+            setLiveData(options);
+            setLiveSearching(false);
         }
     }), [enable, enableCondition, enableConditionList, liveData, liveDataAction, liveDataCondition, render, renderCondition, renderConditionList]);
     return {

package/dist/interfaces/modal.d.ts

@@ -10,7 +10,10 @@ import { IOption } from './option';
 import { IMakeButton } from './make-button';
 export type IModalField = IMakeSelect | IMakeInput | IMakeFieldGroup | IMakeTextarea | IMakeToggle | IMakeDescription | IMakeUpload | IMakeButton;
 export type IFormField = IMakeSelect | IMakeInput | IMakeTextarea | IMakeToggle;
-export type IModalRenderCondition = Record<string, Array<string | number | boolean> | undefined>;
+export type IModalRenderCondition = {
+    action: (data: string, ...args: any[]) => Promise<boolean>;
+    condition: Array<string>;
+};
 export type IModalLiveDataCondition = {
     action: (data: string, ...args: any[]) => Promise<Array<IOption>>;
     condition: Array<string>;
@@ -24,6 +27,7 @@ export interface IModalConfigProps {
     style?: CSSProperties;
     overFlowBody?: string | number;
     minHeightBody?: string | number;
+    useSubmit?: boolean;
     actions: {
         containerStyle?: CSSProperties;
         cancel?: Omit<IMakeButton, 'elementType'>;

package/dist/modal.js

@@ -16,23 +16,22 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -64,7 +63,7 @@ const Modal = ({ open, close, config }) => {
     const { ModalButtonAction, ModalButtonCancel } = (0, react_1.useContext)(component_state_1.ComponentStateContext);
     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 { control, handleSubmit, getValues, unregister, setValue, watch, trigger, getFieldState } = (0, react_hook_form_1.useForm)();
     const formValueHandler = (element) => {
         var _a;
         if (['group', 'upload', 'text'].includes(element.elementType))
@@ -94,6 +93,10 @@ 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 = (_a, index, isEndOfRender) => {
         var { elementType } = _a, element = __rest(_a, ["elementType"]);
         if (isEndOfRender === void 0) { isEndOfRender = false; }
@@ -132,6 +135,20 @@ const Modal = ({ open, close, config }) => {
             close();
         }, 200);
     };
+    const manualSubmit = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const form = getValues();
+        const fields = Object.keys(form);
+        yield trigger(fields);
+        const validations = fields.map(field => {
+            const { invalid } = getFieldState(field);
+            return invalid;
+        });
+        const result = validations.some(isInvalid => isInvalid) ? undefined : form;
+        if (!result)
+            return;
+        actionHandler(Object.assign(Object.assign({}, ((_a = modalReady === null || modalReady === void 0 ? void 0 : modalReady.reservedData) !== null && _a !== void 0 ? _a : {})), form));
+    });
     const actionHandler = (data) => {
         var _a;
         modalReady === null || modalReady === void 0 ? void 0 : modalReady.out(Object.assign(Object.assign({}, ((_a = modalReady === null || modalReady === void 0 ? void 0 : modalReady.reservedData) !== null && _a !== void 0 ? _a : {})), data));
@@ -165,7 +182,9 @@ const Modal = ({ open, close, config }) => {
                     })),
                     react_1.default.createElement("div", { className: 'flex gap-4 items-center justify-center border-t', style: modalReady === null || modalReady === void 0 ? void 0 : modalReady.actions.containerStyle },
                         modalReady.actions.cancel && react_1.default.createElement(ModalButtonCancel, Object.assign({}, modalReady.actions.cancel, { onClick: closeHandler })),
-                        react_1.default.createElement(ModalButtonAction, Object.assign({}, modalReady.actions.action, { type: 'submit' }))))))
+                        getUseSubmit(modalReady) ?
+                            react_1.default.createElement(ModalButtonAction, Object.assign({}, modalReady.actions.action, { type: 'submit' })) :
+                            react_1.default.createElement(ModalButtonAction, Object.assign({}, modalReady.actions.action, { onClick: manualSubmit, type: 'button' }))))))
         : null);
 };
 exports.Modal = Modal;

package/eslint.config.mjs

@@ -1,14 +1,14 @@
-import globals from "globals";
-import pluginJs from "@eslint/js";
-import tseslint from "typescript-eslint";
-import pluginReact from "eslint-plugin-react";
-
-export default [
-  { files: ['**/*.{ts,tsx}'] },
-  { languageOptions: { globals: globals.browser } },
-  { settings: { react: { version: 'detect' } } },
-  { ignores : ['dist/**', 'node_modules/**'] },
-  pluginJs.configs.recommended,
-  ...tseslint.configs.recommended,
-  pluginReact.configs.flat.recommended,
-];
+import globals from "globals"
+import pluginJs from "@eslint/js"
+import tseslint from "typescript-eslint"
+import pluginReact from "eslint-plugin-react"
+
+export default [
+  { files: ['**/*.{ts,tsx}'] },
+  { languageOptions: { globals: globals.browser } },
+  { settings: { react: { version: 'detect' } } },
+  { ignores : ['dist/**', 'node_modules/**'] },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+]

package/examples/enable-if.ts

@@ -1,128 +1,128 @@
-   
-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']
-              }
-            },
-          ]
-        },
-      ],
-      style: { // Put here styles for modal like height or width
-        width: '500px'
-      },
-      title: `Title of enable if modal`, //Title of modal
-      out: action, //Function to receive data from modal
-      actions: { //Actions of modal, all props that you define here will be pass to ModalButtonCancel and ModalButtonAction components in your ComponentState
-        action: { text:'Action', color: 'primary' },
-        cancel: { text: 'Cancel', color: 'danger' }
-      }
-    }
-  }
-}
-
+   
+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']
+              }
+            },
+          ]
+        },
+      ],
+      style: { // Put here styles for modal like height or width
+        width: '500px'
+      },
+      title: `Title of enable if modal`, //Title of modal
+      out: action, //Function to receive data from modal
+      actions: { //Actions of modal, all props that you define here will be pass to ModalButtonCancel and ModalButtonAction components in your ComponentState
+        action: { text:'Action', color: 'primary' },
+        cancel: { text: 'Cancel', color: 'danger' }
+      }
+    }
+  }
+}
+
 export default enableIfModal

package/examples/live-data.ts

@@ -1,62 +1,62 @@
-/* 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
-          }
-        }
-      ],
-      style: { // Put here styles for modal like height or width
-        width: '500px'
-      },
-      title: `Title of enable if modal`, //Title of modal
-      out: action, //Function to receive data from modal
-      actions: { //Actions of modal, all props that you define here will be pass to ModalButtonCancel and ModalButtonAction components in your ComponentState
-        action: { text:'Action', color: 'primary' },
-        cancel: { text: 'Cancel', color: 'danger' }
-      }
-    }
-  }
-}
-
+/* 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
+          }
+        }
+      ],
+      style: { // Put here styles for modal like height or width
+        width: '500px'
+      },
+      title: `Title of enable if modal`, //Title of modal
+      out: action, //Function to receive data from modal
+      actions: { //Actions of modal, all props that you define here will be pass to ModalButtonCancel and ModalButtonAction components in your ComponentState
+        action: { text:'Action', color: 'primary' },
+        cancel: { text: 'Cancel', color: 'danger' }
+      }
+    }
+  }
+}
+
 export default liveDataModal