dynamic-modal 1.1.8 → 1.1.10

package/src/components/make-toggle/make-toggle.tsx

@@ -1,53 +1,100 @@
-'use client'
+'use client';
 
-import React, { FC, useContext, useEffect, useMemo } from 'react'
-import { Controller } from 'react-hook-form'
-import { useFieldRender } from '../../hooks/field-render'
-import { IMakeToggleProps } from '../../interfaces/make-toggle'
-import { generateId } from '../../tools/general'
-import { ComponentStateContext } from '../../context/component/component-state'
+import React, { FC, useContext, useEffect, useId } from 'react';
+import { Controller } from 'react-hook-form';
 
-const MakeToggle: FC<IMakeToggleProps> = ({ element: { validation: { required, ...validation }, enableIf, renderIf, ...element }, ...props }) => {
-  const { Toggle } = useContext(ComponentStateContext)
-  const { render, enable, checkField } = useFieldRender({ ...props, element: { enableIf, renderIf, ...element } })
+import { IMakeToggleProps } from '../../interfaces/make-toggle';
+import { ComponentStateContext } from '../../context/component/component-state';
+import useEnableIf from '../../hooks/use-enable-if';
+import useRenderIf from '../../hooks/use-render-if';
+
+const MakeToggle: FC<IMakeToggleProps> = ({
+  element,
+  control,
+  watch,
+  unregister,
+}) => {
+  const { Toggle } = useContext(ComponentStateContext);
+
+  const {
+    name: elementName,
+    validation: { required, message, regex, ...otherValidation },
+    enableIf,
+    renderIf,
+    ...inputProps
+  } = element;
+
+  const { checkEnable, enable, setEnable } = useEnableIf({
+    elementEnableIf: enableIf,
+  });
+  const { checkRender, render, setRender } = useRenderIf({
+    elementRenderIf: renderIf,
+  });
+
+  const elementId = useId();
 
-  const elementId = useMemo(() => element.id ?? generateId(), [])
-  
   useEffect(() => {
-    const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }))
-    return () => subscription.unsubscribe()
-  }, [checkField, props, props.watch])
+    const { unsubscribe } = watch((formData, { name, type }) => {
+      if (!name) return;
+
+      if (enableIf) {
+        checkEnable(formData, { name, type }).then((enableStatus) => {
+          if (enableStatus === undefined || enableStatus === null) return;
+          if (enable !== enableStatus) setEnable(enableStatus);
+        });
+      }
+
+      if (renderIf) {
+        checkRender(formData, { name, type }).then((renderStatus) => {
+          if (renderStatus === undefined || renderStatus === null) return;
+
+          if (render !== renderStatus) {
+            if (render && !renderStatus) unregister(elementName as string);
+            setRender(!!renderStatus);
+          }
+        });
+      }
+    });
+
+    return () => unsubscribe();
+  }, [watch, render, enable]);
+
+  if (!render) return null;
 
   return (
-    render
-      ? <Controller
-        control={props.control}
-        name={element.name}
-        rules={{
-          required: {
-            value: required,
-            message: validation.message ?? ''
-          },
-          pattern: validation.regex ?  {
-            value: validation.regex,
-            message: validation.message ?? ''
-          } : undefined,
-          ...validation
-        }}
-        render={({ field: { onChange, value }, fieldState: { invalid, error } }) => (
-          <Toggle
-            {...element}
-            id={elementId}
-            onChange={onChange}
-            value={value ?? ''}
-            invalid={invalid}
-            error={error}
-            disabled={element.disabled ?? !enable}
-          />
-        )}
-      />
-      : null
-  )
-}
-
-export default MakeToggle
+    <Controller
+      control={control}
+      name={elementName}
+      rules={{
+        required: {
+          value: required,
+          message: message ?? '',
+        },
+        pattern: regex
+          ? {
+              value: regex,
+              message: message ?? '',
+            }
+          : undefined,
+        ...otherValidation,
+      }}
+      render={({
+        field: { onChange, value },
+        fieldState: { invalid, error },
+      }) => (
+        <Toggle
+          {...inputProps}
+          id={elementId}
+          name={elementName}
+          onChange={onChange}
+          value={value ?? ''}
+          invalid={invalid}
+          error={error}
+          disabled={element.disabled ?? !enable}
+        />
+      )}
+    />
+  );
+};
+
+export default MakeToggle;

