dynamic-modal 1.0.10 → 1.0.12

package/src/hooks/field-render.ts

@@ -1,108 +1,108 @@
-'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,37 +1,37 @@
-'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/field.ts

@@ -1,31 +1,35 @@
-import { CSSProperties } from 'react'
-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>>;
-  condition: string
-}
-
-export interface IField {
-  name: string
-  id?: string
-  label?: string
-  styles?: CSSProperties
-  defaultValue?: string
-  renderIf?: Record<string, Array<string | number>>
-  enableIf?: Record<string, Array<string | number>>
-  validation: {
-    required: boolean
-    regex?: RegExp
-    message?: string
-  }
-  disabled?: boolean
-}
-
-export interface IFieldProps {
-  control: Control<FieldValues, unknown>;
-  watch: UseFormWatch<FieldValues>;
-  setValue: UseFormSetValue<FieldValues>;
-  unregister: UseFormUnregister<FieldValues>;
-}
+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
+  styles?: CSSProperties
+  defaultValue?: string
+  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
+  //required?: boolean
+}
+
+export interface IFieldProps {
+  control: Control<FieldValues, unknown>;
+  watch: UseFormWatch<FieldValues>;
+  setValue: UseFormSetValue<FieldValues>;
+  unregister: UseFormUnregister<FieldValues>;
+}

package/src/interfaces/input-upload.ts

@@ -1,37 +1,21 @@
-import { ChangeEvent, CSSProperties } from 'react'
-
-export interface IFileResult {
-  name: string;
-  size: number;
-  data: string
-}
-
-
-export interface IFile {
-  data?: string
-  name: string;
-  size: number;
-}
-export interface IInputState {
-  state: boolean;
-  file: IFile
-}
-
-export interface IInputStorage {
-  setData: (file: IInputState) => void;
-  clearFuntion: () => void;
-}
-export interface IInputUpload {
-  id?: string;
-  value?: string;
-  onChange: (event: ChangeEvent<HTMLInputElement> | IFileResult | FileList | null) => void;
-  accept?:string;
-  label?: string
-  helpText?: string
-  clearfunction?: () => void;
-  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
+  styles?:CSSProperties;
+  readAsArrayBuffer?: boolean;
+  name: string;
+  disabled?: boolean;
+  read?: boolean;
+}

package/src/interfaces/make-autocomplete.ts

@@ -1,13 +1,13 @@
-import { IField, IFieldProps } from './field'
-import { IModalLiveDataCondition } from './modal'
-import { IOption } from './option'
-
-export interface IMakeAutoComplete extends IField {
-  elementType: 'autocomplete'
-  options: Array<IOption>
-  liveData?: IModalLiveDataCondition
-}
-
-export interface IMakeAutoCompleteProps extends IFieldProps {
-  element: IMakeAutoComplete
-}
+import { IField, IFieldProps } from './field'
+import { IModalLiveDataCondition } from './modal'
+import { IOption } from './option'
+
+export interface IMakeAutoComplete extends IField {
+  elementType: 'autocomplete'
+  options: Array<IOption>
+  liveData?: IModalLiveDataCondition
+}
+
+export interface IMakeAutoCompleteProps extends IFieldProps {
+  element: IMakeAutoComplete
+}

package/src/interfaces/make-button.ts

@@ -1,20 +1,20 @@
-import { CSSProperties } from 'react'
-import { IFieldProps } from './field'
-
-export interface IMakeButton {
-  elementType: 'button';
-  disabled?: boolean
-  className?: string;
-  variant?: 'solid' | 'light' | 'flat' | 'bordered' | 'faded' | 'shadow' | 'ghost'
-  text?: string;
-  type?: 'button' | 'submit' | 'reset';
-  onClick?: () => void;
-  iconName?: string;
-  iconSize?: number | string;
-  iconClassName?: CSSProperties;
-  color?: 'primary' | 'secondary' | 'default' | 'success' | 'warning' | 'danger'
-}
-
-export interface IMakeButtonProps extends IFieldProps {
-  element: IMakeButton
-}
+import { CSSProperties } from 'react'
+import { IFieldProps } from './field'
+
+export interface IMakeButton {
+  elementType: 'button';
+  disabled?: boolean
+  className?: string;
+  variant?: 'solid' | 'light' | 'flat' | 'bordered' | 'faded' | 'shadow' | 'ghost'
+  text?: string;
+  type?: 'button' | 'submit' | 'reset';
+  onClick?: () => void;
+  iconName?: string;
+  iconSize?: number | string;
+  iconClassName?: CSSProperties;
+  color?: 'primary' | 'secondary' | 'default' | 'success' | 'warning' | 'danger'
+}
+
+export interface IMakeButtonProps extends IFieldProps {
+  element: IMakeButton
+}

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

