dynamic-modal 1.0.10 → 1.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/.idea/dynamic-modal.iml +12 -0
  2. package/.idea/inspectionProfiles/Project_Default.xml +6 -0
  3. package/.idea/modules.xml +8 -0
  4. package/.idea/vcs.xml +6 -0
  5. package/README-ES.md +119 -119
  6. package/README.md +119 -119
  7. package/dist/components/input-upload/input-upload.js +18 -8
  8. package/dist/components/make-autocomplete/make-autocomplete.js +24 -17
  9. package/dist/components/make-input/make-input.js +24 -17
  10. package/dist/components/make-multi-select/make-multi-select.js +24 -17
  11. package/dist/components/make-select/make-select.js +24 -17
  12. package/dist/components/make-textarea/make-textarea.js +23 -16
  13. package/dist/components/make-toggle/make-toggle.js +36 -14
  14. package/dist/components/make-upload/make-upload.js +20 -8
  15. package/dist/components/portal/portal.js +17 -7
  16. package/dist/interfaces/field.d.ts +7 -4
  17. package/dist/interfaces/input-upload.d.ts +1 -15
  18. package/dist/interfaces/modal.d.ts +1 -1
  19. package/dist/modal.js +17 -7
  20. package/eslint.config.mjs +13 -13
  21. package/examples/enable-if.ts +129 -129
  22. package/examples/live-data.ts +63 -63
  23. package/examples/render-if.ts +130 -130
  24. package/examples/simple.ts +76 -76
  25. package/index.ts +2 -2
  26. package/package.json +48 -48
  27. package/src/components/input-upload/input-upload.tsx +72 -72
  28. package/src/components/make-autocomplete/make-autocomplete.tsx +54 -53
  29. package/src/components/make-button/make-button.tsx +17 -17
  30. package/src/components/make-input/make-input.tsx +47 -46
  31. package/src/components/make-multi-select/make-multi-select.tsx +56 -55
  32. package/src/components/make-select/make-select.tsx +54 -53
  33. package/src/components/make-text/make-text.tsx +16 -16
  34. package/src/components/make-textarea/make-textarea.tsx +48 -47
  35. package/src/components/make-title/make-title.tsx +12 -12
  36. package/src/components/make-toggle/make-toggle.tsx +44 -44
  37. package/src/components/make-upload/make-upload.tsx +34 -41
  38. package/src/components/portal/portal.tsx +36 -36
  39. package/src/hooks/field-render.ts +108 -108
  40. package/src/hooks/modal-handler.ts +37 -37
  41. package/src/interfaces/field.ts +35 -31
  42. package/src/interfaces/input-upload.ts +21 -37
  43. package/src/interfaces/make-autocomplete.ts +13 -13
  44. package/src/interfaces/make-button.ts +20 -20
  45. package/src/interfaces/make-field-group.ts +13 -13
  46. package/src/interfaces/make-field.ts +14 -14
  47. package/src/interfaces/make-multi-select.ts +14 -14
  48. package/src/interfaces/make-select.ts +12 -12
  49. package/src/interfaces/make-text.ts +12 -12
  50. package/src/interfaces/make-textarea.ts +11 -11
  51. package/src/interfaces/make-title.ts +3 -3
  52. package/src/interfaces/make-toggle.ts +9 -9
  53. package/src/interfaces/make-upload.ts +14 -14
  54. package/src/interfaces/modal.ts +51 -51
  55. package/src/interfaces/option.ts +3 -3
  56. package/src/interfaces/portal.ts +8 -8
  57. package/src/modal.tsx +174 -174
  58. package/src/tools/general.ts +6 -6
  59. package/tsconfig.json +13 -13