package/src/components/make-upload/make-upload.tsx

@@ -1,40 +1,92 @@
-'use client'
+'use client';
 
-import React,{ FC } from 'react'
-import { Controller } from 'react-hook-form'
-import InputUpload from '../input-upload/input-upload'
-import { useFieldRender } from '../../hooks/field-render'
-import { IMakeUploadProps } from '../../interfaces/make-upload'
+import React, { FC, useEffect, useId } from 'react';
+import { Controller } from 'react-hook-form';
 
-const MakeUpload : FC<IMakeUploadProps> = ({ element: { validation: { required, ...validation }, enableIf, renderIf, ...element }, ...props }) => {
-  const { render, enable } = useFieldRender({ ...props, element: { enableIf, renderIf, ...element} })
+import InputUpload from '../input-upload/input-upload';
+import { IMakeUploadProps } from '../../interfaces/make-upload';
+import useEnableIf from '../../hooks/use-enable-if';
+import useRenderIf from '../../hooks/use-render-if';
+
+const MakeUpload: FC<IMakeUploadProps> = ({
+  element,
+  control,
+  watch,
+  unregister,
+}) => {
+  const {
+    name: elementName,
+    validation: { required, message, regex, ...otherValidation },
+    enableIf,
+    renderIf,
+    ...inputProps
+  } = element;
+
+  const { checkEnable, enable, setEnable } = useEnableIf({
+    elementEnableIf: enableIf,
+  });
+  const { checkRender, render, setRender } = useRenderIf({
+    elementRenderIf: renderIf,
+  });
+
+  const elementId = useId();
+
+  useEffect(() => {
+    const { unsubscribe } = watch((formData, { name, type }) => {
+      if (!name) return;
+
+      if (enableIf) {
+        checkEnable(formData, { name, type }).then((enableStatus) => {
+          if (enableStatus === undefined || enableStatus === null) return;
+          if (enable !== enableStatus) setEnable(enableStatus);
+        });
+      }
+
+      if (renderIf) {
+        checkRender(formData, { name, type }).then((renderStatus) => {
+          if (renderStatus === undefined || renderStatus === null) return;
+
+          if (render !== renderStatus) {
+            if (render && !renderStatus) unregister(elementName as string);
+            setRender(!!renderStatus);
+          }
+        });
+      }
+    });
+
+    return () => unsubscribe();
+  }, [watch, render, enable]);
+
+  if (!render) return null;
 
   return (
-    render
-      ? <Controller
-        control={props.control}
-        name={element.name}
-        rules={{
-          required: {
-            value: required,
-            message: validation.message ?? ''
-          },
-          pattern: validation.regex ?  {
-            value: validation.regex,
-            message: validation.message ?? ''
-          } : undefined,
-          ...validation
-        }}
-        render={({ field: { onChange } }) => (
-          <InputUpload
-            {...element}
-            onChange={onChange}
-            disabled={element.disabled ?? !enable}
-          />
-        )}
-      />
-      : null
-  )
-}
-
-export default MakeUpload
+    <Controller
+      control={control}
+      name={elementName}
+      rules={{
+        required: {
+          value: required,
+          message: message ?? '',
+        },
+        pattern: regex
+          ? {
+              value: regex,
+              message: message ?? '',
+            }
+          : undefined,
+        ...otherValidation,
+      }}
+      render={({ field: { onChange } }) => (
+        <InputUpload
+          {...inputProps}
+          id={elementId}
+          name={elementName}
+          onChange={onChange}
+          disabled={element.disabled ?? !enable}
+        />
+      )}
+    />
+  );
+};
+
+export default MakeUpload;

package/src/components/portal/portal.tsx

@@ -1,37 +1,39 @@
-'use client'
+'use client';
 
-import React, { useRef, useEffect, useState, FC } from 'react'
-import { createPortal } from 'react-dom'
-import { IPortal } from '../../interfaces/portal'
+import React, { useRef, useEffect, useState, FC } from 'react';
+import { createPortal } from 'react-dom';
+
+import { IPortal } from '../../interfaces/portal';
 
 export const Portal: FC<IPortal> = (props) => {
-  const ref = useRef<Element | null>(null)
-  const [mounted, setMounted] = useState(false)
+  const ref = useRef<Element | null>(null);
+  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     if (mounted && !props.portalOpen && props.closeTime > 0) {
       const timeoutId = setTimeout(() => {
-        setMounted(false)
-        ref.current = null
-      }, props.closeTime)
+        setMounted(false);
+        ref.current = null;
+      }, props.closeTime);
 
