dynamic-modal 1.1.7 → 1.1.8

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>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dynamic-modal",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "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

@@ -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,40 @@ export const useFieldRender = ({ element, setValue, unregister }: IFieldRenderPr
     }, [element.liveData]
   )
 
+  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)
+        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(!targetField) return 
 
-      if (renderCondition && renderConditionList.includes(key) && fieldValidValue) {
-        const renderStatus: boolean = (element.renderIf as IModalRenderCondition)[key]!.includes(targetField) || (element.renderIf as IModalRenderCondition)[key]!.includes('*')
+      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)
         }
-      } else if (enableCondition && enableConditionList.includes(key) && fieldValidValue) {
-        const enableStatus: boolean = (element.enableIf as IModalRenderCondition)[key]!.includes(targetField) || (element.enableIf as IModalRenderCondition)[key]!.includes('*')
+      } 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)) {
-        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,10 @@ 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 type IModalRenderCondition = {
+  action: (data: string, ...args: any[]) => Promise<boolean>
+  condition: Array<string>
+}
 
 export type IModalLiveDataCondition = {
   action: (data: string, ...args: any[]) => Promise<Array<IOption>>