package/.idea/dynamic-modal.iml ADDED
@@ -0,0 +1,12 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <module type="WEB_MODULE" version="4">
3
+ <component name="NewModuleRootManager">
4
+ <content url="file://$MODULE_DIR$">
5
+ <excludeFolder url="file://$MODULE_DIR$/.tmp" />
6
+ <excludeFolder url="file://$MODULE_DIR$/temp" />
7
+ <excludeFolder url="file://$MODULE_DIR$/tmp" />
8
+ </content>
9
+ <orderEntry type="inheritedJdk" />
10
+ <orderEntry type="sourceFolder" forTests="false" />
11
+ </component>
12
+ </module>
package/.idea/inspectionProfiles/Project_Default.xml ADDED
@@ -0,0 +1,6 @@
1
+ <component name="InspectionProjectProfileManager">
2
+ <profile version="1.0">
3
+ <option name="myName" value="Project Default" />
4
+ <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
5
+ </profile>
6
+ </component>
package/.idea/modules.xml ADDED
@@ -0,0 +1,8 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <project version="4">
3
+ <component name="ProjectModuleManager">
4
+ <modules>
5
+ <module fileurl="file://$PROJECT_DIR$/.idea/dynamic-modal.iml" filepath="$PROJECT_DIR$/.idea/dynamic-modal.iml" />
6
+ </modules>
7
+ </component>
8
+ </project>
package/.idea/vcs.xml ADDED
@@ -0,0 +1,6 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <project version="4">
3
+ <component name="VcsDirectoryMappings">
4
+ <mapping directory="" vcs="Git" />
5
+ </component>
6
+ </project>
package/README-ES.md CHANGED
@@ -1,119 +1,119 @@
1
- # dynamic-modal
2
-
3
- `dynamic-modal` es una librería construida en typescript para crear modales reutilizables en aplicaciones React y Next.js, utilizando JSON para configurar su estructura sin necesidad de escribir HTML. Esto facilita su construcción y personalización, permitiendo abrir y cerrar modales mediante un custom hook.
4
-
5
- ## Requisitos
6
-
7
- Para que `dynamic-modal` funcione correctamente, debes instalar las siguientes dependencias:
8
-
9
- - React 18
10
- - React-DOM 18
11
- - react-hook-form
12
- - NextUI
13
-
14
- Además, es compatible con **Next.js 14**.
15
-
16
- ## Instalación
17
-
18
- Puedes instalar la librería a través de npm:
19
-
20
- ```bash
21
- npm install dynamic-modal
22
- ```
23
-
24
- ## Configuración para Next.js 14
25
- En el provider principal de tu aplicación Next.js, debes envolver tu aplicación con el componente `NextUIProvider` para que `dynamic-modal` funcione adecuadamente. Aquí un ejemplo:
26
-
27
- ```jsx
28
- import { NextUIProvider } from '@nextui-org/react';
29
-
30
- function Provider({ children }: Readonly<{ children: ReactNode }>) {
31
- return (
32
- <NextUIProvider>
33
- <Component {...pageProps} />
34
- </NextUIProvider>
35
- );
36
- }
37
-
38
- export default Provider;
39
-
40
- ```
41
- En el layout principal crea el `portal` para el modal (este componente utiliza react portal)
42
-
43
- ```jsx
44
- //imports...
45
-
46
- export default function RootLayout ({
47
- children
48
- }: Readonly<{
49
- children: ReactNode;
50
- }>) {
51
- return (
52
- <html lang="en">
53
- <body className={inter.className}>
54
- <Provider>
55
- {children}
56
- </Provider>
57
- <div id='modal-portal'/>
58
- </body>
59
- </html>
60
- )
61
- }
62
- ```
63
-
64
- ## Setup for Next.js 13
65
- Edita el archivo llamado `_document.tsx` y crea el `portal` para el modal (este componente utiliza react portal)
66
-
67
- ```jsx
68
- import { Html, Head, Main, NextScript } from 'next/document'
69
-
70
- export default function Document () {
71
- return (
72
- <Html>
73
- <Head />
74
- <body>
75
- <Main />
76
- <div id='modal-portal'/>
77
- <NextScript />
78
- </body>
79
- </Html>
80
- )
81
- }
82
- ```
83
-
84
- ## Uso
85
- Para controlar la apertura y cierre del modal, obtén el custom hook `useModalHandler` y llama a `openModal` cuando necesites mostrar el modal.
86
-
87
- ```jsx
88
- import { useModalHandler, DynamicModal } from 'dynamic-modal';
89
- import { Button } from '@nextui-org/react';
90
- //Crea el modal, importa y usa
91
- import testModal from '@modal-config/test';
92
-
93
- function ExampleComponent() {
94
- const { openModal, modalProps } = useModalHandler();
95
-
96
- return (
97
- <>
98
- <Button
99
- onClick={() => {
100
- openModal(testModal.default({}, (data) => {
101
- console.log('modal data', data);
102
- }));
103
- }}
104
- >
105
- Open modal
106
- </Button>
107
-
108
- <DynamicModal {...modalProps} />
109
- </>
110
- );
111
- }
112
-
113
- export default ExampleComponent;
114
-
115
- ```
116
-
117
- ## Ejemplos
118
- La carpeta `examples` en el repositorio contiene distintos modos de configuración para ayudarte a personalizar tu modal.
119
-
1
+ # dynamic-modal
2
+
3
+ `dynamic-modal` es una librería construida en typescript para crear modales reutilizables en aplicaciones React y Next.js, utilizando JSON para configurar su estructura sin necesidad de escribir HTML. Esto facilita su construcción y personalización, permitiendo abrir y cerrar modales mediante un custom hook.
4
+
5
+ ## Requisitos
6
+
7
+ Para que `dynamic-modal` funcione correctamente, debes instalar las siguientes dependencias:
8
+
9
+ - React 18
10
+ - React-DOM 18
11
+ - react-hook-form
12
+ - NextUI
13
+
14
+ Además, es compatible con **Next.js 14**.
15
+
16
+ ## Instalación
17
+
18
+ Puedes instalar la librería a través de npm:
19
+
20
+ ```bash
21
+ npm install dynamic-modal
22
+ ```
23
+
24
+ ## Configuración para Next.js 14
25
+ En el provider principal de tu aplicación Next.js, debes envolver tu aplicación con el componente `NextUIProvider` para que `dynamic-modal` funcione adecuadamente. Aquí un ejemplo:
26
+
27
+ ```jsx
28
+ import { NextUIProvider } from '@nextui-org/react';
29
+
30
+ function Provider({ children }: Readonly<{ children: ReactNode }>) {
31
+ return (
32
+ <NextUIProvider>
33
+ <Component {...pageProps} />
34
+ </NextUIProvider>
35
+ );
36
+ }
37
+
38
+ export default Provider;
39
+
40
+ ```
41
+ En el layout principal crea el `portal` para el modal (este componente utiliza react portal)
42
+
43
+ ```jsx
44
+ //imports...
45
+
46
+ export default function RootLayout ({
47
+ children
48
+ }: Readonly<{
49
+ children: ReactNode;
50
+ }>) {
51
+ return (
52
+ <html lang="en">
53
+ <body className={inter.className}>
54
+ <Provider>
55
+ {children}
56
+ </Provider>
57
+ <div id='modal-portal'/>
58
+ </body>
59
+ </html>
60
+ )
61
+ }
62
+ ```
63
+
64
+ ## Setup for Next.js 13
65
+ Edita el archivo llamado `_document.tsx` y crea el `portal` para el modal (este componente utiliza react portal)
66
+
67
+ ```jsx
68
+ import { Html, Head, Main, NextScript } from 'next/document'
69
+
70
+ export default function Document () {
71
+ return (
72
+ <Html>
73
+ <Head />
74
+ <body>
75
+ <Main />
76
+ <div id='modal-portal'/>
77
+ <NextScript />
78
+ </body>
79
+ </Html>
80
+ )
81
+ }
82
+ ```
83
+
84
+ ## Uso
85
+ Para controlar la apertura y cierre del modal, obtén el custom hook `useModalHandler` y llama a `openModal` cuando necesites mostrar el modal.
86
+
87
+ ```jsx
88
+ import { useModalHandler, DynamicModal } from 'dynamic-modal';
89
+ import { Button } from '@nextui-org/react';
90
+ //Crea el modal, importa y usa
91
+ import testModal from '@modal-config/test';
92
+
93
+ function ExampleComponent() {
94
+ const { openModal, modalProps } = useModalHandler();
95
+
96
+ return (
97
+ <>
98
+ <Button
99
+ onClick={() => {
100
+ openModal(testModal.default({}, (data) => {
101
+ console.log('modal data', data);
102
+ }));
103
+ }}
104
+ >
105
+ Open modal
106
+ </Button>
107
+
108
+ <DynamicModal {...modalProps} />
109
+ </>
110
+ );
111
+ }
112
+
113
+ export default ExampleComponent;
114
+
115
+ ```
116
+
117
+ ## Ejemplos
118
+ La carpeta `examples` en el repositorio contiene distintos modos de configuración para ayudarte a personalizar tu modal.
119
+
package/README.md CHANGED
@@ -1,119 +1,119 @@
1
- # dynamic-modal
2
-
3
- `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.
4
-
5
- ## Requirements
6
-
7
- To use `dynamic-modal` properly, ensure you have the following dependencies installed:
8
-
9
- - React 18
10
- - React-DOM 18
11
- - react-hook-form
12
- - NextUI
13
-
14
- Additionally, `dynamic-modal` is compatible with **Next.js 14**.
15
-
16
- ## Installation
17
-
18
- Install the library via npm:
19
-
20
- ```bash
21
- npm install dynamic-modal
22
- ```
23
-
24
- ## Setup for Next.js 14
25
- In the main provider of your Next.js application, wrap your app with the `NextUIProvider` component to ensure `dynamic-modal` functions properly. Here’s an example:
26
-
27
- ```jsx
28
- import { NextUIProvider } from '@nextui-org/react';
29
-
30
- function Provider({ children }: Readonly<{ children: ReactNode }>) {
31
- return (
32
- <NextUIProvider>
33
- <Component {...pageProps} />
34
- </NextUIProvider>
35
- );
36
- }
37
-
38
- export default Provider;
39
-
40
- ```
41
- In the root layout define `portal` for modal (this component use react portal)
42
-
43
- ```jsx
44
- //imports...
45
-
46
- export default function RootLayout ({
47
- children
48
- }: Readonly<{
49
- children: ReactNode;
50
- }>) {
51
- return (
52
- <html lang="en">
53
- <body className={inter.className}>
54
- <Provider>
55
- {children}
56
- </Provider>
57
- <div id='modal-portal'/>
58
- </body>
59
- </html>
60
- )
61
- }
62
- ```
63
-
64
- ## Setup for Next.js 13
65
- Edit file named `_document.tsx` and define `portal` for modal (this component use react portal)
66
-
67
- ```jsx
68
- import { Html, Head, Main, NextScript } from 'next/document'
69
-
70
- export default function Document () {
71
- return (
72
- <Html>
73
- <Head />
74
- <body>
75
- <Main />
76
- <div id='modal-portal'/>
77
- <NextScript />
78
- </body>
79
- </Html>
80
- )
81
- }
82
- ```
83
-
84
- ## Usage
85
- To control the modal’s open and close states, use the `useModalHandler` custom hook and call `openModal` whenever you need to display the modal.
86
-
87
- ```jsx
88
- import { useModalHandler, DynamicModal } from 'dynamic-modal';
89
- import { Button } from '@nextui-org/react';
90
- //Create your modal, import and use
91
- import testModal from '@modal-config/test';
92
-
93
- function ExampleComponent() {
94
- const { openModal, modalProps } = useModalHandler();
95
-
96
- return (
97
- <>
98
- <Button
99
- onClick={() => {
100
- openModal(testModal.default({}, (data) => {
101
- console.log('modal data', data);
102
- }));
103
- }}
104
- >
105
- Open modal
106
- </Button>
107
-
108
- <DynamicModal {...modalProps} />
109
- </>
110
- );
111
- }
112
-
113
- export default ExampleComponent;
114
-
115
- ```
116
-
117
- ## Examples
118
- The examples folder in the repository contains different configuration modes to help you customize your modal.
119
-
1
+ # dynamic-modal
2
+
3
+ `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.
4
+
5
+ ## Requirements
6
+
7
+ To use `dynamic-modal` properly, ensure you have the following dependencies installed:
8
+
9
+ - React 18
10
+ - React-DOM 18
11
+ - react-hook-form
12
+ - NextUI
13
+
14
+ Additionally, `dynamic-modal` is compatible with **Next.js 14**.
15
+
16
+ ## Installation
17
+
18
+ Install the library via npm:
19
+
20
+ ```bash
21
+ npm install dynamic-modal
22
+ ```
23
+
24
+ ## Setup for Next.js 14
25
+ In the main provider of your Next.js application, wrap your app with the `NextUIProvider` component to ensure `dynamic-modal` functions properly. Here’s an example:
26
+
27
+ ```jsx
28
+ import { NextUIProvider } from '@nextui-org/react';
29
+
30
+ function Provider({ children }: Readonly<{ children: ReactNode }>) {
31
+ return (
32
+ <NextUIProvider>
33
+ <Component {...pageProps} />
34
+ </NextUIProvider>
35
+ );
36
+ }
37
+
38
+ export default Provider;
39
+
40
+ ```
41
+ In the root layout define `portal` for modal (this component use react portal)
42
+
43
+ ```jsx
44
+ //imports...
45
+
46
+ export default function RootLayout ({
47
+ children
48
+ }: Readonly<{
49
+ children: ReactNode;
50
+ }>) {
51
+ return (
52
+ <html lang="en">
53
+ <body className={inter.className}>
54
+ <Provider>
55
+ {children}
56
+ </Provider>
57
+ <div id='modal-portal'/>
58
+ </body>
59
+ </html>
60
+ )
61
+ }
62
+ ```
63
+
64
+ ## Setup for Next.js 13
65
+ Edit file named `_document.tsx` and define `portal` for modal (this component use react portal)
66
+
67
+ ```jsx
68
+ import { Html, Head, Main, NextScript } from 'next/document'
69
+
70
+ export default function Document () {
71
+ return (
72
+ <Html>
73
+ <Head />
74
+ <body>
75
+ <Main />
76
+ <div id='modal-portal'/>
77
+ <NextScript />
78
+ </body>
79
+ </Html>
80
+ )
81
+ }
82
+ ```
83
+
84
+ ## Usage
85
+ To control the modal’s open and close states, use the `useModalHandler` custom hook and call `openModal` whenever you need to display the modal.
86
+
87
+ ```jsx
88
+ import { useModalHandler, DynamicModal } from 'dynamic-modal';
89
+ import { Button } from '@nextui-org/react';
90
+ //Create your modal, import and use
91
+ import testModal from '@modal-config/test';
92
+
93
+ function ExampleComponent() {
94
+ const { openModal, modalProps } = useModalHandler();
95
+
96
+ return (
97
+ <>
98
+ <Button
99
+ onClick={() => {
100
+ openModal(testModal.default({}, (data) => {
101
+ console.log('modal data', data);
102
+ }));
103
+ }}
104
+ >
105
+ Open modal
106
+ </Button>
107
+
108
+ <DynamicModal {...modalProps} />
109
+ </>
110
+ );
111
+ }
112
+
113
+ export default ExampleComponent;
114
+
115
+ ```
116
+
117
+ ## Examples
118
+ The examples folder in the repository contains different configuration modes to help you customize your modal.
119
+
package/dist/components/input-upload/input-upload.js CHANGED
@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
15
15
  }) : function(o, v) {
16
16
  o["default"] = v;
17
17
  });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
