dynamic-modal 1.0.11 → 1.0.13

package/src/interfaces/make-toggle.ts

@@ -1,9 +1,9 @@
-import { IField, IFieldProps } from './field'
-
-export interface IMakeToggle extends IField{
-  elementType: 'toggle'
-}
-
-export interface IMakeToggleProps extends IFieldProps {
-  element: IMakeToggle
-}
+import { IField, IFieldProps } from './field'
+
+export interface IMakeToggle extends IField{
+  elementType: 'toggle'
+}
+
+export interface IMakeToggleProps extends IFieldProps {
+  element: IMakeToggle
+}

package/src/interfaces/make-upload.ts

@@ -1,14 +1,14 @@
-import { IField, IFieldProps } from './field'
-
-export interface IMakeUpload extends Omit<IField, 'defaultValue'> {
-  elementType: 'upload';
-  helpText?: string;
-  read: boolean;
-  image?: boolean;
-  accept?:string;
-  readAsArrayBuffer?: boolean;
-}
-
-export interface IMakeUploadProps extends IFieldProps {
-  element: IMakeUpload
-}
+import { IField, IFieldProps } from './field'
+
+export interface IMakeUpload extends Omit<IField, 'defaultValue'> {
+  elementType: 'upload';
+  helpText?: string;
+  read: boolean;
+  image?: boolean;
+  accept?:string;
+  readAsArrayBuffer?: boolean;
+}
+
+export interface IMakeUploadProps extends IFieldProps {
+  element: IMakeUpload
+}

package/src/interfaces/modal.ts

@@ -1,51 +1,51 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { CSSProperties } from 'react'
-import { IMakeSelect } from './make-select'
-import { IMakeInput } from './make-field'
-import { IMakeTextarea } from './make-textarea'
-import { IMakeToggle } from './make-toggle'
-import { IMakeMultiSelect } from './make-multi-select'
-import { IMakeText } from './make-text'
-import { IMakeFieldGroup } from './make-field-group'
-import { IMakeUpload } from './make-upload'
-import { IOption } from './option'
-import { IMakeButton } from './make-button'
-import { IMakeAutoComplete } from './make-autocomplete'
-
-export type IModalField = IMakeSelect | IMakeInput | IMakeFieldGroup | IMakeTextarea | IMakeToggle | IMakeMultiSelect | IMakeText | IMakeUpload | IMakeButton | IMakeAutoComplete
-
-export type IFormField = IMakeSelect | IMakeInput | IMakeTextarea | IMakeToggle | IMakeMultiSelect
-
-export type IModalRenderCondition = Record<string, Array<string | number>>
-
-export type IModalLiveDataCondition = {
-  action: (data: string, ...args: any[]) => Promise<Array<IOption>>;
-  condition: Array<string>
-}
-
-export interface IModalConfigProps {
-  fields: Array<IModalField>
-  title: string
-  action: {
-    name: string
-    action?: (data: any) => void
-    hide?: boolean
-  }
-  cancel?: {
-    name?: string;
-    action?: () => void
-    hide?: boolean;
-  }
-  reservedData?: Record<string, any>
-  styles?: CSSProperties;
-  overFlowBody?: string | number
-  minHeightBody?: string | number
-}
-
-export type IModalConfigLoader<T = any, D = any> = (props: T, action: (modalResult: D) => void) => IModalConfigProps
-
-export interface IModal {
-  open: boolean;
-  close: () => void
-  config: IModalConfigProps
-}
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { CSSProperties } from 'react'
+import { IMakeSelect } from './make-select'
+import { IMakeInput } from './make-field'
+import { IMakeTextarea } from './make-textarea'
+import { IMakeToggle } from './make-toggle'
+import { IMakeMultiSelect } from './make-multi-select'
+import { IMakeText } from './make-text'
+import { IMakeFieldGroup } from './make-field-group'
+import { IMakeUpload } from './make-upload'
+import { IOption } from './option'
+import { IMakeButton } from './make-button'
+import { IMakeAutoComplete } from './make-autocomplete'
+
+export type IModalField = IMakeSelect | IMakeInput | IMakeFieldGroup | IMakeTextarea | IMakeToggle | IMakeMultiSelect | IMakeText | IMakeUpload | IMakeButton | IMakeAutoComplete
+
+export type IFormField = IMakeSelect | IMakeInput | IMakeTextarea | IMakeToggle | IMakeMultiSelect
+
+export type IModalRenderCondition = Record<string, Array<string | number>>
+
+export type IModalLiveDataCondition = {
+  action: (data: string, ...args: any[]) => Promise<Array<IOption>>;
+  condition: Array<string>
+}
+
+export interface IModalConfigProps {
+  fields: Array<IModalField>
+  title: string
+  action: {
+    name: string
+    action?: (data: any) => void
+    hide?: boolean
+  }
+  cancel?: {
+    name?: string;
+    action?: () => void
+    hide?: boolean;
+  }
+  reservedData?: Record<string, any>
+  styles?: CSSProperties;
+  overFlowBody?: string | number
+  minHeightBody?: string | number
+}
+
+export type IModalConfigLoader<T = any, D = any> = (props: T, action: (modalResult: D) => void) => IModalConfigProps
+
+export interface IModal {
+  open: boolean;
+  close: () => void
+  config: IModalConfigProps
+}

