dynamic-modal 1.1.8 → 1.1.10

package/src/modal.tsx

@@ -1,30 +1,36 @@
-'use client'
-
-import React, { useContext, useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
-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 MakeDescription from './components/make-description/make-description'
-import { IFieldProps } from './interfaces/field'
-import MakeUpload from './components/make-upload/make-upload'
-import MakeButton from './components/make-button/make-button'
-import { IMakeInput } from './interfaces/make-input'
-import { IMakeSelect } from './interfaces/make-select'
-import { IMakeTextarea } from './interfaces/make-textarea'
-import { IMakeToggle } from './interfaces/make-toggle'
-import { IMakeDescription } from './interfaces/make-description'
-import { IMakeUpload } from './interfaces/make-upload'
-import { IMakeButton } from './interfaces/make-button'
-import { ComponentStateContext } from './context/component/component-state'
+'use client';
+
+import React, { useContext, useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+
+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 MakeDescription from './components/make-description/make-description';
+import { IFieldProps } from './interfaces/field';
+import MakeUpload from './components/make-upload/make-upload';
+import MakeButton from './components/make-button/make-button';
+import { IMakeInput } from './interfaces/make-input';
+import { IMakeSelect } from './interfaces/make-select';
+import { IMakeTextarea } from './interfaces/make-textarea';
+import { IMakeToggle } from './interfaces/make-toggle';
+import { IMakeDescription } from './interfaces/make-description';
+import { IMakeUpload } from './interfaces/make-upload';
+import { IMakeButton } from './interfaces/make-button';
+import { ComponentStateContext } from './context/component/component-state';
 
 export const Modal = ({ open, close, config }: IModal) => {
-  const { ModalButtonAction, ModalButtonCancel } = useContext(ComponentStateContext)
-  const [modalReady, setModalReady] = useState<IModalConfigProps | undefined>(undefined)
-  const [defaultLoaded, setDefaultLoaded] = useState<boolean>(false)
+  const { ModalButtonAction, ModalButtonCancel } = useContext(ComponentStateContext);
+  const [modalReady, setModalReady] = useState<IModalConfigProps | undefined>(undefined);
+  const [defaultLoaded, setDefaultLoaded] = useState<boolean>(false);
 
   const {
     control,
@@ -34,163 +40,253 @@ export const Modal = ({ open, close, config }: IModal) => {
     setValue,
     watch,
     trigger,
-    getFieldState
-  } = useForm()
+    reset,
+    getFieldState,
+  } = useForm();
 
   const formValueHandler = (element: IFormField) => {
-    if (['group', 'upload', 'text'].includes(element.elementType)) return
-    if(!element.defaultValue && element.renderIf) {
-      unregister(element.name)
-      return
+    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 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)
-    })
-  }
+    groupFields.forEach((element) => {
+      formValueHandler(element as IFormField);
+    });
+  };
 
   const autoLoadField = (modalFields: Array<IModalField>) => {
-    if (defaultLoaded) return
+    if (defaultLoaded) return;
 
-    modalFields.forEach(element => {
+    modalFields.forEach((element) => {
       if (element.elementType === 'group') {
-        autoLoadGroup(element.groups)
-        return
+        autoLoadGroup(element.groups);
+        return;
       }
-      formValueHandler(element as IFormField)
-    })
+      formValueHandler(element as IFormField);
+    });
 
-    setDefaultLoaded(true)
-  }
+    setDefaultLoaded(true);
+  };
 
-  
   const getUseSubmit = (modalConfig: IModalConfigProps): boolean => {
-    const useSubmit = modalConfig.useSubmit === undefined ? true : modalConfig.useSubmit === false ? false : true
+    const useSubmit =
+      modalConfig.useSubmit === undefined
+        ? true
+        : modalConfig.useSubmit === false
+          ? false
+          : true;
 
-    return useSubmit
-  }
+    return useSubmit;
+  };
 