-      return () => clearTimeout(timeoutId)
+      return () => clearTimeout(timeoutId);
     } else if (mounted && !props.portalOpen) {
-      setMounted(false)
-      ref.current = null
+      setMounted(false);
+      ref.current = null;
     } else if (!mounted && props.portalOpen) {
-      ref.current = document.querySelector<HTMLElement>(props.portalTag ?? '#portal')
-      setMounted(true)
+      ref.current = document.querySelector<HTMLElement>(
+        props.portalTag ?? '#portal',
+      );
+      setMounted(true);
     }
-  }, [mounted, props.closeTime, props.portalOpen, props.portalTag])
+  }, [mounted, props.closeTime, props.portalOpen, props.portalTag]);
+
+  if (!mounted && !ref.current) return null;
 
-  return (
-    mounted && ref.current
-      ? createPortal(
-        <div className='transition-all delay-100 fixed top-0 left-0 w-full h-full grid place-items-center bg-black bg-opacity-40 z-20'>
-          {props.children}
-        </div>
-        , ref.current)
-      : null
-  )
-}
+  return createPortal(
+    <div className="transition-all delay-100 fixed top-0 left-0 w-full h-full grid place-items-center bg-black bg-opacity-40 z-20">
+      {props.children}
+    </div>,
+    ref.current!,
+  );
+};

package/src/context/component/component-state.tsx

@@ -1,18 +1,25 @@
-'use client'
+'use client';
 
-import React, { useMemo } from "react"
-import { createContext } from "react"
-import { IComponentState, IComponentStateProps } from "../../interfaces/component-state"
+import React, { useMemo, createContext } from 'react';
 
-export const ComponentStateContext = createContext<IComponentState>({} as IComponentState)
+import {
+  IComponentState,
+  IComponentStateProps,
+} from '../../interfaces/component-state';
 
-export const ComponentState = ({ children, components }: IComponentStateProps) => {
+export const ComponentStateContext = createContext<IComponentState>(
+  {} as IComponentState,
+);
 
-  const value: IComponentState = useMemo(() => components, [])
+export const ComponentState = ({
+  children,
+  components,
+}: IComponentStateProps) => {
+  const value: IComponentState = useMemo(() => components, [components]);
 
   return (
     <ComponentStateContext.Provider value={value}>
       {children}
     </ComponentStateContext.Provider>
-  )
-}
+  );
+};

package/src/hooks/modal-handler.ts

@@ -1,14 +1,15 @@
-'use client'
+'use client';
 
-import {  useState } from 'react'
-import { IModal, IModalConfigProps } from '../interfaces/modal'
+import { useState } from 'react';
+
+import { IModal, IModalConfigProps } from '../interfaces/modal';
 
 interface IModalHandler {
-  openModal: (config: IModalConfigProps) => void
-  modalProps: IModal
+  openModal: (config: IModalConfigProps) => void;
+  modalProps: IModal;
 }
 
-export function useModalHandler (): IModalHandler {
+export function useModalHandler(): IModalHandler {
   const initialState: IModalHandler = {
     modalProps: {
       config: {} as IModalConfigProps,
@@ -16,23 +17,25 @@ export function useModalHandler (): IModalHandler {
       open: false,
     },
     openModal: () => {},
-  }
+  };
 
-  const [modalConfig, setModalConfig] = useState<IModalHandler>(initialState)
+  const [modalConfig, setModalConfig] = useState<IModalHandler>(initialState);
 
   const openModal = (config: IModalConfigProps) => {
     if (!config) {
-      alert(`¡WARNING! this modal was not returned config, please check before use`)
-      return
+      alert(
+        `¡WARNING! this modal was not returned config, please check before use`,
+      );
+      return;
     }
 
-    setModalConfig({ openModal, modalProps: { config, open: true, close } })
-  }
+    setModalConfig({ openModal, modalProps: { config, open: true, close } });
+  };
 
-  const closeModal = () => setModalConfig(initialState)
+  const closeModal = () => setModalConfig(initialState);
 
   return {
     openModal,
     modalProps: { ...modalConfig.modalProps, close: closeModal },
-  }
+  };
 }

