@nvs-dynamic-form/react-core 1.4.1 → 2.0.0

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 (196) hide show
  1. package/dist/cjs/nvs-dynamic-form/_style.css +40 -0
  2. package/dist/cjs/nvs-dynamic-form/_template.d.ts +2 -2
  3. package/dist/cjs/nvs-dynamic-form/_template.js +22 -62
  4. package/dist/cjs/nvs-dynamic-form/_template.js.map +1 -1
  5. package/dist/cjs/nvs-dynamic-form/_type.d.ts +18 -4
  6. package/dist/cjs/nvs-dynamic-form/elements/arrayField/_template.d.ts +3 -0
  7. package/dist/cjs/nvs-dynamic-form/elements/arrayField/_template.js +62 -0
  8. package/dist/cjs/nvs-dynamic-form/elements/arrayField/_template.js.map +1 -0
  9. package/dist/cjs/nvs-dynamic-form/elements/arrayField/_type.d.ts +10 -0
  10. package/dist/cjs/nvs-dynamic-form/elements/arrayField/_type.js.map +1 -0
  11. package/dist/cjs/nvs-dynamic-form/elements/arrayField/index.js.map +1 -0
  12. package/dist/cjs/nvs-dynamic-form/elements/button/_template.d.ts +3 -0
  13. package/dist/cjs/nvs-dynamic-form/elements/button/_template.js +28 -0
  14. package/dist/cjs/nvs-dynamic-form/elements/button/_template.js.map +1 -0
  15. package/dist/cjs/nvs-dynamic-form/elements/button/_type.d.ts +8 -0
  16. package/dist/cjs/nvs-dynamic-form/elements/button/_type.js +3 -0
  17. package/dist/cjs/nvs-dynamic-form/elements/button/_type.js.map +1 -0
  18. package/dist/cjs/nvs-dynamic-form/elements/button/index.js +19 -0
  19. package/dist/cjs/nvs-dynamic-form/elements/button/index.js.map +1 -0
  20. package/dist/cjs/nvs-dynamic-form/elements/container/_template.d.ts +3 -0
  21. package/dist/cjs/nvs-dynamic-form/elements/container/_template.js +12 -0
  22. package/dist/cjs/nvs-dynamic-form/elements/container/_template.js.map +1 -0
  23. package/dist/cjs/nvs-dynamic-form/elements/container/_type.d.ts +8 -0
  24. package/dist/cjs/nvs-dynamic-form/elements/container/_type.js +3 -0
  25. package/dist/cjs/nvs-dynamic-form/elements/container/_type.js.map +1 -0
  26. package/dist/cjs/nvs-dynamic-form/elements/container/index.d.ts +2 -0
  27. package/dist/cjs/nvs-dynamic-form/elements/container/index.js +19 -0
  28. package/dist/cjs/nvs-dynamic-form/elements/container/index.js.map +1 -0
  29. package/dist/cjs/nvs-dynamic-form/elements/field/_template.js +9 -3
  30. package/dist/cjs/nvs-dynamic-form/elements/field/_template.js.map +1 -1
  31. package/dist/cjs/nvs-dynamic-form/elements/field/_type.d.ts +7 -6
  32. package/dist/cjs/nvs-dynamic-form/elements/groupField/_template.d.ts +2 -0
  33. package/dist/cjs/nvs-dynamic-form/elements/groupField/_template.js +26 -0
  34. package/dist/cjs/nvs-dynamic-form/elements/groupField/_template.js.map +1 -0
  35. package/dist/cjs/nvs-dynamic-form/elements/groupField/_type.d.ts +9 -0
  36. package/dist/cjs/nvs-dynamic-form/elements/groupField/_type.js +3 -0
  37. package/dist/cjs/nvs-dynamic-form/elements/groupField/_type.js.map +1 -0
  38. package/dist/cjs/nvs-dynamic-form/elements/groupField/index.d.ts +2 -0
  39. package/dist/cjs/nvs-dynamic-form/elements/groupField/index.js +19 -0
  40. package/dist/cjs/nvs-dynamic-form/elements/groupField/index.js.map +1 -0
  41. package/dist/cjs/nvs-dynamic-form/formikForm/_template.d.ts +3 -0
  42. package/dist/cjs/nvs-dynamic-form/formikForm/_template.js +87 -0
  43. package/dist/cjs/nvs-dynamic-form/formikForm/_template.js.map +1 -0
  44. package/dist/cjs/nvs-dynamic-form/formikForm/_type.d.ts +8 -0
  45. package/dist/cjs/nvs-dynamic-form/formikForm/_type.js +3 -0
  46. package/dist/cjs/nvs-dynamic-form/formikForm/_type.js.map +1 -0
  47. package/dist/cjs/nvs-dynamic-form/formikForm/index.d.ts +1 -0
  48. package/dist/cjs/nvs-dynamic-form/formikForm/index.js +18 -0
  49. package/dist/cjs/nvs-dynamic-form/formikForm/index.js.map +1 -0
  50. package/dist/cjs/nvs-dynamic-form/services/generateFormContentUtils.d.ts +39 -0
  51. package/dist/cjs/nvs-dynamic-form/services/generateFormContentUtils.js +92 -0
  52. package/dist/cjs/nvs-dynamic-form/services/generateFormContentUtils.js.map +1 -0
  53. package/dist/cjs/types/array-field-action-button.type.d.ts +14 -0
  54. package/dist/cjs/types/array-field-action-button.type.js +26 -0
  55. package/dist/cjs/types/array-field-action-button.type.js.map +1 -0
  56. package/dist/cjs/types/array-field.type.d.ts +13 -0
  57. package/dist/cjs/types/array-field.type.js +16 -0
  58. package/dist/cjs/types/array-field.type.js.map +1 -0
  59. package/dist/cjs/types/{form-field.type.d.ts → field-base.type.d.ts} +1 -1
  60. package/dist/cjs/types/{form-field.type.js → field-base.type.js} +1 -1
  61. package/dist/cjs/types/{form-field.type.js.map → field-base.type.js.map} +1 -1
  62. package/dist/cjs/types/group-field.type.d.ts +10 -0
  63. package/dist/cjs/types/group-field.type.js +13 -0
  64. package/dist/cjs/types/group-field.type.js.map +1 -0
  65. package/dist/cjs/types/index.d.ts +4 -2
  66. package/dist/cjs/types/index.js +4 -2
  67. package/dist/cjs/types/index.js.map +1 -1
  68. package/dist/cjs/types/{submit-button-options.type.d.ts → submit-button-default-options.type.d.ts} +1 -1
  69. package/dist/cjs/types/submit-button-default-options.type.js +3 -0
  70. package/dist/cjs/types/submit-button-default-options.type.js.map +1 -0
  71. package/dist/esm/nvs-dynamic-form/_style.css +40 -0
  72. package/dist/esm/nvs-dynamic-form/_template.d.ts +2 -2
  73. package/dist/esm/nvs-dynamic-form/_template.js +20 -40
  74. package/dist/esm/nvs-dynamic-form/_template.js.map +1 -1
  75. package/dist/esm/nvs-dynamic-form/_type.d.ts +18 -4
  76. package/dist/esm/nvs-dynamic-form/elements/arrayField/_template.d.ts +3 -0
  77. package/dist/esm/nvs-dynamic-form/elements/arrayField/_template.js +55 -0
  78. package/dist/esm/nvs-dynamic-form/elements/arrayField/_template.js.map +1 -0
  79. package/dist/esm/nvs-dynamic-form/elements/arrayField/_type.d.ts +10 -0
  80. package/dist/esm/nvs-dynamic-form/elements/arrayField/_type.js.map +1 -0
  81. package/dist/esm/nvs-dynamic-form/elements/arrayField/index.js.map +1 -0
  82. package/dist/esm/nvs-dynamic-form/elements/button/_template.d.ts +3 -0
  83. package/dist/esm/nvs-dynamic-form/elements/button/_template.js +21 -0
  84. package/dist/esm/nvs-dynamic-form/elements/button/_template.js.map +1 -0
  85. package/dist/esm/nvs-dynamic-form/elements/button/_type.d.ts +8 -0
  86. package/dist/esm/nvs-dynamic-form/elements/button/_type.js +2 -0
  87. package/dist/esm/nvs-dynamic-form/elements/button/_type.js.map +1 -0
  88. package/dist/esm/nvs-dynamic-form/elements/button/index.d.ts +2 -0
  89. package/dist/esm/nvs-dynamic-form/elements/button/index.js +3 -0
  90. package/dist/esm/nvs-dynamic-form/elements/button/index.js.map +1 -0
  91. package/dist/esm/nvs-dynamic-form/elements/container/_template.d.ts +3 -0
  92. package/dist/esm/nvs-dynamic-form/elements/container/_template.js +5 -0
  93. package/dist/esm/nvs-dynamic-form/elements/container/_template.js.map +1 -0
  94. package/dist/esm/nvs-dynamic-form/elements/container/_type.d.ts +8 -0
  95. package/dist/esm/nvs-dynamic-form/elements/container/_type.js +2 -0
  96. package/dist/esm/nvs-dynamic-form/elements/container/_type.js.map +1 -0
  97. package/dist/esm/nvs-dynamic-form/elements/container/index.d.ts +2 -0
  98. package/dist/esm/nvs-dynamic-form/elements/container/index.js +3 -0
  99. package/dist/esm/nvs-dynamic-form/elements/container/index.js.map +1 -0
  100. package/dist/esm/nvs-dynamic-form/elements/field/_template.js +9 -3
  101. package/dist/esm/nvs-dynamic-form/elements/field/_template.js.map +1 -1
  102. package/dist/esm/nvs-dynamic-form/elements/field/_type.d.ts +7 -6
  103. package/dist/esm/nvs-dynamic-form/elements/groupField/_template.d.ts +2 -0
  104. package/dist/esm/nvs-dynamic-form/elements/groupField/_template.js +22 -0
  105. package/dist/esm/nvs-dynamic-form/elements/groupField/_template.js.map +1 -0
  106. package/dist/esm/nvs-dynamic-form/elements/groupField/_type.d.ts +9 -0
  107. package/dist/esm/nvs-dynamic-form/elements/groupField/_type.js +2 -0
  108. package/dist/esm/nvs-dynamic-form/elements/groupField/_type.js.map +1 -0
  109. package/dist/esm/nvs-dynamic-form/elements/groupField/index.d.ts +2 -0
  110. package/dist/esm/nvs-dynamic-form/elements/groupField/index.js +3 -0
  111. package/dist/esm/nvs-dynamic-form/elements/groupField/index.js.map +1 -0
  112. package/dist/esm/nvs-dynamic-form/formikForm/_template.d.ts +3 -0
  113. package/dist/esm/nvs-dynamic-form/formikForm/_template.js +60 -0
  114. package/dist/esm/nvs-dynamic-form/formikForm/_template.js.map +1 -0
  115. package/dist/esm/nvs-dynamic-form/formikForm/_type.d.ts +8 -0
  116. package/dist/esm/nvs-dynamic-form/formikForm/_type.js +2 -0
  117. package/dist/esm/nvs-dynamic-form/formikForm/_type.js.map +1 -0
  118. package/dist/esm/nvs-dynamic-form/formikForm/index.d.ts +1 -0
  119. package/dist/esm/nvs-dynamic-form/formikForm/index.js +2 -0
  120. package/dist/esm/nvs-dynamic-form/formikForm/index.js.map +1 -0
  121. package/dist/esm/nvs-dynamic-form/services/generateFormContentUtils.d.ts +39 -0
  122. package/dist/esm/nvs-dynamic-form/services/generateFormContentUtils.js +85 -0
  123. package/dist/esm/nvs-dynamic-form/services/generateFormContentUtils.js.map +1 -0
  124. package/dist/esm/types/array-field-action-button.type.d.ts +14 -0
  125. package/dist/esm/types/array-field-action-button.type.js +20 -0
  126. package/dist/esm/types/array-field-action-button.type.js.map +1 -0
  127. package/dist/esm/types/array-field.type.d.ts +13 -0
  128. package/dist/esm/types/array-field.type.js +12 -0
  129. package/dist/esm/types/array-field.type.js.map +1 -0
  130. package/dist/esm/types/{form-field.type.d.ts → field-base.type.d.ts} +1 -1
  131. package/dist/esm/types/{form-field.type.js → field-base.type.js} +1 -1
  132. package/dist/esm/types/{form-field.type.js.map → field-base.type.js.map} +1 -1
  133. package/dist/esm/types/group-field.type.d.ts +10 -0
  134. package/dist/esm/types/group-field.type.js +9 -0
  135. package/dist/esm/types/group-field.type.js.map +1 -0
  136. package/dist/esm/types/index.d.ts +4 -2
  137. package/dist/esm/types/index.js +4 -2
  138. package/dist/esm/types/index.js.map +1 -1
  139. package/dist/esm/types/{submit-button-options.type.d.ts → submit-button-default-options.type.d.ts} +1 -1
  140. package/dist/esm/types/submit-button-default-options.type.js +2 -0
  141. package/dist/esm/types/submit-button-default-options.type.js.map +1 -0
  142. package/lib/nvs-dynamic-form/_stories.tsx +276 -16
  143. package/lib/nvs-dynamic-form/_style.css +40 -0
  144. package/lib/nvs-dynamic-form/_template.tsx +40 -65
  145. package/lib/nvs-dynamic-form/_type.tsx +23 -4
  146. package/lib/nvs-dynamic-form/elements/arrayField/_template.tsx +123 -0
  147. package/lib/nvs-dynamic-form/elements/arrayField/_type.tsx +11 -0
  148. package/lib/nvs-dynamic-form/elements/arrayField/index.tsx +2 -0
  149. package/lib/nvs-dynamic-form/elements/button/_template.tsx +42 -0
  150. package/lib/nvs-dynamic-form/elements/button/_type.tsx +8 -0
  151. package/lib/nvs-dynamic-form/elements/button/index.tsx +2 -0
  152. package/lib/nvs-dynamic-form/elements/container/_template.tsx +10 -0
  153. package/lib/nvs-dynamic-form/elements/container/_type.tsx +7 -0
  154. package/lib/nvs-dynamic-form/elements/container/index.tsx +2 -0
  155. package/lib/nvs-dynamic-form/elements/field/_template.tsx +9 -4
  156. package/lib/nvs-dynamic-form/elements/field/_type.tsx +8 -6
  157. package/lib/nvs-dynamic-form/elements/groupField/_template.tsx +32 -0
  158. package/lib/nvs-dynamic-form/elements/groupField/_type.tsx +10 -0
  159. package/lib/nvs-dynamic-form/elements/groupField/index.tsx +2 -0
  160. package/lib/nvs-dynamic-form/formikForm/_template.tsx +85 -0
  161. package/lib/nvs-dynamic-form/formikForm/_type.tsx +9 -0
  162. package/lib/nvs-dynamic-form/formikForm/index.tsx +1 -0
  163. package/lib/nvs-dynamic-form/services/generateFormContentUtils.tsx +173 -0
  164. package/lib/types/array-field-action-button.type.tsx +26 -0
  165. package/lib/types/array-field.type.tsx +27 -0
  166. package/lib/types/{form-field.type.tsx → field-base.type.tsx} +1 -1
  167. package/lib/types/group-field.type.tsx +15 -0
  168. package/lib/types/index.tsx +4 -2
  169. package/lib/types/submit-button-default-options.type.tsx +5 -0
  170. package/package.json +1 -1
  171. package/dist/cjs/nvs-dynamic-form/elements/submit-button/_template.d.ts +0 -3
  172. package/dist/cjs/nvs-dynamic-form/elements/submit-button/_template.js +0 -30
  173. package/dist/cjs/nvs-dynamic-form/elements/submit-button/_template.js.map +0 -1
  174. package/dist/cjs/nvs-dynamic-form/elements/submit-button/_type.d.ts +0 -11
  175. package/dist/cjs/nvs-dynamic-form/elements/submit-button/_type.js.map +0 -1
  176. package/dist/cjs/nvs-dynamic-form/elements/submit-button/index.js.map +0 -1
  177. package/dist/cjs/types/submit-button-options.type.js +0 -7
  178. package/dist/cjs/types/submit-button-options.type.js.map +0 -1
  179. package/dist/esm/nvs-dynamic-form/elements/submit-button/_template.d.ts +0 -3
  180. package/dist/esm/nvs-dynamic-form/elements/submit-button/_template.js +0 -23
  181. package/dist/esm/nvs-dynamic-form/elements/submit-button/_template.js.map +0 -1
  182. package/dist/esm/nvs-dynamic-form/elements/submit-button/_type.d.ts +0 -11
  183. package/dist/esm/nvs-dynamic-form/elements/submit-button/_type.js.map +0 -1
  184. package/dist/esm/nvs-dynamic-form/elements/submit-button/index.js.map +0 -1
  185. package/dist/esm/types/submit-button-options.type.js +0 -3
  186. package/dist/esm/types/submit-button-options.type.js.map +0 -1
  187. package/lib/nvs-dynamic-form/elements/submit-button/_template.tsx +0 -42
  188. package/lib/nvs-dynamic-form/elements/submit-button/_type.tsx +0 -12
  189. package/lib/types/submit-button-options.type.tsx +0 -5
  190. /package/dist/cjs/nvs-dynamic-form/elements/{submit-button → arrayField}/_type.js +0 -0
  191. /package/dist/cjs/nvs-dynamic-form/elements/{submit-button → arrayField}/index.d.ts +0 -0
  192. /package/dist/cjs/nvs-dynamic-form/elements/{submit-button → arrayField}/index.js +0 -0
  193. /package/dist/{esm/nvs-dynamic-form/elements/submit-button → cjs/nvs-dynamic-form/elements/button}/index.d.ts +0 -0
  194. /package/dist/esm/nvs-dynamic-form/elements/{submit-button → arrayField}/_type.js +0 -0
  195. /package/{lib/nvs-dynamic-form/elements/submit-button/index.tsx → dist/esm/nvs-dynamic-form/elements/arrayField/index.d.ts} +0 -0
  196. /package/dist/esm/nvs-dynamic-form/elements/{submit-button → arrayField}/index.js +0 -0