25
35
  var __rest = (this && this.__rest) || function (s, e) {
26
36
  var t = {};
27
37
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -80,7 +90,7 @@ const InputUpload = (_a) => {
80
90
  }, [props.id]);
81
91
  return (react_1.default.createElement("div", { className: 'flex flex-col w-full gap-1 text-center' },
82
92
  props.label && react_1.default.createElement("label", { className: "block mb-2 text-sm font-medium text-gray-900 dark:text-white", htmlFor: `file-input-${elementId}` }, props.label),
83
- 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-${elementId}-help`, id: `file-input-${elementId}`, type: "file", onChange: onChangeHandler }, props)),
93
+ 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-${elementId}-help`, id: `file-input-${elementId}`, type: "file", onChange: onChangeHandler }, props)),
84
94
  react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-300 text-start", id: `file-input-${elementId}-help` }, (_b = props.helpText) === null || _b === void 0 ? void 0 : _b.toUpperCase())));
85
95
  };
86
96
  exports.default = InputUpload;
package/dist/components/make-autocomplete/make-autocomplete.js CHANGED
@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
15
15
  }) : function(o, v) {
16
16
  o["default"] = v;
17
17
  });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
25
35
  var __rest = (this && this.__rest) || function (s, e) {
26
36
  var t = {};
27
37
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -41,22 +51,19 @@ const general_1 = require("../../tools/general");
41
51
  const react_2 = require("@nextui-org/react");
42
52
  const MakeAutocomplete = (_a) => {
43
53
  var _b, _c;
44
- var { element } = _a, props = __rest(_a, ["element"]);
45
- const { render, enable, checkField, liveData, liveSearching } = (0, field_render_1.useFieldRender)(Object.assign({ element }, props));
54
+ var _d = _a.element, _e = _d.validation, { required } = _e, validation = __rest(_e, ["required"]), element = __rest(_d, ["validation"]), props = __rest(_a, ["element"]);
55
+ const { render, enable, checkField, liveData, liveSearching } = (0, field_render_1.useFieldRender)(Object.assign(Object.assign({}, props), { element }));
46
56
  (0, react_1.useEffect)(() => {
47
57
  const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }));
48
58
  return () => subscription.unsubscribe();
49
59
  }, [checkField, props, props.watch]);