package/src/hooks/use-enable-if.ts

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import {
+  IModalRenderAction,
+  IModalRenderCondition,
+  IModalRenderCriteria,
+} from '../interfaces/modal';
+import { liveDataHandler } from '../util/general/general.util';
+
+export interface IRenderIfProps {
+  elementEnableIf?: IModalRenderCondition;
+}
+
+const useEnableIf = ({ elementEnableIf }: IRenderIfProps) => {
+  const [enable, setEnable] = useState<boolean>(() => {
+    return elementEnableIf === undefined;
+  });
+
+  const checkEnable = async (
+    formData: Record<string, unknown>,
+    { name }: Record<'name', string> & Record<'type', string | undefined>,
+  ) => {
+    const targetFieldData = formData[name] as string | number;
+    if (
+      targetFieldData === undefined ||
+      targetFieldData === '' ||
+      targetFieldData === null
+    )
+      return;
+
+    const enableIfConfig = elementEnableIf;
+    const isLiveEnable: boolean =
+      !!enableIfConfig?.action && !!enableIfConfig.condition;
+
+    if (isLiveEnable && enableIfConfig!.condition!.includes(name)) {
+      const enableStatus: boolean = await liveDataHandler(
+        targetFieldData,
+        formData,
+        (enableIfConfig as IModalRenderAction)!.action!,
+      );
+
+      return enableStatus;
+    } else {
+      const enableConditionList = Object.keys(
+        elementEnableIf as IModalRenderCondition,
+      );
+      if (enableConditionList.includes(name)) {
+        const enableStatus: boolean =
+          (enableIfConfig as IModalRenderCriteria)[name]!.includes(
+            targetFieldData,
+          ) || (enableIfConfig as IModalRenderCriteria)[name]!.includes('*');
+
+        return enableStatus;
+      }
+    }
+  };
+
+  return {
+    enable,
+    checkEnable,
+    setEnable,
+  };
+};
+
+export default useEnableIf;

package/src/hooks/use-live-data.ts

@@ -0,0 +1,45 @@
+import { IModalLiveDataCondition } from '../interfaces/modal';
+import { useState } from 'react';
+import { IOption } from '../interfaces/option';
+import { liveDataAction } from '../util/general/general.util';
+
+export interface ILiveDataProps {
+  elementLiveData?: IModalLiveDataCondition;
+}
+
+const useLiveData = ({ elementLiveData }: ILiveDataProps) => {
+  const [liveData, setLiveData] = useState<Array<IOption> | undefined>(
+    undefined,
+  );
+
+  const checkLiveData = async (
+    formData: Record<string, unknown>,
+    { name }: Record<'name', string> & Record<'type', string | undefined>,
+  ) => {
+    const targetFieldData = formData[name] as string | number;
+
+    const liveDataConfig = elementLiveData;
+    const isLiveData: boolean =
+      !!liveDataConfig?.action && !!liveDataConfig.condition;
+
+    if (!isLiveData) return null;
+
+    if (liveDataConfig!.condition.includes(name)) {
+      return await liveDataAction(
+        targetFieldData,
+        formData,
+        liveDataConfig!.action,
+      );
+    }
+
+    return null;
+  };
+
+  return {
+    liveData,
+    checkLiveData,
+    setLiveData,
+  };
+};
+
+export default useLiveData;