-  const getRender = ({ elementType, ...element }: IModalField, index: number, isEndOfRender: boolean = false) => {
-    if (isEndOfRender && modalReady) setTimeout(() => autoLoadField(modalReady.fields), 200)
+  const getRender = (
+    { elementType, ...element }: IModalField,
+    index: number,
+    isEndOfRender: boolean = false,
+  ) => {
+    if (isEndOfRender && modalReady)
+      setTimeout(() => autoLoadField(modalReady.fields), 200);
 
     const props: IFieldProps = {
       control,
       watch,
       setValue,
-      unregister
-    }
-
-    return elementType === 'input'
-      ? <MakeInput {...props} key={`modal-input-${index}`} element={element as IMakeInput} />
-      : elementType === 'select'
-        ? <MakeSelect {...props} key={`modal-select-${index}`} element={element as IMakeSelect} />
-        : elementType === 'textarea'
-          ? <MakeTextarea {...props} key={`modal-textarea-${index}`} element={element as IMakeTextarea} />
-          : elementType === 'toggle'
-            ? <MakeToggle {...props} key={`modal-toggle-${index}`} element={element as IMakeToggle} />
-            : elementType === 'text'
-                ? <MakeDescription {...props} key={`modal-text-${index}`} element={element as IMakeDescription} />
-                : elementType === 'upload'
-                  ? <MakeUpload {...props} key={`modal-upload-${index}`} element={element as IMakeUpload} />
-                  : elementType === 'button'
-                    ? <MakeButton {...props} key={`modal-button-${index}`} element={element as IMakeButton} />
-                    : null
-  }
+      unregister,
+    };
 
+    return elementType === 'input' ? (
+      <MakeInput
+        {...props}
+        key={`modal-input-${index}`}
+        element={element as IMakeInput}
+      />
+    ) : elementType === 'select' ? (
+      <MakeSelect
+        {...props}
+        key={`modal-select-${index}`}
+        element={element as IMakeSelect}
+      />
+    ) : elementType === 'textarea' ? (
+      <MakeTextarea
+        {...props}
+        key={`modal-textarea-${index}`}
+        element={element as IMakeTextarea}
+      />
+    ) : elementType === 'toggle' ? (
+      <MakeToggle
+        {...props}
+        key={`modal-toggle-${index}`}
+        element={element as IMakeToggle}
+      />
+    ) : elementType === 'text' ? (
+      <MakeDescription
+        {...props}
+        key={`modal-text-${index}`}
+        element={element as IMakeDescription}
+      />
+    ) : elementType === 'upload' ? (
+      <MakeUpload
+        {...props}
+        key={`modal-upload-${index}`}
+        element={element as IMakeUpload}
+      />
+    ) : elementType === 'button' ? (
+      <MakeButton
+        {...props}
+        key={`modal-button-${index}`}
+        element={element as IMakeButton}
+      />
+    ) : null;
+  };
 
   const closeHandler = (): void => {
-    if (modalReady?.onClose) modalReady.onClose()
-      
+    if (modalReady?.onClose) modalReady.onClose();
+
     setTimeout(() => {
-      const form = getValues()
-      unregister(Object.keys(form))
-      setModalReady(undefined)
-      setDefaultLoaded(false)
-      close()
-    }, 200)
-  }
+      setModalReady(undefined);
+      setDefaultLoaded(false);
+      reset()
+      close();
+    }, 200);
+  };
 
   const manualSubmit = async (): Promise<void> => {
-    const form = getValues()
-    const fields = Object.keys(form)
-    await trigger(fields)
+    const form = getValues();
+    const fields = Object.keys(form);
+    await trigger(fields);
+
+    const validations: Array<boolean> = fields.map((field) => {
+      const { invalid } = getFieldState(field);
 
-    const validations: Array<boolean> = fields.map(field => {
-      const { invalid } = getFieldState(field)
+      return invalid;
+    });
 
-      return invalid
-    })
+    const result = validations.some((isInvalid) => isInvalid)
+      ? undefined
+      : form;
 
-    const result = validations.some(isInvalid => isInvalid) ? undefined : form
+    if (!result) return;
 
-    if(!result) return
-    
-    actionHandler({ ...(modalReady?.reservedData ?? {}), ...form })
-  }
+    actionHandler({ ...(modalReady?.reservedData ?? {}), ...form });
+  };
 
