dynamic-modal 1.1.8 → 1.1.9

package/dist/hooks/field-render.js

@@ -47,33 +47,54 @@ 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);
+        const liveHandlerProperty = element[targetHandler];
+        if (typeof field === 'string' && liveHandlerProperty) {
+            const result = liveHandlerProperty.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, _c, _d;
+        var _b;
         const key = name !== null && name !== void 0 ? name : '';
         const targetField = formData[key];
         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);
+        if (renderCondition) {
+            const renderIfConfig = element.renderIf;
+            const isLiveRender = !!(renderIfConfig === null || renderIfConfig === void 0 ? void 0 : renderIfConfig.action) && !!(renderIfConfig === null || renderIfConfig === void 0 ? void 0 : renderIfConfig.condition);
+            if (isLiveRender && renderIfConfig.condition.includes(key)) {
+                const renderStatus = yield liveDataHandler('renderIf', targetField, formData);
+                if (render !== renderStatus) {
+                    setRender(renderStatus);
+                    if (!renderStatus)
+                        unregister(element.name);
+                }
+            }
+            else if (renderConditionList.includes(key)) {
+                const renderStatus = renderIfConfig[key].includes(targetField) || renderIfConfig[key].includes('*');
+                if (render !== renderStatus) {
+                    setRender(renderStatus);
+                    if (!renderStatus)
+                        unregister(element.name);
+                }
             }
         }
-        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);
+        else if (enableCondition) {
+            const enableIfConfig = element.enableIf;
+            const isLiveEnable = !!(enableIfConfig === null || enableIfConfig === void 0 ? void 0 : enableIfConfig.action) && !!enableIfConfig.condition;
+            if (isLiveEnable && enableIfConfig.condition.includes(key)) {
+                const enableStatus = yield liveDataHandler('enableIf', targetField, formData);
+                if (enable !== enableStatus)
+                    setEnable(enableStatus);
+            }
+            else if (enableConditionList.includes(key)) {
+                const enableStatus = enableIfConfig[key].includes(targetField) || enableIfConfig[key].includes('*');
+                if (enable !== enableStatus)
+                    setEnable(enableStatus);
+            }
         }
-        if (liveDataCondition && ((_d = element.liveData) === null || _d === void 0 ? void 0 : _d.condition.includes(key))) {
+        if (liveDataCondition && ((_b = element.liveData) === null || _b === void 0 ? void 0 : _b.condition.includes(key))) {
             setLiveSearching(true);
             const options = yield liveDataAction(targetField, formData);
             if (liveData && JSON.stringify(liveData) !== JSON.stringify(options)) {

package/dist/interfaces/modal.d.ts

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

package/package.json

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

package/src/hooks/field-render.ts

@@ -3,7 +3,7 @@
 import { useCallback, useMemo, useState } from 'react'
 import { IField, IFieldProps } from '../interfaces/field'
 import { IOption } from '../interfaces/option'
-import { IModalLiveDataCondition, IModalRenderCondition } from '../interfaces/modal'
+import { IModalLiveDataCondition, IModalRenderAction, IModalRenderCondition, IModalRenderCriteria } from '../interfaces/modal'
 
 export type IFormData = Record<string, unknown>
 
@@ -74,8 +74,10 @@ export const useFieldRender = ({ element, setValue, unregister }: IFieldRenderPr
 
   const liveDataHandler = useCallback(
     async (targetHandler: keyof ILiveHandlerProps, field: string | number | Array<unknown>, formData: IFormData) => {
-      if (typeof field === 'string' && element[targetHandler]?.action) {
-        const result = element[targetHandler].action(field, formData)
+      const liveHandlerProperty = element[targetHandler] as IModalRenderAction
+
+      if (typeof field === 'string' && liveHandlerProperty) {
+        const result = liveHandlerProperty.action(field, formData)
         return result ?? false
       }
 
@@ -89,15 +91,36 @@ export const useFieldRender = ({ element, setValue, unregister }: IFieldRenderPr
       const targetField  = formData[key] as string | number
       if(!targetField) return 
 
-      if (renderCondition && element.renderIf?.condition.includes(key)) {
-        const renderStatus: boolean = await liveDataHandler('renderIf', targetField, formData)
-        if (render !== renderStatus) {
-          setRender(renderStatus)
-          if(!renderStatus) unregister(element.name as string)
+      if(renderCondition){
+        const renderIfConfig = element.renderIf
+        const isLiveRender: boolean = !!renderIfConfig?.action && !!renderIfConfig?.condition
+
+        if(isLiveRender && renderIfConfig!.condition!.includes(key)){
+          const renderStatus: boolean = await liveDataHandler('renderIf', targetField, formData)
+
+          if (render !== renderStatus) {
+            setRender(renderStatus)
+            if(!renderStatus) unregister(element.name as string)
+          }
+        }else if(renderConditionList.includes(key)){
+          const renderStatus: boolean = (renderIfConfig as IModalRenderCriteria)[key]!.includes(targetField) || (renderIfConfig as IModalRenderCriteria)[key]!.includes('*')
+
+          if (render !== renderStatus) {
+            setRender(renderStatus)
+            if(!renderStatus) unregister(element.name as string)
+          }
+        }
+      }else if (enableCondition){
+        const enableIfConfig = element.enableIf
+        const isLiveEnable: boolean = !!enableIfConfig?.action && !!enableIfConfig.condition
+        
+        if(isLiveEnable && enableIfConfig!.condition!.includes(key)){
+          const enableStatus: boolean = await liveDataHandler('enableIf', targetField, formData)
+          if (enable !== enableStatus) setEnable(enableStatus)
+        }else if(enableConditionList.includes(key)){
+          const enableStatus: boolean = (enableIfConfig as IModalRenderCriteria)[key]!.includes(targetField) || (enableIfConfig as IModalRenderCriteria)[key]!.includes('*')
+          if (enable !== enableStatus) setEnable(enableStatus)
         }
-      } else if (enableCondition && element.enableIf?.condition.includes(key)){
-        const enableStatus: boolean = await liveDataHandler('enableIf', targetField, formData)
-        if (enable !== enableStatus) setEnable(enableStatus)
       }
 
       if (liveDataCondition && element.liveData?.condition.includes(key)) {

package/src/interfaces/modal.ts

@@ -14,11 +14,15 @@ export type IModalField = IMakeSelect | IMakeInput | IMakeFieldGroup | IMakeText
 
 export type IFormField = IMakeSelect | IMakeInput | IMakeTextarea | IMakeToggle
 
-export type IModalRenderCondition = {
+export interface IModalRenderAction {
   action: (data: string, ...args: any[]) => Promise<boolean>
   condition: Array<string>
 }
 
+export type IModalRenderCriteria = Record<string, Array<string | number | boolean> | undefined>
+
+export type IModalRenderCondition = IModalRenderAction | IModalRenderCriteria
+
 export type IModalLiveDataCondition = {
   action: (data: string, ...args: any[]) => Promise<Array<IOption>>
   condition: Array<string>