dynamic-modal 1.0.0

package/src/modal.tsx

@@ -0,0 +1,168 @@
+'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
+    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
+    }
+
+    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'>{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'].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

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

package/tsconfig.json

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