-  const actionHandler = (data: Record<string, string | number | object>): void => {
-    modalReady?.out({ ...(modalReady?.reservedData ?? {}), ...data })
-    closeHandler()
-  }
+  const actionHandler = (
+    data: Record<string, string | number | object>,
+  ): void => {
+    modalReady?.out({ ...(modalReady?.reservedData ?? {}), ...data });
+    closeHandler();
+  };
 
   useEffect(() => {
-    if (open && !modalReady) setModalReady(config)
-  }, [config, modalReady, open])
+    if (open && !modalReady) setModalReady(config);
+  }, [config, modalReady, open]);
+
+  if(!modalReady) return null
 
   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.style} >
-          <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 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 flex-col w-full gap-2'>
-                        { element.title && <h3 className='font-bold border-b-2 pb-2 mb-2'>{element.title}</h3> }
-                        <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>
-                      </div>
-                    )
-                  } else { return getRender(element, index, isEndOfRender) }
-                })
-              }
-            </div>
-            <div className='flex gap-4 items-center justify-center border-t' style={modalReady?.actions.containerStyle}>
-              {modalReady.actions.cancel && <ModalButtonCancel {...modalReady.actions.cancel} onClick={closeHandler} />}
-              {
-                getUseSubmit(modalReady) ? 
-                <ModalButtonAction {...modalReady.actions.action} type='submit' />:
-                <ModalButtonAction {...modalReady.actions.action} onClick={manualSubmit} type='button' />
+    <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.style}
+      >
+        <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 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 flex-col w-full gap-2"
+                  >
+                    {element.title && (
+                      <h3 className="font-bold border-b-2 pb-2 mb-2">
+                        {element.title}
+                      </h3>
+                    )}
+                    <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>
+                  </div>
+                );
+              } else {
+                return getRender(element, index, isEndOfRender);
               }
-            </div>
-          </form>
-        </div>
-      </Portal>
-      : null
+            })}
+          </div>
+          <div
+            className="flex gap-4 items-center justify-center border-t p-2"
+            style={modalReady?.actions.containerStyle}
+          >
+            {modalReady.actions.cancel && (
+              <ModalButtonCancel
+                {...modalReady.actions.cancel}
+                onClick={closeHandler}
+              />
+            )}
+            {getUseSubmit(modalReady) ? (
+              <ModalButtonAction {...modalReady.actions.action} type="submit" />
+            ) : (
+              <ModalButtonAction
+                {...modalReady.actions.action}
+                onClick={manualSubmit}
+                type="button"
+              />
+            )}
+          </div>
+        </form>
+      </div>
+    </Portal>
   )
-}
+};
 
-export default Modal
+export default Modal;

package/src/util/general/general.util.ts

@@ -0,0 +1,27 @@
+import { IOption } from '../../interfaces/option';
+
+export const liveDataAction = async (
+  fieldData: string | number | Array<unknown>,
+  formData: Record<string, unknown>,
+  action: (data: string, ...args: any[]) => Promise<IOption[]>,
+) => {
+  if (typeof fieldData === 'string') {
+    const options = await action(fieldData, formData);
+    return options ?? [];
+  }
+
+  return [] as Array<IOption>;
+};
+
+export const liveDataHandler = async (
+  fieldData: string | number | Array<unknown>,
+  formData: Record<string, unknown>,
+  action: (data: string, ...args: any[]) => Promise<boolean>,
+) => {
+  if (typeof fieldData === 'string') {
+    const result = await action(fieldData, formData);
+    return result ?? false;
+  }
+
+  return false;
+};

package/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2016",
+    "target": "es2020",
     "module": "commonjs",
     "declaration": true,
     "outDir": "./dist",

package/dist/hooks/field-render.d.ts

@@ -1,20 +0,0 @@
-import { IField, IFieldProps } from '../interfaces/field';
-import { IOption } from '../interfaces/option';
-import { IModalLiveDataCondition } 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 declare const useFieldRender: ({ element, setValue, unregister }: IFieldRenderProps) => IFieldRender;

package/dist/hooks/field-render.js

