dynamic-modal 1.1.1 → 1.1.7

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

@@ -1,40 +1,40 @@
-'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'
-
-const MakeUpload : FC<IMakeUploadProps> = ({ element: { validation: { required, ...validation }, ...element }, ...props }) => {
-  const { render, enable } = useFieldRender({ ...props, element })
-
-  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
+'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'
+
+const MakeUpload : FC<IMakeUploadProps> = ({ element: { validation: { required, ...validation }, enableIf, renderIf, ...element }, ...props }) => {
+  const { render, enable } = useFieldRender({ ...props, element: { enableIf, renderIf, ...element} })
+
+  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

package/src/components/portal/portal.tsx

@@ -1,37 +1,37 @@
-'use client'
-
-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)
-
-  useEffect(() => {
-    if (mounted && !props.portalOpen && props.closeTime > 0) {
-      const timeoutId = setTimeout(() => {
-        setMounted(false)
-        ref.current = null
-      }, props.closeTime)
-
-      return () => clearTimeout(timeoutId)
-    } else if (mounted && !props.portalOpen) {
-      setMounted(false)
-      ref.current = null
-    } else if (!mounted && props.portalOpen) {
-      ref.current = document.querySelector<HTMLElement>(props.portalTag ?? '#portal')
-      setMounted(true)
-    }
-  }, [mounted, props.closeTime, props.portalOpen, props.portalTag])
-
-  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
-  )
-}
+'use client'
+
+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)
+
+  useEffect(() => {
+    if (mounted && !props.portalOpen && props.closeTime > 0) {
+      const timeoutId = setTimeout(() => {
+        setMounted(false)
+        ref.current = null
+      }, props.closeTime)
+
+      return () => clearTimeout(timeoutId)
+    } else if (mounted && !props.portalOpen) {
+      setMounted(false)
+      ref.current = null
+    } else if (!mounted && props.portalOpen) {
+      ref.current = document.querySelector<HTMLElement>(props.portalTag ?? '#portal')
+      setMounted(true)
+    }
+  }, [mounted, props.closeTime, props.portalOpen, props.portalTag])
+
+  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
+  )
+}

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

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

package/src/hooks/field-render.ts

@@ -1,109 +1,109 @@
-'use client'
-
-import { useCallback, useMemo, useState } from 'react'
-import { IField, IFieldProps } from '../interfaces/field'
-import { IOption } from '../interfaces/option'
-import { IModalLiveDataCondition, IModalRenderCondition } from '../interfaces/modal'
-
-export type IFormData = Record<string, unknown>
-
-export interface IWatchEvent {
-  name: string | undefined;
-  type: string | undefined;
-}
-
-export interface IFieldRender {
-  render: boolean | null;
-  enable: boolean | null;
-  checkField: (formData: IFormData, { name, type }: IWatchEvent) => void;
-  liveData?: Array<IOption>;
-  liveSearching?: boolean;
-}
-
-export interface IFieldRenderProps extends Pick<IFieldProps, 'setValue'|'unregister'> {
-  element: Partial<Pick<IField, 'enableIf'|'renderIf'|'name' >> & Partial<Record<'liveData', IModalLiveDataCondition>>
-}
-
-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)
-  const [liveData, setLiveData] = useState<Array<IOption> | undefined>(undefined)
-
-  const renderCondition = useMemo<boolean>(
-    () => {
-      const isRender: boolean = element.renderIf !== undefined
-      if (render === null) setRender(!isRender)
-      return isRender
-    }, [element.renderIf, render]
-  )
-
-  const enableCondition = useMemo<boolean>(
-    () => {
-      const isEnable: boolean = element.enableIf !== undefined
-      if (enable === null) setEnable(!isEnable)
-      return isEnable
-    }, [element.enableIf, enable]
-  )
-
-  const liveDataCondition = useMemo<boolean>(
-    () => {
-      return element.liveData !== undefined
-    }, [element.liveData]
-  )
-
-  const renderConditionList: Array<string> = useMemo(() => {
-    return renderCondition ? Object.keys(element.renderIf as IModalRenderCondition) : []
-  }, [element.renderIf, renderCondition])
-
-  const enableConditionList: Array<string> = useMemo(() => {
-    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' && element.liveData?.action) {
-        const options = element.liveData.action(field, formData)
-        return options ?? []
-      }
-      return [] as Array<IOption>
-    }, [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)
-        }
-      } 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)
-        }
-      }
-    }, [enable, enableCondition, enableConditionList, liveData, liveDataAction, liveDataCondition, render, renderCondition, renderConditionList]
-  )
-
-  return {
-    render,
-    enable,
-    checkField,
-    liveData,
-    liveSearching
-  }
-}
+'use client'
+
+import { useCallback, useMemo, useState } from 'react'
+import { IField, IFieldProps } from '../interfaces/field'
+import { IOption } from '../interfaces/option'
+import { IModalLiveDataCondition, IModalRenderCondition } from '../interfaces/modal'
+
+export type IFormData = Record<string, unknown>
+
+export interface IWatchEvent {
+  name: string | undefined
+  type: string | undefined
+}
+
+export interface IFieldRender {
+  render: boolean | null
+  enable: boolean | null
+  checkField: (formData: IFormData, { name, type }: IWatchEvent) => void
+  liveData?: Array<IOption>
+  liveSearching?: boolean
+}
+
+export interface IFieldRenderProps extends Pick<IFieldProps, 'setValue' | 'unregister'> {
+  element: Partial<Pick<IField, 'enableIf' | 'renderIf' | 'name' >> & Partial<Record<'liveData', IModalLiveDataCondition>>
+}
+
+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)
+  const [liveData, setLiveData] = useState<Array<IOption> | undefined>(undefined)
+
+  const renderCondition = useMemo<boolean>(
+    () => {
+      const isRender: boolean = element.renderIf !== undefined
+      if (render === null) setRender(!isRender)
+      return isRender
+    }, [element.renderIf, render]
+  )
+
+  const enableCondition = useMemo<boolean>(
+    () => {
+      const isEnable: boolean = element.enableIf !== undefined
+      if (enable === null) setEnable(!isEnable)
+      return isEnable
+    }, [element.enableIf, enable]
+  )
+
+  const liveDataCondition = useMemo<boolean>(
+    () => {
+      return element.liveData !== undefined
+    }, [element.liveData]
+  )
+
+  const renderConditionList: Array<string> = useMemo(() => {
+    return renderCondition ? Object.keys(element.renderIf as IModalRenderCondition) : []
+  }, [element.renderIf, renderCondition])
+
+  const enableConditionList: Array<string> = useMemo(() => {
+    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' && element.liveData?.action) {
+        const options = element.liveData.action(field, formData)
+        return options ?? []
+      }
+      return [] as Array<IOption>
+    }, [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)
+        }
+      } 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)
+        }
+      }
+    }, [enable, enableCondition, enableConditionList, liveData, liveDataAction, liveDataCondition, render, renderCondition, renderConditionList]
+  )
+
+  return {
+    render,
+    enable,
+    checkField,
+    liveData,
+    liveSearching
+  }
+}