@@ -1,13 +1,13 @@
-import { CSSProperties } from 'react'
-import { IFieldProps } from './field'
-import { IModalField } from './modal'
-
-export interface IMakeFieldGroup {
-  elementType: 'group';
-  groups: Array<IModalField>;
-  style?: CSSProperties;
-}
-
-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;
+}
+
+export interface IMakeFieldGroupProps extends IFieldProps {
+  element: IMakeFieldGroup;
+}

package/src/interfaces/make-field.ts

@@ -1,14 +1,14 @@
-import { HTMLInputTypeAttribute } from 'react'
-import { IField, IFieldProps } from './field'
-
-export interface IMakeInput extends IField {
-  elementType: 'input'
-  placeHolder?: string
-  min?: string
-  max?: string
-  type?: HTMLInputTypeAttribute
-}
-
-export interface IMakeInputProps extends IFieldProps {
-  element: IMakeInput
-}
+import { HTMLInputTypeAttribute } from 'react'
+import { IField, IFieldProps } from './field'
+
+export interface IMakeInput extends IField {
+  elementType: 'input'
+  placeHolder?: string
+  min?: string
+  max?: string
+  type?: HTMLInputTypeAttribute
+}
+
+export interface IMakeInputProps extends IFieldProps {
+  element: IMakeInput
+}

package/src/interfaces/make-multi-select.ts

@@ -1,14 +1,14 @@
-import { IOption } from './option'
-import { IField, IFieldProps } from './field'
-import { IModalLiveDataCondition } from './modal'
-
-export interface IMakeMultiSelect extends Omit<IField, 'defaultValue'> {
-  elementType: 'multiselect';
-  options: Array<IOption>;
-  liveData?: IModalLiveDataCondition;
-  defaultValue?: Array<string>
-}
-
-export interface IMakeMultiSelectProps extends IFieldProps {
-  element: IMakeMultiSelect
-}
+import { IOption } from './option'
+import { IField, IFieldProps } from './field'
+import { IModalLiveDataCondition } from './modal'
+
+export interface IMakeMultiSelect extends Omit<IField, 'defaultValue'> {
+  elementType: 'multiselect';
+  options: Array<IOption>;
+  liveData?: IModalLiveDataCondition;
+  defaultValue?: Array<string>
+}
+
+export interface IMakeMultiSelectProps extends IFieldProps {
+  element: IMakeMultiSelect
+}

package/src/interfaces/make-select.ts

@@ -1,12 +1,12 @@
-import { IField, IFieldProps } from './field'
-import { IModalLiveDataCondition } from './modal'
-
-export interface IMakeSelect extends IField {
-  elementType: 'select'
-  options: Array<Record<'id'|'name', string>>
-  liveData?: IModalLiveDataCondition
-}
-
-export interface IMakeSelectProps extends IFieldProps {
-  element: IMakeSelect
-}
+import { IField, IFieldProps } from './field'
+import { IModalLiveDataCondition } from './modal'
+
+export interface IMakeSelect extends IField {
+  elementType: 'select'
+  options: Array<Record<'id'|'name', string>>
+  liveData?: IModalLiveDataCondition
+}
+
+export interface IMakeSelectProps extends IFieldProps {
+  element: IMakeSelect
+}

package/src/interfaces/make-text.ts

@@ -1,12 +1,12 @@
-import { CSSProperties } from 'react'
-import { IFieldProps } from './field'
-
-export interface IMakeText {
-  elementType: 'text'
-  text: string
-  styles?: CSSProperties
-}
-
-export interface IMakeTextProps extends IFieldProps {
-  element: IMakeText
-}
+import { CSSProperties } from 'react'
+import { IFieldProps } from './field'
+
+export interface IMakeText {
+  elementType: 'text'
+  text: string
+  styles?: CSSProperties
+}
+
+export interface IMakeTextProps extends IFieldProps {
+  element: IMakeText
+}

package/src/interfaces/make-textarea.ts

@@ -1,11 +1,11 @@
-import { IField, IFieldProps } from './field'
-
-export interface IMakeTextarea extends IField {
-  elementType: 'textarea'
-  cols?: number
-  rows?: number
-}
-
-export interface IMakeTextareaProps extends IFieldProps {
-  element: IMakeTextarea
-}
+import { IField, IFieldProps } from './field'
+
+export interface IMakeTextarea extends IField {
+  elementType: 'textarea'
+  cols?: number
+  rows?: number
+}
+
+export interface IMakeTextareaProps extends IFieldProps {
+  element: IMakeTextarea
+}

package/src/interfaces/make-title.ts

@@ -1,3 +1,3 @@
-export interface IMakeTitle {
-  title: string
-}
+export interface IMakeTitle {
+  title: string
+}