dynamic-modal 1.0.8 → 1.0.10

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

@@ -13,7 +13,7 @@ export interface IFieldRender {
     liveData?: Array<IOption>;
     liveSearching?: boolean;
 }
-export interface IFieldRenderProps extends Pick<IFieldProps, 'setValue'> {
+export interface IFieldRenderProps extends Pick<IFieldProps, 'setValue' | 'unregister'> {
     element: Partial<Pick<IField, 'enableIf' | 'renderIf' | 'name'>> & Partial<Record<'liveData', IModalLiveDataCondition>>;
 }
-export declare const useFieldRender: (props: IFieldRenderProps) => IFieldRender;
+export declare const useFieldRender: ({ element, setValue, unregister }: IFieldRenderProps) => IFieldRender;

package/dist/hooks/field-render.js

@@ -12,66 +12,70 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFieldRender = void 0;
 const react_1 = require("react");
-const useFieldRender = (props) => {
+const useFieldRender = ({ element, setValue, unregister }) => {
     const [render, setRender] = (0, react_1.useState)(null);
     const [enable, setEnable] = (0, react_1.useState)(null);
     const [liveSearching, setLiveSearching] = (0, react_1.useState)(false);
     const [liveData, setLiveData] = (0, react_1.useState)(undefined);
     const renderCondition = (0, react_1.useMemo)(() => {
-        const isRender = props.element.renderIf !== undefined;
+        const isRender = element.renderIf !== undefined;
         if (render === null)
             setRender(!isRender);
         return isRender;
-    }, [props.element.renderIf, render]);
+    }, [element.renderIf, render]);
     const enableCondition = (0, react_1.useMemo)(() => {
-        const isEnable = props.element.enableIf !== undefined;
+        const isEnable = element.enableIf !== undefined;
         if (enable === null)
             setEnable(!isEnable);
         return isEnable;
-    }, [props.element.enableIf, enable]);
+    }, [element.enableIf, enable]);
     const liveDataCondition = (0, react_1.useMemo)(() => {
-        return props.element.liveData !== undefined;
-    }, [props.element.liveData]);
+        return element.liveData !== undefined;
+    }, [element.liveData]);
     const renderConditionList = (0, react_1.useMemo)(() => {
-        return renderCondition ? Object.keys(props.element.renderIf) : [];
-    }, [props.element.renderIf, renderCondition]);
+        return renderCondition ? Object.keys(element.renderIf) : [];
+    }, [element.renderIf, renderCondition]);
     const enableConditionList = (0, react_1.useMemo)(() => {
-        return enableCondition ? Object.keys(props.element.enableIf) : [];
-    }, [enableCondition, props.element.enableIf]);
+        return enableCondition ? Object.keys(element.enableIf) : [];
+    }, [enableCondition, element.enableIf]);
     const liveDataAction = (0, react_1.useCallback)((field, formData) => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
-        if (typeof field === 'string' && ((_a = props.element.liveData) === null || _a === void 0 ? void 0 : _a.action)) {
-            const options = props.element.liveData.action(field, formData);
+        if (typeof field === 'string' && ((_a = element.liveData) === null || _a === void 0 ? void 0 : _a.action)) {
+            const options = element.liveData.action(field, formData);
             return options !== null && options !== void 0 ? options : [];
         }
         return [];
-    }), [props.element.liveData]);
+    }), [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];
-        if (renderCondition && renderConditionList.includes(key)) {
-            const renderStatus = props.element.renderIf[key].includes(targetField) || props.element.renderIf[key].includes('*');
-            if (render !== renderStatus)
+        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);
+            }
         }
-        else if (enableCondition && enableConditionList.includes(key)) {
-            const enableStatus = props.element.enableIf[key].includes(targetField) || props.element.enableIf[key].includes('*');
+        else if (enableCondition && enableConditionList.includes(key) && fieldValidValue) {
+            const enableStatus = element.enableIf[key].includes(targetField) || element.enableIf[key].includes('');
             if (enable !== enableStatus)
                 setEnable(enableStatus);
         }
-        if (liveDataCondition && ((_b = props.element.liveData) === null || _b === void 0 ? void 0 : _b.condition.includes(key))) {
+        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)) {
-                    props.setValue(props.element.name, options);
+                    setValue(element.name, options);
                 }
                 setLiveData(options);
                 setLiveSearching(false);
             }
         }
