dynamic-modal 1.1.1 → 1.1.4

package/README.md

@@ -1,5 +1,6 @@
 # dynamic-modal
 
+<<<<<<< README.md
 `dynamic-modal` is a TypeScript library for creating reusable modals in React and Next.js applications. It uses JSON objects to configure the modal structure, eliminating the need to write HTML. This approach simplifies modal creation and customization, allowing you to open and close modals using a custom hook.
 
 ## Requirements

package/dist/components/make-input/make-input.js

@@ -52,9 +52,9 @@ const component_state_1 = require("../../context/component/component-state");
 const general_1 = require("../../tools/general");
 const MakeInput = (_a) => {
     var _b, _c;
-    var _d = _a.element, _e = _d.validation, { required } = _e, validation = __rest(_e, ["required"]), element = __rest(_d, ["validation"]), props = __rest(_a, ["element"]);
+    var _d = _a.element, _e = _d.validation, { required } = _e, validation = __rest(_e, ["required"]), { enableIf, renderIf } = _d, element = __rest(_d, ["validation", "enableIf", "renderIf"]), props = __rest(_a, ["element"]);
     const { Input } = (0, react_1.useContext)(component_state_1.ComponentStateContext);
-    const { render, enable, checkField } = (0, field_render_1.useFieldRender)(Object.assign(Object.assign({}, props), { element }));
+    const { render, enable, checkField } = (0, field_render_1.useFieldRender)(Object.assign(Object.assign({}, props), { element: Object.assign({ enableIf, renderIf }, element) }));
     const elementId = (0, react_1.useMemo)(() => { var _a; return (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(); }, []);
     (0, react_1.useEffect)(() => {
         const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }));

package/dist/components/make-select/make-select.js

@@ -52,9 +52,9 @@ const general_1 = require("../../tools/general");
 const component_state_1 = require("../../context/component/component-state");
 const MakeSelect = (_a) => {
     var _b, _c;
-    var _d = _a.element, _e = _d.validation, { required } = _e, validation = __rest(_e, ["required"]), element = __rest(_d, ["validation"]), props = __rest(_a, ["element"]);
+    var _d = _a.element, _e = _d.validation, { required } = _e, validation = __rest(_e, ["required"]), { enableIf, renderIf } = _d, element = __rest(_d, ["validation", "enableIf", "renderIf"]), props = __rest(_a, ["element"]);
     const { Select } = (0, react_1.useContext)(component_state_1.ComponentStateContext);
-    const { render, enable, checkField, liveData, liveSearching } = (0, field_render_1.useFieldRender)(Object.assign(Object.assign({}, props), { element }));
+    const { render, enable, checkField, liveData, liveSearching } = (0, field_render_1.useFieldRender)(Object.assign(Object.assign({}, props), { element: Object.assign({ renderIf, enableIf }, element) }));
     const elementId = (0, react_1.useMemo)(() => { var _a; return (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(); }, []);
     (0, react_1.useEffect)(() => {
         const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }));

package/dist/components/make-textarea/make-textarea.js

@@ -52,9 +52,9 @@ const general_1 = require("../../tools/general");
 const component_state_1 = require("../../context/component/component-state");
 const MakeTextarea = (_a) => {
     var _b, _c;
-    var _d = _a.element, _e = _d.validation, { required } = _e, validation = __rest(_e, ["required"]), element = __rest(_d, ["validation"]), props = __rest(_a, ["element"]);
+    var _d = _a.element, _e = _d.validation, { required } = _e, validation = __rest(_e, ["required"]), { enableIf, renderIf } = _d, element = __rest(_d, ["validation", "enableIf", "renderIf"]), props = __rest(_a, ["element"]);
     const { Textarea } = (0, react_1.useContext)(component_state_1.ComponentStateContext);
-    const { render, enable, checkField } = (0, field_render_1.useFieldRender)(Object.assign(Object.assign({}, props), { element }));
+    const { render, enable, checkField } = (0, field_render_1.useFieldRender)(Object.assign(Object.assign({}, props), { element: Object.assign({ enableIf, renderIf }, element) }));
     const elementId = (0, react_1.useMemo)(() => { var _a; return (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(); }, []);
     (0, react_1.useEffect)(() => {
         const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }));

package/dist/components/make-toggle/make-toggle.js

@@ -52,9 +52,9 @@ const general_1 = require("../../tools/general");
 const component_state_1 = require("../../context/component/component-state");
 const MakeToggle = (_a) => {
     var _b, _c;
-    var _d = _a.element, _e = _d.validation, { required } = _e, validation = __rest(_e, ["required"]), element = __rest(_d, ["validation"]), props = __rest(_a, ["element"]);
+    var _d = _a.element, _e = _d.validation, { required } = _e, validation = __rest(_e, ["required"]), { enableIf, renderIf } = _d, element = __rest(_d, ["validation", "enableIf", "renderIf"]), props = __rest(_a, ["element"]);
     const { Toggle } = (0, react_1.useContext)(component_state_1.ComponentStateContext);
-    const { render, enable, checkField } = (0, field_render_1.useFieldRender)(Object.assign(Object.assign({}, props), { element }));
+    const { render, enable, checkField } = (0, field_render_1.useFieldRender)(Object.assign(Object.assign({}, props), { element: Object.assign({ enableIf, renderIf }, element) }));
     const elementId = (0, react_1.useMemo)(() => { var _a; return (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(); }, []);
     (0, react_1.useEffect)(() => {
         const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }));

package/dist/components/make-upload/make-upload.js

@@ -21,8 +21,8 @@ const input_upload_1 = __importDefault(require("../input-upload/input-upload"));
 const field_render_1 = require("../../hooks/field-render");
 const MakeUpload = (_a) => {
     var _b, _c;
-    var _d = _a.element, _e = _d.validation, { required } = _e, validation = __rest(_e, ["required"]), element = __rest(_d, ["validation"]), props = __rest(_a, ["element"]);
-    const { render, enable } = (0, field_render_1.useFieldRender)(Object.assign(Object.assign({}, props), { element }));
+    var _d = _a.element, _e = _d.validation, { required } = _e, validation = __rest(_e, ["required"]), { enableIf, renderIf } = _d, element = __rest(_d, ["validation", "enableIf", "renderIf"]), props = __rest(_a, ["element"]);
+    const { render, enable } = (0, field_render_1.useFieldRender)(Object.assign(Object.assign({}, props), { element: Object.assign({ enableIf, renderIf }, element) }));
     return (render
         ? react_1.default.createElement(react_hook_form_1.Controller, { control: props.control, name: element.name, rules: Object.assign({ required: {
                     value: required,

package/dist/hooks/field-render.js

@@ -60,7 +60,7 @@ const useFieldRender = ({ element, setValue, unregister }) => {
             }
         }
         else if (enableCondition && enableConditionList.includes(key) && fieldValidValue) {
-            const enableStatus = element.enableIf[key].includes(targetField) || element.enableIf[key].includes('');
+            const enableStatus = element.enableIf[key].includes(targetField) || element.enableIf[key].includes('*');
             if (enable !== enableStatus)
                 setEnable(enableStatus);
         }

package/dist/interfaces/field.d.ts

@@ -1,5 +1,6 @@
 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;
@@ -11,8 +12,8 @@ export interface IField {
     style?: CSSProperties;
     placeholder?: string;
     defaultValue?: any;
-    renderIf?: Record<string, Array<string | number>>;
-    enableIf?: Record<string, Array<string | number>>;
+    renderIf?: IModalRenderCondition;
+    enableIf?: IModalRenderCondition;
     validation: {
         required: boolean;
         regex?: RegExp;

package/dist/interfaces/make-select.d.ts

@@ -1,8 +1,9 @@
 import { IField, IFieldProps } from './field';
 import { IModalLiveDataCondition } from './modal';
+import { IOption } from './option';
 export interface IMakeSelect extends IField {
     elementType: 'select';
-    options: Array<Record<'id' | 'name', string>>;
+    options: Array<IOption>;
     liveData?: IModalLiveDataCondition;
     isSearch?: boolean;
     isMulti?: boolean;

package/dist/interfaces/modal.d.ts

@@ -10,7 +10,7 @@ import { IOption } from './option';
 import { IMakeButton } from './make-button';
 export type IModalField = IMakeSelect | IMakeInput | IMakeFieldGroup | IMakeTextarea | IMakeToggle | IMakeDescription | IMakeUpload | IMakeButton;
 export type IFormField = IMakeSelect | IMakeInput | IMakeTextarea | IMakeToggle;
-export type IModalRenderCondition = Record<string, Array<string | number>>;
+export type IModalRenderCondition = Record<string, Array<string | number | boolean> | undefined>;
 export type IModalLiveDataCondition = {
     action: (data: string, ...args: any[]) => Promise<Array<IOption>>;
     condition: Array<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dynamic-modal",
-  "version": "1.1.1",
+  "version": "1.1.4",
   "description": "The dynamic-modal is a solution of creation different modals into project using a json configuration file",
   "main": "index.js",
   "scripts": {

package/src/components/make-input/make-input.tsx

@@ -7,9 +7,9 @@ import { IMakeInputProps } from '../../interfaces/make-input'
 import { ComponentStateContext } from '../../context/component/component-state'
 import { generateId } from '../../tools/general'
 
-const MakeInput: FC<IMakeInputProps> = ({ element: { validation: { required, ...validation }, ...element }, ...props }) => {
+const MakeInput: FC<IMakeInputProps> = ({ element: { validation: { required, ...validation }, enableIf, renderIf, ...element }, ...props }) => {
   const { Input } = useContext(ComponentStateContext)
-  const { render, enable, checkField } = useFieldRender({ ...props, element })
+  const { render, enable, checkField } = useFieldRender({ ...props, element: { enableIf, renderIf, ...element} })
 
   const elementId = useMemo(() => element.id ?? generateId(), [])
   

package/src/components/make-select/make-select.tsx

@@ -7,9 +7,9 @@ import { generateId } from '../../tools/general'
 import { IMakeSelectProps } from '../../interfaces/make-select'
 import { ComponentStateContext } from '../../context/component/component-state'
 
-const MakeSelect: FC<IMakeSelectProps> = ({ element: { validation: { required, ...validation }, ...element }, ...props }) => {
+const MakeSelect: FC<IMakeSelectProps> = ({ element: { validation: { required, ...validation }, enableIf, renderIf, ...element }, ...props }) => {
   const { Select } = useContext(ComponentStateContext)
-  const { render, enable, checkField, liveData, liveSearching } = useFieldRender({ ...props, element })
+  const { render, enable, checkField, liveData, liveSearching } = useFieldRender({ ...props, element: { renderIf, enableIf, ...element} })
 
   const elementId = useMemo(() => element.id ?? generateId(), [])
 

package/src/components/make-textarea/make-textarea.tsx

@@ -7,9 +7,9 @@ import { generateId } from '../../tools/general'
 import { IMakeTextareaProps } from '../../interfaces/make-textarea'
 import { ComponentStateContext } from '../../context/component/component-state'
 
-const MakeTextarea: FC<IMakeTextareaProps> = ({ element: { validation: { required, ...validation }, ...element }, ...props }) => {
+const MakeTextarea: FC<IMakeTextareaProps> = ({ element: { validation: { required, ...validation }, enableIf, renderIf, ...element }, ...props }) => {
   const { Textarea } = useContext(ComponentStateContext)
-  const { render, enable, checkField } = useFieldRender({ ...props, element })
+  const { render, enable, checkField } = useFieldRender({ ...props, element: { enableIf, renderIf, ...element } })
 
   const elementId = useMemo(() => element.id ?? generateId(), [])
   

package/src/components/make-toggle/make-toggle.tsx

@@ -7,9 +7,9 @@ import { IMakeToggleProps } from '../../interfaces/make-toggle'
 import { generateId } from '../../tools/general'
 import { ComponentStateContext } from '../../context/component/component-state'
 
-const MakeToggle: FC<IMakeToggleProps> = ({ element: { validation: { required, ...validation }, ...element }, ...props }) => {
+const MakeToggle: FC<IMakeToggleProps> = ({ element: { validation: { required, ...validation }, enableIf, renderIf, ...element }, ...props }) => {
   const { Toggle } = useContext(ComponentStateContext)
-  const { render, enable, checkField } = useFieldRender({ ...props, element })
+  const { render, enable, checkField } = useFieldRender({ ...props, element: { enableIf, renderIf, ...element } })
 
   const elementId = useMemo(() => element.id ?? generateId(), [])
   

package/src/components/make-upload/make-upload.tsx

@@ -6,8 +6,8 @@ import InputUpload from '../input-upload/input-upload'
 import { useFieldRender } from '../../hooks/field-render'
 import { IMakeUploadProps } from '../../interfaces/make-upload'
 
-const MakeUpload : FC<IMakeUploadProps> = ({ element: { validation: { required, ...validation }, ...element }, ...props }) => {
-  const { render, enable } = useFieldRender({ ...props, element })
+const MakeUpload : FC<IMakeUploadProps> = ({ element: { validation: { required, ...validation }, enableIf, renderIf, ...element }, ...props }) => {
+  const { render, enable } = useFieldRender({ ...props, element: { enableIf, renderIf, ...element} })
 
   return (
     render

package/src/hooks/field-render.ts

@@ -20,11 +20,11 @@ export interface IFieldRender {
   liveSearching?: boolean;
 }
 
-export interface IFieldRenderProps extends Pick<IFieldProps, 'setValue'|'unregister'> {
-  element: Partial<Pick<IField, 'enableIf'|'renderIf'|'name' >> & Partial<Record<'liveData', IModalLiveDataCondition>>
+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 => {
+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)
@@ -77,13 +77,13 @@ export const useFieldRender = ({element, setValue, unregister}: IFieldRenderProp
       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('*')
+        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('')
+        const enableStatus: boolean = (element.enableIf as IModalRenderCondition)[key]!.includes(targetField) || (element.enableIf as IModalRenderCondition)[key]!.includes('*')
         if (enable !== enableStatus) setEnable(enableStatus)
       }
 

package/src/interfaces/field.ts

@@ -1,6 +1,7 @@
 /* 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
@@ -14,8 +15,8 @@ export interface IField {
   style?: CSSProperties
   placeholder?: string
   defaultValue?: any
-  renderIf?: Record<string, Array<string | number>>
-  enableIf?: Record<string, Array<string | number>>
+  renderIf?: IModalRenderCondition
+  enableIf?: IModalRenderCondition
   validation: {
     required: boolean
     regex?: RegExp

package/src/interfaces/make-select.ts

@@ -1,9 +1,10 @@
 import { IField, IFieldProps } from './field'
 import { IModalLiveDataCondition } from './modal'
+import { IOption } from './option'
 
 export interface IMakeSelect extends IField {
   elementType: 'select'
-  options: Array<Record<'id'|'name', string>>
+  options: Array<IOption>
   liveData?: IModalLiveDataCondition
   isSearch?: boolean
   isMulti?: boolean

package/src/interfaces/modal.ts

@@ -14,12 +14,13 @@ export type IModalField = IMakeSelect | IMakeInput | IMakeFieldGroup | IMakeText
 
 export type IFormField = IMakeSelect | IMakeInput | IMakeTextarea | IMakeToggle
 
-export type IModalRenderCondition = Record<string, Array<string | number>>
+export type IModalRenderCondition =  Record<string, Array<string | number | boolean> | undefined>
 
 export type IModalLiveDataCondition = {
   action: (data: string, ...args: any[]) => Promise<Array<IOption>>
   condition: Array<string>
 }
+
 export interface IModalConfigProps {
   reservedData?: Record<string, any>
   title: string