dynamic-modal 1.1.4 → 1.1.8

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,120 @@
-'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 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)
+  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 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
+      if(!targetField) return 
+
+      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 && 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)) {
+        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,37 +1,37 @@
-/* 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>
-}
+/* 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>
+}

package/src/interfaces/input-upload.ts

@@ -1,21 +1,21 @@
-import { ChangeEvent, CSSProperties } from 'react'
-
-export interface IFileResult {
-  name: string
-  size: number
-  data: string
-}
-
-export interface IInputUpload {
-  id?: string
-  value?: string
-  onChange: (event: ChangeEvent<HTMLInputElement> | IFileResult | FileList | null) => void
-  accept?:string
-  label?: string
-  helpText?: string
-  style?:CSSProperties
-  readAsArrayBuffer?: boolean
-  name: string
-  disabled?: boolean
-  read?: boolean
-}
+import { ChangeEvent, CSSProperties } from 'react'
+
+export interface IFileResult {
+  name: string
+  size: number
+  data: string
+}
+
+export interface IInputUpload {
+  id?: string
+  value?: string
+  onChange: (event: ChangeEvent<HTMLInputElement> | IFileResult | FileList | null) => void
+  accept?:string
+  label?: string
+  helpText?: string
+  style?:CSSProperties
+  readAsArrayBuffer?: boolean
+  name: string
+  disabled?: boolean
+  read?: boolean
+}

package/src/interfaces/make-button.ts

@@ -1,19 +1,19 @@
-import { CSSProperties } from 'react'
-import { IFieldProps } from './field'
-
-export interface IMakeButton {
-  id?: string
-  elementType: 'button'
-  disabled?: boolean
-  className?: string
-  style?: CSSProperties
-  variant?: string
-  text?: string
-  type?: 'button' | 'submit' | 'reset'
-  onClick?: () => void
-  color?: string
-}
-
-export interface IMakeButtonProps extends IFieldProps {
-  element: Omit<IMakeButton, 'elementType'>
-}
+import { CSSProperties } from 'react'
+import { IFieldProps } from './field'
+
+export interface IMakeButton {
+  id?: string
+  elementType: 'button'
+  disabled?: boolean
+  className?: string
+  style?: CSSProperties
+  variant?: string
+  text?: string
+  type?: 'button' | 'submit' | 'reset'
+  onClick?: () => void
+  color?: string
+}
+
+export interface IMakeButtonProps extends IFieldProps {
+  element: Omit<IMakeButton, 'elementType'>
+}

package/src/interfaces/make-description.ts

@@ -1,14 +1,14 @@
-import { CSSProperties, FC } from 'react'
-import { IFieldProps } from './field'
-
-export interface IMakeDescription {
-  elementType: 'text'
-  text: string
-  containerStyle?: CSSProperties
-  textStyle?: CSSProperties
-  Icon?: FC
-}
-
-export interface IMakeDescriptionProps extends IFieldProps {
-  element: Omit<IMakeDescription, 'elementType'>
-}
+import { CSSProperties, FC } from 'react'
+import { IFieldProps } from './field'
+
+export interface IMakeDescription {
+  elementType: 'text'
+  text: string
+  containerStyle?: CSSProperties
+  textStyle?: CSSProperties
+  Icon?: FC
+}
+
+export interface IMakeDescriptionProps extends IFieldProps {
+  element: Omit<IMakeDescription, 'elementType'>
+}

package/src/interfaces/make-field-group.ts

@@ -1,14 +1,14 @@
-import { CSSProperties } from 'react'
-import { IFieldProps } from './field'
-import { IModalField } from './modal'
-
-export interface IMakeFieldGroup {
-  elementType: 'group'
-  groups: Array<IModalField>
-  style?: CSSProperties
-  title?: string
-}
-
-export interface IMakeFieldGroupProps extends IFieldProps {
-  element: IMakeFieldGroup
-}
+import { CSSProperties } from 'react'
+import { IFieldProps } from './field'
+import { IModalField } from './modal'
+
+export interface IMakeFieldGroup {
+  elementType: 'group'
+  groups: Array<IModalField>
+  style?: CSSProperties
+  title?: string
+}
+
+export interface IMakeFieldGroupProps extends IFieldProps {
+  element: IMakeFieldGroup
+}