dynamic-modal 1.1.1 → 1.1.7

package/README.md

@@ -1,216 +1,217 @@
-# dynamic-modal
-
-`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
-
-To use `dynamic-modal` properly, ensure you have the following dependencies installed:
-
-- React
-
-Additionally, `dynamic-modal` is compatible with **Next.js**.
-
-## Installation
-
-Install the library via npm:
-
-```bash
-npm install dynamic-modal
-```
-
-## Setup for Next.js (14 or 15)
-Define your components for use inside modal, create file and configure all modal components. Here´s an example using HeroUI (previously NextUI):
-
-```jsx
-'use client'
-import { Autocomplete, AutocompleteItem, Button, Input, Select, SelectItem, Switch, Textarea } from "@heroui/react";
-import { IComponentState } from "dynamic-modal/src/interfaces/component-state";
-
-export const ModalComponents: IComponentState = {
-  ModalButtonCancel: (props) => {
-    return (
-      <Button 
-        {...props} 
-        color={props.color as "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined}  
-        variant={'bordered'}
-      >
-        {props.text}
-      </Button>
-    )
-  },
-  ModalButtonAction: (props) => {
-    return (
-      <Button 
-        {...props} 
-        color={props.color as "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined} 
-        variant={'solid'}
-      >
-        {props.text}
-      </Button>)
-  },
-  Button: ({ text, ...props }) => {
-    return (
-      <Button 
-        {...props} 
-        color={props.color as "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined}  
-        variant={props.variant as "flat" | "bordered" | "solid" | "light" | "faded" | "shadow" | "ghost" | undefined}
-      >
-        {text}
-      </Button>)
-  },
-  Input: ({ invalid, error, disabled, onChange, ...props }) => {
-    return (
-      <Input 
-        {...props}
-        onValueChange={onChange}
-        errorMessage={error?.message}
-        isInvalid={invalid}
-        isDisabled={disabled}
-        />
-    )
-  },
-  Select: ({ options, invalid, error, isMulti, isSearch, disabled, onChange, value, ...props }) => {
-    return (
-      !isSearch ?
-      <Select 
-        {...props}
-        selectedKeys={isMulti ? value : [value]}
-        onSelectionChange={onChange}
-        selectionMode={isMulti ? 'multiple' : 'single'}
-        errorMessage={error?.message}
-        isInvalid={invalid}
-        isDisabled={disabled}
-        >
-        {options.map((option) => (
-          <SelectItem key={option.id}>{option.name}</SelectItem>
-        ))}
-      </Select> :
-      <Autocomplete 
-        {...props} 
-        selectedKey={value}
-        onSelectionChange={onChange}
-        errorMessage={error?.message}
-        isInvalid={invalid}
-        isDisabled={disabled}
-        >
-        {options.map((item) => (
-          <AutocompleteItem key={item.id}>{item.name}</AutocompleteItem>
-        ))}
-      </Autocomplete>
-    )
-  },
-  Textarea: ({ invalid, error, disabled, ...props }) => {
-    return (
-      <Textarea 
-        {...props}
-        errorMessage={error?.message}
-        isInvalid={invalid}
-        isDisabled={disabled}
-        />
-    )
-  },
-  Toggle: ({ value, onChange, label, invalid, ...props }) => {
-    return(
-      <Switch {...props} isSelected={value} onValueChange={onChange}>
-        {label}
-      </Switch>
-    )
-  }
-}
-```
-
-In the main provider of your React application, import your modal components (defined previously) and wrap your app with the `ComponentState` component to ensure `dynamic-modal` functions properly. Here’s an example:
-
-```jsx
-import { ComponentState } from 'dynamic-modal'
-import { ModalComponents } from "@data/modal-component/modal-component";
-
-function Provider({ children }: Readonly<{ children: ReactNode }>) {
-  return (
-    <ComponentState components={ModalComponents}>
-      <Component {...pageProps} />
-    </ComponentState>
-  );
-}
-
-export default Provider;
-
-```
-In the root layout define `portal` for modal (this component use react portal)
-
-```jsx
-//imports...
-
-export default function RootLayout ({
-  children
-}: Readonly<{
-  children: ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>
-        <Provider>
-          {children}
-        </Provider>
-        <div id='modal-portal'/>
-      </body>
-    </html>
-  )
-}
-```
-
-## Setup for Next.js 13 and old
-Edit file named `_document.tsx` and define `portal` for modal (this component use react portal)
-
-```jsx
-import { Html, Head, Main, NextScript } from 'next/document'
-
-export default function Document () {
-  return (
-    <Html>
-      <Head />
-      <body>
-        <Main />
-        <div id='modal-portal'/>
-        <NextScript />
-      </body>
-    </Html>
-  )
-}
-```
-
-## Usage
-To control the modal’s open and close states, use the `useModalHandler` custom hook and call `openModal` whenever you need to display the modal.
-
-```jsx
-import { useModalHandler, DynamicModal } from 'dynamic-modal';
-import { Button } from '@nextui-org/react';
-//Create your modal, import and use
-import testModal from '@modal-config/test';
-
-function ExampleComponent() {
-  const { openModal, modalProps } = useModalHandler();
-
-  return (
-    <>
-      <Button
-        onClick={() => {
-          openModal(testModal.default({}, (data) => {
-            console.log('modal data', data);
-          }));
-        }}
-      >
-        Open modal
-      </Button>
-
-      <DynamicModal {...modalProps} />
-    </>
-  );
-}
-
-export default ExampleComponent;
-
-```
-
-## Examples
+# 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
+
+To use `dynamic-modal` properly, ensure you have the following dependencies installed:
+
+- React
+
+Additionally, `dynamic-modal` is compatible with **Next.js**.
+
+## Installation
+
+Install the library via npm:
+
+```bash
+npm install dynamic-modal
+```
+
+## Setup for Next.js (14 or 15)
+Define your components for use inside modal, create file and configure all modal components. Here´s an example using HeroUI (previously NextUI):
+
+```jsx
+'use client'
+import { Autocomplete, AutocompleteItem, Button, Input, Select, SelectItem, Switch, Textarea } from "@heroui/react"
+import { IComponentState } from "dynamic-modal/src/interfaces/component-state"
+
+export const ModalComponents: IComponentState = {
+  ModalButtonCancel: (props) => {
+    return (
+      <Button 
+        {...props} 
+        color={props.color as "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined}  
+        variant={'bordered'}
+      >
+        {props.text}
+      </Button>
+    )
+  },
+  ModalButtonAction: (props) => {
+    return (
+      <Button 
+        {...props} 
+        color={props.color as "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined} 
+        variant={'solid'}
+      >
+        {props.text}
+      </Button>)
+  },
+  Button: ({ text, ...props }) => {
+    return (
+      <Button 
+        {...props} 
+        color={props.color as "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined}  
+        variant={props.variant as "flat" | "bordered" | "solid" | "light" | "faded" | "shadow" | "ghost" | undefined}
+      >
+        {text}
+      </Button>)
+  },
+  Input: ({ invalid, error, disabled, onChange, ...props }) => {
+    return (
+      <Input 
+        {...props}
+        onValueChange={onChange}
+        errorMessage={error?.message}
+        isInvalid={invalid}
+        isDisabled={disabled}
+        />
+    )
+  },
+  Select: ({ options, invalid, error, isMulti, isSearch, disabled, onChange, value, ...props }) => {
+    return (
+      !isSearch ?
+      <Select 
+        {...props}
+        selectedKeys={isMulti ? value : [value]}
+        onSelectionChange={onChange}
+        selectionMode={isMulti ? 'multiple' : 'single'}
+        errorMessage={error?.message}
+        isInvalid={invalid}
+        isDisabled={disabled}
+        >
+        {options.map((option) => (
+          <SelectItem key={option.id}>{option.name}</SelectItem>
+        ))}
+      </Select> :
+      <Autocomplete 
+        {...props} 
+        selectedKey={value}
+        onSelectionChange={onChange}
+        errorMessage={error?.message}
+        isInvalid={invalid}
+        isDisabled={disabled}
+        >
+        {options.map((item) => (
+          <AutocompleteItem key={item.id}>{item.name}</AutocompleteItem>
+        ))}
+      </Autocomplete>
+    )
+  },
+  Textarea: ({ invalid, error, disabled, ...props }) => {
+    return (
+      <Textarea 
+        {...props}
+        errorMessage={error?.message}
+        isInvalid={invalid}
+        isDisabled={disabled}
+        />
+    )
+  },
+  Toggle: ({ value, onChange, label, invalid, ...props }) => {
+    return(
+      <Switch {...props} isSelected={value} onValueChange={onChange}>
+        {label}
+      </Switch>
+    )
+  }
+}
+```
+
+In the main provider of your React application, import your modal components (defined previously) and wrap your app with the `ComponentState` component to ensure `dynamic-modal` functions properly. Here’s an example:
+
+```jsx
+import { ComponentState } from 'dynamic-modal'
+import { ModalComponents } from "@data/modal-component/modal-component"
+
+function Provider({ children }: Readonly<{ children: ReactNode }>) {
+  return (
+    <ComponentState components={ModalComponents}>
+      <Component {...pageProps} />
+    </ComponentState>
+  )
+}
+
+export default Provider
+
+```
+In the root layout define `portal` for modal (this component use react portal)
+
+```jsx
+//imports...
+
+export default function RootLayout ({
+  children
+}: Readonly<{
+  children: ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <Provider>
+          {children}
+        </Provider>
+        <div id='modal-portal'/>
+      </body>
+    </html>
+  )
+}
+```
+
+## Setup for Next.js 13 and old
+Edit file named `_document.tsx` and define `portal` for modal (this component use react portal)
+
+```jsx
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document () {
+  return (
+    <Html>
+      <Head />
+      <body>
+        <Main />
+        <div id='modal-portal'/>
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
+```
+
+## Usage
+To control the modal’s open and close states, use the `useModalHandler` custom hook and call `openModal` whenever you need to display the modal.
+
+```jsx
+import { useModalHandler, DynamicModal } from 'dynamic-modal'
+import { Button } from '@nextui-org/react'
+//Create your modal, import and use
+import testModal from '@modal-config/test'
+
+function ExampleComponent() {
+  const { openModal, modalProps } = useModalHandler()
+
+  return (
+    <>
+      <Button
+        onClick={() => {
+          openModal(testModal.default({}, (data) => {
+            console.log('modal data', data)
+          }))
+        }}
+      >
+        Open modal
+      </Button>
+
+      <DynamicModal {...modalProps} />
+    </>
+  )
+}
+
+export default ExampleComponent
+
+```
+
+## Examples
 The examples folder in the repository contains different configuration modes to help you customize your modal.

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

@@ -56,7 +56,7 @@ const InputUpload = (_a) => {
     };
     return (react_1.default.createElement("div", { className: 'flex flex-col w-full gap-1 text-center' },
         props.label && react_1.default.createElement("label", { className: "block mb-2 text-sm font-medium text-gray-900 dark:text-white", htmlFor: `file-input-${props.id}` }, props.label),
-        react_1.default.createElement("input", Object.assign({ className: "file:transition-all file:delay-150 block w-full text-sm text-slate-500\n        file:mr-4 file:py-2 file:px-4 file:rounded-md\n        file:border-0 file:text-sm file:font-semibold\n        file:bg-gray-100 file:text-blue-600\n        hover:file:bg-blue-700 hover:file:text-white cursor-pointer disabled:cursor-not-allowed", "aria-describedby": `file-input-${props.id}-help`, id: `file-input-${props.id}`, type: "file", onChange: onChangeHandler }, props)),
+        react_1.default.createElement("input", Object.assign({ className: "file:transition-all file:delay-150 block w-full text-sm text-slate-500\r\n        file:mr-4 file:py-2 file:px-4 file:rounded-md\r\n        file:border-0 file:text-sm file:font-semibold\r\n        file:bg-gray-100 file:text-blue-600\r\n        hover:file:bg-blue-700 hover:file:text-white cursor-pointer disabled:cursor-not-allowed", "aria-describedby": `file-input-${props.id}-help`, id: `file-input-${props.id}`, type: "file", onChange: onChangeHandler }, props)),
         react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-300 text-start", id: `file-input-${props.id}-help` }, (_b = props.helpText) === null || _b === void 0 ? void 0 : _b.toUpperCase())));
 };
 exports.default = InputUpload;

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

@@ -16,23 +16,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const component_state_1 = require("../../context/component/component-state");

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

@@ -16,23 +16,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -52,9 +42,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

@@ -16,23 +16,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -52,9 +42,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

@@ -16,23 +16,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -52,9 +42,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 }));