@@ -0,0 +1,87 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
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
+ };
25
+ Object.defineProperty(exports, "__esModule", { value: true });
26
+ exports.FormikForm = void 0;
27
+ const Yup = __importStar(require("yup"));
28
+ const types_1 = require("../../types");
29
+ const formik_1 = require("formik");
30
+ const react_1 = __importStar(require("react"));
31
+ const FormikForm = ({ children, fields, onSubmit, formClass, }) => {
32
+ const getFieldDefaultValue = (field) => {
33
+ let defaultValue;
34
+ if (field instanceof types_1.ArrayField)
35
+ defaultValue = field.defaultValues ?? [];
36
+ else if (field instanceof types_1.GroupField)
37
+ defaultValue = getFieldsDefaultValues(field.fields);
38
+ else
39
+ defaultValue = field.defaultValue;
40
+ return defaultValue;
41
+ };
42
+ const getFieldsDefaultValues = (fields) => {
43
+ return fields.reduce((acc, field) => {
44
+ acc[field.id] = getFieldDefaultValue(field);
45
+ return acc;
46
+ }, {});
47
+ };
48
+ const getFieldValidate = (field) => {
49
+ let validate;
50
+ if (field instanceof types_1.GroupField)
51
+ validate = createValidateSchema(field.fields);
52
+ else if (field instanceof types_1.ArrayField)
53
+ validate = createArrayValidateSchema(field.fields);
54
+ else if (field?.validate)
55
+ validate = field.validate;
56
+ return validate;
57
+ };
58
+ const createValidateSchema = (fields) => {
59
+ const validationSchema = fields.reduce((acc, field) => {
60
+ const validate = getFieldValidate(field);
61
+ if (validate)
62
+ acc[field.id] = validate;
63
+ return acc;
64
+ }, {});
65
+ return Yup.object(validationSchema);
66
+ };
67
+ const createArrayValidateSchema = (fields) => {
68
+ return Yup.array().of(createValidateSchema(fields));
69
+ };
70
+ const [defaultValues, setDefaultValues] = (0, react_1.useState)(getFieldsDefaultValues(fields));
71
+ const [validateSchema, setValidateSchema] = (0, react_1.useState)(createValidateSchema(fields));
72
+ (0, react_1.useEffect)(() => {
73
+ setDefaultValues(getFieldsDefaultValues(fields));
74
+ setValidateSchema(createValidateSchema(fields));
75
+ }, [fields]);
76
+ const formik = (0, formik_1.useFormik)({
77
+ initialValues: defaultValues,
78
+ validationSchema: validateSchema,
79
+ onSubmit: async (values) => {
80
+ onSubmit && (await onSubmit(values));
81
+ },
82
+ });
83
+ return (react_1.default.createElement(formik_1.FormikProvider, { value: formik },
84
+ react_1.default.createElement(formik_1.Form, { className: formClass ? ` ${formClass}` : "" }, children)));
85
+ };
86
+ exports.FormikForm = FormikForm;
87
+ //# sourceMappingURL=_template.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"_template.js","sourceRoot":"","sources":["../../../../lib/nvs-dynamic-form/formikForm/_template.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,8 @@
1
+ import { FieldType } from "../_type";
2
+ import { ReactNode } from "react";
3
+ export interface IFormikForm {
4
+ onSubmit?: ((values: unknown) => void) | ((values: unknown) => Promise<void>);
5
+ fields: Array<FieldType>;
6
+ children: ReactNode;
7
+ formClass?: string;
8
+ }
@@ -0,0 +1,3 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ //# sourceMappingURL=_type.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"_type.js","sourceRoot":"","sources":["../../../../lib/nvs-dynamic-form/formikForm/_type.tsx"],"names":[],"mappings":""}
@@ -0,0 +1 @@
1
+ export * from "./_template";
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./_template"), exports);
18
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../lib/nvs-dynamic-form/formikForm/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA4B"}
@@ -0,0 +1,39 @@
1
+ import { FieldType } from "../_type";
2
+ import { IFormElement } from "../elements/field";
3
+ import React from "react";
4
+ import { ReactNode } from "react";
5
+ export declare class GenerateFormContentUtils {
6
+ private readonly containerComponent;
7
+ private readonly formElements;
8
+ private readonly useContainersOutsideGroup;
9
+ private readonly useGroupContainer;
10
+ private readonly containerVisible;
11
+ private readonly fields;
12
+ private readonly containerOptions;
13
+ private readonly buttonComponent?;
14
+ constructor({ containerComponent, formElements, useContainersOutsideGroup, useGroupContainer, containerVisible, fields, containerOptions, buttonComponent, }: {
15
+ containerComponent: React.FC<any>;
16
+ formElements: IFormElement;
17
+ useContainersOutsideGroup: boolean;
18
+ useGroupContainer: boolean;
19
+ containerVisible: boolean;
20
+ fields: Array<FieldType>;
21
+ buttonComponent?: React.FC<any>;
22
+ containerOptions?: {
23
+ [key: string]: any;
24
+ };
25
+ });
26
+ createContainer(content: ReactNode, containerProps: object): React.JSX.Element;
27
+ createFormContent(): React.JSX.Element;
28
+ createFormElements(fields: Array<FieldType>): JSX.Element[];
29
+ createContentContainer(formElements: ReactNode): React.JSX.Element;
30
+ private getSingleFields;
31
+ private getGroupFields;
32
+ private createSingleFieldsElements;
33
+ private createGroupFieldsElements;
34
+ private createSingleFieldElement;
35
+ private createGroupFieldElement;
36
+ private createArrayFieldElement;
37
+ private isSingleField;
38
+ private createFormGroup;
39
+ }
@@ -0,0 +1,92 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.GenerateFormContentUtils = void 0;
7
+ const types_1 = require("../../types");
8
+ const arrayField_1 = require("../elements/arrayField");
9
+ const container_1 = require("../elements/container");
10
+ const field_1 = require("../elements/field");
11
+ const groupField_1 = require("../elements/groupField");
12
+ const react_1 = __importDefault(require("react"));
13
+ class GenerateFormContentUtils {
14
+ constructor({ containerComponent, formElements, useContainersOutsideGroup, useGroupContainer, containerVisible, fields, containerOptions, buttonComponent, }) {
15
+ this.containerComponent = containerComponent;
16
+ this.formElements = formElements;
17
+ this.useContainersOutsideGroup = useContainersOutsideGroup;
18
+ this.useGroupContainer = useGroupContainer;
19
+ this.containerVisible = containerVisible;
20
+ this.fields = fields;
21
+ this.containerOptions = containerOptions || {};
22
+ this.buttonComponent = buttonComponent;
23
+ }
24
+ createContainer(content, containerProps) {
25
+ return (react_1.default.createElement(container_1.Container, { containerComponent: this.containerComponent, options: containerProps }, content));
26
+ }
27
+ createFormContent() {
28
+ const singleFields = this.createSingleFieldsElements();
29
+ const groupFields = this.createGroupFieldsElements();
30
+ let formContent;
31
+ if (this.containerVisible && this.useContainersOutsideGroup && singleFields)
32
+ formContent = (react_1.default.createElement(react_1.default.Fragment, null,
33
+ this.createContainer(singleFields, this.containerOptions),
34
+ groupFields));
35
+ else
36
+ formContent = this.createFormGroup(react_1.default.createElement(react_1.default.Fragment, null,
37
+ singleFields,
38
+ groupFields));
39
+ return formContent;
40
+ }
41
+ createFormElements(fields) {
42
+ const fieldsElements = [];
43
+ for (const field of fields) {
44
+ if (field instanceof types_1.GroupField)
45
+ fieldsElements.push(this.createGroupFieldElement(field));
46
+ else if (field instanceof types_1.ArrayField)
47
+ fieldsElements.push(this.createArrayFieldElement(field));
48
+ else
49
+ fieldsElements.push(this.createSingleFieldElement(field));
50
+ }
51
+ return fieldsElements;
52
+ }
53
+ createContentContainer(formElements) {
54
+ return (react_1.default.createElement("div", { className: "nvs-container-fluid" },
55
+ react_1.default.createElement("div", { className: "nvs-row" }, formElements)));
56
+ }
57
+ getSingleFields() {
58
+ return this.fields.filter((field) => this.isSingleField(field));
59
+ }
60
+ getGroupFields() {
61
+ return this.fields.filter((field) => !this.isSingleField(field));
62
+ }
63
+ createSingleFieldsElements() {
64
+ const singleFields = this.getSingleFields();
65
+ return (singleFields.length > 0 &&
66
+ this.createContentContainer(this.createFormElements(singleFields)));
67
+ }
68
+ createGroupFieldsElements() {
69
+ const groupFields = this.getGroupFields();
70
+ return groupFields.length > 0 && this.createFormElements(groupFields);
71
+ }
72
+ createSingleFieldElement(field) {
73
+ return (react_1.default.createElement(field_1.Field, { key: field.id, formElements: this.formElements, field: field }));
74
+ }
75
+ createGroupFieldElement(field) {
76
+ return (react_1.default.createElement(groupField_1.GroupField, { key: field.id, formElements: this.formElements, field: field, containerComponent: this.containerComponent, useContainersOutsideGroup: this.useContainersOutsideGroup, useGroupContainer: this.useGroupContainer, containerVisible: this.containerVisible }));
77
+ }
78
+ createArrayFieldElement(field) {
79
+ return (react_1.default.createElement(arrayField_1.ArrayField, { key: field.id, formElements: this.formElements, field: field, containerComponent: this.containerComponent, useContainersOutsideGroup: this.useContainersOutsideGroup, useGroupContainer: this.useGroupContainer, containerVisible: this.containerVisible, buttonComponent: this.buttonComponent }));
80
+ }
81
+ isSingleField(field) {
82
+ return !(field instanceof types_1.GroupField &&
83
+ field.containerVisible &&
84
+ this.useGroupContainer &&
85
+ this.containerVisible);
86
+ }
87
+ createFormGroup(formContent) {
88
+ return react_1.default.createElement("div", { className: "df-form-group" }, formContent);
89
+ }
90
+ }
91
+ exports.GenerateFormContentUtils = GenerateFormContentUtils;
92
+ //# sourceMappingURL=generateFormContentUtils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"generateFormContentUtils.js","sourceRoot":"","sources":["../../../../lib/nvs-dynamic-form/services/generateFormContentUtils.tsx"],"names":[],"mappings":";;;;;;AAAA,uCAAgE;AAEhE,uDAAyE;AACzE,qDAAkD;AAClD,6CAA0C;AAE1C,uDAAyE;AAEzE,kDAA0B;AAG1B,MAAa,wBAAwB;IAUnC,YAAY,EACV,kBAAkB,EAClB,YAAY,EACZ,yBAAyB,EACzB,iBAAiB,EACjB,gBAAgB,EAChB,MAAM,EACN,gBAAgB,EAChB,eAAe,GAUhB;QACC,IAAI,CAAC,kBAAkB,GAAG,kBAAkB,CAAC;QAC7C,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;QACjC,IAAI,CAAC,yBAAyB,GAAG,yBAAyB,CAAC;QAC3D,IAAI,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;QAC3C,IAAI,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;QACzC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,gBAAgB,GAAG,gBAAgB,IAAI,EAAE,CAAC;QAC/C,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;IACzC,CAAC;IAED,eAAe,CAAC,OAAkB,EAAE,cAAsB;QACxD,OAAO,CACL,8BAAC,qBAAS,IACR,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAC3C,OAAO,EAAE,cAAc,IAEtB,OAAO,CACE,CACb,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,MAAM,YAAY,GAAG,IAAI,CAAC,0BAA0B,EAAE,CAAC;QACvD,MAAM,WAAW,GAAG,IAAI,CAAC,yBAAyB,EAAE,CAAC;QAErD,IAAI,WAAW,CAAC;QAChB,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,yBAAyB,IAAI,YAAY;YACzE,WAAW,GAAG,CACZ;gBACG,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC;gBACzD,WAAW,CACX,CACJ,CAAC;;YAEF,WAAW,GAAG,IAAI,CAAC,eAAe,CAChC;gBACG,YAAY;gBACZ,WAAW,CACX,CACJ,CAAC;QAEJ,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,kBAAkB,CAAC,MAAwB;QACzC,MAAM,cAAc,GAAG,EAAE,CAAC;QAC1B,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;YAC3B,IAAI,KAAK,YAAY,kBAAU;gBAC7B,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,CAAC;iBACtD,IAAI,KAAK,YAAY,kBAAU;gBAClC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,CAAC;;gBACtD,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAC;QACjE,CAAC;QACD,OAAO,cAAc,CAAC;IACxB,CAAC;IAED,sBAAsB,CAAC,YAAuB;QAC5C,OAAO,CACL,uCAAK,SAAS,EAAC,qBAAqB;YAClC,uCAAK,SAAS,EAAC,SAAS,IAAE,YAAY,CAAO,CACzC,CACP,CAAC;IACJ,CAAC;IAEO,eAAe;QACrB,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;IAClE,CAAC;IAEO,cAAc;QACpB,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;IACnE,CAAC;IAEO,0BAA0B;QAChC,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAC5C,OAAO,CACL,YAAY,CAAC,MAAM,GAAG,CAAC;YACvB,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC,CACnE,CAAC;IACJ,CAAC;IAEO,yBAAyB;QAC/B,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAC1C,OAAO,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC;IACxE,CAAC;IAEO,wBAAwB,CAAC,KAAyB;QACxD,OAAO,CACL,8BAAC,aAAK,IAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK,GAAI,CACxE,CAAC;IACJ,CAAC;IAEO,uBAAuB,CAAC,KAAiB;QAC/C,OAAO,CACL,8BAAC,uBAAiB,IAChB,GAAG,EAAE,KAAK,CAAC,EAAE,EACb,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,KAAK,EAAE,KAAK,EACZ,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAC3C,yBAAyB,EAAE,IAAI,CAAC,yBAAyB,EACzD,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,GACvC,CACH,CAAC;IACJ,CAAC;IAEO,uBAAuB,CAAC,KAAiB;QAC/C,OAAO,CACL,8BAAC,uBAAiB,IAChB,GAAG,EAAE,KAAK,CAAC,EAAE,EACb,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,KAAK,EAAE,KAAK,EACZ,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAC3C,yBAAyB,EAAE,IAAI,CAAC,yBAAyB,EACzD,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,eAAe,EAAE,IAAI,CAAC,eAAgB,GACtC,CACH,CAAC;IACJ,CAAC;IAEO,aAAa,CAAC,KAAgB;QACpC,OAAO,CAAC,CACN,KAAK,YAAY,kBAAU;YAC3B,KAAK,CAAC,gBAAgB;YACtB,IAAI,CAAC,iBAAiB;YACtB,IAAI,CAAC,gBAAgB,CACtB,CAAC;IACJ,CAAC;IAEO,eAAe,CAAC,WAAsB;QAC5C,OAAO,uCAAK,SAAS,EAAC,eAAe,IAAE,WAAW,CAAO,CAAC;IAC5D,CAAC;CACF;AAjKD,4DAiKC"}
@@ -0,0 +1,14 @@
1
+ export declare class ArrayFieldButton {
2
+ label?: string;
3
+ options?: {
4
+ [key: string]: any;
5
+ };
6
+ constructor(options: ArrayFieldButton);
7
+ }
8
+ export declare class ArrayFieldRemoveButton extends ArrayFieldButton {
9
+ position?: "bottom" | "right";
10
+ constructor(options: ArrayFieldRemoveButton);
11
+ }
12
+ export declare class ArrayFieldAddButton extends ArrayFieldButton {
13
+ constructor(options: ArrayFieldRemoveButton);
14
+ }
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.ArrayFieldAddButton = exports.ArrayFieldRemoveButton = exports.ArrayFieldButton = void 0;
4
+ class ArrayFieldButton {
5
+ constructor(options) {
6
+ this.label = options.label;
7
+ this.options = options.options ?? {};
8
+ }
9
+ }
10
+ exports.ArrayFieldButton = ArrayFieldButton;
11
+ class ArrayFieldRemoveButton extends ArrayFieldButton {
12
+ constructor(options) {
13
+ options.label = options.label ?? "-";
14
+ super(options);
15
+ this.position = options.position ?? "right";
16
+ }
17
+ }
18
+ exports.ArrayFieldRemoveButton = ArrayFieldRemoveButton;
19
+ class ArrayFieldAddButton extends ArrayFieldButton {
20
+ constructor(options) {
21
+ options.label = options.label ?? "+";
22
+ super(options);
23
+ }
24
+ }
25
+ exports.ArrayFieldAddButton = ArrayFieldAddButton;
26
+ //# sourceMappingURL=array-field-action-button.type.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"array-field-action-button.type.js","sourceRoot":"","sources":["../../../lib/types/array-field-action-button.type.tsx"],"names":[],"mappings":";;;AAAA,MAAa,gBAAgB;IAI3B,YAAY,OAAyB;QACnC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;QAC3B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC;IACvC,CAAC;CACF;AARD,4CAQC;AAED,MAAa,sBAAuB,SAAQ,gBAAgB;IAG1D,YAAY,OAA+B;QACzC,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,IAAI,GAAG,CAAC;QACrC,KAAK,CAAC,OAAO,CAAC,CAAC;QACf,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,IAAI,OAAO,CAAC;IAC9C,CAAC;CACF;AARD,wDAQC;AAED,MAAa,mBAAoB,SAAQ,gBAAgB;IACvD,YAAY,OAA+B;QACzC,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,IAAI,GAAG,CAAC;QACrC,KAAK,CAAC,OAAO,CAAC,CAAC;IACjB,CAAC;CACF;AALD,kDAKC"}
@@ -0,0 +1,13 @@
1
+ import { ArrayFieldAddButton, ArrayFieldRemoveButton } from "./array-field-action-button.type";
2
+ import { FieldBase } from "./field-base.type";
3
+ export declare class ArrayField<ValueType = {
4
+ [key: string]: any;
5
+ }> {
6
+ fieldType?: string;
7
+ id: string;
8
+ fields: Array<FieldBase<any>>;
9
+ addButtonOptions?: ArrayFieldAddButton;
10
+ removeButtonOptions?: ArrayFieldRemoveButton;
11
+ defaultValues?: Array<ValueType>;
12
+ constructor(options: ArrayField<ValueType>);
13
+ }
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.ArrayField = void 0;
4
+ const array_field_action_button_type_1 = require("./array-field-action-button.type");
5
+ class ArrayField {
6
+ constructor(options) {
7
+ this.fieldType = "fieldArray";
8
+ this.id = options.id;
9
+ this.fields = options.fields ?? [];
10
+ this.addButtonOptions = new array_field_action_button_type_1.ArrayFieldAddButton(options.addButtonOptions ?? {});
11
+ this.removeButtonOptions = new array_field_action_button_type_1.ArrayFieldRemoveButton(options.removeButtonOptions ?? {});
12
+ this.defaultValues = options.defaultValues ?? [];
13
+ }
14
+ }
15
+ exports.ArrayField = ArrayField;
16
+ //# sourceMappingURL=array-field.type.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"array-field.type.js","sourceRoot":"","sources":["../../../lib/types/array-field.type.tsx"],"names":[],"mappings":";;;AAAA,qFAG0C;AAI1C,MAAa,UAAU;IAQrB,YAAY,OAA8B;QAP1C,cAAS,GAAY,YAAY,CAAC;QAQhC,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC;QACrB,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,IAAI,EAAE,CAAC;QACnC,IAAI,CAAC,gBAAgB,GAAG,IAAI,oDAAmB,CAC7C,OAAO,CAAC,gBAAgB,IAAI,EAAE,CAC/B,CAAC;QACF,IAAI,CAAC,mBAAmB,GAAG,IAAI,uDAAsB,CACnD,OAAO,CAAC,mBAAmB,IAAI,EAAE,CAClC,CAAC;QACF,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC,aAAa,IAAI,EAAE,CAAC;IACnD,CAAC;CACF;AAnBD,gCAmBC"}
@@ -9,7 +9,7 @@ export declare abstract class FieldBase<ValueType, HtmlElement = any> {
9
9
  screenSize?: ScreenSizeType | IScreenSize;
10
10
  validate?: Yup.AnySchema;
11
11
  error?: string;
12
- onChange?: (event: ChangeEvent<HtmlElement>) => void;
12
+ onChange?: (event: ChangeEvent<HtmlElement> | Array<unknown>) => void;
13
13
  onBlur?: (event: FocusEvent<HtmlElement>) => void;
14
14
  constructor(options: FieldBase<ValueType>, fieldDefaultValue?: ValueType);
15
15
  }