package/src/interfaces/option.ts

@@ -1,4 +1,4 @@
-export interface IOption {
-  id: string;
-  name: string;
+export interface IOption {
+  id: string;
+  name: string;
 }

package/src/interfaces/portal.ts

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react'
-
-export interface IPortal {
-  children: ReactNode;
-  closeTime: number;
-  portalOpen: boolean;
-  portalTag?: string;
-}
+import { ReactNode } from 'react'
+
+export interface IPortal {
+  children: ReactNode;
+  closeTime: number;
+  portalOpen: boolean;
+  portalTag?: string;
+}

package/src/modal.tsx

@@ -1,174 +1,174 @@
-'use client'
-import React, { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { Button } from '@nextui-org/react'
-import { Portal } from './components/portal/portal'
-import MakeToggle from './components/make-toggle/make-toggle'
-import MakeInput from './components/make-input/make-input'
-import MakeSelect from './components/make-select/make-select'
-import MakeTextarea from './components/make-textarea/make-textarea'
-import { IModal, IModalField, IModalConfigProps, IFormField } from './interfaces/modal'
-import MakeMultiSelect from './components/make-multi-select/make-multi-select'
-import MakeText from './components/make-text/make-text'
-import { IFieldProps } from './interfaces/field'
-import MakeUpload from './components/make-upload/make-upload'
-import MakeButton from './components/make-button/make-button'
-import MakeAutocomplete from './components/make-autocomplete/make-autocomplete'
-
-export const Modal = ({ open, close, config }: IModal) => {
-  const [modalReady, setModalReady] = useState<IModalConfigProps | undefined>(undefined)
-  const [defaultLoaded, setDefaultLoaded] = useState<boolean>(false)
-
-  const {
-    control,
-    handleSubmit,
-    getValues,
-    unregister,
-    setValue,
-    watch
-  } = useForm()
-
-  const formValueHandler = (element: IFormField) => {
-    if (['group', 'upload', 'text'].includes(element.elementType)) return
-    if(!element.defaultValue && element.renderIf) {
-      unregister(element.name)
-      return
-    }
-    
-    const defaultValue = element.defaultValue ?? ''
-    const parsedValue: boolean | string | Array<string> | undefined = defaultValue === 'true' ? true : defaultValue === 'false' ? false : defaultValue
-    setValue(element.name, parsedValue ?? '')
-  }
-
-  const autoLoadGroup = (groupFields: Array<IModalField>) => {
-    groupFields.forEach(element => {
-      formValueHandler(element as IFormField)
-    })
-  }
-
-  const autoLoadField = (modalFields: Array<IModalField>) => {
-    if (defaultLoaded) return
-
-    modalFields.forEach(element => {
-      if (element.elementType === 'group') {
-        autoLoadGroup(element.groups)
-        return
-      }
-      formValueHandler(element as IFormField)
-    })
-
-    setDefaultLoaded(true)
-  }
-
-  const getRender = (element: IModalField, index: number, isEndOfRender: boolean = false) => {
-    if (isEndOfRender && modalReady) setTimeout(() => autoLoadField(modalReady.fields), 200)
-
-    const props: IFieldProps = {
-      control,
-      watch,
-      setValue,
-      unregister
-    }
-
-    return element.elementType === 'input'
-      ? <MakeInput {...props} key={`modal-input-${index}`} element={element} />
-      : element.elementType === 'select'
-        ? <MakeSelect {...props} key={`modal-select-${index}`} element={element} />
-        : element.elementType === 'textarea'
-          ? <MakeTextarea {...props} key={`modal-textarea-${index}`} element={element} />
-          : element.elementType === 'toggle'
-            ? <MakeToggle {...props} key={`modal-toggle-${index}`} element={element} />
-            : element.elementType === 'multiselect'
-              ? <MakeMultiSelect {...props} key={`modal-multiselect-${index}`} element={element} />
-              : element.elementType === 'text'
-                ? <MakeText {...props} key={`modal-text-${index}`} element={element} />
-                : element.elementType === 'upload'
-                  ? <MakeUpload {...props} key={`modal-upload-${index}`} element={element} />
-                  : element.elementType === 'button'
-                    ? <MakeButton {...props} key={`modal-button-${index}`} element={element} />
-                    : element.elementType === 'autocomplete'
-                      ? <MakeAutocomplete {...props} key={`modal-autocomplete-${index}`} element={element} />
-                      : null
-  }
-
-  const closeHandler = (): void => {
-    if (modalReady?.cancel && modalReady.cancel.action) modalReady.cancel.action()
-    setTimeout(() => {
-      const form = getValues()
-      unregister(Object.keys(form))
-      setModalReady(undefined)
-      setDefaultLoaded(false)
-      close()
-    }, 200)
-  }
-
-  const actionHandler = (data: Record<string, string | number | object>): void => {
-    if (modalReady?.action && modalReady.action.action) modalReady.action.action({ ...modalReady?.reservedData, ...data })
-    closeHandler()
-  }
-
-  useEffect(() => {
-    if (open && !modalReady) setModalReady(config)
-  }, [config, modalReady, open])
-
-  return (
-    modalReady
-      ? <Portal closeTime={200} portalOpen={open} portalTag={'#modal-portal'}>
-        <div className='rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px]' style={{ ...modalReady.styles }} >
-          <form className='flex flex-col p-4 gap-4' autoComplete='off' onSubmit={handleSubmit(actionHandler)}>
-            <h2 className='text-bold text-center border-b pb-4 font-semibold'>{modalReady.title}</h2>
-            <div
-              className='flex flex-col items-center gap-4 py-4'
-              style={{
-                overflowY: modalReady.overFlowBody ? 'auto' : undefined,
-                height: modalReady.overFlowBody,
-                minHeight: modalReady.minHeightBody
-              }}
-            >
-              {
-                modalReady.fields.map((element, index) => {
-                  const isEndOfRender: boolean = index + 1 === modalReady.fields.length
-
-                  if (element.elementType === 'group') {
-                    return (
-                      <div key={`modal-group-${index}`} className='flex gap-4 w-full' style={element.style} >
-                        {
-                          element.groups
-                            .filter(sub => ['input', 'select', 'toggle', 'multiselect', 'upload', 'button', 'autocomplete'].includes(sub.elementType))
-                            .map((sub, subIndex) => getRender(sub, index + subIndex, isEndOfRender))
-                        }
-                      </div>
-                    )
-                  } else { return getRender(element, index, isEndOfRender) }
-                })
-              }
-            </div>
-            <div className='flex items-center justify-around gap-4 py-2 border-t'>
-              {modalReady.cancel &&
-                <Button
-                  variant='bordered'
-                  onClick={closeHandler}
-                  type='reset'
-                  className='w-[140px]'
-                >
-                  {modalReady.cancel.name ?? 'Close'}
-                </Button>
-              }
-              {modalReady.action &&
-                <Button
-                  color='primary'
-                  type='submit'
-                  className='w-[140px]'
-                >
-                  {modalReady.action.name ?? 'Ok'}
-                </Button>
-              }
-            </div>
-          </form>
-        </div>
-      </Portal>
-      : null
-  )
-}
-
-export default Modal
+'use client'
+import React, { useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { Button } from '@nextui-org/react'
+import { Portal } from './components/portal/portal'
+import MakeToggle from './components/make-toggle/make-toggle'
+import MakeInput from './components/make-input/make-input'
+import MakeSelect from './components/make-select/make-select'
+import MakeTextarea from './components/make-textarea/make-textarea'
+import { IModal, IModalField, IModalConfigProps, IFormField } from './interfaces/modal'
+import MakeMultiSelect from './components/make-multi-select/make-multi-select'
+import MakeText from './components/make-text/make-text'
+import { IFieldProps } from './interfaces/field'
+import MakeUpload from './components/make-upload/make-upload'
+import MakeButton from './components/make-button/make-button'
+import MakeAutocomplete from './components/make-autocomplete/make-autocomplete'
+
+export const Modal = ({ open, close, config }: IModal) => {
+  const [modalReady, setModalReady] = useState<IModalConfigProps | undefined>(undefined)
+  const [defaultLoaded, setDefaultLoaded] = useState<boolean>(false)
+
+  const {
+    control,
+    handleSubmit,
+    getValues,
+    unregister,
+    setValue,
+    watch
+  } = useForm()
+
+  const formValueHandler = (element: IFormField) => {
+    if (['group', 'upload', 'text'].includes(element.elementType)) return
+    if(!element.defaultValue && element.renderIf) {
+      unregister(element.name)
+      return
+    }
+    
+    const defaultValue = element.defaultValue ?? ''
+    const parsedValue: boolean | string | Array<string> | undefined = defaultValue === 'true' ? true : defaultValue === 'false' ? false : defaultValue
+    setValue(element.name, parsedValue ?? '')
+  }
+
+  const autoLoadGroup = (groupFields: Array<IModalField>) => {
+    groupFields.forEach(element => {
+      formValueHandler(element as IFormField)
+    })
+  }
+
+  const autoLoadField = (modalFields: Array<IModalField>) => {
+    if (defaultLoaded) return
+
+    modalFields.forEach(element => {
+      if (element.elementType === 'group') {
+        autoLoadGroup(element.groups)
+        return
+      }
+      formValueHandler(element as IFormField)
+    })
+
+    setDefaultLoaded(true)
+  }
+
+  const getRender = (element: IModalField, index: number, isEndOfRender: boolean = false) => {
+    if (isEndOfRender && modalReady) setTimeout(() => autoLoadField(modalReady.fields), 200)
+
+    const props: IFieldProps = {
+      control,
+      watch,
+      setValue,
+      unregister
+    }
+
+    return element.elementType === 'input'
+      ? <MakeInput {...props} key={`modal-input-${index}`} element={element} />
+      : element.elementType === 'select'
+        ? <MakeSelect {...props} key={`modal-select-${index}`} element={element} />
+        : element.elementType === 'textarea'
+          ? <MakeTextarea {...props} key={`modal-textarea-${index}`} element={element} />
+          : element.elementType === 'toggle'
+            ? <MakeToggle {...props} key={`modal-toggle-${index}`} element={element} />
+            : element.elementType === 'multiselect'
+              ? <MakeMultiSelect {...props} key={`modal-multiselect-${index}`} element={element} />
+              : element.elementType === 'text'
+                ? <MakeText {...props} key={`modal-text-${index}`} element={element} />
+                : element.elementType === 'upload'
+                  ? <MakeUpload {...props} key={`modal-upload-${index}`} element={element} />
+                  : element.elementType === 'button'
+                    ? <MakeButton {...props} key={`modal-button-${index}`} element={element} />
+                    : element.elementType === 'autocomplete'
+                      ? <MakeAutocomplete {...props} key={`modal-autocomplete-${index}`} element={element} />
+                      : null
+  }
+
+  const closeHandler = (): void => {
+    if (modalReady?.cancel && modalReady.cancel.action) modalReady.cancel.action()
+    setTimeout(() => {
+      const form = getValues()
+      unregister(Object.keys(form))
+      setModalReady(undefined)
+      setDefaultLoaded(false)
+      close()
+    }, 200)
+  }
+
+  const actionHandler = (data: Record<string, string | number | object>): void => {
+    if (modalReady?.action && modalReady.action.action) modalReady.action.action({ ...modalReady?.reservedData, ...data })
+    closeHandler()
+  }
+
+  useEffect(() => {
+    if (open && !modalReady) setModalReady(config)
+  }, [config, modalReady, open])
+
+  return (
+    modalReady
+      ? <Portal closeTime={200} portalOpen={open} portalTag={'#modal-portal'}>
+        <div className='rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px]' style={{ ...modalReady.styles }} >
+          <form className='flex flex-col p-4 gap-4' autoComplete='off' onSubmit={handleSubmit(actionHandler)}>
+            <h2 className='text-bold text-center border-b pb-4 font-semibold'>{modalReady.title}</h2>
+            <div
+              className='flex flex-col items-center gap-4 py-4'
+              style={{
+                overflowY: modalReady.overFlowBody ? 'auto' : undefined,
+                height: modalReady.overFlowBody,
+                minHeight: modalReady.minHeightBody
+              }}
+            >
+              {
+                modalReady.fields.map((element, index) => {
+                  const isEndOfRender: boolean = index + 1 === modalReady.fields.length
+
+                  if (element.elementType === 'group') {
+                    return (
+                      <div key={`modal-group-${index}`} className='flex gap-4 w-full' style={element.style} >
+                        {
+                          element.groups
+                            .filter(sub => ['input', 'select', 'toggle', 'multiselect', 'upload', 'button', 'autocomplete'].includes(sub.elementType))
+                            .map((sub, subIndex) => getRender(sub, index + subIndex, isEndOfRender))
+                        }
+                      </div>
+                    )
+                  } else { return getRender(element, index, isEndOfRender) }
+                })
+              }
+            </div>
+            <div className='flex items-center justify-around gap-4 py-2 border-t'>
+              {modalReady.cancel &&
+                <Button
+                  variant='bordered'
+                  onClick={closeHandler}
+                  type='reset'
+                  className='w-[140px]'
+                >
+                  {modalReady.cancel.name ?? 'Close'}
+                </Button>
+              }
+              {modalReady.action &&
+                <Button
+                  color='primary'
+                  type='submit'
+                  className='w-[140px]'
+                >
+                  {modalReady.action.name ?? 'Ok'}
+                </Button>
+              }
+            </div>
+          </form>
+        </div>
+      </Portal>
+      : null
+  )
+}
+
+export default Modal

package/src/tools/general.ts

@@ -1,6 +1,6 @@
-export const generateId = (): string => {
-  return Math.random()
-    .toString(36)
-    .split('.')[1]
-    .substring(0, 6)
-}
+export const generateId = (): string => {
+  return Math.random()
+    .toString(36)
+    .split('.')[1]
+    .substring(0, 6)
+}

package/tsconfig.json

@@ -1,13 +1,13 @@
-{
-  "compilerOptions": {
-    "target": "ES2016",
-    "module": "commonjs",
-    "declaration": true,
-    "outDir": "./dist",
-    "strict": true,
-    "jsx": "react",
-    "esModuleInterop": true,
-    "skipLibCheck": true
-  },
-  "include": ["src/**/*"]
-}
+{
+  "compilerOptions": {
+    "target": "ES2016",
+    "module": "commonjs",
+    "declaration": true,
+    "outDir": "./dist",
+    "strict": true,
+    "jsx": "react",
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*"]
+}