package/src/hooks/modal-handler.ts

@@ -1,38 +1,38 @@
-'use client'
-
-import {  useState } from 'react'
-import { IModal, IModalConfigProps } from '../interfaces/modal'
-
-interface IModalHandler {
-  openModal: (config: IModalConfigProps) => void
-  modalProps: IModal
-}
-
-export function useModalHandler (): IModalHandler {
-  const initialState: IModalHandler = {
-    modalProps: {
-      config: {} as IModalConfigProps,
-      close: () => {},
-      open: false,
-    },
-    openModal: () => {},
-  }
-
-  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
-    }
-
-    setModalConfig({ openModal, modalProps: { config, open: true, close } })
-  }
-
-  const closeModal = () => setModalConfig(initialState)
-
-  return {
-    openModal,
-    modalProps: { ...modalConfig.modalProps, close: closeModal },
-  }
-}
+'use client'
+
+import {  useState } from 'react'
+import { IModal, IModalConfigProps } from '../interfaces/modal'
+
+interface IModalHandler {
+  openModal: (config: IModalConfigProps) => void
+  modalProps: IModal
+}
+
+export function useModalHandler (): IModalHandler {
+  const initialState: IModalHandler = {
+    modalProps: {
+      config: {} as IModalConfigProps,
+      close: () => {},
+      open: false,
+    },
+    openModal: () => {},
+  }
+
+  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
+    }
+
+    setModalConfig({ openModal, modalProps: { config, open: true, close } })
+  }
+
+  const closeModal = () => setModalConfig(initialState)
+
+  return {
+    openModal,
+    modalProps: { ...modalConfig.modalProps, close: closeModal },
+  }
+}

package/src/interfaces/component-state.ts

@@ -1,33 +1,33 @@
-/* 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"
-
-export interface IComponentAditionalProps {
-  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'>>
-  //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>
-}
-
-export interface IComponentStateProps extends PropsWithChildren {
-  components: IComponentState
-}
-
+/* 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"
+
+export interface IComponentAditionalProps {
+  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'>>
+  //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>
+}
+
+export interface IComponentStateProps extends PropsWithChildren {
+  components: IComponentState
+}
+

package/src/interfaces/field.ts

@@ -1,36 +1,37 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { CSSProperties } from 'react'
-import { Control, FieldValues, UseFormSetValue, UseFormUnregister, UseFormWatch } from 'react-hook-form'
-
-export interface IValidationBase<T> {
-  value: T
-  message: string
-}
-
-export interface IField {
-  name: string
-  id?: string
-  label?: string
-  style?: CSSProperties
-  placeholder?: string
-  defaultValue?: any
-  renderIf?: Record<string, Array<string | number>>
-  enableIf?: Record<string, Array<string | number>>
-  validation: {
-    required: boolean
-    regex?: RegExp
-    message?: string
-    maxLength?: IValidationBase<number>
-    minLength?: IValidationBase<number>
-    min?: IValidationBase<number | string>
-    max?: IValidationBase<number | string>
-  }
-  disabled?: boolean
-}
-
-export interface IFieldProps {
-  control: Control<FieldValues, unknown>
-  watch: UseFormWatch<FieldValues>
-  setValue: UseFormSetValue<FieldValues>
-  unregister: UseFormUnregister<FieldValues>
-}
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { CSSProperties } from 'react'
+import { Control, FieldValues, UseFormSetValue, UseFormUnregister, UseFormWatch } from 'react-hook-form'
+import { IModalRenderCondition } from './modal'
+
+export interface IValidationBase<T> {
+  value: T
+  message: string
+}
+
+export interface IField {
+  name: string
+  id?: string
+  label?: string
+  style?: CSSProperties
+  placeholder?: string
+  defaultValue?: any
+  renderIf?: IModalRenderCondition
+  enableIf?: IModalRenderCondition
+  validation: {
+    required: boolean
+    regex?: RegExp
+    message?: string
+    maxLength?: IValidationBase<number>
+    minLength?: IValidationBase<number>
+    min?: IValidationBase<number | string>
+    max?: IValidationBase<number | string>
+  }
+  disabled?: boolean
+}
+
+export interface IFieldProps {
+  control: Control<FieldValues, unknown>
+  watch: UseFormWatch<FieldValues>
+  setValue: UseFormSetValue<FieldValues>
+  unregister: UseFormUnregister<FieldValues>
+}