@@ -1,94 +0,0 @@
-"use strict";
-'use client';
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFieldRender = void 0;
-const react_1 = require("react");
-const useFieldRender = ({ element, setValue, unregister }) => {
-    const [render, setRender] = (0, react_1.useState)(null);
-    const [enable, setEnable] = (0, react_1.useState)(null);
-    const [liveSearching, setLiveSearching] = (0, react_1.useState)(false);
-    const [liveData, setLiveData] = (0, react_1.useState)(undefined);
-    const renderCondition = (0, react_1.useMemo)(() => {
-        const isRender = element.renderIf !== undefined;
-        if (render === null)
-            setRender(!isRender);
-        return isRender;
-    }, [element.renderIf, render]);
-    const enableCondition = (0, react_1.useMemo)(() => {
-        const isEnable = element.enableIf !== undefined;
-        if (enable === null)
-            setEnable(!isEnable);
-        return isEnable;
-    }, [element.enableIf, enable]);
-    const liveDataCondition = (0, react_1.useMemo)(() => {
-        return element.liveData !== undefined;
-    }, [element.liveData]);
-    const renderConditionList = (0, react_1.useMemo)(() => {
-        return renderCondition ? Object.keys(element.renderIf) : [];
-    }, [element.renderIf, renderCondition]);
-    const enableConditionList = (0, react_1.useMemo)(() => {
-        return enableCondition ? Object.keys(element.enableIf) : [];
-    }, [enableCondition, element.enableIf]);
-    const liveDataAction = (0, react_1.useCallback)((field, formData) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
-        if (typeof field === 'string' && ((_a = element.liveData) === null || _a === void 0 ? void 0 : _a.action)) {
-            const options = element.liveData.action(field, formData);
-            return options !== null && options !== void 0 ? options : [];
-        }
-        return [];
-    }), [element.liveData]);
-    const liveDataHandler = (0, react_1.useCallback)((targetHandler, field, formData) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
-        if (typeof field === 'string' && ((_a = element[targetHandler]) === null || _a === void 0 ? void 0 : _a.action)) {
-            const result = element[targetHandler].action(field, formData);
-            return result !== null && result !== void 0 ? result : false;
-        }
-        return false;
-    }), [element.liveData]);
-    const checkField = (0, react_1.useCallback)((formData_1, _a) => __awaiter(void 0, [formData_1, _a], void 0, function* (formData, { name }) {
-        var _b, _c, _d;
-        const key = name !== null && name !== void 0 ? name : '';
-        const targetField = formData[key];
-        if (!targetField)
-            return;
-        if (renderCondition && ((_b = element.renderIf) === null || _b === void 0 ? void 0 : _b.condition.includes(key))) {
-            const renderStatus = yield liveDataHandler('renderIf', targetField, formData);
-            if (render !== renderStatus) {
-                setRender(renderStatus);
-                if (!renderStatus)
-                    unregister(element.name);
-            }
-        }
-        else if (enableCondition && ((_c = element.enableIf) === null || _c === void 0 ? void 0 : _c.condition.includes(key))) {
-            const enableStatus = yield liveDataHandler('enableIf', targetField, formData);
-            if (enable !== enableStatus)
-                setEnable(enableStatus);
-        }
-        if (liveDataCondition && ((_d = element.liveData) === null || _d === void 0 ? void 0 : _d.condition.includes(key))) {
-            setLiveSearching(true);
-            const options = yield liveDataAction(targetField, formData);
-            if (liveData && JSON.stringify(liveData) !== JSON.stringify(options)) {
-                setValue(element.name, options);
-            }
-            setLiveData(options);
-            setLiveSearching(false);
-        }
-    }), [enable, enableCondition, enableConditionList, liveData, liveDataAction, liveDataCondition, render, renderCondition, renderConditionList]);
-    return {
-        render,
-        enable,
-        checkField,
-        liveData,
-        liveSearching
-    };
-};
-exports.useFieldRender = useFieldRender;

package/dist/tools/general.d.ts

@@ -1 +0,0 @@
-export declare const generateId: () => string;

package/dist/tools/general.js

@@ -1,11 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateId = void 0;
-const generateId = () => {
-    return Math.random()
-        .toString(36)
-        .split('.')[1]
-        .substring(0, 6);
-};
-exports.generateId = generateId;