-    }), [enable, enableCondition, enableConditionList, liveData, liveDataAction, liveDataCondition, props, render, renderCondition, renderConditionList]);
+    }), [enable, enableCondition, enableConditionList, liveData, liveDataAction, liveDataCondition, render, renderCondition, renderConditionList]);
     return {
         render,
         enable,

package/dist/interfaces/field.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-import { Control, FieldValues, UseFormSetValue, UseFormWatch } from 'react-hook-form';
+import { Control, FieldValues, UseFormSetValue, UseFormUnregister, UseFormWatch } from 'react-hook-form';
 import { IOption } from './option';
 export interface IFieldLiveData {
     action: (data: string, ...args: unknown[]) => Promise<Array<IOption>>;
@@ -24,4 +24,5 @@ export interface IFieldProps {
     control: Control<FieldValues, unknown>;
     watch: UseFormWatch<FieldValues>;
     setValue: UseFormSetValue<FieldValues>;
+    unregister: UseFormUnregister<FieldValues>;
 }

package/dist/modal.js

@@ -81,7 +81,8 @@ const Modal = ({ open, close, config }) => {
         const props = {
             control,
             watch,
-            setValue
+            setValue,
+            unregister
         };
         return element.elementType === 'input'
             ? react_1.default.createElement(make_input_1.default, Object.assign({}, props, { key: `modal-input-${index}`, element: element }))

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "dynamic-modal",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "The dynamic-modal is a solution of creation differents modals into project using a json configuration file",
   "main": "index.js",
   "scripts": {
     "build": "tsc",
     "lint": "eslint .",
+    "publish": "npm publish --access public",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {

package/src/hooks/field-render.ts

@@ -19,11 +19,11 @@ export interface IFieldRender {
   liveSearching?: boolean;
 }
 
-export interface IFieldRenderProps extends Pick<IFieldProps, 'setValue'> {
+export interface IFieldRenderProps extends Pick<IFieldProps, 'setValue'|'unregister'> {
   element: Partial<Pick<IField, 'enableIf'|'renderIf'|'name' >> & Partial<Record<'liveData', IModalLiveDataCondition>>
 }
 
-export const useFieldRender = (props: IFieldRenderProps): IFieldRender => {
+export const useFieldRender = ({element, setValue, unregister}: IFieldRenderProps): IFieldRender => {
   const [render, setRender] = useState<boolean|null>(null)
   const [enable, setEnable] = useState<boolean|null>(null)
   const [liveSearching, setLiveSearching] = useState<boolean>(false)
@@ -31,67 +31,71 @@ export const useFieldRender = (props: IFieldRenderProps): IFieldRender => {
 
   const renderCondition = useMemo<boolean>(
     () => {
-      const isRender: boolean = props.element.renderIf !== undefined
+      const isRender: boolean = element.renderIf !== undefined
       if (render === null) setRender(!isRender)
       return isRender
-    }, [props.element.renderIf, render]
+    }, [element.renderIf, render]
   )
 
   const enableCondition = useMemo<boolean>(
     () => {
-      const isEnable: boolean = props.element.enableIf !== undefined
+      const isEnable: boolean = element.enableIf !== undefined
       if (enable === null) setEnable(!isEnable)
       return isEnable
-    }, [props.element.enableIf, enable]
+    }, [element.enableIf, enable]
   )
 
   const liveDataCondition = useMemo<boolean>(
     () => {
-      return props.element.liveData !== undefined
-    }, [props.element.liveData]
+      return element.liveData !== undefined
+    }, [element.liveData]
   )
 
   const renderConditionList: Array<string> = useMemo(() => {
-    return renderCondition ? Object.keys(props.element.renderIf as IModalRenderCondition) : []
-  }, [props.element.renderIf, renderCondition])
+    return renderCondition ? Object.keys(element.renderIf as IModalRenderCondition) : []
+  }, [element.renderIf, renderCondition])
 
   const enableConditionList: Array<string> = useMemo(() => {
-    return enableCondition ? Object.keys(props.element.enableIf as IModalRenderCondition) : []
-  }, [enableCondition, props.element.enableIf])
+    return enableCondition ? Object.keys(element.enableIf as IModalRenderCondition) : []
+  }, [enableCondition, element.enableIf])
 
   const liveDataAction = useCallback(
     async (field: string |number | Array<unknown>, formData: IFormData) => {
-      if (typeof field === 'string' && props.element.liveData?.action) {
-        const options = props.element.liveData.action(field, formData)
+      if (typeof field === 'string' && element.liveData?.action) {
+        const options = element.liveData.action(field, formData)
         return options ?? []
       }
       return [] as Array<IOption>
-    }, [props.element.liveData]
+    }, [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)) {
-        const renderStatus: boolean = (props.element.renderIf as IModalRenderCondition)[key].includes(targetField) || (props.element.renderIf as IModalRenderCondition)[key].includes('*')
-        if (render !== renderStatus) setRender(renderStatus)
-      } else if (enableCondition && enableConditionList.includes(key)) {
-        const enableStatus: boolean = (props.element.enableIf as IModalRenderCondition)[key].includes(targetField) || (props.element.enableIf as IModalRenderCondition)[key].includes('*')
+      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)
+        }
+      } 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 && props.element.liveData?.condition.includes(key)) {
+      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)) { props.setValue(props.element.name as string, options) }
+          if (liveData && JSON.stringify(liveData) !== JSON.stringify(options)) { setValue(element.name as string, options) }
           setLiveData(options)
           setLiveSearching(false)
         }
       }
-    }, [enable, enableCondition, enableConditionList, liveData, liveDataAction, liveDataCondition, props, render, renderCondition, renderConditionList]
+    }, [enable, enableCondition, enableConditionList, liveData, liveDataAction, liveDataCondition, render, renderCondition, renderConditionList]
   )
 
   return {

package/src/interfaces/field.ts

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react'
-import { Control, FieldValues, UseFormSetValue, UseFormWatch } from 'react-hook-form'
+import { Control, FieldValues, UseFormSetValue, UseFormUnregister, UseFormWatch } from 'react-hook-form'
 import { IOption } from './option'
 
 export interface IFieldLiveData {
@@ -26,5 +26,6 @@ export interface IField {
 export interface IFieldProps {
   control: Control<FieldValues, unknown>;
   watch: UseFormWatch<FieldValues>;
-  setValue: UseFormSetValue<FieldValues>
+  setValue: UseFormSetValue<FieldValues>;
+  unregister: UseFormUnregister<FieldValues>;
 }

package/src/modal.tsx

@@ -66,7 +66,8 @@ export const Modal = ({ open, close, config }: IModal) => {
     const props: IFieldProps = {
       control,
       watch,
-      setValue
+      setValue,
+      unregister
     }
 
     return element.elementType === 'input'