dynamic-modal 1.1.1 → 1.1.7

package/dist/components/make-toggle/make-toggle.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;
+};
 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)
@@ -52,9 +42,9 @@ const general_1 = require("../../tools/general");
 const component_state_1 = require("../../context/component/component-state");
 const MakeToggle = (_a) => {
     var _b, _c;
-    var _d = _a.element, _e = _d.validation, { required } = _e, validation = __rest(_e, ["required"]), element = __rest(_d, ["validation"]), props = __rest(_a, ["element"]);
+    var _d = _a.element, _e = _d.validation, { required } = _e, validation = __rest(_e, ["required"]), { enableIf, renderIf } = _d, element = __rest(_d, ["validation", "enableIf", "renderIf"]), props = __rest(_a, ["element"]);
     const { Toggle } = (0, react_1.useContext)(component_state_1.ComponentStateContext);
-    const { render, enable, checkField } = (0, field_render_1.useFieldRender)(Object.assign(Object.assign({}, props), { element }));
+    const { render, enable, checkField } = (0, field_render_1.useFieldRender)(Object.assign(Object.assign({}, props), { element: Object.assign({ enableIf, renderIf }, element) }));
     const elementId = (0, react_1.useMemo)(() => { var _a; return (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(); }, []);
     (0, react_1.useEffect)(() => {
         const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }));

package/dist/components/make-upload/make-upload.js

@@ -21,8 +21,8 @@ const input_upload_1 = __importDefault(require("../input-upload/input-upload"));
 const field_render_1 = require("../../hooks/field-render");
 const MakeUpload = (_a) => {
     var _b, _c;
-    var _d = _a.element, _e = _d.validation, { required } = _e, validation = __rest(_e, ["required"]), element = __rest(_d, ["validation"]), props = __rest(_a, ["element"]);
-    const { render, enable } = (0, field_render_1.useFieldRender)(Object.assign(Object.assign({}, props), { element }));
+    var _d = _a.element, _e = _d.validation, { required } = _e, validation = __rest(_e, ["required"]), { enableIf, renderIf } = _d, element = __rest(_d, ["validation", "enableIf", "renderIf"]), props = __rest(_a, ["element"]);
+    const { render, enable } = (0, field_render_1.useFieldRender)(Object.assign(Object.assign({}, props), { element: Object.assign({ enableIf, renderIf }, element) }));
     return (render
         ? react_1.default.createElement(react_hook_form_1.Controller, { control: props.control, name: element.name, rules: Object.assign({ required: {
                     value: required,

package/dist/components/portal/portal.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.Portal = void 0;
 const react_1 = __importStar(require("react"));

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

@@ -60,7 +60,7 @@ const useFieldRender = ({ element, setValue, unregister }) => {
             }
         }
         else if (enableCondition && enableConditionList.includes(key) && fieldValidValue) {
-            const enableStatus = element.enableIf[key].includes(targetField) || element.enableIf[key].includes('');
+            const enableStatus = element.enableIf[key].includes(targetField) || element.enableIf[key].includes('*');
             if (enable !== enableStatus)
                 setEnable(enableStatus);
         }

package/dist/interfaces/field.d.ts

@@ -1,5 +1,6 @@
 import { CSSProperties } from 'react';
 import { Control, FieldValues, UseFormSetValue, UseFormUnregister, UseFormWatch } from 'react-hook-form';
+import { IModalRenderCondition } from './modal';
 export interface IValidationBase<T> {
     value: T;
     message: string;
@@ -11,8 +12,8 @@ export interface IField {
     style?: CSSProperties;
     placeholder?: string;
     defaultValue?: any;
-    renderIf?: Record<string, Array<string | number>>;
-    enableIf?: Record<string, Array<string | number>>;
+    renderIf?: IModalRenderCondition;
+    enableIf?: IModalRenderCondition;
     validation: {
         required: boolean;
         regex?: RegExp;

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

@@ -1,8 +1,9 @@
 import { IField, IFieldProps } from './field';
 import { IModalLiveDataCondition } from './modal';
+import { IOption } from './option';
 export interface IMakeSelect extends IField {
     elementType: 'select';
-    options: Array<Record<'id' | 'name', string>>;
+    options: Array<IOption>;
     liveData?: IModalLiveDataCondition;
     isSearch?: boolean;
     isMulti?: boolean;

package/dist/interfaces/modal.d.ts

@@ -10,7 +10,7 @@ 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>>;
+export type IModalRenderCondition = Record<string, Array<string | number | boolean> | undefined>;
 export type IModalLiveDataCondition = {
     action: (data: string, ...args: any[]) => Promise<Array<IOption>>;
     condition: Array<string>;
@@ -24,6 +24,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