dynamic-modal 1.0.2 → 1.0.3

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 (3) hide show
  1. package/dist/modal.js +150 -150
  2. package/package.json +1 -1
  3. package/src/modal.tsx +5 -5
package/dist/modal.js CHANGED
@@ -1,150 +1,150 @@
1
- "use strict";
2
- 'use client';
3
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
4
- if (k2 === undefined) k2 = k;
5
- var desc = Object.getOwnPropertyDescriptor(m, k);
6
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
7
- desc = { enumerable: true, get: function() { return m[k]; } };
8
- }
9
- Object.defineProperty(o, k2, desc);
10
- }) : (function(o, m, k, k2) {
11
- if (k2 === undefined) k2 = k;
12
- o[k2] = m[k];
13
- }));
14
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
15
- Object.defineProperty(o, "default", { enumerable: true, value: v });
16
- }) : function(o, v) {
17
- o["default"] = v;
18
- });
19
- var __importStar = (this && this.__importStar) || function (mod) {
20
- if (mod && mod.__esModule) return mod;
21
- var result = {};
22
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
23
- __setModuleDefault(result, mod);
24
- return result;
25
- };
26
- var __importDefault = (this && this.__importDefault) || function (mod) {
27
- return (mod && mod.__esModule) ? mod : { "default": mod };
28
- };
29
- Object.defineProperty(exports, "__esModule", { value: true });
30
- exports.Modal = void 0;
31
- const react_1 = __importStar(require("react"));
32
- const react_hook_form_1 = require("react-hook-form");
33
- const react_2 = require("@nextui-org/react");
34
- const portal_1 = require("./components/portal/portal");
35
- const make_toggle_1 = __importDefault(require("./components/make-toggle/make-toggle"));
36
- const make_input_1 = __importDefault(require("./components/make-input/make-input"));
37
- const make_select_1 = __importDefault(require("./components/make-select/make-select"));
38
- const make_textarea_1 = __importDefault(require("./components/make-textarea/make-textarea"));
39
- const make_multi_select_1 = __importDefault(require("./components/make-multi-select/make-multi-select"));
40
- const make_text_1 = __importDefault(require("./components/make-text/make-text"));
41
- const make_upload_1 = __importDefault(require("./components/make-upload/make-upload"));
42
- const make_button_1 = __importDefault(require("./components/make-button/make-button"));
43
- const make_autocomplete_1 = __importDefault(require("./components/make-autocomplete/make-autocomplete"));
44
- const Modal = ({ open, close, config }) => {
45
- var _a, _b;
46
- const [modalReady, setModalReady] = (0, react_1.useState)(undefined);
47
- const [defaultLoaded, setDefaultLoaded] = (0, react_1.useState)(false);
48
- const { control, handleSubmit, getValues, unregister, setValue, watch } = (0, react_hook_form_1.useForm)();
49
- const formValueHandler = (element) => {
50
- var _a;
51
- if (['group', 'upload', 'text'].includes(element.elementType))
52
- return;
53
- const defaultValue = (_a = element.defaultValue) !== null && _a !== void 0 ? _a : '';
54
- const parsedValue = defaultValue === 'true' ? true : defaultValue === 'false' ? false : defaultValue;
55
- setValue(element.name, parsedValue !== null && parsedValue !== void 0 ? parsedValue : '');
56
- };
57
- const autoLoadGroup = (groupFields) => {
58
- groupFields.forEach(element => {
59
- formValueHandler(element);
60
- });
61
- };
62
- const autoLoadField = (modalFields) => {
63
- if (defaultLoaded)
64
- return;
65
- modalFields.forEach(element => {
66
- if (element.elementType === 'group') {
67
- autoLoadGroup(element.groups);
68
- return;
69
- }
70
- formValueHandler(element);
71
- });
72
- setDefaultLoaded(true);
73
- };
74
- const getRender = (element, index, isEndOfRender = false) => {
75
- if (isEndOfRender && modalReady)
76
- setTimeout(() => autoLoadField(modalReady.fields), 200);
77
- const props = {
78
- control,
79
- watch,
80
- setValue
81
- };
82
- return element.elementType === 'input'
83
- ? react_1.default.createElement(make_input_1.default, Object.assign({}, props, { key: `modal-input-${index}`, element: element }))
84
- : element.elementType === 'select'
85
- ? react_1.default.createElement(make_select_1.default, Object.assign({}, props, { key: `modal-select-${index}`, element: element }))
86
- : element.elementType === 'textarea'
87
- ? react_1.default.createElement(make_textarea_1.default, Object.assign({}, props, { key: `modal-textarea-${index}`, element: element }))
88
- : element.elementType === 'toggle'
89
- ? react_1.default.createElement(make_toggle_1.default, Object.assign({}, props, { key: `modal-toggle-${index}`, element: element }))
90
- : element.elementType === 'multiselect'
91
- ? react_1.default.createElement(make_multi_select_1.default, Object.assign({}, props, { key: `modal-multiselect-${index}`, element: element }))
92
- : element.elementType === 'text'
93
- ? react_1.default.createElement(make_text_1.default, Object.assign({}, props, { key: `modal-text-${index}`, element: element }))
94
- : element.elementType === 'upload'
95
- ? react_1.default.createElement(make_upload_1.default, Object.assign({}, props, { key: `modal-upload-${index}`, element: element }))
96
- : element.elementType === 'button'
97
- ? react_1.default.createElement(make_button_1.default, Object.assign({}, props, { key: `modal-button-${index}`, element: element }))
98
- : element.elementType === 'autocomplete'
99
- ? react_1.default.createElement(make_autocomplete_1.default, Object.assign({}, props, { key: `modal-autocomplete-${index}`, element: element }))
100
- : null;
101
- };
102
- const closeHandler = () => {
103
- if ((modalReady === null || modalReady === void 0 ? void 0 : modalReady.cancel) && modalReady.cancel.action)
104
- modalReady.cancel.action();
105
- setTimeout(() => {
106
- const form = getValues();
107
- unregister(Object.keys(form));
108
- setModalReady(undefined);
109
- setDefaultLoaded(false);
110
- close();
111
- }, 200);
112
- };
113
- const actionHandler = (data) => {
114
- if ((modalReady === null || modalReady === void 0 ? void 0 : modalReady.action) && modalReady.action.action)
115
- modalReady.action.action(Object.assign(Object.assign({}, modalReady === null || modalReady === void 0 ? void 0 : modalReady.reservedData), data));
116
- closeHandler();
117
- };
118
- (0, react_1.useEffect)(() => {
119
- if (open && !modalReady)
120
- setModalReady(config);
121
- }, [config, modalReady, open]);
122
- return (modalReady
123
- ? react_1.default.createElement(portal_1.Portal, { closeTime: 200, portalOpen: open, portalTag: '#modal-portal' },
124
- react_1.default.createElement("div", { className: 'rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px]', style: Object.assign({}, modalReady.styles) },
125
- react_1.default.createElement("form", { className: 'flex flex-col p-4 gap-4', autoComplete: 'off', onSubmit: handleSubmit(actionHandler) },
126
- react_1.default.createElement("h2", { className: 'text-bold text-center border-b pb-4' }, modalReady.title),
127
- react_1.default.createElement("div", { className: 'flex flex-col items-center gap-4 py-4', style: {
128
- overflowY: modalReady.overFlowBody ? 'auto' : undefined,
129
- height: modalReady.overFlowBody,
130
- minHeight: modalReady.minHeightBody
131
- } }, modalReady.fields.map((element, index) => {
132
- const isEndOfRender = index + 1 === modalReady.fields.length;
133
- if (element.elementType === 'group') {
134
- return (react_1.default.createElement("div", { key: `modal-group-${index}`, className: 'flex gap-4 w-full', style: element.style }, element.groups
135
- .filter(sub => ['input', 'select', 'toggle', 'multiselect', 'upload', 'button'].includes(sub.elementType))
136
- .map((sub, subIndex) => getRender(sub, index + subIndex, isEndOfRender))));
137
- }
138
- else {
139
- return getRender(element, index, isEndOfRender);
140
- }
141
- })),
142
- react_1.default.createElement("div", { className: 'flex items-center justify-around gap-4 py-2 border-t' },
143
- modalReady.cancel &&
144
- react_1.default.createElement(react_2.Button, { variant: 'bordered', onClick: closeHandler, type: 'reset', className: 'w-[140px]' }, (_a = modalReady.cancel.name) !== null && _a !== void 0 ? _a : 'Close'),
145
- modalReady.action &&
146
- react_1.default.createElement(react_2.Button, { color: 'primary', type: 'submit', className: 'w-[140px]' }, (_b = modalReady.action.name) !== null && _b !== void 0 ? _b : 'Ok')))))
147
- : null);
148
- };
149
- exports.Modal = Modal;
150
- exports.default = exports.Modal;
1
+ "use strict";
2
+ 'use client';
3
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
4
+ if (k2 === undefined) k2 = k;
5
+ var desc = Object.getOwnPropertyDescriptor(m, k);
6
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
7
+ desc = { enumerable: true, get: function() { return m[k]; } };
8
+ }
9
+ Object.defineProperty(o, k2, desc);
10
+ }) : (function(o, m, k, k2) {
11
+ if (k2 === undefined) k2 = k;
12
+ o[k2] = m[k];
13
+ }));
14
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
15
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
16
+ }) : function(o, v) {
17
+ o["default"] = v;
18
+ });
19
+ var __importStar = (this && this.__importStar) || function (mod) {
20
+ if (mod && mod.__esModule) return mod;
21
+ var result = {};
22
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
23
+ __setModuleDefault(result, mod);
24
+ return result;
25
+ };
26
+ var __importDefault = (this && this.__importDefault) || function (mod) {
27
+ return (mod && mod.__esModule) ? mod : { "default": mod };
28
+ };
29
+ Object.defineProperty(exports, "__esModule", { value: true });
30
+ exports.Modal = void 0;
31
+ const react_1 = __importStar(require("react"));
32
+ const react_hook_form_1 = require("react-hook-form");
33
+ const react_2 = require("@nextui-org/react");
34
+ const portal_1 = require("./components/portal/portal");
35
+ const make_toggle_1 = __importDefault(require("./components/make-toggle/make-toggle"));
36
+ const make_input_1 = __importDefault(require("./components/make-input/make-input"));
37
+ const make_select_1 = __importDefault(require("./components/make-select/make-select"));
38
+ const make_textarea_1 = __importDefault(require("./components/make-textarea/make-textarea"));
39
+ const make_multi_select_1 = __importDefault(require("./components/make-multi-select/make-multi-select"));
40
+ const make_text_1 = __importDefault(require("./components/make-text/make-text"));
41
+ const make_upload_1 = __importDefault(require("./components/make-upload/make-upload"));
42
+ const make_button_1 = __importDefault(require("./components/make-button/make-button"));
43
+ const make_autocomplete_1 = __importDefault(require("./components/make-autocomplete/make-autocomplete"));
44
+ const Modal = ({ open, close, config }) => {
45
+ var _a, _b;
46
+ const [modalReady, setModalReady] = (0, react_1.useState)(undefined);
47
+ const [defaultLoaded, setDefaultLoaded] = (0, react_1.useState)(false);
48
+ const { control, handleSubmit, getValues, unregister, setValue, watch } = (0, react_hook_form_1.useForm)();
49
+ const formValueHandler = (element) => {
50
+ var _a;
51
+ if (['group', 'upload', 'text'].includes(element.elementType))
52
+ return;
53
+ const defaultValue = (_a = element.defaultValue) !== null && _a !== void 0 ? _a : '';
54
+ const parsedValue = defaultValue === 'true' ? true : defaultValue === 'false' ? false : defaultValue;
55
+ setValue(element.name, parsedValue !== null && parsedValue !== void 0 ? parsedValue : '');
56
+ };
57
+ const autoLoadGroup = (groupFields) => {
58
+ groupFields.forEach(element => {
59
+ formValueHandler(element);
60
+ });
61
+ };
62
+ const autoLoadField = (modalFields) => {
63
+ if (defaultLoaded)
64
+ return;
65
+ modalFields.forEach(element => {
66
+ if (element.elementType === 'group') {
67
+ autoLoadGroup(element.groups);
68
+ return;
69
+ }
70
+ formValueHandler(element);
71
+ });
72
+ setDefaultLoaded(true);
73
+ };
74
+ const getRender = (element, index, isEndOfRender = false) => {
75
+ if (isEndOfRender && modalReady)
76
+ setTimeout(() => autoLoadField(modalReady.fields), 200);
77
+ const props = {
78
+ control,
79
+ watch,
80
+ setValue
81
+ };
82
+ return element.elementType === 'input'
83
+ ? react_1.default.createElement(make_input_1.default, Object.assign({}, props, { key: `modal-input-${index}`, element: element }))
84
+ : element.elementType === 'select'
85
+ ? react_1.default.createElement(make_select_1.default, Object.assign({}, props, { key: `modal-select-${index}`, element: element }))
86
+ : element.elementType === 'textarea'
87
+ ? react_1.default.createElement(make_textarea_1.default, Object.assign({}, props, { key: `modal-textarea-${index}`, element: element }))
88
+ : element.elementType === 'toggle'
89
+ ? react_1.default.createElement(make_toggle_1.default, Object.assign({}, props, { key: `modal-toggle-${index}`, element: element }))
90
+ : element.elementType === 'multiselect'
91
+ ? react_1.default.createElement(make_multi_select_1.default, Object.assign({}, props, { key: `modal-multiselect-${index}`, element: element }))
92
+ : element.elementType === 'text'
93
+ ? react_1.default.createElement(make_text_1.default, Object.assign({}, props, { key: `modal-text-${index}`, element: element }))
94
+ : element.elementType === 'upload'
95
+ ? react_1.default.createElement(make_upload_1.default, Object.assign({}, props, { key: `modal-upload-${index}`, element: element }))
96
+ : element.elementType === 'button'
97
+ ? react_1.default.createElement(make_button_1.default, Object.assign({}, props, { key: `modal-button-${index}`, element: element }))
98
+ : element.elementType === 'autocomplete'
99
+ ? react_1.default.createElement(make_autocomplete_1.default, Object.assign({}, props, { key: `modal-autocomplete-${index}`, element: element }))
100
+ : null;
101
+ };
102
+ const closeHandler = () => {
103
+ if ((modalReady === null || modalReady === void 0 ? void 0 : modalReady.cancel) && modalReady.cancel.action)
104
+ modalReady.cancel.action();
105
+ setTimeout(() => {
106
+ const form = getValues();
107
+ unregister(Object.keys(form));
108
+ setModalReady(undefined);
109
+ setDefaultLoaded(false);
110
+ close();
111
+ }, 200);
112
+ };
113
+ const actionHandler = (data) => {
114
+ if ((modalReady === null || modalReady === void 0 ? void 0 : modalReady.action) && modalReady.action.action)
115
+ modalReady.action.action(Object.assign(Object.assign({}, modalReady === null || modalReady === void 0 ? void 0 : modalReady.reservedData), data));
116
+ closeHandler();
117
+ };
118
+ (0, react_1.useEffect)(() => {
119
+ if (open && !modalReady)
120
+ setModalReady(config);
121
+ }, [config, modalReady, open]);
122
+ return (modalReady
123
+ ? react_1.default.createElement(portal_1.Portal, { closeTime: 200, portalOpen: open, portalTag: '#modal-portal' },
124
+ react_1.default.createElement("div", { className: 'rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px]', style: Object.assign({}, modalReady.styles) },
125
+ react_1.default.createElement("form", { className: 'flex flex-col p-4 gap-4', autoComplete: 'off', onSubmit: handleSubmit(actionHandler) },
126
+ react_1.default.createElement("h2", { className: 'text-bold text-center border-b pb-4' }, modalReady.title),
127
+ react_1.default.createElement("div", { className: 'flex flex-col items-center gap-4 py-4', style: {
128
+ overflowY: modalReady.overFlowBody ? 'auto' : undefined,
129
+ height: modalReady.overFlowBody,
130
+ minHeight: modalReady.minHeightBody
131
+ } }, modalReady.fields.map((element, index) => {
132
+ const isEndOfRender = index + 1 === modalReady.fields.length;
133
+ if (element.elementType === 'group') {
134
+ return (react_1.default.createElement("div", { key: `modal-group-${index}`, className: 'flex gap-4 w-full', style: element.style }, element.groups
135
+ .filter(sub => ['input', 'select', 'toggle', 'multiselect', 'upload', 'button', 'autocomplete'].includes(sub.elementType))
136
+ .map((sub, subIndex) => getRender(sub, index + subIndex, isEndOfRender))));
137
+ }
138
+ else {
139
+ return getRender(element, index, isEndOfRender);
140
+ }
141
+ })),
142
+ react_1.default.createElement("div", { className: 'flex items-center justify-around gap-4 py-2 border-t' },
143
+ modalReady.cancel &&
144
+ react_1.default.createElement(react_2.Button, { variant: 'bordered', onClick: closeHandler, type: 'reset', className: 'w-[140px]' }, (_a = modalReady.cancel.name) !== null && _a !== void 0 ? _a : 'Close'),
145
+ modalReady.action &&
146
+ react_1.default.createElement(react_2.Button, { color: 'primary', type: 'submit', className: 'w-[140px]' }, (_b = modalReady.action.name) !== null && _b !== void 0 ? _b : 'Ok')))))
147
+ : null);
148
+ };
149
+ exports.Modal = Modal;
150
+ exports.default = exports.Modal;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dynamic-modal",
3
- "version": "1.0.2",
3
+ "version": "1.0.3",
4
4
  "description": "The dynamic-modal is a solution of creation differents modals into project using a json configuration file",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/modal.tsx CHANGED