50
60
  return (render
51
- ? react_1.default.createElement(react_hook_form_1.Controller, { control: props.control, name: element.name, rules: {
52
- required: element.validation.required,
53
- pattern: {
54
- value: (_b = element.validation.regex) !== null && _b !== void 0 ? _b : /(.*)/,
55
- message: (_c = element.validation.message) !== null && _c !== void 0 ? _c : ''
56
- }
57
- }, render: ({ field: { onChange, value }, fieldState: { invalid } }) => {
61
+ ? react_1.default.createElement(react_hook_form_1.Controller, { control: props.control, name: element.name, rules: Object.assign({ required, pattern: {
62
+ value: (_b = validation.regex) !== null && _b !== void 0 ? _b : /(.*)/,
63
+ message: (_c = validation.message) !== null && _c !== void 0 ? _c : ''
64
+ } }, validation), render: ({ field: { onChange, value }, fieldState: { invalid } }) => {
58
65
  var _a, _b, _c, _d;
59
- return (react_1.default.createElement(react_2.Autocomplete, Object.assign({ size: 'sm' }, element, { isDisabled: (_a = element.disabled) !== null && _a !== void 0 ? _a : !enable, id: (_b = element.id) !== null && _b !== void 0 ? _b : (0, general_1.generateId)(), onSelectionChange: onChange, label: liveSearching ? 'Loading...' : element.label, selectedKey: value, color: invalid ? 'danger' : undefined, isInvalid: invalid, errorMessage: invalid ? ((_c = element.validation.message) !== null && _c !== void 0 ? _c : '') : undefined }), (liveData || ((_d = element.options) !== null && _d !== void 0 ? _d : [])).map((opt) => (react_1.default.createElement(react_2.AutocompleteItem, { key: opt.id, value: opt.id }, opt.name)))));
66
+ return (react_1.default.createElement(react_2.Autocomplete, Object.assign({ size: 'sm' }, element, { isDisabled: (_a = element.disabled) !== null && _a !== void 0 ? _a : !enable, id: (_b = element.id) !== null && _b !== void 0 ? _b : (0, general_1.generateId)(), onSelectionChange: onChange, label: liveSearching ? 'Loading...' : element.label, selectedKey: value, color: invalid ? 'danger' : undefined, isInvalid: invalid, errorMessage: invalid ? ((_c = validation.message) !== null && _c !== void 0 ? _c : '') : undefined }), (liveData || ((_d = element.options) !== null && _d !== void 0 ? _d : [])).map((opt) => (react_1.default.createElement(react_2.AutocompleteItem, { key: opt.id, value: opt.id }, opt.name)))));
60
67
  } })
61
68
  : react_1.default.createElement(react_1.default.Fragment, null));
62
69
  };