@@ -14,4 +14,4 @@ class FieldBase {
14
14
  }
15
15
  }
16
16
  exports.FieldBase = FieldBase;
17
- //# sourceMappingURL=form-field.type.js.map
17
+ //# sourceMappingURL=field-base.type.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"form-field.type.js","sourceRoot":"","sources":["../../../lib/types/form-field.type.tsx"],"names":[],"mappings":";;;AAKA,MAAsB,SAAS;IAW7B,YAAY,OAA6B,EAAE,iBAA6B;QACtE,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,IAAI,iBAAiB,CAAC;QAC9D,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC;QACrB,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;QAC3B,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;QACnC,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,UAAU,IAAI,EAAE,CAAC;QAC3C,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;QACjC,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;QACjC,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAC/B,CAAC;CACF;AArBD,8BAqBC"}
1
+ {"version":3,"file":"field-base.type.js","sourceRoot":"","sources":["../../../lib/types/field-base.type.tsx"],"names":[],"mappings":";;;AAKA,MAAsB,SAAS;IAW7B,YAAY,OAA6B,EAAE,iBAA6B;QACtE,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,IAAI,iBAAiB,CAAC;QAC9D,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC;QACrB,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;QAC3B,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;QACnC,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,UAAU,IAAI,EAAE,CAAC;QAC3C,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;QACjC,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;QACjC,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAC/B,CAAC;CACF;AArBD,8BAqBC"}
@@ -0,0 +1,10 @@
1
+ import { FieldBase } from "./field-base.type";
2
+ export declare class GroupField {
3
+ id: string;
4
+ fields: Array<FieldBase<unknown>>;
5
+ containerVisible?: boolean;
6
+ containerOptions?: {
7
+ [key: string]: any;
8
+ };
9
+ constructor(options: GroupField);
10
+ }
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.GroupField = void 0;
4
+ class GroupField {
5
+ constructor(options) {
6
+ this.id = options.id;
7
+ this.fields = options.fields ?? [];
8
+ this.containerVisible = options.containerVisible ?? false;
9
+ this.containerOptions = options.containerOptions ?? {};
10
+ }
11
+ }
12
+ exports.GroupField = GroupField;
13
+ //# sourceMappingURL=group-field.type.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"group-field.type.js","sourceRoot":"","sources":["../../../lib/types/group-field.type.tsx"],"names":[],"mappings":";;;AAEA,MAAa,UAAU;IAMrB,YAAY,OAAmB;QAC7B,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC;QACrB,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,IAAI,EAAE,CAAC;QACnC,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,IAAI,KAAK,CAAC;QAC1D,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,IAAI,EAAE,CAAC;IACzD,CAAC;CACF;AAZD,gCAYC"}
@@ -1,4 +1,6 @@
1
- export * from "./form-field.type";
1
+ export * from "./field-base.type";
2
2
  export * from "./screen-size.type";