@@ -31,7 +31,7 @@ export const Modal = ({ open, close, config }: IModal) => {
31
31
  const formValueHandler = (element: IFormField) => {
32
32
  if (['group', 'upload', 'text'].includes(element.elementType)) return
33
33
  const defaultValue = element.defaultValue ?? ''
34
- const parsedValue: boolean | string | Array<string> |undefined = defaultValue === 'true' ? true : defaultValue === 'false' ? false : defaultValue
34
+ const parsedValue: boolean | string | Array<string> | undefined = defaultValue === 'true' ? true : defaultValue === 'false' ? false : defaultValue
35
35
  setValue(element.name, parsedValue ?? '')
36
36
  }
37
37
 
@@ -51,7 +51,7 @@ export const Modal = ({ open, close, config }: IModal) => {
51
51
  }
52
52
  formValueHandler(element as IFormField)
53
53
  })
54
-
54
+
55
55
  setDefaultLoaded(true)
56
56
  }
57
57
 
@@ -102,7 +102,7 @@ export const Modal = ({ open, close, config }: IModal) => {
102
102
  }
103
103
 
104
104
  useEffect(() => {
105
- if(open && !modalReady) setModalReady(config)
105
+ if (open && !modalReady) setModalReady(config)
106
106
  }, [config, modalReady, open])
107
107
 
108
108
  return (
@@ -121,14 +121,14 @@ export const Modal = ({ open, close, config }: IModal) => {
121
121
  >
122
122
  {
123
123
  modalReady.fields.map((element, index) => {
124
- const isEndOfRender : boolean = index + 1 === modalReady.fields.length
124
+ const isEndOfRender: boolean = index + 1 === modalReady.fields.length
125
125
 
126
126
  if (element.elementType === 'group') {
127
127
  return (
128
128
  <div key={`modal-group-${index}`} className='flex gap-4 w-full' style={element.style} >
129
129
  {
130
130
  element.groups
131
- .filter(sub => ['input', 'select', 'toggle', 'multiselect', 'upload', 'button'].includes(sub.elementType))
131
+ .filter(sub => ['input', 'select', 'toggle', 'multiselect', 'upload', 'button', 'autocomplete'].includes(sub.elementType))
132
132
  .map((sub, subIndex) => getRender(sub, index + subIndex, isEndOfRender))
133
133
  }
134
134
  </div>