package/src/hooks/use-render-if.ts

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import {
+  IModalRenderAction,
+  IModalRenderCondition,
+  IModalRenderCriteria,
+} from '../interfaces/modal';
+import { liveDataHandler } from '../util/general/general.util';
+
+export interface IRenderIfProps {
+  elementRenderIf?: IModalRenderCondition;
+}
+
+const useRenderIf = ({ elementRenderIf }: IRenderIfProps) => {
+  const [render, setRender] = useState<boolean>(() => {
+    return elementRenderIf === undefined;
+  });
+
+  const checkRender = async (
+    formData: Record<string, unknown>,
+    { name }: Record<'name', string> & Record<'type', string | undefined>,
+  ) => {
+    const targetFieldData = formData[name] as string | number;
+
+    const renderIfConfig = elementRenderIf!;
+    const isLiveRender: boolean =
+      !!renderIfConfig?.action && !!renderIfConfig?.condition;
+
+    if (isLiveRender && renderIfConfig.condition!.includes(name)) {
+      const renderStatus: boolean = await liveDataHandler(
+        targetFieldData,
+        formData,
+        (renderIfConfig as IModalRenderAction)!.action!,
+      );
+
+      return renderStatus;
+    } else {
+      const renderConditionList = Object.keys(
+        elementRenderIf as IModalRenderCriteria,
+      );
+
+      if (renderConditionList.includes(name)) {
+        const renderStatus: boolean =
+          (renderIfConfig as IModalRenderCriteria)[name]!.includes(
+            targetFieldData,
+          ) || (renderIfConfig as IModalRenderCriteria)[name]!.includes('*');
+
+        return renderStatus;
+      }
+    }
+  };
+
+  return {
+    render,
+    checkRender,
+    setRender,
+  };
+};
+
+export default useRenderIf;

package/src/interfaces/component-state.ts

@@ -1,33 +1,48 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { FC, PropsWithChildren } from "react"
-import { FieldError } from "react-hook-form"
-import { IOption } from "./option"
-import { IMakeInput } from "./make-input"
-import { IMakeButton } from "./make-button"
-import { IMakeSelect } from "./make-select"
-import { IMakeTextarea } from "./make-textarea"
-import { IMakeToggle } from "./make-toggle"
+import { FC, PropsWithChildren } from 'react';
+import { FieldError } from 'react-hook-form';
+
+import { IOption } from './option';
+import { IMakeInput } from './make-input';
+import { IMakeButton } from './make-button';
+import { IMakeSelect } from './make-select';
+import { IMakeTextarea } from './make-textarea';
+import { IMakeToggle } from './make-toggle';
 
 export interface IComponentAditionalProps {
-  onChange: (...event: any[]) => void
-  value: any
-  invalid: boolean
-  error?: FieldError
-  liveSearching?: boolean
+  onChange: (...event: any[]) => void;
+  value: any;
+  invalid: boolean;
+  error?: FieldError;
+  liveSearching?: boolean;
 }
 
 export interface IComponentState {
-  ModalButtonCancel: FC<Omit<IMakeButton, 'elementType'>>
-  ModalButtonAction: FC<Omit<IMakeButton, 'elementType'>>
-  Button: FC<Omit<IMakeButton, 'elementType'>>
+  ModalButtonCancel: FC<Omit<IMakeButton, 'elementType'>>;
+  ModalButtonAction: FC<Omit<IMakeButton, 'elementType'>>;
+  Button: FC<Omit<IMakeButton, 'elementType'>>;
   //Description: FC<Omit<IMakeDescription, 'elementType'>>
-  Input: FC<Omit<IMakeInput, 'elementType' | 'validation' |'renderIf' | 'enableIf'> & IComponentAditionalProps>
-  Select: FC<Omit<IMakeSelect, 'elementType' | 'validation' |'renderIf' | 'enableIf'> & IComponentAditionalProps & Record<'options', Array<IOption>>>
-  Textarea: FC<Omit<IMakeTextarea, 'elementType' | 'validation' |'renderIf' | 'enableIf'> & IComponentAditionalProps>
-  Toggle: FC<Omit<IMakeToggle, 'elementType' | 'validation' |'renderIf' | 'enableIf'> & IComponentAditionalProps>
+  Input: FC<
+    Omit<IMakeInput, 'elementType' | 'validation' | 'renderIf' | 'enableIf'> &
+      IComponentAditionalProps
+  >;
+  Select: FC<
+    Omit<IMakeSelect, 'elementType' | 'validation' | 'renderIf' | 'enableIf'> &
+      IComponentAditionalProps &
+      Record<'options', Array<IOption>>
+  >;
+  Textarea: FC<
+    Omit<
+      IMakeTextarea,
+      'elementType' | 'validation' | 'renderIf' | 'enableIf'
+    > &
+      IComponentAditionalProps
+  >;
+  Toggle: FC<
+    Omit<IMakeToggle, 'elementType' | 'validation' | 'renderIf' | 'enableIf'> &
+      IComponentAditionalProps
+  >;
 }
 
 export interface IComponentStateProps extends PropsWithChildren {
-  components: IComponentState
+  components: IComponentState;
 }
-