3
3
  export * from "./dynamic-object.type";
4
- export * from "./submit-button-options.type";
4
+ export * from "./submit-button-default-options.type";
5
+ export * from "./group-field.type";
6
+ export * from "./array-field.type";
@@ -14,8 +14,10 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
14
  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
- __exportStar(require("./form-field.type"), exports);
17
+ __exportStar(require("./field-base.type"), exports);
18
18
  __exportStar(require("./screen-size.type"), exports);
19
19
  __exportStar(require("./dynamic-object.type"), exports);
20
- __exportStar(require("./submit-button-options.type"), exports);
20
+ __exportStar(require("./submit-button-default-options.type"), exports);
21
+ __exportStar(require("./group-field.type"), exports);
22
+ __exportStar(require("./array-field.type"), exports);
21
23
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../lib/types/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,oDAAkC;AAClC,qDAAmC;AACnC,wDAAsC;AACtC,+DAA6C"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../lib/types/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,oDAAkC;AAClC,qDAAmC;AACnC,wDAAsC;AACtC,uEAAqD;AACrD,qDAAmC;AACnC,qDAAmC"}
@@ -1,4 +1,4 @@
1
- export declare class SubmitButtonOptions {
1
+ export interface ISubmitButtonDefaultOptions {
2
2
  label: string;
3
3
  isFullWidth: boolean;
4
4
  position: "left" | "right" | "center";
@@ -0,0 +1,3 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ //# sourceMappingURL=submit-button-default-options.type.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"submit-button-default-options.type.js","sourceRoot":"","sources":["../../../lib/types/submit-button-default-options.type.tsx"],"names":[],"mappings":""}
@@ -3,3 +3,43 @@
3
3
  margin-top: 8px;
4
4
  padding: 0 4px;
5
5
  }
6
+
7
+ .df-form-group {
8
+ gap: 8px;
9
+ display: flex;
10
+ flex-direction: column;
11
+ }
12
+
13
+ .df-array-field {
14
+ display: flex;
15
+ width: 100%;
16
+ box-sizing: border-box;
17
+ align-items: center;
18
+ }
19
+
20
+ .df-array-field-content {
21
+ flex-grow: 1;
22
+ }
23
+
24
+ .df-array-field-remove-button {
25
+ flex-shrink: 0;
26
+ }
27
+
28
+ .df-array-field.remove-button-bottom {
29
+ flex-direction: column;
30
+ }
31
+
32
+ .df-array-field.remove-button-bottom .df-array-field-content {
33
+ width: 100%;
34
+ margin-right: 0;
35
+ margin-bottom: 8px;
36
+ }
37
+
38
+ .df-array-field.remove-button-bottom .df-array-field-remove-button {
39
+ width: 100%;
40
+ }
41
+
42
+ .df-array-field-add-button {
43
+ width: 100%;
44
+ padding: 0 4px;
45
+ }
@@ -1,5 +1,5 @@
1
1
  import "nvs-flexgrid";
2
2
  import "./_style.css";
3
- import React from "react";
4
3
  import { INvsDynamicForm } from "./_type";
5
- export declare const NvsDynamicForm: ({ onSubmit, formElements, fields, formClass, submitButton, submitButtonVisible, submitButtonLabel, submitButtonIsFullWidth, submitButtonPosition, }: INvsDynamicForm) => React.JSX.Element;
4
+ import React from "react";
5
+ export declare const NvsDynamicForm: ({ onSubmit, formElements, fields, formClass, buttonComponent, submitButtonDefaultOptions, submitButtonVisible, submitButtonLabel, submitButtonIsFullWidth, submitButtonPosition, submitButtonContainerClass, container, containerVisible, containerOptions, useContainersOutsideGroup, useGroupContainer, }: INvsDynamicForm) => React.JSX.Element;
@@ -1,45 +1,25 @@
1
1
  import "nvs-flexgrid";
2
2
  import "./_style.css";
3
- import * as Yup from "yup";
4
- import { Form, FormikProvider, useFormik } from "formik";
5
- import React, { useEffect, useState } from "react";
6
- import { Field } from "./elements/field";
7
- import { SubmitButton } from "./elements/submit-button";
8
- export const NvsDynamicForm = ({ onSubmit, formElements = {}, fields = [], formClass, submitButton, submitButtonVisible, submitButtonLabel, submitButtonIsFullWidth, submitButtonPosition, }) => {
9
- const getDefaultValues = () => {
10
- return fields.reduce((acc, field) => {
11
- acc[field.id] = field.defaultValue;
12
- return acc;
13
- }, {});
14
- };
15
- const getValidateSchema = () => {
16
- const validationSchema = fields.reduce((acc, field) => {
17
- if (field?.validate) {
18
- acc[field.id] = field.validate;
19
- }
20
- return acc;
21
- }, {});
22
- return Yup.object(validationSchema);
23
- };
24
- const [defaultValues, setDefaultValues] = useState(getDefaultValues());
25
- const [validateSchema, setValidateSchema] = useState(getValidateSchema());
26
- useEffect(() => {
27
- setDefaultValues(getDefaultValues());
28
- setValidateSchema(getValidateSchema());
29
- }, [fields]);
30
- const createFormElements = () => {
31
- return fields.map((field) => (React.createElement(Field, { key: field.id, formElements: formElements, field: field })));
32
- };
33
- const createForm = () => (React.createElement(Form, { className: `nvs-container-fluid${formClass ? ` ${formClass}` : ""}` },
34
- React.createElement("div", { className: "nvs-row" }, createFormElements()),
35
- React.createElement(SubmitButton, { submitButton: submitButton, submitButtonVisible: submitButtonVisible, submitButtonLabel: submitButtonLabel, submitButtonIsFullWidth: submitButtonIsFullWidth, submitButtonPosition: submitButtonPosition })));
36
- const formik = useFormik({
37
- initialValues: defaultValues,
38
- validationSchema: validateSchema,
39
- onSubmit: async (values) => {
40
- onSubmit && (await onSubmit(values));
41
- },
3
+ import { Button } from "./elements/button";
4
+ import { FormikForm } from "./formikForm";
5
+ import { GenerateFormContentUtils } from "./services/generateFormContentUtils";
6
+ import React from "react";
7
+ export const NvsDynamicForm = ({ onSubmit, formElements = {}, fields = [], formClass, buttonComponent, submitButtonDefaultOptions, submitButtonVisible = true, submitButtonLabel = submitButtonDefaultOptions.label, submitButtonIsFullWidth = submitButtonDefaultOptions.isFullWidth, submitButtonPosition = submitButtonDefaultOptions.position, submitButtonContainerClass, container = ({ children }) => React.createElement(React.Fragment, null, children), containerVisible = false, containerOptions = {}, useContainersOutsideGroup = false, useGroupContainer = false, }) => {
8
+ const generateFormContentUtils = new GenerateFormContentUtils({
9
+ containerComponent: container,
10
+ formElements,
11
+ useContainersOutsideGroup,
12
+ useGroupContainer,
13
+ containerVisible,
14
+ fields,
15
+ containerOptions,
16
+ buttonComponent,
42
17
  });
43
- return React.createElement(FormikProvider, { value: formik }, createForm());
18
+ const formikForm = (React.createElement(FormikForm, { onSubmit: onSubmit, fields: fields, formClass: formClass },
19
+ generateFormContentUtils.createFormContent(),
20
+ React.createElement(Button, { buttonComponent: buttonComponent, visible: submitButtonVisible, label: submitButtonLabel, isFullWidth: submitButtonIsFullWidth, position: submitButtonPosition, containerClass: submitButtonContainerClass })));
21
+ return containerVisible && !useContainersOutsideGroup
22
+ ? generateFormContentUtils.createContainer(formikForm, containerOptions)
23
+ : formikForm;
44
24
  };
45
25
  //# sourceMappingURL=_template.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"_template.js","sourceRoot":"","sources":["../../../lib/nvs-dynamic-form/_template.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"_template.js","sourceRoot":"","sources":["../../../lib/nvs-dynamic-form/_template.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,wBAAwB,EAAE,MAAM,qCAAqC,CAAC;AAE/E,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,QAAQ,EACR,YAAY,GAAG,EAAE,EACjB,MAAM,GAAG,EAAE,EACX,SAAS,EACT,eAAe,EACf,0BAA0B,EAC1B,mBAAmB,GAAG,IAAI,EAC1B,iBAAiB,GAAG,0BAA0B,CAAC,KAAK,EACpD,uBAAuB,GAAG,0BAA0B,CAAC,WAAW,EAChE,oBAAoB,GAAG,0BAA0B,CAAC,QAAQ,EAC1D,0BAA0B,EAC1B,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,0CAAG,QAAQ,CAAI,EAC7C,gBAAgB,GAAG,KAAK,EACxB,gBAAgB,GAAG,EAAE,EACrB,yBAAyB,GAAG,KAAK,EACjC,iBAAiB,GAAG,KAAK,GACT,EAAE,EAAE;IACpB,MAAM,wBAAwB,GAAG,IAAI,wBAAwB,CAAC;QAC5D,kBAAkB,EAAE,SAAS;QAC7B,YAAY;QACZ,yBAAyB;QACzB,iBAAiB;QACjB,gBAAgB;QAChB,MAAM;QACN,gBAAgB;QAChB,eAAe;KAChB,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,CACjB,oBAAC,UAAU,IAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS;QACjE,wBAAwB,CAAC,iBAAiB,EAAE;QAC7C,oBAAC,MAAM,IACL,eAAe,EAAE,eAAe,EAChC,OAAO,EAAE,mBAAmB,EAC5B,KAAK,EAAE,iBAAiB,EACxB,WAAW,EAAE,uBAAuB,EACpC,QAAQ,EAAE,oBAAoB,EAC9B,cAAc,EAAE,0BAA0B,GAC1C,CACS,CACd,CAAC;IAEF,OAAO,gBAAgB,IAAI,CAAC,yBAAyB;QACnD,CAAC,CAAC,wBAAwB,CAAC,eAAe,CAAC,UAAU,EAAE,gBAAgB,CAAC;QACxE,CAAC,CAAC,UAAU,CAAC;AACjB,CAAC,CAAC"}
@@ -1,8 +1,22 @@
1
- import { FieldBase } from "../types";
1
+ import { ArrayField, FieldBase, GroupField, ISubmitButtonDefaultOptions } from "../types";
2
+ import { IButton } from "./elements/button/_type";
2
3
  import { IField } from "./elements/field";
3
- import { ISubmitButton } from "./elements/submit-button/_type";
4
- export interface INvsDynamicForm extends ISubmitButton, Omit<IField, "field"> {
4
+ export type FieldType = FieldBase<any> | GroupField | ArrayField<any>;
5
+ export interface INvsDynamicForm extends IButton, Omit<IField, "field"> {
5
6
  onSubmit?: ((values: unknown) => void) | ((values: unknown) => Promise<void>);
6
- fields: Array<FieldBase<unknown>>;
7
+ fields: Array<FieldType>;
7
8
  formClass?: string;
9
+ container?: React.FC<any>;
10
+ containerOptions?: {
11
+ [key: string]: any;
12
+ };
13
+ containerVisible?: boolean;
14
+ useContainersOutsideGroup?: boolean;
15
+ useGroupContainer?: boolean;
16
+ submitButtonDefaultOptions: ISubmitButtonDefaultOptions;
17
+ submitButtonVisible?: boolean;
18
+ submitButtonLabel?: string;
19
+ submitButtonPosition?: "left" | "center" | "right";
20
+ submitButtonIsFullWidth?: boolean;
21
+ submitButtonContainerClass?: string;
8
22
  }