dynamic-modal 1.1.7 → 1.1.9

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,62 @@ 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* () {
+        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;
         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 (render !== renderStatus) {
-                setRender(renderStatus);
-                if (!renderStatus)
-                    unregister(element.name);
+        if (!targetField)
+            return;
+        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 && enableConditionList.includes(key) && fieldValidValue) {
-            const enableStatus = element.enableIf[key].includes(targetField) || element.enableIf[key].includes('*');
-            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 && ((_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);
+            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,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 = Record<string, Array<string | number | boolean> | undefined>;
+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.7",
+  "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>
 
@@ -24,6 +24,8 @@ export interface IFieldRenderProps extends Pick<IFieldProps, 'setValue' | 'unreg
   element: Partial<Pick<IField, 'enableIf' | 'renderIf' | 'name' >> & Partial<Record<'liveData', IModalLiveDataCondition>>
 }
 
+export type ILiveHandlerProps = Pick<IField, 'enableIf' | 'renderIf'>
+
 export const useFieldRender = ({ element, setValue, unregister }: IFieldRenderProps): IFieldRender => {
   const [render, setRender] = useState<boolean|null>(null)
   const [enable, setEnable] = useState<boolean|null>(null)
@@ -61,7 +63,7 @@ export const useFieldRender = ({ element, setValue, unregister }: IFieldRenderPr
   }, [enableCondition, element.enableIf])
 
   const liveDataAction = useCallback(
-    async (field: string |number | Array<unknown>, formData: IFormData) => {
+    async (field: string | number | Array<unknown>, formData: IFormData) => {
       if (typeof field === 'string' && element.liveData?.action) {
         const options = element.liveData.action(field, formData)
         return options ?? []
@@ -70,31 +72,63 @@ export const useFieldRender = ({ element, setValue, unregister }: IFieldRenderPr
     }, [element.liveData]
   )
 
+  const liveDataHandler = useCallback(
+    async (targetHandler: keyof ILiveHandlerProps, field: string | number | Array<unknown>, formData: IFormData) => {
+      const liveHandlerProperty = element[targetHandler] as IModalRenderAction
+
+      if (typeof field === 'string' && liveHandlerProperty) {
+        const result = liveHandlerProperty.action(field, formData)
+        return result ?? false
+      }
+
+      return false
+    }, [element.liveData]
+  )
+
   const checkField = useCallback(
     async (formData: IFormData, { name }: IWatchEvent) => {
       const key: string = name ?? ''
       const targetField  = formData[key] as string | number
-      const fieldValidValue: boolean = targetField !== undefined && targetField !== null && targetField !== ''
-
-      if (renderCondition && renderConditionList.includes(key) && fieldValidValue) {
-        const renderStatus: boolean = (element.renderIf as IModalRenderCondition)[key]!.includes(targetField) || (element.renderIf as IModalRenderCondition)[key]!.includes('*')
-        if (render !== renderStatus) {
-          setRender(renderStatus)
-          if(!renderStatus) unregister(element.name as string)
+      if(!targetField) return 
+
+      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 && enableConditionList.includes(key) && fieldValidValue) {
-        const enableStatus: boolean = (element.enableIf as IModalRenderCondition)[key]!.includes(targetField) || (element.enableIf as IModalRenderCondition)[key]!.includes('*')
-        if (enable !== enableStatus) setEnable(enableStatus)
       }
 
       if (liveDataCondition && element.liveData?.condition.includes(key)) {
-        if (targetField) {
-          setLiveSearching(true)
-          const options: Array<IOption> = await liveDataAction(targetField, formData)
-          if (liveData && JSON.stringify(liveData) !== JSON.stringify(options)) { setValue(element.name as string, options) }
-          setLiveData(options)
-          setLiveSearching(false)
-        }
+        setLiveSearching(true)
+        const options: Array<IOption> = await liveDataAction(targetField, formData)
+        if (liveData && JSON.stringify(liveData) !== JSON.stringify(options)) { setValue(element.name as string, options) }
+        setLiveData(options)
+        setLiveSearching(false)
       }
     }, [enable, enableCondition, enableConditionList, liveData, liveDataAction, liveDataCondition, render, renderCondition, renderConditionList]
   )

package/src/interfaces/modal.ts

@@ -14,7 +14,14 @@ export type IModalField = IMakeSelect | IMakeInput | IMakeFieldGroup | IMakeText
 
 export type IFormField = IMakeSelect | IMakeInput | IMakeTextarea | IMakeToggle
 
-export type IModalRenderCondition =  Record<string, Array<string | number | boolean> | undefined>
+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>>